/* work-editorial-preview-v1: media-first layout, scoped to the Featured Work page. */
main.work-editorial .portfolio{
 width:min(1360px,calc(100% - var(--voyage-gutter)*2));
 max-width:1360px;
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:72px 40px;
 margin:0 auto;
 padding:24px 0 88px;
}
main.work-editorial .portfolio .project:nth-child(n){
 grid-column:auto;
 display:flex;
 flex-direction:column;
 align-items:stretch;
 align-content:normal;
 grid-template-columns:none;
 border:0;
 background:transparent;
 overflow:visible;
 margin:0;
 min-width:0;
}
main.work-editorial .portfolio .project-media{
 width:100%;
 min-width:0;
 background:#101216;
 overflow:hidden;
 border-radius:2px;
}
main.work-editorial .portfolio .project-media video{
 display:block;width:100%;height:auto;aspect-ratio:16/9;
 object-fit:contain;background:#101216;
}
main.work-editorial .portfolio .project-media>.voyage-zoom-window{
 aspect-ratio:16/9;
}
main.work-editorial .portfolio .project-media>.voyage-zoom-window>video{height:100%}
main.work-editorial .portfolio .project-copy{
 position:relative;
 width:100%;
 max-width:none;
 padding:24px 0 0;
}
main.work-editorial .portfolio .project-copy .eyebrow{
 margin:0 48px 10px 0;
 color:#044fbf;
}
main.work-editorial .portfolio .project-copy h2{margin:0 0 14px}
main.work-editorial .portfolio .project-copy>p:last-child{
 margin:0;
 max-width:66ch;
 color:#444b55;
}
main.work-editorial .portfolio .project-index{
 position:absolute;right:0;top:24px;
 color:#6b7280;font-size:12px;line-height:1.5;
 font-variant-numeric:tabular-nums;
}
main.work-editorial .portfolio .project.project-lead:nth-child(n){
 grid-column:1/-1;
 display:grid;
 grid-template-columns:minmax(0,2fr) minmax(270px,1fr);
 gap:36px;
 align-items:center;
 padding:0 0 40px;
 border-bottom:1px solid #dce1e7;
}
main.work-editorial .portfolio .project.project-lead .project-copy{padding:0}
main.work-editorial .portfolio .project.project-lead .project-index{top:0}
main.work-editorial .portfolio .project.project-lead .project-copy h2{
 font-size:clamp(28px,2.7vw,36px)!important;
 line-height:1.2!important;
 max-width:18ch;
 margin-bottom:20px;
}
main.work-editorial .portfolio .project.project-photo:nth-child(n){
 grid-column:1/-1;
 display:grid;
 grid-template-columns:minmax(0,2fr) minmax(270px,1fr);
 gap:36px;align-items:center;
 padding-block:40px;
 border-block:1px solid #dce1e7;
}
main.work-editorial .portfolio .project-photo .project-media{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;background:transparent;
}
main.work-editorial .portfolio .project-photo .project-media>.voyage-zoom-window{aspect-ratio:1/1}
main.work-editorial .portfolio .project-photo .project-media img{
 display:block;width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;
}
main.work-editorial .portfolio .project-photo .project-copy{padding:0}
main.work-editorial .portfolio .project-photo .project-index{top:0}
main.work-editorial .portfolio .project-media :is(video,a):focus-visible{
 outline:3px solid #347ce2;outline-offset:-3px;
}
@media(max-width:1000px){
 main.work-editorial .portfolio{gap:56px 28px}
 main.work-editorial .portfolio .project.project-lead:nth-child(n),
 main.work-editorial .portfolio .project.project-photo:nth-child(n){
  grid-template-columns:minmax(0,1fr);gap:24px;
 }
 main.work-editorial .portfolio .project.project-lead .project-copy,
 main.work-editorial .portfolio .project-photo .project-copy{padding:0}
 main.work-editorial .portfolio .project.project-lead .project-copy>p:last-child,
 main.work-editorial .portfolio .project-photo .project-copy>p:last-child{max-width:80ch}
}
@media(max-width:700px){
 main.work-editorial .portfolio{
  grid-template-columns:minmax(0,1fr);gap:40px;padding:12px 0 56px;
 }
 main.work-editorial .portfolio .project-copy{padding-top:20px}
 main.work-editorial .portfolio .project-index{top:20px}
 main.work-editorial .portfolio .project.project-lead:nth-child(n){padding-bottom:32px}
 main.work-editorial .portfolio .project.project-photo:nth-child(n){padding-block:32px}
 main.work-editorial .portfolio .project-photo .project-media{gap:8px}
 main.work-editorial .portfolio .project.project-lead .project-copy h2{font-size:28px!important}
}

/* work-dynamic-preview-v2: an asymmetric film gallery with progressive play controls. */
main.work-dynamic{background:#fff}
main.work-dynamic>.work-intro{
 background:#f3f4f6;color:#11151b;min-height:0;padding:64px 0 58px;
}
main.work-dynamic>.work-intro>.wrap{
 display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
 gap:64px;align-items:center;
 width:min(1360px,calc(100% - var(--voyage-gutter)*2));max-width:1360px;
}
main.work-dynamic .work-kicker{
 font-family:"Voyage Lexend",Arial,sans-serif!important;
 font-size:11px!important;letter-spacing:.13em!important;
 line-height:1.5!important;color:#475163;margin:0 0 22px;
}
main.work-dynamic>.work-intro .work-intro-copy h1{
 font-size:clamp(76px,8.3vw,120px)!important;
 line-height:.92!important;letter-spacing:-.055em!important;
 max-inline-size:none;max-width:none;margin:0 0 28px;
}
main.work-dynamic>.work-intro .work-intro-copy h1 span{
 color:#044fbf;font-style:italic!important;
}
main.work-dynamic>.work-intro .work-intro-description{
 font-family:"Voyage Lexend Intro","Voyage Lexend",Arial,sans-serif!important;
 font-weight:300!important;font-size:18px!important;line-height:1.7!important;
 max-width:37ch;margin:0 0 28px;
}
main.work-dynamic .work-explore{
 display:inline-flex;align-items:center;gap:28px;
 min-height:44px;text-decoration:none;border-bottom:1px solid #aeb6c2;
 font-size:13px;
}
main.work-dynamic .work-explore span{color:#044fbf;font-size:22px}
main.work-dynamic .work-intro-image{margin:0;min-width:0}
main.work-dynamic .work-intro-image img{
 display:block;width:100%;aspect-ratio:5/4;object-fit:cover;object-position:68% center;
}
main.work-dynamic .work-intro-image figcaption{
 display:flex;justify-content:space-between;gap:16px;
 padding-top:14px;font-size:11px;color:#566071;
}

main.work-dynamic .portfolio{
 grid-template-columns:repeat(12,minmax(0,1fr));
 gap:88px 40px;padding:48px 0 96px;
 scroll-margin-top:190px;
}
main.work-dynamic .portfolio .project:nth-child(n){
 grid-column:span 6;margin:0;
}
main.work-dynamic .portfolio .project:nth-child(2),
main.work-dynamic .portfolio .project:nth-child(5),
main.work-dynamic .portfolio .project:nth-child(7),
main.work-dynamic .portfolio .project:nth-child(11),
main.work-dynamic .portfolio .project:nth-child(13){grid-column:span 7}
main.work-dynamic .portfolio .project:nth-child(3),
main.work-dynamic .portfolio .project:nth-child(4),
main.work-dynamic .portfolio .project:nth-child(8),
main.work-dynamic .portfolio .project:nth-child(10),
main.work-dynamic .portfolio .project:nth-child(14){grid-column:span 5}
main.work-dynamic .portfolio .project:nth-child(3),
main.work-dynamic .portfolio .project:nth-child(5),
main.work-dynamic .portfolio .project:nth-child(8),
main.work-dynamic .portfolio .project:nth-child(11),
main.work-dynamic .portfolio .project:nth-child(14){margin-top:88px}
main.work-dynamic .portfolio .project.project-lead:nth-child(n),
main.work-dynamic .portfolio .project.project-photo:nth-child(n){
 grid-column:1/-1;display:block;margin:0;padding:0;border:0;
}
main.work-dynamic .portfolio .project-copy{
 padding:22px 0 0;border-top:0;
}
main.work-dynamic .portfolio .project .project-copy h2{
 font-size:clamp(24px,2.2vw,30px)!important;line-height:1.2!important;
 max-width:24ch;margin:0 0 14px;
}
main.work-dynamic .portfolio .project .project-copy>p:last-child{
 color:#4a5260;max-width:64ch;
}
main.work-dynamic .portfolio .project-copy .eyebrow{font-size:11px!important;letter-spacing:.06em!important}
main.work-dynamic .portfolio .project-index{top:22px;font-size:11px;color:#626d7c}
main.work-dynamic .portfolio .project-media{border-radius:0}
main.work-dynamic .portfolio .film-frame{position:relative;isolation:isolate;background:#101216}
main.work-dynamic .portfolio .film-frame::after{
 content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
 background:linear-gradient(180deg,#00000024 0%,transparent 30%,#00000022 65%,#000000b8);
 opacity:0;transition:opacity .2s ease;
}
main.work-dynamic .portfolio .film-frame.film-ready::after{opacity:1}
main.work-dynamic .portfolio .film-frame.has-started::after{opacity:0}
main.work-dynamic .film-play{
 position:absolute;inset:0;z-index:3;display:flex;
 flex-direction:column;align-items:center;justify-content:center;gap:12px;
 border:0;background:transparent;color:white;cursor:pointer;padding:16px;
 font-family:"Voyage Lexend",Arial,sans-serif;font-size:11px;
}
main.work-dynamic .film-play[hidden],main.work-dynamic .film-status[hidden]{display:none}
main.work-dynamic .film-play-circle{
 display:flex;align-items:center;justify-content:center;
 width:70px;height:70px;border:1px solid #ffffffb3;border-radius:50%;
 background:#1218205c;backdrop-filter:blur(4px);transition:transform .2s ease,background .2s ease;
}
main.work-dynamic .film-play svg{width:24px;height:24px;fill:currentColor;margin-left:3px}
main.work-dynamic .film-play-label{letter-spacing:.1em;text-transform:uppercase;text-shadow:0 1px 6px #000}
main.work-dynamic .film-play:focus-visible{outline:3px solid #75a8ff;outline-offset:-5px}
main.work-dynamic .film-caption{
 position:absolute;left:36px;right:160px;bottom:32px;z-index:2;color:#fff;
 pointer-events:none;transition:opacity .15s ease;
}
main.work-dynamic .portfolio .project.project-lead .film-caption h2{
 color:#fff;font-size:clamp(38px,4.7vw,68px)!important;
 line-height:1.05!important;max-width:none;margin:0;
}
main.work-dynamic .portfolio .project.project-lead .film-caption .eyebrow{
 color:#fff;font-size:11px!important;letter-spacing:.12em!important;
 margin:0 0 12px;
}
main.work-dynamic .film-number{
 position:absolute;top:24px;left:36px;z-index:2;
 color:#fff;font-size:10px;letter-spacing:.1em;pointer-events:none;
 text-shadow:0 1px 6px #000;
}
main.work-dynamic .film-frame.has-started :is(.film-caption,.film-number){opacity:0}
main.work-dynamic .film-status{
 position:absolute;bottom:0;left:0;right:0;z-index:4;
 margin:0;padding:12px 16px;background:#111;color:white;font-size:13px!important;
}
main.work-dynamic .portfolio .project.project-lead .project-copy{
 display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:36px;
 padding:24px 0 0;border-bottom:1px solid #dce1e7;padding-bottom:32px;
}
main.work-dynamic .portfolio .project.project-lead .project-index{
 position:static;display:block;padding-top:3px;
}
main.work-dynamic .portfolio .project.project-lead .project-index::after{
 content:" / PROJECT NOTES";margin-left:8px;letter-spacing:.08em;
}
main.work-dynamic .portfolio .project-photo .project-media{gap:20px}
main.work-dynamic .portfolio .project-photo .project-media>.voyage-zoom-window,
main.work-dynamic .portfolio .project-photo .project-media img{aspect-ratio:4/3;background:#f4f5f6}
main.work-dynamic .portfolio .project-photo .project-media img{object-fit:contain}
main.work-dynamic .portfolio .project-photo .project-copy{
 display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:0 36px;padding-top:24px;
}
main.work-dynamic .portfolio .project-photo .project-copy>.eyebrow,
main.work-dynamic .portfolio .project-photo .project-copy>h2{grid-column:1}
main.work-dynamic .portfolio .project-photo .project-copy>p:last-child{grid-column:2;grid-row:1/span 2}
main.work-dynamic .portfolio .project-photo .project-index{display:none}
main.work-dynamic .work-closing{background:#f3f4f6;padding:72px 0}
main.work-dynamic .work-closing>.wrap{max-width:1360px;width:min(1360px,calc(100% - var(--voyage-gutter)*2))}
main.work-dynamic .work-closing .work-kicker{margin-bottom:16px}
main.work-dynamic .work-closing h2{font-size:clamp(32px,4vw,52px)!important;max-width:22ch;margin:0 0 28px}
main.work-dynamic .work-closing .button{gap:32px;min-height:52px}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 main.work-dynamic .film-play:hover .film-play-circle{transform:scale(1.08);background:#044fbfcc}
}
@media(max-width:1000px){
 main.work-dynamic>.work-intro>.wrap{gap:32px}
 main.work-dynamic .portfolio{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 28px}
 main.work-dynamic .portfolio .project:nth-child(n){grid-column:auto;margin-top:0}
 main.work-dynamic .portfolio .project.project-lead:nth-child(n),
 main.work-dynamic .portfolio .project.project-photo:nth-child(n){grid-column:1/-1}
 main.work-dynamic .film-caption{left:24px;bottom:24px}
 main.work-dynamic .film-number{left:24px}
}

@media(max-width:700px){
 main.work-dynamic>.work-intro{padding:40px 0 32px}
 main.work-dynamic>.work-intro>.wrap{grid-template-columns:minmax(0,1fr);gap:32px}
 main.work-dynamic>.work-intro .work-intro-copy h1{font-size:76px!important;margin-bottom:22px}
 main.work-dynamic>.work-intro .work-intro-description{font-size:16px!important;max-width:40ch;margin-bottom:16px}
 main.work-dynamic .work-kicker{margin-bottom:18px}
 main.work-dynamic .work-intro-image img{aspect-ratio:16/9;object-position:center}
 main.work-dynamic .work-intro-image figcaption{font-size:10px}
 
 
 main.work-dynamic .portfolio{grid-template-columns:minmax(0,1fr);gap:44px;padding:28px 0 56px;scroll-margin-top:154px}
 main.work-dynamic .portfolio .project.project-lead .project-copy,
 main.work-dynamic .portfolio .project-photo .project-copy{display:block;padding-top:20px}
 main.work-dynamic .portfolio .project.project-lead .project-copy{padding-bottom:24px}
 main.work-dynamic .portfolio .project.project-lead .project-index{margin-bottom:14px}
 main.work-dynamic .portfolio .project .project-copy h2{font-size:24px!important}
 main.work-dynamic .film-play-circle{width:54px;height:54px}
 main.work-dynamic .film-play svg{width:20px;height:20px}
 main.work-dynamic .film-play-label{font-size:9px}
 main.work-dynamic .film-caption{left:16px;bottom:16px;right:90px}
 main.work-dynamic .portfolio .project.project-lead .film-caption h2{font-size:clamp(24px,6vw,38px)!important;max-width:16ch}
 main.work-dynamic .portfolio .project.project-lead .film-caption .eyebrow{font-size:9px!important;margin-bottom:6px}
 main.work-dynamic .film-number{left:16px;top:14px;font-size:8px}
 main.work-dynamic .project-lead .film-play{align-items:center;justify-content:center;padding:16px}
 main.work-dynamic .project-lead .film-play-label{display:none}
 main.work-dynamic .portfolio .project-photo .project-media{gap:8px}
 main.work-dynamic .portfolio .project-photo .project-copy>.eyebrow{margin-bottom:10px}
 main.work-dynamic .work-closing{padding:48px 0}
}
@media(prefers-reduced-motion:reduce){
 main.work-dynamic :is(.film-play-circle,.film-caption,.film-frame::after){transition:none}
}

/* Keep the category introduction's approved light weight in the new hero structure. */
main.work-dynamic>.work-intro .work-intro-copy .work-intro-description{
 font-family:"Voyage Lexend Intro","Voyage Lexend",Arial,sans-serif!important;
 font-weight:300!important;font-size:18px!important;
}
main.work-dynamic>.work-intro .work-intro-copy .work-kicker,
main.work-dynamic .work-closing>.wrap>.work-kicker{
 font-size:11px!important;letter-spacing:.13em!important;
}
@media(max-width:700px){
 main.work-dynamic>.work-intro .work-intro-copy .work-intro-description{font-size:16px!important}
}

/* featured-project-cta-match-v2: use the other Work categories' closing treatment. */
main.work-dynamic>.category-cta{
 padding:var(--voyage-section-space) 24px;
 text-align:center;background:#050505;color:#fff;
}
main.work-dynamic>.category-cta h2{margin:0 0 32px}
@media(max-width:700px){main.work-dynamic>.category-cta h2{margin-bottom:24px}}

/* work-tabs-restored-v1: use the shared category navigation styling. */

/* work-video-crop-v1: crop embedded bars while retaining native player controls. */
main.work-dynamic .portfolio .film-frame{aspect-ratio:var(--film-aspect,16/9)}
main.work-dynamic .portfolio .film-frame.film-letterboxed{--film-aspect:40/17}
main.work-dynamic .portfolio .film-frame>.voyage-zoom-window{
 aspect-ratio:var(--film-aspect,16/9)!important;
}
main.work-dynamic .portfolio .film-frame video{
 aspect-ratio:var(--film-aspect,16/9);
 height:100%;
 object-fit:cover;
 object-position:center;
}

/* Center the triangle artwork and reserve project labels for runtime. */
main.work-dynamic .film-play svg{display:block;margin-left:0;flex-shrink:0}
main.work-dynamic .portfolio .project.project-lead .project-index.video-runtime::after{content:none}

/* Center every mobile play circle independently of its caption. */
@media(max-width:700px){
 main.work-dynamic .film-play .film-play-circle{position:absolute;inset:0;margin:auto}
 main.work-dynamic .film-play-label{
  position:absolute;top:calc(50% + 39px);left:0;right:0;text-align:center;
 }
}

/* Keep the two featured lead videos fixed while retaining the blue perimeter and glow. */
main.work-dynamic .portfolio .film-frame.video-hover-fixed:hover,
main.work-dynamic .portfolio .film-frame.video-hover-fixed video{
 transform:none!important;
}
