:root {
  --paper:        #FAF8F3;
  --paper-2:      #F2EFE7;
  --ink:          #1A1A17;
  --ink-muted:    #5C5C57;
  --rule:         #D9D5C8;

  --orange:       #E8943D;
  --teal:         #4FA08B;
  --blue:         #3B6EAA;
  --red:          #C44545;
  --purple:       #8C6AB7;

  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-sans:    'Geist', 'Söhne', -apple-system, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --slide-w: 1920px;
  --slide-h: 1080px;

  --pad-top:        56px;
  --pad-side:      140px;
  --pad-bottom:     64px;
  --title-rule-gap: 20px;
  --figure-gap:     24px;

  --ease:    cubic-bezier(.2, .7, .2, 1);
  --t-slide: 480ms;
  --t-step:  380ms;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  overflow: hidden;
}

body.cursor-hidden { cursor: none; }
body.blackout #stage { opacity: 0; }

#stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  transition: opacity 200ms var(--ease);
}

.slide-wrapper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 1;
  transform: translateX(0);
  transition:
    opacity var(--t-slide) var(--ease),
    transform var(--t-slide) var(--ease);
}

.slide-wrapper.entering-right { opacity: 0; transform: translateX(40px); }
.slide-wrapper.entering-left  { opacity: 0; transform: translateX(-40px); }
.slide-wrapper.leaving-left   { opacity: 0; transform: translateX(-40px); }
.slide-wrapper.leaving-right  { opacity: 0; transform: translateX(40px); }

.slide-wrapper > section {
  position: absolute;
  top: var(--slide-offset-y, 0);
  left: var(--slide-offset-x, 0);
  width: var(--slide-w);
  height: var(--slide-h);
  transform: scale(var(--slide-scale, 1));
  transform-origin: top left;
  box-sizing: border-box;
}

.slide {
  position: relative;
  padding: var(--pad-top) var(--pad-side) var(--pad-bottom);
  background: var(--paper);
  isolation: isolate;
  overflow: hidden;
}

h1,
h2,
p,
figure {
  margin: 0;
}

h1 {
  position: relative;
  z-index: 1;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 88px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.03;
}

.slide > h1::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: var(--title-rule-gap);
  background: var(--rule);
}

.kicker {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  color: var(--ink-muted);
  font-family: var(--font-display);
  font-size: 56px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

p {
  font-size: 30px;
  font-weight: 400;
  line-height: 1.45;
  max-width: 28em;
}

.caption {
  margin-top: 18px;
  color: var(--ink-muted);
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0;
}

.slide figure img,
.slide figure svg,
.slide figure {
  mix-blend-mode: multiply;
}

.slide figure figcaption {
  mix-blend-mode: normal;
}

.step {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--t-step) var(--ease),
    transform var(--t-step) var(--ease);
}

.step.revealed {
  opacity: 1;
  transform: translateY(0);
}

#footer-strip {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 36px;
  padding: 0 32px;
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  box-sizing: border-box;
  color: var(--ink-muted);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
}

.footer-left {
  grid-column: 1;
  justify-self: start;
}

#progress {
  grid-column: 3;
  justify-self: end;
  color: var(--ink-muted);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  font-variation-settings: "opsz" 9;
  letter-spacing: 0;
  text-transform: lowercase;
}

.slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: 0.02;
  pointer-events: none;
  z-index: 0;
}

.figure-slide {
  display: flex;
  flex-direction: column;
}

/* The figure fills the space under the title and centers its image + caption
   together as one group (so the caption sits right under the figure, not pinned
   to the slide bottom). Works with or without a kicker above it. */
.figure-slide > figure {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: var(--figure-gap);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 22px;
}

/* Allow grid items (svg-wrap, figcaption) to shrink below their intrinsic
   size so that an aspect-ratio'd svg-wrap doesn't push the figcaption out
   of the visible area. */
.figure-slide > figure > * {
  min-height: 0;
  min-width: 0;
}

.figure-slide > figure > img,
.figure-slide > figure > svg,
.figure-slide > figure > .svg-wrap {
  display: block;
  max-width: var(--fig-max-w, 1500px);
  max-height: 720px;
  width: var(--fig-w, auto);
  height: auto;
}