/* ---- Logofolio 2025 ----
   Page-specific styles, loaded after css/style.css so the shared tokens, the
   site header/nav, .project-back and .case-caption are already in place.
   Everything here is prefixed .lf- so it cannot collide with the other case
   studies.

   Inset to the nav's content box like the others: calc(100% - 2*--case-pad-x)
   is exactly the nav bar's content width (full width on phones), so the reel's left edge lands on the
   logo and its right edge on "Contact". */
.lf-page {
  width: calc(100% - 2 * var(--case-pad-x));
  margin-inline: auto;
}

/* The caption is the first thing under the nav, and the gap under it to the
   first clip is the same 40px block rhythm, so both are stated here. */
.lf-page > .case-caption {
  padding-block: var(--case-gap);
}

/* ---- Reel ----
   Five bands at the column's width, stacked with no gap. Each is 1440x700 in
   the frame, the same ratio the clips are rendered at. */
.lf-reel {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The band keeps the 1440x700 frame and is filled with the clip's own ground
   (--lf-ground, set per item in the markup), and the clip sits centred in it
   at --lf-scale of the band's width - so the comp reads smaller without the
   band shrinking. Same ratio as the band, so the margin is even all round. */
.lf-logo {
  --lf-scale: 70%;
  /* .video-plate paints its edge cover in this colour. */
  --plate-ground: var(--lf-ground, var(--bg));

  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1440 / 700;
  background: var(--plate-ground);
}

/* ---- Label ----
   Name over year in the band's bottom-left corner. 40px off the bottom edge
   as in the frame; the left inset is the frame's 96/1440 as a share of the
   band, so it keeps its place in the corner as the band narrows. Sizes are
   the frame's 22px and 13px at 1440. Ink is black on the light grounds and
   white on the dark one (.lf-logo--dark). */
.lf-label {
  position: absolute;
  left: 6.667%;
  bottom: 40px;
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  font-weight: 400;
  line-height: 1.2;
  color: var(--lf-ink, var(--ink-strong));
}

.lf-logo--dark {
  --lf-ink: #fff;
}

.lf-name {
  font-size: clamp(15px, 1.528vw, 26px);
}

.lf-year {
  font-size: clamp(11px, 0.903vw, 15px);
}

@media (max-width: 600px) {
  /* 40px is most of a phone-width band's height. */
  .lf-label {
    bottom: 12px;
  }
}

/* The clip's box. Centred by the grid rather than by a translate, so the box
   is not pushed onto a half pixel by a -50% of an odd width.

   The edge lines are handled by .video-plate in the shared sheet: the video
   bleeds 3px past this box and ::after repaints the outermost 3px in the
   ground colour. That cover has to be an ordinary painted element ON TOP of
   the video, because the browser hands the video to the GPU as its own layer
   (often a hardware overlay) - which rounds its right and bottom edges
   independently of the page and shows a sliver of the frame's coded padding
   there (700 rows are stored as 704). A clip or mask on the video itself is
   applied before that and cannot reach it; screenshots skip the overlay,
   which is why the lines never show up in one. */
.lf-clip {
  width: var(--lf-scale);
  aspect-ratio: 1440 / 700;
}