.work-page{background:#000}.work-page .header{position:relative;background:none;width:100%;max-width:2500px;margin-inline:auto}.work-main,.detail-main{width:100%;max-width:2500px;margin-inline:auto}.work-heading{padding:65px var(--gutter) 65px;position:relative}.work-heading .eyebrow{margin-bottom:25px}.work-heading h1{font-size:clamp(70px,8vw,130px);font-weight:400;line-height:1;letter-spacing:-.045em}.work-hint{position:absolute;right:var(--gutter);bottom:70px;color:var(--muted);font-size:15px}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:45px 22px;padding:0 24px 95px}.project-card{min-width:0;color:var(--ink);display:block}.project-card:hover{color:var(--ink)}.project-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:#151515}.project-media img,.project-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.project-media video{opacity:0;transition:opacity .65s ease}.project-card.preview-playing video{opacity:1}.project-arrow{position:absolute;right:16px;bottom:16px;display:grid;place-items:center;width:34px;height:34px;background:#0007;border-radius:50%;font-size:22px;opacity:0;transition:opacity .2s ease}.project-card:hover .project-arrow,.project-card:focus-visible .project-arrow{opacity:1}.project-caption{display:flex;justify-content:space-between;gap:18px;padding:17px 2px 0}.project-caption h2{font-size:clamp(12px,.88vw,16.8px);font-weight:400;line-height:1.45;word-break:keep-all}.project-caption>span{font-size:12px;color:var(--muted);padding-top:3px}.work-footer{max-width:2500px;width:100%;margin-inline:auto;padding:60px var(--gutter) 65px}.detail-heading{padding:45px var(--gutter) 55px}.detail-heading>a{color:var(--muted);font-size:14px}.detail-heading p{font-size:12px;color:var(--muted);margin-top:65px}.detail-heading h1{font-size:clamp(32px,4.2vw,75px);font-weight:400;letter-spacing:-.03em;line-height:1.25;margin-top:20px;word-break:keep-all}.project-player{display:block;width:100%;max-width:2500px;height:auto;aspect-ratio:16/9;background:#000;object-fit:contain;margin-inline:auto}.project-navigation{display:flex;justify-content:space-between;gap:35px;padding:55px var(--gutter) 75px;font-size:clamp(16px,1.5vw,24px)}.project-navigation a{max-width:45%;line-height:1.5}.project-navigation a:last-child{text-align:right}.project-navigation span{display:block;color:var(--muted);font-size:12px;margin-bottom:14px}
@media(max-width:760px){.work-heading{padding-top:40px;padding-bottom:45px}.work-hint{position:static;margin-top:25px;font-size:13px}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 14px;padding-inline:20px}.project-caption{padding-top:12px;gap:8px}.project-caption h2{font-size:14px}.project-arrow{width:26px;height:26px;right:8px;bottom:8px;font-size:17px}.detail-heading{padding-top:30px;padding-bottom:35px}.detail-heading p{margin-top:40px}.project-navigation{padding-top:35px}.work-footer{padding-bottom:45px}}
@media(max-width:480px){.project-grid{grid-template-columns:1fr}.project-caption h2{font-size:16px}}
@media(prefers-reduced-motion:reduce){.project-media video,.project-arrow{transition:none}}
/* Compact detail header: title and return link share a row. */
.detail-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px var(--gutter) 30px}
.detail-heading h1{font-size:clamp(22.4px,2.4vw,42px);margin:0;min-width:0}
.detail-heading>a{flex-shrink:0;font-size:14px}
@media(max-width:760px){.detail-heading{padding:20px var(--gutter) 24px;gap:18px}.detail-heading h1{font-size:clamp(19.2px,3.84vw,28.8px)}.detail-heading>a{font-size:12px}}

/* Tighter Work landing heading. */
.work-heading{padding-top:35px;padding-bottom:45px}
.work-hint{bottom:50px}
@media(max-width:760px){.work-heading{padding-top:24px;padding-bottom:32px}}

/* Detail reel begins at the top; navigation floats over the image. */
.detail-page .header{position:absolute;inset:0 0 auto;z-index:5;background:none;padding-bottom:55px}
.detail-page .header nav a{color:#fff;text-shadow:0 1px 8px #0008}
.detail-page .header nav a:hover{color:var(--red)}
.detail-page .detail-heading{padding-top:35px;padding-bottom:25px}
.detail-page .project-navigation{padding-top:35px}
/* On mobile, keep the header in document flow above the video. */
@media(max-width:760px){.detail-page .header{position:relative;inset:auto;background:#000;padding-top:26px;padding-bottom:26px}.detail-page .detail-heading{padding-top:25px}}

.sound-play{display:block;margin:20px auto 0;padding:12px 22px;background:#e52622;color:white;border:0;border-radius:4px;font:16px 'SUIT',sans-serif;cursor:pointer}.sound-play[hidden]{display:none}

/* Previous / next projects with the same hover previews as Work. */
.project-navigation{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,70px)}
.project-navigation .adjacent-card{max-width:none;width:100%;text-align:left}
.project-navigation .adjacent-card:last-child{text-align:left}
.project-navigation .adjacent-label{margin-bottom:16px;font-size:13px;color:var(--muted)}
.project-navigation .adjacent-card:last-child .adjacent-label{text-align:right}
.project-navigation .project-arrow{display:grid;color:white;font-size:22px;margin:0}
.project-navigation .adjacent-card h2{font-size:clamp(16px,1.5vw,24px);font-weight:400;line-height:1.5;margin:16px 0 0}
@media(max-width:600px){.project-navigation{gap:18px;padding-inline:20px}.project-navigation .adjacent-card h2{font-size:14px}.project-navigation .adjacent-label{font-size:12px}}

/* Compact fixed-size adjacent previews. */
.project-navigation{grid-template-columns:repeat(2,minmax(0,280px));justify-content:space-between;gap:24px}
.project-navigation .adjacent-card{width:100%;max-width:280px}
.project-navigation .adjacent-card h2{font-size:16px;margin-top:12px}
@media(max-width:600px){.project-navigation{grid-template-columns:repeat(2,minmax(0,280px));gap:18px}.project-navigation .adjacent-card h2{font-size:14px}}

/* Subtle boundaries around adjacent projects on detail pages. */
.detail-page .project-navigation{position:relative;margin-top:16px;padding-top:32px;padding-bottom:40px}
.detail-page .project-navigation::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;background:#303030}
.detail-page .work-footer{position:relative;padding-top:32px}
.detail-page .work-footer::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;background:#303030}
@media(max-width:600px){.detail-page .project-navigation::before{left:20px;right:20px}}

/* Smaller mobile titles in the Work grid. */
@media(max-width:760px){.project-grid .project-caption h2{font-size:11.2px}}
@media(max-width:480px){.project-grid .project-caption h2{font-size:12.8px}}

/* Muted portfolio captions, matching the reference tone. */
.project-grid .project-caption h2{color:#999999}

/* Brand-red project titles on detail pages. */
.detail-page .detail-heading h1{color:#E52622}

/* Same-origin page transitions carry the clicked preview into the full reel. */
@view-transition{navigation:auto}
.project-opening .project-media,.detail-page .project-player{view-transition-name:project-reel}
.detail-page .project-player.player-leaving{view-transition-name:none}
/* Expand, fade to black, hold for .5s, then fade in the new reel. */
@keyframes project-dissolve-out{from{opacity:1}to{opacity:0}}
@keyframes project-fade-in{from{opacity:0}to{opacity:1}}
::view-transition{background:#000}
::view-transition-group(project-reel){animation-duration:.7s;animation-timing-function:cubic-bezier(.65,0,.35,1)}
::view-transition-old(project-reel){animation:project-dissolve-out .4s ease .7s both;object-fit:cover;mix-blend-mode:normal;z-index:2}
::view-transition-new(project-reel){animation:project-fade-in .8s ease 1.6s both;object-fit:contain;mix-blend-mode:normal;z-index:1}
::view-transition-old(root){animation:project-dissolve-out .4s ease .7s both;z-index:2}
::view-transition-new(root){animation:project-fade-in .8s ease 1.6s both;z-index:1}
.project-player.player-entering{opacity:0;transition:opacity 1.1s ease}
.project-player.player-entering.player-visible{opacity:1}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .project-player.player-entering{transition:none}
}

/* Keep the full reel within the viewport without cropping its frame. */
.detail-page .project-player{width:100%;height:auto;max-height:calc(100svh - 20px);object-fit:contain}
@media(max-width:760px){.detail-page .project-player{max-height:calc(100svh - 90px)}}