/* Three original material studies, each with its own composition and motion. */
.illustration-scene{--art-scroll:0;position:relative;min-width:0;margin:0;background:#000;isolation:isolate}
.illustration-scene .art-canvas{position:relative;overflow:hidden;background:#000;isolation:isolate}
.illustration-scene .art-depth{position:absolute;inset:0;transform:translate3d(0,calc(var(--art-scroll)*22px),0)}
.illustration-scene .art-drift{position:relative;width:100%;height:100%;transform-origin:50% 50%;animation-play-state:paused}
.illustration-scene .art-drift img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;transform:none;filter:none;transition:none;max-height:none}
.illustration-scene .art-drift .art-glint{pointer-events:none;mix-blend-mode:screen;opacity:.3;filter:brightness(1.15);clip-path:polygon(-60% 0,-40% 0,-80% 100%,-100% 100%);animation:filament-light 13s cubic-bezier(.4,0,.2,1) infinite;animation-play-state:paused}
.illustration-scene figcaption{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0;padding:20px 0 0;border-top:1px solid #ffffff26;background:none;color:var(--muted);font-family:var(--label);font-size:.75rem;line-height:1.6;letter-spacing:.12em}
.illustration-scene figcaption>span{display:flex;align-items:center;gap:18px}
.illustration-scene figcaption b{color:var(--accent);font-weight:400}
.art-pause{display:inline-flex;align-items:center;justify-content:center;gap:10px;flex-shrink:0;min-height:44px;padding:8px 0 8px 12px;border:0;background:transparent;color:var(--ink);font-family:var(--body);font-size:.875rem;letter-spacing:0}
.art-pause[hidden]{display:none}
.art-pause:hover{color:var(--accent)}
.art-pause svg{width:16px;height:16px;flex-shrink:0}
.art-pause .icon-play{display:none}
.art-pause[aria-pressed=true] .icon-play{display:block}
.art-pause[aria-pressed=true] .icon-pause{display:none}
.illustration-scene.is-animating .art-drift,.illustration-scene.is-animating .art-glint{animation-play-state:running}

/* A full-width wing, followed by an asymmetric editorial caption. */
.sketch-section{display:block;min-height:0;padding:115px 6% 115px;overflow:hidden;background:#000}
.sketch-section .section-index{top:35px;font-size:.75rem}
.sketch-section .sketch-art{width:auto;height:auto;margin:0 -4vw;overflow:visible;mask-image:none;-webkit-mask-image:none}
.wing-scene .art-canvas{height:clamp(430px,51vw,830px);width:100%}
.wing-scene .art-drift{animation:wing-drift 15s ease-in-out infinite;animation-play-state:paused}
.wing-scene figcaption{margin:0 4vw}
.sketch-section .sketch-copy{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(240px,.7fr);gap:22px 9%;padding:65px 0 0;width:100%;margin:0;align-items:end}
.sketch-copy .eyebrow{grid-column:1/-1}
.sketch-copy h2{grid-row:2/4;margin:0;font-size:clamp(48px,6.4vw,100px);line-height:1.08}
.sketch-copy h2 em{padding-top:.08em}
.sketch-copy p{margin:0;max-width:30ch}
.sketch-copy .sketch-caption{margin:0;padding-top:20px;border-top:1px solid var(--gold-line);gap:16px;flex-wrap:wrap;align-self:start}

/* The flowing material study breaks out of the repeated two-column layout. */
.material.section{padding:105px 6% 115px;background:#000;border-color:var(--gold-line);overflow:clip}
.material-heading{grid-template-columns:minmax(160px,.45fr) minmax(0,1.55fr);align-items:start;gap:6%;margin-bottom:55px}
.material-heading h2{font-size:clamp(44px,5.6vw,88px);max-width:none}
.material-layout{display:block}
.material-visual.illustration-scene{position:relative;top:auto;overflow:visible;margin:0 -6vw;background:#000}
.strata-scene .art-canvas{height:clamp(440px,52vw,800px);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.strata-scene .art-depth{inset:-1%;transform:translate3d(calc(var(--art-scroll)*-26px),0,0)}
.strata-scene .art-drift{animation:strata-flow 23s ease-in-out infinite;animation-play-state:paused}
.strata-scene .art-drift img{object-fit:contain;object-position:center}
.strata-scene .art-glint{animation-duration:17s;animation-delay:2s;opacity:.2}
.strata-scene figcaption{margin:0 6vw}
.material .notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:65px;align-items:start}
.material .notes details{border-bottom:1px solid var(--line)}
.material .notes summary{font-size:clamp(21px,1.75vw,28px);align-items:flex-start;line-height:1.35;gap:12px;min-height:105px;padding:25px 0}
.material .notes .note-number{width:25px;padding-top:5px}
.material .notes .plus{padding-top:2px;flex-shrink:0}
.material .notes details p{padding:0 0 28px;font-size:1rem;line-height:1.85}

/* An open sculptural orbit gives the final statement a different silhouette. */
.closing{padding-top:75px}
.orbit-scene{margin:25px -4vw 0;perspective:1200px}
.orbit-scene .art-canvas{height:clamp(360px,40vw,660px)}
.orbit-scene .art-depth{transform:translate3d(0,calc(var(--art-scroll)*-22px),0)}
.orbit-scene .art-drift{animation:strata-flow 23s ease-in-out infinite;animation-play-state:paused}
.orbit-scene figcaption{margin:0 4vw}
.closing h2{margin-top:70px}

@keyframes wing-drift{0%,100%{transform:translate3d(0,6px,0) rotate(-1deg) scale(1.04)}50%{transform:translate3d(0,-10px,0) rotate(1deg) scale(1.08)}}
@keyframes strata-flow{0%,100%{transform:translate3d(-1.6%,0,0) scale(1.09)}50%{transform:translate3d(1.6%,-1%,0) scale(1.13)}}
@keyframes orbit-roll{0%,100%{transform:translate3d(0,9px,0) rotate(-3deg) scale(1.02)}50%{transform:translate3d(0,-10px,0) rotate(3deg) scale(1.075)}}
@keyframes filament-light{0%,14%{clip-path:polygon(-60% 0,-40% 0,-80% 100%,-100% 100%)}68%,100%{clip-path:polygon(140% 0,160% 0,120% 100%,100% 100%)}}
@media(max-width:1050px){
 .material-heading{grid-template-columns:1fr;gap:24px}
 .material .notes{gap:24px}.material .notes summary{font-size:22px;min-height:125px;gap:8px}
 .sketch-section .sketch-copy{grid-template-columns:1.3fr 1fr;gap:20px 6%}
}
@media(max-width:700px){
 .sketch-section{display:block;padding:95px 6% 80px}
 .sketch-section .section-index{top:28px;align-items:center;gap:16px;font-size:.75rem;letter-spacing:.06em}
 .section-index>span:first-child{max-width:23ch}
 .wing-scene .art-canvas{height:clamp(320px,86vw,520px)}
 .wing-scene .art-drift img{object-fit:contain}
 .illustration-scene .art-depth{transform:translate3d(0,calc(var(--art-scroll)*12px),0)}
 .illustration-scene figcaption{gap:12px;font-size:.75rem;letter-spacing:.07em;padding-top:12px}
 .illustration-scene figcaption>span{gap:12px}
 .sketch-section .sketch-copy{display:block;padding-top:38px}
 .sketch-copy h2{font-size:clamp(44px,10.5vw,72px);margin:22px 0 25px}
 .sketch-copy p{font-size:1.0625rem}.sketch-copy .sketch-caption{margin-top:30px}
 .material.section{padding:80px 6% 85px}
 .material-heading{margin-bottom:30px}
 .material-heading h2{font-size:clamp(36px,8.5vw,60px)}
 .strata-scene .art-canvas{height:clamp(360px,110vw,610px)}
 .material .notes{display:block;margin-top:40px}
 .material .notes summary{min-height:0;align-items:center;font-size:25px;padding:27px 0;gap:12px}
 .material .notes details+details{border-top:0}
 .material .notes .note-number,.material .notes .plus{padding-top:0}
 .material .notes details p{padding-left:37px;font-size:1.0625rem}
 .orbit-scene{margin-top:28px}.orbit-scene .art-canvas{height:clamp(300px,90vw,500px)}
 .orbit-scene .art-drift img{object-fit:contain}
 .closing h2{margin-top:45px}
}
@media(prefers-reduced-motion:reduce){
 .illustration-scene .art-depth{transform:none!important}
 .illustration-scene .art-drift{animation:none!important;transform:none!important}
 .illustration-scene .art-glint{display:none}
 .art-pause{display:none}
}
