/* The napkin dispenser's slides: deck.css and the design system draw the slide; this adds its tables, a pair of pictures, and the live slides. Roles only, but for the zoom of a live slide, explained where it is set. */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--ds-type-small); line-height: var(--ds-leading-ui) }
.tbl :is(th, td) { padding: var(--ds-space-1) var(--ds-space-3) var(--ds-space-1) 0; border-top: var(--ds-line) solid var(--ds-rule); font-weight: var(--ds-weight-regular); text-align: start; vertical-align: top }
.tbl thead th { border-top: 0; color: var(--ds-text-2) }
.tbl tbody th { font-weight: var(--ds-weight-semibold); white-space: nowrap }
.tbl .n { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap }
.tbl .was { color: var(--ds-text-2) }
.tbl--tight :is(th, td) { padding-block: 1px }
.ds-figure-head { margin-bottom: var(--ds-space-2) }
.tbl--body { font-size: var(--ds-type-body, inherit); line-height: var(--ds-leading-tight) }
[data-ds-slides] .quote p { margin: 0 }
.sources { font-size: var(--ds-type-small) }
.asked { padding-inline-start: 1.1em }
.ds-slide-canvas .asked li + li { margin-top: var(--ds-space-2) }

/* A tall figure at the right of the slide, words at the left. Read as a page, it simply follows the words. */
.ds-slide-canvas[data-ds-canvas="fit"].tall { position: relative }
.ds-slide-canvas[data-ds-canvas="fit"].tall > :not(.tall-fig, .ds-slide-foot) { max-width: 620px }
.ds-slide-canvas[data-ds-canvas="fit"].tall > .tall-fig { position: absolute; top: 0; right: 0; margin: 0 }
.ds-slide-canvas[data-ds-canvas="fit"].tall > .tall-fig img { width: auto; height: var(--fig-h) }

/* A live figure under a headline and above its credit. */
.ds-slide-canvas[data-ds-canvas="fit"]#february .live { flex: 1 1 0; min-height: 0; height: auto }

/* Two pictures side by side, the height of the slide's room. */
.pair--whole img { object-fit: contain !important }
.ds-slide-canvas[data-ds-canvas="fit"] .pair.pair--whole img { height: 225px }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-space-4); margin: 0 }
[data-ds-slides] .pair img { width: 100%; height: auto; display: block }
.ds-slide-canvas[data-ds-canvas="fit"] .pair { align-items: start }
.ds-slide-canvas[data-ds-canvas="fit"] .pair img { height: 340px; width: 100%; object-fit: cover }

/* A live slide: the page itself, edge to edge above the footer. It takes no pointer or keyboard while presenting, so the arrow keys keep moving the slides. Zoomed out against the canvas, so that at
   1920 × 1080 it is laid out at about the width of the tool on a laptop, and its type comes out larger for a room. */
.ds-slide-canvas[data-ds-canvas="fit"].ds-slide--bleed.live-slide { gap: 0 }
.ds-slide-canvas[data-ds-canvas="fit"].live-slide > .live { flex: 1 1 0; min-height: 0; width: 100%; height: auto; aspect-ratio: auto; zoom: .8533 }
.ds-slide-canvas[data-ds-canvas="fit"].ds-slide--bleed.live-slide > .ds-slide-foot { position: static; margin: 0; padding: var(--ds-space-1) var(--ds-space-3) }

@media (width <= 639px) {
  .pair { grid-template-columns: 1fr }
  .tbl tbody th { white-space: normal }
}