:root {
  color-scheme: light;
  --background: #f4f5f7;
  --foreground: #353942;
  --muted: #969ba5;
  --line: #d9dce1;
  --surface: #0d0e10;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--background);
}

.masthead {
  min-height: 132px;
  padding: 34px 16px 38px;
}

.masthead h1 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 18px;
  margin: 0;
  color: #acb0b8;
  font-size: 42px;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0.14em;
}

.masthead h1 strong {
  color: var(--foreground);
  font-weight: 700;
}

.masthead h1 .slash {
  color: #b9bdc5;
  font-weight: 300;
}

.masthead h1 .title-muted {
  color: #acb0b8;
  font-weight: 400;
}

.collage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(16, minmax(0, 1fr));
  width: 100%;
  aspect-ratio: 12 / 16;
  padding: 0 14px 14px;
}

.study {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  line-height: 0;
}

.study-juggle {
  grid-column: 1 / 8;
  grid-row: 1 / 6;
}

.study-fogofwar {
  grid-column: 8 / 13;
  grid-row: 1 / 6;
}

.study-protein {
  grid-column: 1 / 8;
  grid-row: 6 / 11;
}

.study-cbp {
  grid-column: 8 / 13;
  grid-row: 6 / 11;
}

.study-quad {
  grid-column: 1 / 9;
  grid-row: 11 / 13;
}

.study-pacman {
  grid-column: 9 / 11;
  grid-row: 11 / 13;
}

.study-airhockey {
  grid-column: 11 / 13;
  grid-row: 11 / 13;
}

.study-cam {
  grid-column: 1 / 13;
  grid-row: 13 / 17;
}

.video-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--surface);
}

.video-frame-juggle,
.video-frame-protein,
.video-frame-fogofwar,
.video-frame-quad,
.video-frame-cbp,
.video-frame-pacman,
.video-frame-airhockey,
.video-frame-cam {
  height: 100%;
}

.video-frame-juggle {
  background: #eef0f2;
}

.video-frame-protein {
  background: #fff;
}

.video-frame-quad {
  background: #fff;
}

.video-frame-fogofwar {
  background: #202227;
}

.video-frame-pacman {
  background: #0a0a0a;
}

.video-frame-airhockey {
  background: #737373;
}

.video-frame-cam {
  background: #eef0f2;
}

video {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100%;
  border: 0;
  object-fit: contain;
  background: inherit;
}

.study-game video {
  image-rendering: pixelated;
  object-fit: contain;
}

.study-juggle video,
.study-protein video,
.study-fogofwar video,
.study-quad video,
.study-cbp video,
.study-cam video {
  object-fit: cover;
  object-position: center;
}

@media (max-width: 820px) {
  .masthead {
    min-height: 104px;
    padding: 28px 14px 26px;
  }

  .masthead h1 {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 0 8px;
    font-size: 24px;
    line-height: 1.18;
    letter-spacing: 0.08em;
  }

  .masthead h1 .title-muted {
    min-width: 0;
    white-space: nowrap;
  }

  .collage {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(9, minmax(0, 1fr));
    aspect-ratio: 6 / 9;
    padding: 0 8px 8px;
  }

  .study-juggle {
    grid-column: 1 / 4;
    grid-row: 1 / 4;
  }

  .study-fogofwar {
    grid-column: 4 / 7;
    grid-row: 1 / 4;
  }

  .study-protein {
    grid-column: 1 / 5;
    grid-row: 4 / 7;
  }

  .study-cbp {
    grid-column: 5 / 7;
    grid-row: 4 / 7;
  }

  .study-quad {
    grid-column: 1 / 5;
    grid-row: 7 / 8;
  }

  .study-pacman {
    grid-column: 5 / 6;
    grid-row: 7 / 8;
  }

  .study-airhockey {
    grid-column: 6 / 7;
    grid-row: 7 / 8;
  }

  .study-cam {
    grid-column: 1 / 7;
    grid-row: 8 / 10;
  }
}