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

   «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`, `--ivory`), 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**: è il formato in cui una stampante di
   ufficio sputa senza chiedere niente, ed è quello della cartellina in cui
   l'exposè finisce. Il bianco intorno al testo è di 15 mm sopra e sotto e
   14 mm ai lati.

   ---- 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. I numeri di pagina li conta la vista
   (`website/expose.py`): Chrome non implementa i box di margine di `@page`,
   quindi `counter(page)` non è una strada, e in stampa non gira JavaScript.

   ---- Round 92 — meno righe, niente ripetizioni ---------------------------------

   «Togli molte righe, ci sono tantissime righe che non sono belle. Ripeti
   molte volte il sito, la parola Elison, il titolo dell'exposé. Dai più
   rilevanza al titolo del paragrafo: l'immobile, caratteristiche, punti di
   forza, dotazioni.»

   Contate su un exposè di tredici pagine, le righe disegnate erano più di
   centocinquanta: un filetto sotto la testatina e uno sopra il piede di ogni
   pagina, uno sotto ogni titoletto, uno sotto ogni riga della tabella, il
   bordo di ogni targhetta delle dotazioni e di ognuna delle undici caselle
   della scala energetica, i divisori verticali delle cifre in copertina, la
   cornice della planimetria. Adesso **non ce n'è più nessuna**: a separare è
   lo spazio, e a gerarchizzare è il corpo del titolo.

   * I titoli di sezione passano dal maiuscoletto grigio da 9 px col filetto
     al **serif da 24 px, blu notte**: sono la cosa che si vede per prima
     sfogliando, ed è quello che il cliente ha chiesto.
   * Il marchio compare due volte: grande in copertina e piccolo nel piede,
     in basso a sinistra, accanto al numero di pagina. Niente testatina col
     titolo, niente sito nel piede.
   * `@page` ha i margini a zero (sotto, il perché).
   ================================================================================ */

:root {
  /* Il foglio: A4 meno tre millimetri di altezza. Lo sconto è deliberato — alla
     misura esatta basta un pixel di arrotondamento del browser perché la
     pagina trabocchi sulla successiva e fra due sezioni compaia un foglio
     bianco. Dentro, tolti 15 + 15 e 14 + 14 mm di bianco, restano 182 × 264 mm:
     le stesse misure utili di prima del round 92. */
  --ex-w: 210mm;
  --ex-h: 294mm;
}

/* Round 92 — **margini a zero**. Titolo e data in alto, indirizzo del sito e
   «1/13» in basso non li scriveva il documento: li stampa il browser dentro i
   margini di `@page`, su ogni foglio. Erano metà delle ripetizioni di cui si
   lamentava il cliente («ripeti molte volte il sito, anche il titolo
   dell'exposé»). Con i margini a zero non c'è più spazio dove metterli e
   Chrome non li stampa affatto — la stessa soluzione del foglio vetrina al
   round 85. Il bianco intorno al testo lo fa la spaziatura di `.ex-page`. */
@page {
  size: A4 portrait;
  margin: 0;
}

.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: corpo che si allarga, piede a filo del fondo.

   Round 92 — a schermo la pagina è il foglio intero, bianco compreso, nella
   stessa proporzione della carta (`aspect-ratio`): l'anteprima è quello che
   esce dalla stampante, al millimetro. `overflow: hidden` per la stessa
   ragione per cui c'è in stampa — vedi il blocco `@media print`. */
.ex { display: block; padding: clamp(16px, 4vw, 40px) 0; }
.ex-page {
  width: var(--ex-w);
  aspect-ratio: 210 / 294;
  margin: 0 auto 22px;
  padding: 15mm 14mm;
  background: #fff;
  box-shadow: 0 24px 60px -40px rgba(9, 18, 35, 0.55);
  box-sizing: border-box;
  overflow: hidden;
  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 sopra il 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; }

/* ---- Il piede delle pagine interne ---------------------------------------------
   Round 92 — il marchio piccolo a sinistra, il numero a destra, e nient'altro:
   niente filetto, niente sito. «Va bene il logo in basso a sinistra.»
   Il marchio è alto 2,6 mm (largo 20): abbastanza per riconoscerlo, non
   abbastanza da fare concorrenza al titolo della pagina. */
.ex-foot {
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6mm;
  margin-top: 7mm;
}
.ex-foot-mark { display: block; height: 2.6mm; width: auto; }
.ex-foot-n {
  font-size: 0.55rem;
  line-height: 1;
  letter-spacing: var(--track-label);
  color: var(--ink-46);
  font-variant-numeric: tabular-nums;
}

/* ---- Copertina --------------------------------------------------------------- */
/* Round 92 — senza filetto sotto: il bordo superiore della fotografia, nove
   millimetri più in basso, fa già da linea. */
.ex-head {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
/* 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. */
.ex-hero {
  position: relative;
  flex: 1 1 auto;
  min-height: 90mm;
  margin-top: 9mm;
  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. 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 la copertina resta senza il suo unico elemento
   flessibile, e senza questo si accartoccia tutta in cima al foglio. Con
   `auto` lo spazio libero finisce *sopra* il blocco: viene fuori una
   copertina tipografica, che è una cosa fatta apposta. */
.ex-cover-copy { flex: none; margin-top: auto; padding-top: 9mm; }
.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: metterli uno sotto
   l'altro 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;
  /* 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 ------------------------------------------------------
   Round 92 — senza il filetto sopra e senza i divisori verticali fra una cifra
   e l'altra: sei cifre in serif da 18 px con l'etichetta sotto si separano da
   sole, se fra l'una e l'altra c'è spazio vero. */
.ex-keys {
  flex: none;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  column-gap: 6mm;
  margin: 9mm 0 0;
  padding: 0;
}
.ex-keys li { flex: 1 1 0; min-width: 22mm; }
.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 titoli di sezione ----------------------------------------------------------
   Round 92 — «dai più rilevanza al titolo del paragrafo». Erano in
   maiuscoletto grigio da 9 px, tracciati, con un filetto sotto: si leggevano
   come etichette, non come titoli. Adesso sono nel serif del titolo di
   copertina, a 24 px e blu notte: sfogliando l'exposè sono la prima cosa che
   si legge di ogni pagina. Lo stacco sotto (5 mm) li lega al testo che
   introducono; quello sopra un secondo titolo (`.ex-h-2`, 7 mm) li separa dal
   blocco prima. */
.ex-block { margin-bottom: 10mm; 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 {
  flex: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6mm;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin: 0 0 5mm;
  padding: 0;
}
.ex-h-2 { margin-top: 7mm; }
.ex-h-n {
  font-family: var(--sans);
  font-size: 0.55rem;
  letter-spacing: var(--track-label);
  color: var(--ink-46);
  font-variant-numeric: tabular-nums;
}

/* La descrizione su due colonne. Le colonne non le fa `columns: 2` (round
   57): in stampa Chrome riempie la prima colonna e basta. 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: il vecchio mestiere del
   *copyfitting*. */
.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. */
.ex-two > .ex-block { margin-bottom: 0; }

/* La tabella delle caratteristiche. Round 92 — niente filetto sotto ogni
   riga: le separa lo spazio (1,7 mm sopra e sotto), e l'etichetta grigia a
   sinistra col valore blu notte a destra dice da sola dove finisce una riga. */
.ex-facts { margin: 0; }
.ex-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 6mm;
  padding: 1.7mm 0;
}
.ex-facts > div:first-child { padding-top: 0; }
.ex-facts dt { font-size: 0.7rem; line-height: 1.45; color: var(--ink-46); }
.ex-facts dd { margin: 0; font-size: 0.74rem; line-height: 1.45; color: var(--ink); 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);
}
.ex-list li:last-child { margin-bottom: 0; }
/* Il segno di elenco è la lineetta 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. È un segno, non una riga: 3,4 mm. */
.ex-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 3.4mm; height: 1px;
  background: var(--ink);
}

/* Le dotazioni. Round 92 — erano targhette col bordo; adesso un elenco su due
   colonne, con un punto pieno come segno, senza riquadri. */
.ex-feats {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 6mm;
  row-gap: 2.2mm;
  margin: 0;
  padding: 0;
}
.ex-feats li {
  position: relative;
  padding-left: 4mm;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--ink-70);
}
.ex-feats li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.58em;
  width: 1.3mm; height: 1.3mm;
  border-radius: 50%;
  background: var(--alpine);
}

/* ---- 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`). Round 92 — senza bordi: le caselle spente sono
   una campitura sabbia, quella accesa è piena. Undici rettangoli disegnati in
   meno. */
.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.8mm 0;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: var(--ink-46);
  background: var(--ivory);
}
.ex-scale li.on {
  background: var(--ink);
  color: var(--paper);
}

/* Quando i dati hanno una pagina loro (la descrizione si è presa la sua), la
   scala non va in fondo al foglio: appesa sotto cento millimetri di bianco
   sembrerebbe un piede sbagliato. Segue la tabella, a uno stacco normale. */
.ex-main-dati .ex-energy { margin-top: 0; padding-top: 10mm; }

/* ---- Le fotografie: due per pagina ---------------------------------------------
   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. Il titolo c'è solo sul
   primo foglio (round 92): sugli altri lo spazio va alle fotografie. */
.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);
}

/* ---- L'ultima pagina: la planimetria, dove si trova, chi risponde ---------------
   Round 92 — «alla fine ci sia la planimetria». La planimetria si prende tutto
   lo spazio che avanza sopra la fascia dei recapiti.

   `contain` e non `cover`: una planimetria ritagliata perde le stanze sul
   bordo, che sono esattamente quelle che si vanno a cercare. Niente cornice
   (era una delle righe): il disegno di una planimetria ha già i suoi muri. */
.ex-plan {
  flex: 1 1 0;
  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;
}

/* La fascia in fondo: posizione (solo se c'è un quartiere), recapiti, QR.
   Indivisibile: è un blocco basso (meno di 4 cm) e sta sempre sotto la
   planimetria, che è l'unico pezzo elastico della pagina. */
.ex-end {
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10mm;
  align-items: start;
  margin-top: 9mm;
  break-inside: avoid;
  page-break-inside: avoid;
}
.ex-end-3 { grid-template-columns: 1fr 1fr auto; }
.ex-h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 2.6mm;
}
.ex-where { font-family: var(--serif); font-size: 1.25rem; line-height: 1.25; color: var(--ink); }
.ex-where-of { margin-top: 1.2mm; font-size: 0.7rem; color: var(--ink-46); }
.ex-contact { font-size: 0.72rem; line-height: 1.7; color: var(--ink-70); }
.ex-co-name { color: var(--ink); }
.ex-small { margin-top: 2mm; font-size: 0.58rem; line-height: 1.45; color: var(--ink-46); }
.ex-qr { text-align: center; }
.ex-qr svg { width: 28mm; height: 28mm; display: block; margin: 0 auto; }
.ex-qr .ex-small { max-width: 34mm; margin-left: auto; margin-right: auto; }

.ex-note {
  flex: none;
  margin: 8mm 0 0;
  font-size: 0.55rem;
  line-height: 1.6;
  color: var(--ink-46);
  columns: 2;
  column-gap: 8mm;
}

/* Senza planimetria la pagina resta, e i blocchi salgono in cima più grandi:
   appesi in fondo sotto un riquadro vuoto sembrerebbero un errore di stampa.
   La nota scende a filo del piede (`margin-top: auto`). */
.ex-close-solo .ex-end { margin-top: 0; gap: 14mm; }
.ex-close-solo .ex-h3 { font-size: 1.5rem; margin-bottom: 5mm; }
.ex-close-solo .ex-where { font-size: 1.6rem; }
.ex-close-solo .ex-contact { font-size: 0.85rem; line-height: 1.85; }
.ex-close-solo .ex-qr svg { width: 40mm; height: 40mm; }
.ex-close-solo .ex-qr .ex-small { max-width: 44mm; }
.ex-close-solo .ex-note { margin-top: auto; }

/* ---- In stampa ----------------------------------------------------------------
   La carta non ha bisogno della carta: via il fondo grigio, via l'ombra, via i
   comandi.

   Round 92 — **il foglio è legato alla larghezza, non ai millimetri.** Safari
   stampa ogni misura CSS 1,0667 volte più grande di Chrome (WebKit impagina a
   1,25 volte la larghezza del foglio in punti e poi riduce: un px CSS diventa
   0,8 pt invece di 0,75) — misurato sul PDF del foglio vetrina al round 85.
   Con l'altezza scritta in millimetri, il vecchio exposè in Safari era alto
   264 × 1,0667 = 281,6 mm su 267 mm di carta utile: ogni pagina sbordava
   sulla successiva. Adesso la pagina è larga quanto la carta (`width: auto`,
   che ogni browser adatta da sé) e alta 294/210 della sua larghezza; il
   bianco di 15 e 14 mm è una spaziatura in percentuale della larghezza
   (15/210 = 7,1429 %, 14/210 = 6,6667 %), e scala con lei. In Chrome il
   riquadro utile è 182 × 264 mm; in Safari 170,6 × 247,5 mm CSS, che stampati
   tornano 182 × 264.

   `overflow: hidden`, e non più `min-height`: con l'altezza calcolata dal
   rapporto, una pagina che crescesse col contenuto spingerebbe in Safari il
   resto del documento di un foglio. Il contenuto che sta in pagina lo misura
   `website/expose.py` sulla geometria di Safari, la più stretta delle due. */
@media print {
  .ex-body { background: #fff; }
  .ex-tools { display: none !important; }
  .ex { padding: 0; }
  .ex-page {
    width: auto;
    height: auto;
    min-height: 0;
    aspect-ratio: 210 / 294;
    margin: 0;
    padding: 7.1429% 6.6667%;
    box-shadow: none;
    overflow: hidden;
  }
  .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.

   **`screen and` non è pleonastico, ed è costato una prova di stampa.** Quando
   il browser impagina per la carta, la larghezza che le media query leggono è
   quella della **pagina**, non della finestra. Scritta senza `screen`, questa
   regola si accendeva in stampa e riscriveva il documento stampato. */
@media screen and (max-width: 840px) {
  :root { --ex-w: auto; }
  .ex-page { width: auto; aspect-ratio: auto; overflow: visible; margin: 0 12px 16px; padding: 20px; }
  .ex-two, .ex-end, .ex-end-3 { 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%; 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 { flex: none; aspect-ratio: 4 / 3; }
  .ex-qr { text-align: left; }
  .ex-qr svg { margin: 0; }
  .ex-scale li { font-size: 0.5rem; padding: 1.8mm 0; }
  .ex-energy { margin-top: 8mm; }
}

/* ---- Round 91 — il prezzo del garage, quando è separato ------------------------
   Prezzo e garage in una colonna sola a destra del titolo; il contenitore
   (`.ex-price-box`) c'è solo quando il garage c'è. La linea di base della
   colonna è quella della sua prima riga, cioè del prezzo. */
.ex-price-box { flex: none; text-align: right; }
.ex-garage {
  margin-top: 1.2mm;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink-46);
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
.ex-garage-n { color: var(--ink); margin-left: 2px; }
@media screen and (max-width: 840px) {
  .ex-price-box { text-align: left; }
}