/* Shared editorial styling. Section-specific desktop/mobile grids live in foundations-layout.css. */
.foundations-page{background:#171717;color:white;--sqs-site-gutter:4vw;--sqs-mobile-site-gutter:6vw;--sqs-site-max-width:1500px}
.foundation-section{position:relative;color:white;isolation:isolate;scroll-margin-top:30px}
.foundation-wrap{position:relative;padding:var(--section-padding)}
.foundation-section.hero{height:83vh;min-height:580px;display:flex;flex-direction:column;justify-content:flex-end}
.foundation-section.hero .foundation-wrap{padding:0 0 93px}
.foundation-backdrop{position:absolute;inset:0;z-index:-1}
.foundation-backdrop img{width:100%;height:100%;object-fit:cover}
.foundation-section.overline{border-top:10px solid white}
.foundation-section.content-padding .foundation-wrap{padding:65.1px 0 93px}
.foundation-section.hug .foundation-grid{--row-height-scaling-factor:0!important;grid-template-rows:repeat(auto-fit,minmax(24px,auto))!important}
.layout-block{min-width:0;min-height:0}
.layout-block-content{display:flex;flex-direction:column;height:100%;width:100%;padding:0}
.block-inner{width:100%;min-width:0}
.type-image .block-inner,.type-image .single-image{height:100%;width:100%}
.single-image{overflow:hidden}
.single-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--focal-point,50% 50%)}
.editorial-text{font:300 15.5px/1.5 var(--body)}
.editorial-text p{font:inherit;margin:15.5px 0;color:inherit}
.editorial-text>:first-child{margin-top:0;margin-bottom:0}
.editorial-text>:last-child{margin-bottom:0}
.editorial-text h1,.editorial-text h2,.editorial-text h3,.editorial-text h4{margin:0;hyphens:manual;overflow-wrap:break-word}
.editorial-text :is(h1,.former-h1){font:400 calc(4.92vw + 14px)/1.092 Montserrat,sans-serif;letter-spacing:3.1px}
.editorial-text h2{font:400 calc(1.08vw + 14px)/1.258 Montserrat,sans-serif;letter-spacing:3.1px}
.editorial-text h3{font:400 15.5px/1.3 Montserrat,sans-serif;letter-spacing:3.1px}
.editorial-text h4{font:400 11px/1.3156 Montserrat,sans-serif;letter-spacing:3.1px}
.editorial-text .accent{font-family:var(--serif);font-weight:600;letter-spacing:7px;text-transform:uppercase}
/* Banner words keep the shared type scale and tracking; only explicit soft breaks show a regular hyphen. */
#study-0 .editorial-text :is(h1,h2){hyphens:manual;-webkit-hyphenate-character:"-";hyphenate-character:"-";overflow-wrap:normal;word-break:normal}
.editorial-text .display-type{font-family:var(--serif);text-decoration:none}
.editorial-text strong{font-weight:600;letter-spacing:1px}
.editorial-text .small{font-size:11px;line-height:1.5}
.foundation-section[style*="rgb(68, 68, 68)"] h3{color:#8d8d8d}
.editorial-dash{width:24px;height:2px;background:white}
.editorial-gallery{display:grid;grid-template-columns:repeat(var(--columns),minmax(0,1fr));gap:var(--gallery-gap);width:100%}
.editorial-gallery figure{position:relative;margin:0;min-width:0}
.gallery-picture{position:relative;overflow:hidden}
.gallery-picture img{position:absolute;width:100%;height:100%;inset:0;object-fit:cover}
.gallery-title{font:600 10px/23.25px Montserrat,sans-serif;letter-spacing:3.1px;text-transform:uppercase;min-height:23.25px}
.gallery-description{font:300 10px/1.5 var(--body)}
.gallery-description p{margin:6px 0}
.d2-image-full-bleed .gallery-picture,.d2-image-inset .gallery-picture{height:900px;aspect-ratio:auto!important}
.d2-image-pattern-ls .gallery-picture{height:60vh;aspect-ratio:auto!important}
.d2-image-pattern-ls figure:nth-child(2) img{padding:93px 4vw 93px 0}
.motion-study{width:100%;position:relative;background:transparent}
.motion-study iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.credits .editorial-text p,.credits .editorial-text h3{font-size:13.175px}
.project-return{display:flex;justify-content:space-between;padding:50px 4vw;font:11px Montserrat,sans-serif;letter-spacing:2px}
@media(max-width:767px){
.foundation-section.hero{height:83svh;min-height:650px}
.foundation-section.hero .foundation-wrap{padding-bottom:46.5px}
.foundation-section.content-padding .foundation-wrap{padding:54.25px 0}
.editorial-text :is(h1,.former-h1){font-size:54.25px}
.editorial-text h2{font-size:24.8px}
.editorial-text h3{font-size:15.5px}
.foundation-section.section-gap-hide-mobile{max-height:24px;overflow:hidden}
.mobile-stack-1 .editorial-gallery{grid-template-columns:1fr}
.mobile-stack-2 .editorial-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
.mobile-carousel .editorial-gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px}
.mobile-carousel .editorial-gallery figure{flex:0 0 100%;scroll-snap-align:start}
.d2-image-full-bleed .gallery-picture,.d2-image-inset .gallery-picture,.d2-image-pattern-ls .gallery-picture{height:65svh}
.d2-image-pattern-ls figure:nth-child(2) img{padding:0}
.project-return{padding:35px 6vw;font-size:9px}
}
/* Image blocks fill their assigned grid cells without expanding the grid. */
.type-image{position:relative}
.type-image .single-image{position:absolute;inset:0}
.motion-study{margin-bottom:5.5px}
.d2-image-full-bleed .gallery-description,.d2-image-inset .gallery-description,.d2-image-pattern-ls .gallery-description{position:absolute;bottom:46.5px;left:4vw;right:4vw;z-index:1}
.foundation-section.credits h2{font-size:21.7px}
.foundation-backdrop{overflow:hidden;container-type:size}
.hero-loop{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(100cqw,177.7778cqh);height:max(56.25cqw,100cqh);border:0;pointer-events:none}
.editorial-text h4{text-transform:uppercase}
@media(max-width:767px){.foundation-section.hero .foundation-wrap{padding-bottom:93px}}
@media(max-width:767px){
.mobile-aspect-ratio-2-3 .gallery-picture{aspect-ratio:2/3!important}
.mobile-aspect-ratio-3-4 .gallery-picture{aspect-ratio:3/4!important}
.foundation-section.section-gap-hide-mobile{min-height:24px!important;height:24px}
}
.editorial-text :is(h1,h2,h3,h4):empty{min-height:1lh}

/* Native loops retain desktop compositions and allow independent mobile crops. */
.motion-study{background-size:cover;background-position:center}
.motion-study video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
video.hero-loop{inset:0;transform:none;width:100%;height:100%;object-fit:cover}
@media(max-width:767px){
  #study-0.foundation-section.hero{height:100svh;min-height:0!important;max-height:none;justify-content:flex-end}
  #study-0 .foundation-wrap{padding:calc(100px + env(safe-area-inset-top,0px)) max(6vw,env(safe-area-inset-right,0px)) max(32px,env(safe-area-inset-bottom,0px)) max(6vw,env(safe-area-inset-left,0px))}
  #study-0 .foundation-grid{display:flex;flex-direction:column;gap:16px;overflow:visible}
  #study-0 .type-spacer{display:none}
  #study-0 .editorial-text :is(h1,.former-h1){font-size:clamp(40px,12vw,72px);line-height:1.02;letter-spacing:2px}
  #study-0 .editorial-text h2{font-size:clamp(16px,4.5vw,25px);letter-spacing:3px}
  #study-0 .editorial-text h3{font-size:12px;line-height:1.5;letter-spacing:1px}
  #study-0 .editorial-text h4{font-size:9px;line-height:1.6;letter-spacing:1.5px}
  #study-0 .foundation-backdrop:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.65));pointer-events:none}
  .mobile-carousel .type-gallery{grid-column:1/-1!important;min-width:0;padding-inline:0}
  .mobile-carousel .editorial-gallery{gap:12px;padding-inline:6vw;scroll-padding-inline:6vw;overscroll-behavior-x:contain;scrollbar-width:none}
  .mobile-carousel .editorial-gallery::-webkit-scrollbar{display:none}
  .mobile-carousel .editorial-gallery figure{flex:0 0 100%;scroll-snap-align:center}
  .has-motion .foundation-grid{display:flex;flex-direction:column;gap:12px;padding-inline:0}
  .has-motion .type-spacer{display:none}
  .has-motion .motion-study{aspect-ratio:var(--mobile-ratio,3 / 4)!important}
  .motion-study video,video.hero-loop{object-position:var(--mobile-position,50% 50%)}
}

/* Shared editorial rhythm and media-relative caption baseline. */
.foundations-page{--caption-bottom:29px;--editorial-margin:max(4vw,calc((100% - 1500px)/2))}
.foundation-block-1-2{padding-top:10px}
.gallery-title{padding-bottom:8px}
.media-caption{position:absolute;z-index:2;bottom:var(--caption-bottom);left:var(--caption-inset,4vw);right:24px;font:300 11px/1.5 var(--body);pointer-events:none}
.media-caption p{margin:0;font:inherit}
.media-caption p:empty{display:none}
.d2-image-full-bleed .gallery-description{bottom:var(--caption-bottom);left:var(--caption-inset,4vw);right:24px;font-size:11px;line-height:1.5}
.d2-image-full-bleed .gallery-description p{margin:0}
#study-67 .foundation-wrap{padding-block:24px}
@media(min-width:768px){
.d2-image-pattern-ls figure:nth-child(2) .gallery-picture{display:grid;place-items:center}
.d2-image-pattern-ls figure:nth-child(2) img{position:static;width:calc(100% - 8vw);height:calc(100% - 186px);padding:0;object-fit:cover;object-position:center}
}
@media(max-width:767px){.foundations-page{--caption-bottom:22px}.media-caption{right:16px}.foundation-block-1-2{padding-top:8px}#study-67 .foundation-wrap{padding-block:20px}}

/* Right-edge bleed captions follow the outside page grid. */
@media(min-width:768px){
.d2-image-full-bleed .editorial-gallery figure:last-child:not(:first-child) .gallery-description{text-align:right;right:var(--caption-outside,4vw)}
#study-61,#study-63{height:60px;min-height:0!important}
#study-61 .foundation-wrap,#study-63 .foundation-wrap{padding:0;height:60px}
#study-61 .foundation-grid,#study-63 .foundation-grid{display:block;height:60px}
}

/* Inset mobile media keeps captions below; full-bleed media uses the shared overlay. */
@media(max-width:767px){
  .d2-image-full-bleed .gallery-description.is-inset-caption{position:static;inset:auto;text-align:left;font:300 10px/1.5 var(--body)}
  .d2-image-full-bleed .gallery-description.is-inset-caption p{margin:6px 0}
  .editorial-text.media-caption p.small{margin:0;font:inherit}
  .has-motion .type-text[hidden]{display:none}
}

/* Shared linked display-heading treatment, including chapter banners. */
.editorial-text a:has(.accent){display:block;color:#fff;transition:color .35s ease}
.editorial-text a .accent,.editorial-text a .arrow{color:inherit}
.editorial-text .pag-cta .arrow{display:block}
@media(hover:hover){.editorial-text a:has(.accent):hover{color:var(--paper)}}
.editorial-text a:has(.accent):focus-visible,.editorial-text a:has(.accent):active{color:var(--paper)}
@media(prefers-reduced-motion:reduce){.editorial-text a:has(.accent){transition:none}}

/* Paired studies stack on phones; carousels retain their swipe treatment. */
@media(max-width:767px){
 .mobile-stack-2:not(.mobile-carousel) .editorial-gallery{grid-template-columns:1fr}
 .gallery-picture[style*="--mobile-image-ratio"]{aspect-ratio:var(--mobile-image-ratio)!important}
 .gallery-picture[style*="--mobile-image-ratio"] img{object-position:var(--mobile-image-position,50% 50%)}
}

/* Give stacked studies a consistent vertical break, including tight desktop grids. */
@media(max-width:767px){
 .foundation-section:is(.mobile-stack-1,.mobile-stack-2):not(.mobile-carousel) .editorial-gallery{row-gap:24px}
}

@media(max-width:767px){.foundation-section.mobile-media-break{padding-top:24px}}

/* Explicitly flush media transitions retain no player baseline gap. */
.foundation-section.media-flush-end .motion-study{margin-bottom:0}

/* Reusable full-width galleries and carousels, independent of imported grids. */
.gallery-full-width .type-gallery,.project-carousel .type-gallery{grid-column:1/-1!important;min-width:0;padding-inline:0}
.project-carousel .editorial-gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-inline:4vw;scroll-padding-inline:4vw;overscroll-behavior-x:contain;scrollbar-width:none}
.project-carousel .editorial-gallery::-webkit-scrollbar{display:none}
.project-carousel .editorial-gallery figure{flex:0 0 100%;scroll-snap-align:center}
.project-carousel .block-inner{position:relative}
.carousel-controls{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 1vw;pointer-events:none}
.carousel-controls button{pointer-events:auto;min-width:44px;min-height:44px;display:grid;place-items:center;border:0;background:transparent;color:white;padding:10px;cursor:pointer;transition:opacity .2s}
.carousel-controls button:hover{opacity:.55}
.carousel-controls button:focus-visible{outline:1px solid white;outline-offset:3px}
.hero-embed{position:absolute;left:50%;top:50%;width:max(100cqw,calc(100cqh * var(--embed-ratio)));height:max(100cqh,calc(100cqw / var(--embed-ratio)));transform:translate(-50%,-50%);border:0;pointer-events:none}
@media(max-width:767px){.project-carousel .editorial-gallery{padding-inline:6vw;scroll-padding-inline:6vw}.carousel-controls{padding-inline:0}}
@media(prefers-reduced-motion:reduce){.hero-embed{display:none}}

.carousel-controls button::before{content:"";display:block;width:8px;height:10px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.carousel-controls button[data-direction="previous"]::before{transform:rotate(180deg)}

/* Local stills remain visible until Vimeo plays; players add no color matte. */
.embed-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.has-embed-poster iframe{opacity:0;transition:opacity .25s ease}
.has-embed-poster.is-embed-playing iframe{opacity:1}
@media(prefers-reduced-motion:reduce){.has-embed-poster iframe{transition:none}}

/* Always keep the local still visible until native playback has actually begun. */
.motion-study video,video.hero-loop{opacity:0}
.motion-study video.is-playing,video.hero-loop.is-playing{opacity:1}

video.gif-loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--focal-point,50% 50%);opacity:0;pointer-events:none}
video.gif-loop.is-playing{opacity:1}
@media(max-width:767px){video.gif-loop{object-position:var(--mobile-image-position,50% 50%)}}
.carousel-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

.motion-study.native-film video{opacity:1;object-fit:contain}

.carousel-thumbnails{display:flex;gap:10px;overflow-x:auto;max-width:100%;padding:16px 4vw;box-sizing:border-box;scrollbar-width:thin}
.carousel-thumbnails[hidden]{display:none}
.carousel-thumbnails button{flex:0 0 120px;height:76px;padding:3px;border:1px solid transparent;background:transparent;opacity:.55;cursor:pointer;transition:opacity .2s,border-color .2s}
.carousel-thumbnails img{width:100%;height:100%;object-fit:cover;display:block}
.carousel-thumbnails button:hover,.carousel-thumbnails button[aria-current="true"]{opacity:1;border-color:#d8d8d8}
.carousel-thumbnails button:focus-visible{outline:2px solid #d8d8d8;outline-offset:2px}
.has-carousel-thumbnails>.carousel-controls{bottom:108px}
@media(max-width:767px){.carousel-thumbnails{padding-inline:6vw}.carousel-thumbnails button{flex-basis:88px;height:60px}.has-carousel-thumbnails>.carousel-controls{bottom:92px}}

/* Shared closing credit hierarchy, matching Foundations and Arc. */
.credits .editorial-text h4{text-transform:uppercase}
/* Keep banner artwork in a positive stacking layer for mobile compositors. */
.foundation-backdrop{z-index:0}
.foundation-wrap{z-index:1}

.foundation-backdrop>.banner-still{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;z-index:2;pointer-events:none;opacity:1;visibility:visible}
.foundation-backdrop:has(video.is-playing)>.banner-still,.foundation-backdrop.is-embed-playing>.banner-still{opacity:0;visibility:hidden}
#study-0 .foundation-backdrop:after{z-index:3}
/* Keep video visibility eligible for iOS autoplay; opacity and the still layer handle concealment. */

/* Explicit geometry avoids intrinsic-height stills above a full-height preview on Safari. */
.foundation-backdrop>.banner-still>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}