.clock-final {
  margin: 0;
  background: var(--project-black);
  color: #f5f2e9;
}

.clock-final video {
  display: block;
  width: 100%;
  height: min(88svh, 58rem);
  object-fit: contain;
  object-position: center;
}

.clock-final figcaption,
.clock-video-frame figcaption,
.clock-still figcaption,
.clock-receipts figcaption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 0;
  font-size: .7rem;
  font-style: italic;
}

.clock-final figcaption {
  padding: .7rem clamp(1.25rem, 3.4vw, 3.5rem);
}

.clock-journal {
  padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 3.4vw, 3.5rem);
}

.clock-journal-heading {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: clamp(6rem, 12vw, 12rem);
}

.clock-journal-heading > p:first-child {
  grid-column: 1 / 4;
  margin: 0;
  font-size: .78rem;
  font-style: italic;
}

.clock-journal-heading h2 {
  grid-column: 3 / 13;
  margin: 0;
  font: 400 clamp(4rem, 8vw, 8rem)/.8 DaVinci, Georgia, serif;
  letter-spacing: -.05em;
}

.clock-journal-heading h2 em {
  font-weight: 400;
}

.clock-journal-intro {
  grid-column: 8 / 13;
  margin: 1.5rem 0 0;
  font-size: 1rem;
  line-height: 1.4;
}

.clock-chapter {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
  margin-bottom: clamp(8rem, 15vw, 15rem);
}

.clock-chapter-copy {
  position: sticky;
  top: 5.5rem;
}

.clock-chapter-copy > span,
.clock-attempts-copy > span {
  display: block;
  margin-bottom: 1.2rem;
  font-size: .72rem;
  font-style: italic;
}

.clock-chapter-copy h3,
.clock-attempts-copy h3 {
  margin: 0 0 1.25rem;
  font: 400 clamp(2.7rem, 5vw, 5.5rem)/.84 DaVinci, Georgia, serif;
  letter-spacing: -.045em;
}

.clock-chapter-copy p,
.clock-attempts-copy p {
  max-width: 39ch;
  margin: 0;
  line-height: 1.45;
}

.clock-chapter--left .clock-chapter-copy { grid-column: 1 / 5; }
.clock-chapter--left > .clock-video-frame { grid-column: 6 / 11; }
.clock-chapter--left > .clock-still { grid-column: 10 / 13; margin-top: 55%; }
.clock-chapter--right .clock-chapter-copy { grid-column: 9 / 13; grid-row: 1; }
.clock-chapter--right > .clock-video-frame { grid-column: 2 / 7; grid-row: 1; }
.clock-chapter--right > .clock-still { grid-column: 6 / 9; grid-row: 1; margin-top: 65%; }

.clock-video-frame,
.clock-still,
.clock-receipts figure {
  margin: 0;
}

.clock-video-frame video,
.clock-still img,
.clock-receipts img {
  display: block;
  width: 100%;
  background: #171713;
}

.clock-video-frame video {
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

.clock-still img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.clock-still--small { z-index: 1; }

.clock-receipts {
  grid-column: 6 / 9;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  align-self: end;
  margin-top: 85%;
}

.clock-receipts figure:nth-child(2) { margin-top: 3rem; }
.clock-receipts img { aspect-ratio: 9 / 16; object-fit: cover; }

.clock-attempts {
  margin: 0 0 clamp(8rem, 15vw, 15rem);
  padding: clamp(3rem, 6vw, 6rem) 0;
  border-top: 1px solid;
  border-bottom: 1px solid;
}

.clock-attempts-copy {
  display: grid;
  grid-template-columns: 1fr 3fr 4fr;
  gap: 1rem;
  align-items: start;
  margin-bottom: 3rem;
}

.clock-attempts-copy > span,
.clock-attempts-copy h3 { margin: 0; }
.clock-attempts-copy p { justify-self: end; }

.clock-attempts-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .65rem;
}

.clock-attempts-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 250ms ease;
}

.clock-attempts-grid img:hover { filter: grayscale(0); }
.clock-chapter--animation .clock-video-frame--wide { grid-column: 6 / 13; }
.clock-video-frame--wide video { aspect-ratio: 16 / 9; }
.clock-chapter--final .clock-chapter-copy { grid-column: 1 / 5; }
.clock-chapter--final > .clock-video-frame:nth-of-type(1) { grid-column: 6 / 9; margin-top: 12rem; }
.clock-chapter--final > .clock-video-frame:nth-of-type(2) { grid-column: 9 / 13; }
.matrix-clock-detail .detail-note--next a { grid-column: 5 / 9; }

@media (max-width: 850px) {
  .clock-final video { height: 70svh; }
  .clock-journal-heading { display: block; margin-bottom: 7rem; }
  .clock-journal-heading h2 { margin: 2rem 0; }
  .clock-journal-intro { margin-left: 20%; }
  .clock-chapter { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 8rem; }
  .clock-chapter-copy { position: static; margin-bottom: 2.5rem; }
  .clock-chapter--left .clock-chapter-copy,
  .clock-chapter--right .clock-chapter-copy,
  .clock-chapter--final .clock-chapter-copy { grid-column: 1 / 7; grid-row: auto; }
  .clock-chapter--left > .clock-video-frame,
  .clock-chapter--right > .clock-video-frame { grid-column: 1 / 5; grid-row: auto; }
  .clock-chapter--left > .clock-still,
  .clock-chapter--right > .clock-still { grid-column: 4 / 7; grid-row: auto; margin-top: 45%; }
  .clock-receipts { grid-column: 4 / 7; grid-row: auto; margin-top: 45%; }
  .clock-attempts-copy { grid-template-columns: 3rem 1fr; }
  .clock-attempts-copy p { grid-column: 2; }
  .clock-attempts-grid { grid-template-columns: repeat(3, 1fr); }
  .clock-chapter--animation .clock-video-frame--wide { grid-column: 1 / 7; }
  .clock-chapter--final > .clock-video-frame:nth-of-type(1) { grid-column: 1 / 4; margin-top: 6rem; }
  .clock-chapter--final > .clock-video-frame:nth-of-type(2) { grid-column: 4 / 7; }
  .matrix-clock-detail .detail-note--next a { display: block; margin-top: 1.5rem; }
}

@media (max-width: 520px) {
  .clock-final video { height: 62svh; }
  .clock-final figcaption { display: block; }
  .clock-final figcaption span { display: block; margin-top: .2rem; }
  .clock-journal-intro { margin-left: 0; }
  .clock-chapter { display: block; }
  .clock-chapter-copy { margin-bottom: 2rem; }
  .clock-chapter--left > .clock-video-frame,
  .clock-chapter--right > .clock-video-frame { width: 82%; }
  .clock-chapter--left > .clock-still,
  .clock-chapter--right > .clock-still,
  .clock-receipts { width: 54%; margin: -25% 0 0 auto; }
  .clock-receipts { position: relative; }
  .clock-attempts-copy { display: block; }
  .clock-attempts-copy p { margin-top: 1rem; }
  .clock-attempts-grid { grid-template-columns: repeat(2, 1fr); }
  .clock-chapter--final > .clock-video-frame:nth-of-type(1),
  .clock-chapter--final > .clock-video-frame:nth-of-type(2) { width: 75%; margin: 0; }
  .clock-chapter--final > .clock-video-frame:nth-of-type(2) { margin: -35% 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .clock-attempts-grid img { transition: none; }
}