html { background: #08070b; scroll-behavior: smooth }
body { min-height: 100svh }
header { position: sticky; top: 0; z-index: 20; background: rgba(8, 7, 11, .9); backdrop-filter: blur(18px) }
nav a[aria-current="page"] { color: var(--white) }

main { max-width: 1600px; margin: 0 auto; padding: clamp(3rem, 5vw, 5rem) 5vw clamp(4rem, 7vw, 7rem) }
.work-intro { margin-bottom: clamp(2.5rem, 4vw, 4rem) }
.work-intro .eyebrow { margin-bottom: 1.25rem }
.work-intro h1 { margin: 0; font-size: clamp(3.15rem, 7vw, 7rem); line-height: .8; letter-spacing: -.095em }

.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3.5vw, 4.5rem); row-gap: clamp(2.5rem, 4vw, 4rem) }
.work-card { min-width: 0 }
.work-thumb { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; background: #111116 }
.work-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 54%, rgba(0,0,0,.72)); transition: background .35s ease }
.work-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.86) contrast(1.04); transition: transform .65s cubic-bezier(.2,.7,.2,1), filter .35s ease }
.work-thumb:hover img { transform: scale(1.035); filter: saturate(1) contrast(1.04) }
.work-thumb:hover::after { background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.78)) }
.play, .duration { position: absolute; z-index: 2; bottom: 1rem; color: #fff; font: 500 .68rem "DM Mono", monospace; letter-spacing: .06em; text-transform: uppercase }
.play { left: 1rem; border-bottom: 1px solid currentColor; padding-bottom: .18rem }
.duration { right: 1rem }
.work-copy { display: grid; gap: .65rem; padding-top: 1.1rem; border-top: 1px solid var(--line); margin-top: 1rem }
.work-copy h2 { margin: 0; font-size: clamp(1.4rem, 2.1vw, 2rem); line-height: 1.2; letter-spacing: -.045em }
.work-copy h2 a:hover { color: var(--soft) }
.work-copy > p:last-child { margin: 0; color: var(--soft); font-size: .9rem; line-height: 1.65 }
footer { margin-top: 0 }

a:focus-visible { outline: 2px solid #fff; outline-offset: 4px }

@media (max-width: 700px) {
  header { height: auto; min-height: 76px; flex-wrap: wrap; gap: .5rem 1rem; padding: .75rem 5vw }
  header nav { order: 3; display: flex; width: 100%; gap: .9rem; overflow-x: auto; font: 500 .8125rem/1.4 Manrope, Arial, sans-serif; letter-spacing: 0; text-transform: none }
  header nav a { display: inline-flex; align-items: center; min-height: 40px; white-space: nowrap }
  header .contact { font-size: .8125rem; min-height: 44px }
  main { padding: 2.75rem 6vw 4rem }
  .work-intro { margin-bottom: 2.5rem }
  .work-intro .eyebrow { margin-bottom: 1.5rem }
  .work-intro h1 { font-size: clamp(2.8rem, 14vw, 4.34rem) }
  .work-grid { grid-template-columns: 1fr; row-gap: 2.75rem }
  .work-copy { gap: .6rem }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .work-thumb img { transition: none }
}