@font-face { font-family: "IBM Plex Serif"; font-weight: 400; font-style: normal; font-display: block; src: url("fonts/IBMPlexSerif-Regular.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Serif"; font-weight: 700; font-style: normal; font-display: block; src: url("fonts/IBMPlexSerif-Bold.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Serif"; font-weight: 400; font-style: italic; font-display: block; src: url("fonts/IBMPlexSerif-Italic.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: block; src: url("fonts/IBMPlexMono-Regular.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 700; font-style: normal; font-display: block; src: url("fonts/IBMPlexMono-Bold.ttf") format("truetype"); }
@font-face { font-family: "Source Sans Pro"; font-weight: 400; font-style: normal; font-display: block; src: url("fonts/SourceSansPro-Regular.ttf") format("truetype"); }
@font-face { font-family: "Source Sans Pro"; font-weight: 700; font-style: normal; font-display: block; src: url("fonts/SourceSansPro-Semibold.ttf") format("truetype"); }

:root {
  color-scheme: dark;
  --ground: #1F3550;
  --grid: #2B4562;
  --ink: #EDE6D3;
  --r-background-color: var(--ground);
  --r-main-color: var(--ink);
  --r-heading-color: var(--ink);
  --r-link-color: var(--ink);
  --r-overlay-element-bg-color: 31, 53, 80;
  --r-overlay-element-fg-color: 237, 230, 211;
}

html { background: var(--ground); }
body, .reveal-viewport { background: transparent; }

/* The diazo sheet is the whole window. The sheets are transparent, so one grid drawn here runs
   through the slide box: the slide is 1280x720 at --slide-scale, centred in the viewport, and the
   sheets' working frame starts 28.8 slide px in with a 25.6 px pitch (36 and 32 at 1600 wide).
   This layer's origin sits a whole number of pitches up and left of that corner; it paints above the
   html ground and under the body, which is why the body is transparent. Turn the grid off with
   --grid: transparent if it moires on the projector. */
.reveal-viewport::before {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  --s: var(--slide-scale, 1);
  --pitch: calc(25.6px * var(--s));
  --hair: max(0.5px, calc(0.32px * var(--s)));
  left: calc(50% - 3068.8px * var(--s));
  top: calc(50% - 1560px * var(--s));
  width: calc(6137.6px * var(--s));
  height: calc(3120px * var(--s));
  opacity: 0.6;
  background-image:
    linear-gradient(to right, var(--grid) var(--hair), transparent var(--hair)),
    linear-gradient(to bottom, var(--grid) var(--hair), transparent var(--hair));
  background-size: var(--pitch) var(--pitch);
}

.reveal { font-family: "IBM Plex Serif", serif; color: var(--ink); }
.reveal .slides section { height: 100%; padding: 0; }
.reveal .slides section.present { top: 0; }
.fig { width: 1280px; height: 720px; }
.fig svg { width: 100%; height: 100%; display: block; }
.reveal aside.notes { display: none; }
.reveal .progress, .reveal .controls, .reveal .slide-number { display: none; }

/* stub slides: plain type on the diazo sheet */
.reveal .slides section { text-align: left; }
.slide { box-sizing: border-box; width: 1280px; height: 720px; padding: 96px 112px; display: flex; flex-direction: column; justify-content: center; }
.slide .kicker { font: 400 18px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin: 0 0 28px; }
.slide h1, .slide h2 { font: 700 64px/1.08 "IBM Plex Serif", serif; margin: 0 0 32px; text-transform: none; }
.slide h1 { font-size: 84px; }
.slide p, .slide li { font: 400 30px/1.35 "IBM Plex Serif", serif; margin: 0 0 14px; max-width: 30em; }
.slide ul { margin: 0; padding-left: 1.1em; }
.slide .sub { font-style: italic; opacity: .85; }
.slide .tag { display: inline-block; font: 700 14px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; border: 1px dashed var(--ink); padding: 5px 8px; margin-left: 14px; vertical-align: middle; opacity: .75; }
.slide .exhibit { margin-top: 26px; border: 2px dashed var(--ink); padding: 14px 20px; font: 400 20px/1.35 "IBM Plex Mono", monospace; opacity: .8; max-width: 38em; }