/* Layout for the standalone project pages. The site's main stylesheet carries the design
   tokens, type and shared components; this only adds what a single-project page needs. */
.work-page { background: var(--bg); }
.work-page .site-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; padding-inline: var(--gutter); background: rgba(7,8,8,.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
.work-page .header-nav { display: flex; gap: 26px; }
.work-page .header-nav a { color: #d7d5ce; font-family: var(--font-display); font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.work-page .header-nav a:hover { color: var(--gold-bright); }

.work-article { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr); gap: clamp(28px, 4vw, 64px); align-items: start; max-width: var(--shell); margin: 0 auto; padding: clamp(32px, 5vw, 72px) var(--gutter); }
.work-hero img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.work-copy h1 { margin: 10px 0 20px; color: #d8d1c7; font-family: var(--font-light); font-size: clamp(2.2rem, 4vw, 3.9rem); font-weight: 300; letter-spacing: .06em; line-height: 1.02; text-transform: uppercase; }
.work-logline { color: #c6c1b8; font-size: 1rem; }
.work-body { color: var(--muted); font-size: .92rem; }
.work-reel { margin: 28px 0 0; }
.work-reel .button { text-decoration: none; }

.work-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.work-gallery figure { margin: 0; }
.work-gallery img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line); }
.work-gallery figcaption { margin-top: 6px; color: #777873; font-size: .6rem; line-height: 1.35; }

.work-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter) clamp(48px, 6vw, 88px); }
.work-nav a { color: var(--gold-bright); text-decoration: none; }

.work-page .site-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding-inline: var(--gutter); color: #747570; background: #070808; border-top: 1px solid var(--line); font-size: .6rem; }
.work-page .site-footer a { color: #9b9992; text-decoration: none; }

@media (max-width: 900px) {
  .work-article { grid-template-columns: 1fr; }
}

/* Hold the still alongside the record instead of stranding it.
   Posters are wide and short (this one 248px tall) while the record column runs to ~790px with
   facts and a gallery, leaving ~550px of empty column on the left. Sticking the image keeps it
   with the text it belongs to as the reader scrolls, and the void closes. Only applies where the
   two columns actually sit side by side. */
@media (min-width: 901px) {
  .work-hero { position: sticky; top: 92px; }
}