/* ==================================================================
   LOVE LINK — project page in the Imaginary Forces style:
   film still + "Play" hero, rows of three 16:9 stills, lowercase
   headings, an italic pull quote and bold-label credits.
   ================================================================== */

/* Hero: still image, big "Play" in the corner; becomes the film on click */
.ll-hero { position: relative; aspect-ratio: 16 / 9; max-height: calc(100vh - var(--header-h) - 48px); background: #000; cursor: pointer; }
.ll-hero img { width: 100%; height: 100%; max-height: none; object-fit: cover; transition: transform 1.2s var(--ease), opacity 0.4s ease; }
.ll-hero:hover img { transform: scale(1.02); }
.ll-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.45), transparent 45%); pointer-events: none; }
.ll-play {
  position: absolute; z-index: 1;
  left: clamp(16px, 2.4vw, 36px); bottom: clamp(12px, 2vw, 28px);
  padding: 0; border: 0; background: none; color: #fff; cursor: pointer;
  font-family: var(--font-sans); font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem); font-weight: var(--fw-light); letter-spacing: -0.01em;
  transition: color var(--dur) var(--ease);
}
.ll-hero:hover .ll-play, .ll-play:focus-visible { color: var(--color-accent); }
.ll-hero.is-playing { cursor: default; }
.ll-hero.is-playing::after, .ll-hero.is-playing .ll-play { display: none; }
.ll-hero iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Every still uses the same wide 16:9 crop, like film frames */
.ll .pj-row figure img { aspect-ratio: 16 / 9; height: auto; object-fit: cover; }

/* Pull quote */
.ll-quote { margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; }
.ll-quote p { font-style: italic; }
.ll-quote strong { font-weight: 600; }

/* Credits: bold role, light name, like the reference */
.ll-credits dt::after { content: ":"; }
.ll-watch { margin-top: 1.4em; }

/* Related: three across */
.ll-related { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .ll-related { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   Imperfect Women layout: teaser video hero, full 16:9 frames
   (two side by side, then one full width)
   ------------------------------------------------------------------ */
.ll-hero--teaser video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.ll-hero--teaser.is-playing video { object-fit: contain; }
.ll-iw .ll-frames .pj-row figure img { aspect-ratio: 16 / 9; height: auto; object-fit: cover; }   /* full frame, so no credit gets cut */

/* "what I did": text on the left, a behind-the-scenes photo of me on the right */
.ll-did { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.ll-did .pj-text { max-width: none; }
.ll-did .pj-text p:first-of-type { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem); font-weight: 300; letter-spacing: -0.01em; }
.ll-did__photo { margin: clamp(48px, 5vw, 64px) 0 0; position: sticky; top: calc(var(--header-h) + 24px); }
.ll-did__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.ll-did__photo figcaption { margin-top: 10px; font-family: "DM Mono", ui-monospace, Menlo, monospace; font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
@media (max-width: 760px) { .ll-did { grid-template-columns: 1fr; } .ll-did__photo { position: static; margin-top: 0; } }