/* Project pages (work/*.html) */
.player{margin-top:68px;background:#000;display:flex;justify-content:center}
.player video{width:100%;max-height:calc(100svh - 68px);aspect-ratio:16/9;object-fit:contain;background:#000}
.player.is-vertical video{width:auto;height:calc(100svh - 68px);max-height:900px;aspect-ratio:9/16}

.project{padding:56px var(--gutter) 40px;max-width:1400px}
.project-tags{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.project-title{font-size:clamp(40px,9vw,140px);margin-top:14px;overflow-wrap:anywhere}
.project-text{margin-top:22px;max-width:40em;font-size:17px;color:#ddd}

.pager{display:flex;justify-content:space-between;gap:24px;padding:36px var(--gutter);border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line)}
.pager a{display:flex;flex-direction:column;gap:6px;text-decoration:none;max-width:48%}
.pager-next{text-align:right;align-items:flex-end}
.pager-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pager-name{font-family:var(--display);font-size:clamp(24px,3vw,42px);text-transform:uppercase;line-height:1;overflow-wrap:anywhere}
.pager-prev .pager-name::before{content:'‹ ';color:var(--gold)}
.pager-next .pager-name::after{content:' ›';color:var(--gold)}
.pager a:hover .pager-name{color:var(--accent)}

.related{padding:72px var(--gutter)}
.related h2{font-size:clamp(34px,4vw,56px);margin-bottom:28px}
.rel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.rel{text-decoration:none}
.rel-img{display:block;aspect-ratio:16/9;overflow:hidden;background:#000;outline:1px solid transparent;outline-offset:6px;transition:outline-color .3s ease}
.rel:hover .rel-img{outline-color:var(--gold)}
.rel-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.rel:hover img{transform:scale(1.05)}
.rel-title{display:block;margin-top:10px;font-size:14px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--accent)}

.cta{padding:90px var(--gutter);text-align:center;background:var(--bg-2);border-top:1px solid var(--gold-line)}
.cta-kicker{font-family:var(--display);font-size:clamp(24px,3vw,40px);text-transform:uppercase}
.cta-title{font-size:clamp(64px,11vw,170px);color:var(--accent);margin:6px 0 30px}

@media (max-width:760px){
  .player.is-vertical video{height:auto;width:100%;max-height:none}
  .rel-grid{grid-template-columns:1fr}
  .pager{flex-direction:column}
  .pager a{max-width:none}
}