/* The films: one player, an arrow either side, and tiles underneath that show
   there are more. Its own names (tf-*), on the night the films are lit by. */
.tf {
  padding: clamp(1rem, 3vw, 2.5rem) 16px clamp(1.5rem, 3vw, 2.5rem);
  background: #060913;
  color: #eef2fb;
}
.tf-inner { max-width: 84rem; margin: 0 auto; }

.tf-viewer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(0.5rem, 1.6vw, 1.25rem);
  align-items: start;
}
.tf-films { grid-column: 2; margin: 0; padding: 0; list-style: none; }
.tf-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  background: #000;
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.8);
}
.tf-words { max-width: 46rem; margin: 1.25rem auto 0; text-align: center; }
.tf-count { margin: 0 0 0.4rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(238, 242, 251, 0.55); }
.tf-words h2 { margin: 0 0 0.5rem; font-size: clamp(1.35rem, 2.6vw, 1.8rem); font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.tf-words p:last-child { margin: 0; line-height: 1.6; color: rgba(238, 242, 251, 0.72); }

.tf-arrow {
  display: none;
  width: 3.25rem; height: 3.25rem;
  /* level with the middle of the picture */
  margin-top: calc((100vw - 32px - 9rem) * 0.28125 - 1.6rem);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.tf-arrow:hover { background: #fff; color: #060913; transform: scale(1.06); }
.tf-arrow:focus-visible, .tf-tile:focus-visible { outline: 2px solid #6ea2ff; outline-offset: 3px; }
.tf-arrow svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tf-prev { grid-column: 1; grid-row: 1; }
.tf-next { grid-column: 3; grid-row: 1; }
@media (min-width: 1376px) { .tf-arrow { margin-top: calc((84rem - 9rem) * 0.28125 - 1.6rem); } }

/* The tiles: every film there is, the one showing marked. */
.tf-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; margin-top: clamp(1.25rem, 3vw, 2rem); }
.tf-tile { display: block; width: clamp(9.5rem, 22vw, 14rem); text-decoration: none; color: rgba(238, 242, 251, 0.7); }
.tf-tile-picture { position: relative; display: block; border-radius: 10px; overflow: hidden; border: 2px solid transparent; opacity: 0.6; transition: opacity 0.15s ease, border-color 0.15s ease; }
.tf-tile-picture img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.tf-tile-play { position: absolute; left: 50%; top: 50%; width: 2.2rem; height: 2.2rem; margin: -1.1rem 0 0 -1.1rem; padding: 0.45rem; border-radius: 50%; background: rgba(6, 9, 19, 0.6); fill: #fff; }
.tf-tile-length { position: absolute; right: 0.4rem; bottom: 0.4rem; padding: 0.1rem 0.4rem; border-radius: 5px; background: rgba(6, 9, 19, 0.75); font-size: 0.72rem; font-weight: 600; color: #fff; }
.tf-tile-title { display: block; margin-top: 0.45rem; font-size: 0.9rem; font-weight: 600; text-align: center; }
.tf-tile:hover .tf-tile-picture { opacity: 0.9; }
.tf-tile.is-active { color: #fff; }
.tf-tile.is-active .tf-tile-picture { opacity: 1; border-color: #fff; }
.tf-tile.is-active .tf-tile-play { display: none; }

/* With scripts: one film at a time. Without: all of them, down the page. */
.tf.has-js .tf-film { display: none; }
.tf.has-js .tf-film.is-active { display: block; }
.tf.has-js .tf-arrow { display: inline-flex; align-items: center; justify-content: center; }
.tf:not(.has-js) .tf-film + .tf-film { margin-top: 3rem; }
.tf:not(.has-js) .tf-viewer { display: block; }

.tos-films { background: #060913; }
.tf-after { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 0; padding: 0.5rem 16px clamp(3rem, 7vw, 5rem); background: #060913; }
.tf-after a { padding: 0.75rem 1.3rem; border-radius: 999px; font-weight: 600; text-decoration: none; background: rgba(255, 255, 255, 0.1); color: #fff; }
.tf-after a.tf-after-main { background: #fff; color: #060913; }

@media (max-width: 720px) {
  /* The arrows come down under the words, where a thumb is. */
  .tf-viewer { grid-template-columns: 1fr 1fr; }
  .tf-films { grid-column: 1 / -1; grid-row: 1; }
  .tf-arrow { margin-top: 0.9rem; width: 3rem; height: 3rem; }
  .tf-prev { grid-column: 1; grid-row: 2; justify-self: end; }
  .tf-next { grid-column: 2; grid-row: 2; justify-self: start; }
  .tf-video { border-radius: 12px; }
}