/* ================================================================================
   L'EXPOSÈ — il foglio di stile del documento (round 51, rifatto al round 56)
   ================================================================================

   «Perfeziona e rendi perfetta la scheda immobile quando l'utente schiaccia
   stampa. Devono essere tutte pagine A4 ordinate e organizzate in maniera
   proporzionata e razionale.»

   Questo file arriva DOPO site.css, e da lì eredita tre cose che non devono
   poter divergere dal sito: la tavolozza (`--ink`, `--paper`, `--line`), i due
   caratteri (Tinos e Arimo, round 48) e la riga di lettura. Tutto il resto è
   scritto qui, con classi `ex-*` che sul sito non esistono: le due impaginazioni
   non si toccano nemmeno per sbaglio.

   Il documento è **A4 verticale**. Non è una scelta neutra: è il formato in cui
   una stampante di ufficio sputa senza chiedere niente, è il formato della
   cartellina in cui l'exposè finisce, ed è quello che il cliente si aspetta
   perché è quello che gli danno le altre agenzie. I margini sono 14 mm ai lati
   e 15 mm sopra e sotto — dentro l'area stampabile di qualunque laser da
   ufficio, che si ferma intorno ai 5 mm, e larghi abbastanza perché una
   perforazione a due fori non mangi il testo.

   ---- La regola del round 56 -------------------------------------------------

   **Una sezione, una pagina.** Ogni `.ex-page` è alta esattamente una pagina e
   finisce con un salto pagina: non esistono sezioni che ne occupano due, né
   pagine che ne contengono due mezze. Da qui discende tutto il resto:

   * la pagina è una colonna flessibile — testatina in alto, `.ex-main` che si
     allarga a prendere quello che avanza, piede in basso. Il piede sta a filo
     del margine inferiore su tutte le pagine, e questo è quello che fa
     sembrare un documento un documento;
   * l'altezza in stampa è **264 mm e non 267**. I tre millimetri di sconto
     sono deliberati: alla misura esatta basta un pixel di arrotondamento del
     browser perché la pagina trabocchi sulla successiva, e fra due sezioni
     compaia un foglio bianco;
   * i numeri di pagina li conta la vista (`_expose_pages`). Chrome non
     implementa i box di margine di `@page`, quindi `counter(page)` non è una
     strada, e in stampa non gira JavaScript.

   **Lo schermo mostra la carta.** Le stesse pagine, su fondo grigio, con
   l'ombra: chi apre il collegamento vede subito che cosa uscirà dalla
   stampante, e se ne accorge *prima* di premere. Le misure sono in millimetri
   anche a schermo, quindi c'è un posto solo in cui sono scritte.
   ================================================================================ */

:root {
  /* 210 mm meno 14 + 14 di margine. Ogni misura del documento discende da qui. */
  --ex-w: 182mm;
  --ex-h: 264mm;
}

@page {
  size: A4 portrait;
  margin: 15mm 14mm;
}

.ex-body {
  background: #d8d6d1;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ---- I comandi: solo a schermo ------------------------------------------------ */
.ex-tools {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 16px clamp(16px, 4vw, 40px);
  background: var(--ink);
  color: var(--paper);
}
.ex-btn {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: var(--track-btn);
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: 0;
  padding: 12px 22px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.ex-btn:hover { background: #fff; }
.ex-back {
  font-size: 0.62rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: rgba(245, 243, 240, 0.62);
}
.ex-back:hover { color: var(--paper); }

/* ---- La pagina ----------------------------------------------------------------
   Colonna flessibile: testatina, corpo che si allarga, piede a filo del fondo.
   `min-height` a schermo (la carta finta può crescere se qualcosa sfora e si
   vede), altezza fissa in stampa (il piede deve stare in fondo). */
.ex { display: block; padding: clamp(16px, 4vw, 40px) 0; }
.ex-page {
  width: var(--ex-w);
  min-height: var(--ex-h);
  margin: 0 auto 22px;
  padding: 12mm;
  background: #fff;
  box-shadow: 0 24px 60px -40px rgba(9, 18, 35, 0.55);
  box-sizing: content-box;
  display: flex;
  flex-direction: column;
}
/* Una sezione, una pagina — meno l'ultima, o la stampante sputa un foglio
   bianco in coda. `break-after` e il vecchio `page-break-after` insieme,
   perché la proprietà nuova non è ancora ovunque. */
.ex-page { break-after: page; page-break-after: always; }
.ex-page:last-child { break-after: auto; page-break-after: auto; }

/* Il corpo della pagina: prende quello che avanza fra testatina e piede.
   `min-height: 0` perché un figlio flessibile, per impostazione predefinita,
   non si lascia stringere sotto la propria altezza naturale — senza, una
   pagina piena spinge il piede fuori dal foglio. */
.ex-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* ---- Testatina e piede delle pagine interne ------------------------------------
   Il documento si legge sfogliato, ma si perde a fogli sciolti: ogni pagina
   deve dire da sola di che immobile parla e che numero porta. */
.ex-run {
  display: flex;
  align-items: baseline;
  gap: 6mm;
  padding-bottom: 3mm;
  margin-bottom: 8mm;
  background-image: var(--rule);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
}
.ex-run-mark { height: 9px; width: auto; display: block; flex: none; align-self: center; }
.ex-run-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.58rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-46);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ex-run-ref {
  flex: none;
  font-size: 0.58rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.ex-foot {
  flex: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6mm;
  margin-top: 8mm;
  padding-top: 3mm;
  font-size: 0.55rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-46);
  background-image: var(--rule);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 1px;
}
.ex-foot-n { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---- Copertina --------------------------------------------------------------- */
.ex-head {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 6mm;
  background-image: var(--rule);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
}
/* Il marchio è lo stesso lockup del sito, alla misura della carta: il
   descrittore si distribuisce sotto le lettere da solo (`_lock.html`), quindi
   non c'è una seconda tracciatura da tenere allineata. */
.ex-brand { display: inline-block; }
.ex-brand img { display: block; height: 26px; width: auto; }
.ex-brand .lock { margin-top: 6px; font-size: 0.62rem; color: var(--ink); }
.ex-kicker {
  text-align: right;
  font-size: 0.62rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-46);
  line-height: 1.9;
}
.ex-ref { display: block; color: var(--ink); font-variant-numeric: tabular-nums; }

/* La fotografia di copertina si prende quello che avanza fra la testata e il
   blocco del prezzo — anche a schermo, dal round 56, così l'anteprima è la
   carta e non una sua approssimazione. */
.ex-hero {
  position: relative;
  flex: 1 1 auto;
  min-height: 90mm;
  margin-top: 8mm;
  overflow: hidden;
  background: var(--ivory);
}
/* Posizionata, non «alta il 100%»: dentro un elemento la cui altezza viene da
   un flex, una percentuale si risolve su un'altezza che il browser considera
   indefinita e non si applica — la fotografia restava alta quanto la sua
   proporzione e sotto avanzava mezza copertina color sabbia. Con `inset: 0` la
   scatola dell'immagine *è* il riquadro. */
.ex-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ex-flag {
  position: absolute;
  left: 0; bottom: 0;
  padding: 8px 16px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.6rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

/* `margin-top: auto` e non un semplice margine: quando l'immobile non ha
   nemmeno una fotografia — capita, una scheda si apre prima di avere il
   servizio — la copertina resta senza il suo unico elemento flessibile, e
   senza questo si accartoccia tutta in cima al foglio con il piede appeso
   sotto il titolo. Con `auto` lo spazio libero finisce *sopra* il blocco:
   viene fuori una copertina tipografica, che è una cosa fatta apposta, invece
   di una pagina rotta. Con la fotografia il margine automatico non si vede,
   perché a prendersi lo spazio ci pensa `.ex-hero`. */
.ex-cover-copy { flex: none; margin-top: auto; padding-top: 8mm; }
.ex-place {
  font-size: 0.62rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-46);
}
/* Titolo e prezzo sulla stessa riga, il prezzo a destra: sono le due cose che
   si leggono in copertina e metterle una sotto l'altra costava tre centimetri
   di altezza che servono alla fotografia. Il prezzo non va a capo mai. */
.ex-cover-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10mm;
  margin-top: 4mm;
}
.ex-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 2.05rem;
  line-height: 1.16;
  /* Una riga di titolo che va a capo su una pagina larga 182 mm diventa
     lunghissima: 12 cm è il limite oltre il quale l'occhio non ritrova più
     l'inizio della riga dopo — qui è più stretto perché accanto c'è il prezzo. */
  max-width: 120mm;
}
.ex-price {
  flex: none;
  font-family: var(--serif);
  font-size: 1.5rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
.ex-per { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-46); margin-left: 4px; }

/* ---- Le cifre — in copertina, dal round 56 -------------------------------------
   Una riga sola, divisa da filetti verticali: su carta le linee costano meno
   dell'aria, perché l'aria di una pagina stampata è già tutta impegnata. */
.ex-keys {
  flex: none;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 7mm 0 0;
  padding: 5mm 0 0;
  background-image: var(--rule);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 1px;
}
.ex-keys li {
  flex: 1 1 0;
  min-width: 24mm;
  padding-left: 6mm;
  border-left: 1px solid var(--line);
}
.ex-keys li:first-child { padding-left: 0; border-left: 0; }
.ex-k-n { display: block; font-family: var(--serif); font-size: 1.15rem; line-height: 1.2; font-variant-numeric: tabular-nums lining-nums; }
.ex-k-l {
  display: block;
  margin-top: 3px;
  font-size: 0.55rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-46);
}

/* ---- I blocchi ---------------------------------------------------------------- */
.ex-block { margin-bottom: 9mm; break-inside: avoid; page-break-inside: avoid; }
.ex-block:last-child { margin-bottom: 0; }
/* Quando la descrizione si è presa la pagina da sola (`pages.split`), si
   allarga a riempirla invece di lasciare mezzo foglio bianco sotto di sé. */
.ex-block-tall { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ex-block-tall .ex-desc { flex: 1 1 auto; }
.ex-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6mm;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.58rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-46);
  padding-bottom: 3mm;
  margin-bottom: 4mm;
  background-image: var(--rule);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
}
.ex-h-2 { margin-top: 7mm; }
.ex-h-n { color: var(--ink); font-variant-numeric: tabular-nums; }

/* La descrizione su due colonne: la stessa aritmetica di `.det-desc-2` sul
   sito. Una colonna larga 158 mm farebbe righe da 150 caratteri; due da 87 mm
   ne fanno da 68, che è la finestra in cui l'occhio ritrova da solo la riga
   dopo.

   **Le due colonne non le fa più `columns: 2`** (round 57). A schermo
   funzionava; in stampa no: dentro un foglio, Chrome riempie la prima colonna
   e basta — il testo scende in una striscia larga 87 mm lungo il bordo
   sinistro, la metà destra resta bianca, e la coda spinge il blocco dei dati
   sul foglio dopo. Su dodici varianti provate in PDF, cinque uscivano con una
   pagina in più di quelle numerate nel piede. Adesso il testo arriva dalla
   vista già tagliato in due (`compose_description`), e ogni colonna è un
   blocco normale dentro una griglia: due blocchi affiancati si stampano
   uguali in ogni browser — e il cliente stampa da Safari.

   Senza `.ex-desc-2` la colonna è una sola, larga quanto si legge: sotto le
   720 battute due colonne non sono due colonne, sono un testo interrotto a
   metà periodo (round 52). */
.ex-desc {
  font-size: 0.78rem;
  line-height: 1.62;
  color: var(--ink-70);
  text-align: justify;
  hyphens: auto;
  max-width: var(--measure);
}
.ex-desc-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 8mm;
  align-items: start;
  max-width: none;
}
/* Il corpo stretto per le descrizioni fluviali: sopra le ~4.200 battute il
   testo non sta in una pagina nemmeno da solo, e allora si compone un filo più
   piccolo invece di sbordare. È il vecchio mestiere del *copyfitting*, e
   un'agenzia che scrive 6.000 battute su un trilocale non l'ho ancora vista. */
.ex-desc-fit { font-size: 0.70rem; line-height: 1.5; }
.ex-desc p { margin: 0 0 3mm; break-inside: avoid; page-break-inside: avoid; }
.ex-desc p:last-child { margin-bottom: 0; }
/* Il capoverso che continua nella colonna a destra non riparte da capo: la
   vista taglia su una riga, e sopra quella riga non ci va uno stacco. */
.ex-desc-col > p:first-child { margin-top: 0; }

.ex-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10mm; align-items: start; }
/* I blocchi dentro la griglia non portano il loro margine di coda: la riga
   della griglia è alta quanto il più alto dei due, e quel margine diventava
   nove millimetri di niente appesi sotto il blocco dei dati — abbastanza, su
   una pagina piena, per spingere il piede sul foglio dopo. */
.ex-two > .ex-block { margin-bottom: 0; }

.ex-facts { margin: 0; }
.ex-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 6mm;
  padding: 2.2mm 0;
  border-bottom: 1px solid var(--line);
}
.ex-facts > div:last-child { border-bottom: 0; }
.ex-facts dt { font-size: 0.7rem; color: var(--ink-46); }
.ex-facts dd { margin: 0; font-size: 0.72rem; text-align: right; font-variant-numeric: tabular-nums; }

.ex-list { list-style: none; margin: 0; padding: 0; }
.ex-list li {
  position: relative;
  padding-left: 6mm;
  margin-bottom: 2.6mm;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--ink-70);
}
/* Il segno di elenco è il filetto del sito, non un pallino: sul sito «guarda
   qui» si dice con una lineetta, e un documento che porta lo stesso marchio non
   può parlare un'altra lingua. */
.ex-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 3.4mm; height: 1px;
  background: var(--ink);
}

.ex-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 2mm; margin: 0; padding: 0; }
.ex-chips li {
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  color: var(--ink-70);
  border: 1px solid var(--line);
  padding: 1.6mm 3mm;
}

/* ---- La scala energetica -------------------------------------------------------
   Una striscia, non un blocco: la classe e l'indice stanno già nella tabella,
   qui serve solo far vedere dove cade quella lettera. Appoggiata in fondo alla
   pagina (`margin-top: auto`), perché un elemento largo quanto il foglio
   appoggiato in basso chiude la pagina, mentre lo stesso a metà lascia sotto
   di sé un vuoto che sembra un errore di stampa. Niente verde-giallo-rosso: il
   documento è in due colori e la casella accesa si legge lo stesso — anzi
   meglio, perché è l'unica piena. */
.ex-energy {
  margin-top: auto;
  padding-top: 7mm;
  display: flex;
  align-items: center;
  gap: 5mm;
  break-inside: avoid;
  page-break-inside: avoid;
}
.ex-energy-l {
  flex: none;
  font-size: 0.55rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-46);
}
.ex-scale { flex: 1 1 auto; list-style: none; display: flex; gap: 1.2mm; margin: 0; padding: 0; }
.ex-scale li {
  flex: 1 1 0;
  text-align: center;
  padding: 1.6mm 0;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: var(--ink-46);
  border: 1px solid var(--line);
}
.ex-scale li.on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* ---- Le fotografie: due per pagina ---------------------------------------------
   Sei fotografie francobollo su una pagina sola non si guardano, si contano.
   Due per foglio, una sopra l'altra, ciascuna alta metà di quello che avanza:
   `flex: 1 1 0` con `min-height: 0` divide l'altezza in parti uguali
   qualunque sia la proporzione dei file. La pagina dispari finisce con una
   fotografia sola, e quella si prende tutto il foglio. */
.ex-sheet { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6mm; }
.ex-shot {
  flex: 1 1 0;
  min-height: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  break-inside: avoid;
  page-break-inside: avoid;
}
.ex-shot-box {
  position: relative;
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--ivory);
}
.ex-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ex-shot figcaption {
  flex: none;
  margin-top: 2.4mm;
  font-size: 0.6rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-46);
}

/* ---- La planimetria ------------------------------------------------------------
   `contain` e non `cover`: una planimetria ritagliata perde le stanze sul
   bordo, che sono esattamente quelle che si vanno a cercare.

   La cornice sta sull'immagine e non sul contenitore, ed è la differenza fra
   un passe-partout e una scatola vuota: una planimetria larga e bassa dentro
   una cornice alta quanto la pagina è un rettangolo di niente con un disegno
   in mezzo. `padding` su un `<img>` funziona — è un elemento sostituito, il
   riempimento sta fra il bordo e il disegno — e con `box-sizing: border-box`
   il `max-height` continua a contare la cornice. */
.ex-plan {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ex-plan img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  box-sizing: border-box;
  padding: 6mm;
  border: 1px solid var(--line);
}

/* ---- L'ultima pagina ----------------------------------------------------------
   È una quarta di copertina, e l'aria qui è voluta: dopo otto pagine fitte,
   una pagina che respira è il modo in cui un documento dice che è finito. Ma
   l'aria si distribuisce, non si accumula: i tre blocchi si spartiscono il
   foglio (`space-between`) invece di stare tutti in cima con un buco sotto —
   un vuoto ripartito è un margine, un vuoto tutto insieme è un errore. */
.ex-close .ex-main { justify-content: space-between; }
.ex-close-top { flex: none; }
.ex-where { font-family: var(--serif); font-size: 1.9rem; line-height: 1.35; }
.ex-close-grid {
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12mm;
  align-items: start;
  margin-top: 12mm;
  break-inside: avoid;
  page-break-inside: avoid;
}
.ex-contact { font-size: 0.85rem; line-height: 1.85; color: var(--ink-70); }
.ex-co-name { color: var(--ink); }
.ex-small { margin-top: 3mm; font-size: 0.62rem; line-height: 1.5; color: var(--ink-46); max-width: 82mm; }
.ex-qr { text-align: center; }
.ex-qr svg { width: 40mm; height: 40mm; display: block; }
.ex-qr .ex-small { max-width: 44mm; margin-left: auto; margin-right: auto; }

/* Niente `margin-top: auto` qui: si mangerebbe tutto lo spazio libero e
   annullerebbe lo `space-between` di sopra, rimettendo i primi due blocchi in
   cima con il buco sotto. */
.ex-close-end {
  padding-top: 9mm;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12mm;
  background-image: var(--rule);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 1px;
  break-inside: avoid;
  page-break-inside: avoid;
}
.ex-note {
  flex: 1 1 auto;
  margin: 0;
  font-size: 0.58rem;
  line-height: 1.65;
  color: var(--ink-46);
  columns: 2;
  column-gap: 8mm;
}
.ex-brand-end { flex: none; }
.ex-brand-end img { height: 16px; }
.ex-brand-end .lock { margin-top: 4px; font-size: 0.5rem; color: var(--ink-46); }

/* ---- In stampa ----------------------------------------------------------------
   La carta non ha bisogno della carta: via il fondo grigio, via l'ombra, via i
   comandi. Le pagine perdono i loro margini perché il margine ora è `@page`, e
   l'altezza diventa fissa perché il piede deve stare in fondo al foglio, non
   sotto l'ultima riga di testo. */
@media print {
  .ex-body { background: #fff; }
  .ex-tools { display: none !important; }
  .ex { padding: 0; }
  /* `min-height` e non `height`: il piede si appoggia lo stesso in fondo al
     foglio (la scatola è alta almeno una pagina), ma se un giorno un blocco
     cresce oltre la misura prevista la pagina si allunga e sborda sulla
     successiva invece di tagliare via quello che avanza. Una pagina in più è
     un difetto che si vede e si corregge; una riga tagliata via non si vede
     finché non la cerca il cliente. */
  .ex-page {
    width: auto;
    min-height: var(--ex-h);
    margin: 0;
    padding: 0;
    box-shadow: none;
  }
  /* Un'immagine tagliata a metà da un salto pagina è il difetto che si nota di
     più su un documento stampato. Qui non dovrebbe succedere mai — ogni
     sezione è una pagina — ma è la rete sotto il trapezio. */
  .ex-shot, .ex-plan, .ex-keys, .ex-facts > div { break-inside: avoid; page-break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* ---- Su uno schermo stretto ----------------------------------------------------
   L'anteprima resta il documento, non diventa una pagina web: la larghezza
   scende ma le proporzioni restano quelle della carta, così quello che si vede
   sul telefono è ancora quello che uscirà dalla stampante.

   **`screen and` non è pleonastico, ed è costato una prova di stampa.** Quando
   il browser impagina per la carta, la larghezza che le media query leggono non
   è quella della finestra: è quella della **pagina**, cioè 182 mm ≈ 688 px.
   Scritta senza `screen`, questa regola si accendeva in stampa: la riga delle
   cifre andava a due per riga, i due blocchi si impilavano, le fotografie
   scendevano da tre colonne a due e la descrizione perdeva le due colonne. Una
   regola pensata per il telefono che riscrive il documento stampato. */
@media screen and (max-width: 780px) {
  :root { --ex-w: auto; }
  .ex-page { width: auto; min-height: 0; margin: 0 12px 16px; padding: 20px; }
  .ex-two, .ex-close-grid { grid-template-columns: 1fr; gap: 8mm; }
  .ex-desc-2 { grid-template-columns: 1fr; }
  .ex-note { columns: 1; }
  .ex-cover-line { flex-direction: column; align-items: flex-start; gap: 3mm; }
  .ex-title { font-size: 1.5rem; max-width: none; }
  .ex-keys li { flex: 1 1 40%; padding-left: 4mm; margin-bottom: 4mm; }
  .ex-hero { min-height: 52vw; }
  .ex-sheet { gap: 4mm; }
  .ex-shot { flex: none; }
  .ex-shot-box { aspect-ratio: 3 / 2; }
  .ex-plan { aspect-ratio: 4 / 3; }
  .ex-close-end { flex-direction: column; align-items: flex-start; gap: 6mm; }
  .ex-scale li { font-size: 0.5rem; padding: 1.8mm 0; }
}