/* ================= Work — unified project reel =================
   Every project uses the same frame, ratio, radius, shadow and meta layout.
   Default: vertical list. html.cinematic + wide screens: pinned reel.     */
.work { border-top: 1px solid var(--line); padding-top: clamp(100px, 14vh, 160px); }
.work-head { display: grid; gap: 20px; padding-bottom: clamp(48px, 8vh, 90px); }
.work-note { color: var(--muted); max-width: 44ch; }

.reel { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) clamp(80px, 12vh, 140px); display: grid; gap: clamp(64px, 10vh, 120px); }
.project { display: grid; gap: 22px; }

/* --- the unified frame --- */
.frame {
  position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 0.95), 0 30px 90px -60px rgba(201, 164, 106, 0.35);
}
.frame::after { /* glass edge */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.frame img, .frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.frame video { opacity: 0; transition: opacity 0.6s var(--ease); }
.frame video.is-playing { opacity: 1; }
.frame:hover img, .frame:hover video { scale: 1.015; }
.frame img, .frame video { transition: opacity 0.6s var(--ease), scale 1.2s var(--ease); }

/* --- the unified meta --- */
.meta { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 22px; align-items: baseline; }
.meta-n { font-family: var(--f-serif); font-style: italic; color: var(--gold); font-size: 1.5rem; line-height: 1; }
.meta-name { font-weight: 850; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.95; font-size: clamp(1.7rem, 3.4vw, 3.2rem); font-variation-settings: 'wdth' 112; }
.meta-link { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-lt); white-space: nowrap; border-bottom: 1px solid rgba(201, 164, 106, 0.4); padding-bottom: 3px; transition: color 0.3s, border-color 0.3s; }
.meta-link:hover { color: var(--white); border-color: var(--white); }
.meta-desc { grid-column: 2 / -1; color: rgba(245, 243, 238, 0.72); max-width: 52ch; }
.meta-tags { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.meta-tags li + li::before { content: '/'; margin-right: 16px; color: var(--gold-dk); }
@media (max-width: 640px) {
  .meta { grid-template-columns: auto 1fr; }
  .meta-link { grid-column: 2; justify-self: start; }
  .meta-desc, .meta-tags { grid-column: 1 / -1; }
}

/* --- cinematic reel --- */
.reel-counter, .reel-bar { display: none; }
@media (min-width: 1000px) {
  .cinematic .reel {
    height: 100vh; height: 100svh; gap: 0; padding-top: calc(var(--nav-h) + 24px); padding-bottom: 40px;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.5fr); grid-template-rows: 1fr; align-items: center; column-gap: clamp(32px, 4vw, 72px);
  }
  .cinematic .work-head { padding-bottom: 0; }
  .cinematic .project { display: contents; }
  .cinematic .frame { grid-area: 1 / 2; width: 100%; max-height: calc(100svh - var(--nav-h) - 90px); justify-self: end; will-change: transform, clip-path; }
  .cinematic .meta { grid-area: 1 / 1; grid-template-columns: 1fr; align-self: center; gap: 16px; }
  .cinematic .meta > * { grid-column: 1; }
  .cinematic .meta-n { font-size: 2.4rem; }
  .cinematic .meta-link { justify-self: start; margin-top: 10px; }
  .cinematic .reel-counter {
    display: block; grid-area: 1 / 1; align-self: end; margin-bottom: 8px;
    font-size: 0.7rem; letter-spacing: 0.24em; color: var(--muted);
  }
  .cinematic .reel-counter b { color: var(--text); font-weight: 600; }
  .cinematic .reel-bar { display: block; grid-area: 1 / 1; align-self: end; height: 1px; background: var(--line-2); margin-bottom: -4px; }
  .cinematic .reel-bar i { display: block; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0); }
}