/* "A sealed system, start to finish": real footage (one vertical video) and three photographs.
   Loaded only by the pages that show it (home). Colours and type come from the tokens in style.css.
   Kept out of style.css on purpose: no cache-version bump across 56 pages for one block. */
.watch__grid {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  justify-content: center;
}
.watch__player { margin: 0; }
.watch__player video {
  display: block; width: 100%; height: auto;
  aspect-ratio: 9 / 16;
  background: var(--cinema);
  border: 1px solid var(--hairline);
}
.watch__player figcaption {
  margin-top: 0.9rem;
  color: var(--faint); font-size: 0.8125rem; line-height: 1.6;
}
.watch__lede {
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  max-width: 34rem;
}
.watch__steps { list-style: none; margin-top: 1.8rem; counter-reset: step; padding: 0; }
.watch__steps li {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr);
  column-gap: 1rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--hairline);
}
.watch__steps li:first-child { border-top: 1px solid var(--hairline); }
.watch__steps li::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-size: 0.75rem; letter-spacing: 0.22em;
  color: var(--gold); padding-top: 0.5rem;
}
.watch__steps b {
  font-family: var(--serif); font-weight: 400;
  font-size: 1.4rem; line-height: 1.2; color: var(--ink);
}
.watch__steps span { color: var(--muted); font-size: 0.95rem; line-height: 1.55; }

.watch__photos {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.5rem);
  margin: clamp(2.5rem, 6vh, 4rem) 0 0;
}
.watch__photos figure { margin: 0; }
.watch__photos img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1 / 1; object-fit: cover;
  border: 1px solid var(--hairline);
}
.watch__photos figcaption {
  margin-top: 0.7rem;
  color: var(--faint); font-size: 0.8125rem; line-height: 1.55;
}

@media (max-width: 860px) {
  .watch__grid { grid-template-columns: minmax(0, 1fr); }
  .watch__player { max-width: 22rem; margin: 0 auto; }
}
@media (max-width: 640px) {
  .watch__photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .watch__photos > li:first-child { grid-column: 1 / -1; }
}

/* "Aphelion, in one minute": same block, player on the right so the two video blocks do not look alike */
.watch--intro .watch__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); }
.watch--intro .watch__player { order: 2; }
@media (max-width: 860px) {
  .watch--intro .watch__grid { grid-template-columns: minmax(0, 1fr); }
  .watch--intro .watch__player { order: 0; }
}