/* Variante della brochure con gli screenshot della console. */
.shot { margin-top: 28px; padding: 14px; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.shot figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 72ch; }
.shot figcaption strong { color: var(--text); }
/* Ingrandimento (variante.js): l'immagine riempie lo schermo senza uscirne. */
.shot img { cursor: zoom-in; }
.shot img:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.zoom { border: 1px solid var(--rule); background: var(--paper); color: var(--text); padding: 12px; max-width: 96vw; max-height: 96vh; overflow: auto; }
.zoom[open] { display: flex; flex-direction: column; }
.zoom-scroll { overflow: auto; min-height: 0; }
.zoom::backdrop { background: rgb(10 14 18 / .78); }
.zoom img { display: block; max-width: 100%; max-height: calc(96vh - 110px); width: auto; height: auto; margin: 0 auto; }
.zoom-close { display: block; margin: 0 0 10px auto; font: 600 13px/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase; color: var(--text); background: transparent; border: 1px solid var(--rule); padding: 9px 14px; cursor: pointer; }
.zoom-close:hover { background: var(--accent-soft); }
.zoom-cap { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 90ch; }
.zoom-cap strong { color: var(--text); }
@media (max-width: 700px) {
  .zoom { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; border: 0; padding: 10px; }
  .zoom img { max-width: none; max-height: none; width: 260%; }
  .zoom-cap { font-size: 13px; }
}
@media print {
  .shot { margin-top: 14px; padding: 8px; }
  .shot figcaption { font-size: 9pt; margin-top: 8px; }
}