/* One photography chapter: a clear entrance, then a continuous project sequence. */
.stills-section{--stills-muted:#a4a499;background:#10110f;color:var(--cream);padding:0;position:relative}
.stills-section a{color:inherit}
.in-stills .site-header{mix-blend-mode:difference;background:transparent;color:#fff}
.stills-intro{height:84svh;min-height:420px;position:relative}
.stills-landing{height:100%;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:80px 5vw 100px}
.stills-intro h2{position:relative;margin:0;text-align:center;font:600 clamp(80px,23vw,400px)/.85 Integral,Arial,sans-serif;letter-spacing:-.055em;color:var(--cream)}
.stills-title-mask{display:block;overflow:hidden;white-space:nowrap;padding:.16em .04em .12em;margin:-.16em -.04em -.12em}
.stills-title-letter{display:inline-block}
.stills-has-motion .stills-title-letter{transform:translate3d(0,135%,0);opacity:0}
/* The crest travels across the word: each letter overshoots, then lands. */
.stills-has-motion .is-stills-title-visible .stills-title-letter{transform:translate3d(0,0,0);opacity:1;transition:transform 1.05s cubic-bezier(.34,1.56,.64,1),opacity .18s ease-out;transition-delay:calc(var(--letter-order)*85ms)}
.stills-chapter-cue{position:absolute;bottom:48px;left:calc(50% - 22px);width:44px;height:44px;display:grid;place-items:center;font:400 28px/1 DM,Arial,sans-serif;color:var(--stills-muted)}
.stills-projects{padding:0 var(--gutter) 130px;scroll-margin-top:90px}
.stills-section [hidden]{display:none!important}
.stills-filters{position:sticky;top:76px;z-index:3;display:flex;justify-content:flex-end;gap:12px;width:max-content;max-width:100%;margin:0 3vw 54px auto;padding:8px;background:transparent;mix-blend-mode:difference}
.stills-has-motion .stills-filters{opacity:var(--filter-reveal,0);transform:translate3d(0,calc(42px * (1 - var(--filter-reveal,0))),0);transition:opacity .65s ease-out}
.stills-has-motion .stills-filters:focus-within{opacity:1;transform:translate3d(0,0,0);transition:none}
.stills-filters button{position:relative;min-width:44px;min-height:44px;padding:12px;font:400 12px/1.2 DM,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#fff;touch-action:manipulation;transition:color .2s}
.stills-filters button::after{content:"";position:absolute;inset:5px;pointer-events:none;opacity:0;background:linear-gradient(currentColor,currentColor) left top/6px 1px no-repeat,linear-gradient(currentColor,currentColor) left top/1px 6px no-repeat,linear-gradient(currentColor,currentColor) right top/6px 1px no-repeat,linear-gradient(currentColor,currentColor) right top/1px 6px no-repeat,linear-gradient(currentColor,currentColor) left bottom/6px 1px no-repeat,linear-gradient(currentColor,currentColor) left bottom/1px 6px no-repeat,linear-gradient(currentColor,currentColor) right bottom/6px 1px no-repeat,linear-gradient(currentColor,currentColor) right bottom/1px 6px no-repeat;transition:opacity .2s}
.stills-filters button[aria-pressed="true"]{color:#fff}
.stills-filters button[aria-pressed="true"]::after{opacity:1}
.stills-filters button:focus-visible::after{opacity:1}
.stills-filters button:focus-visible{outline-offset:0}
/* Project navigation and categories share the top of the photography chapter. */
.stills-toolbar{position:sticky;top:76px;z-index:3;display:flex;align-items:center;justify-content:flex-end;gap:24px;margin:0 3vw 54px;mix-blend-mode:difference}
.stills-toolbar .stills-filters{position:static;margin:0;mix-blend-mode:normal}
.project-index-trigger{display:flex;align-items:center;gap:10px;min-width:44px;min-height:44px;padding:0 6px;flex:none;order:1;color:#fff;touch-action:manipulation}
.project-index-label{font:400 10px/1.2 DM,Arial,sans-serif;letter-spacing:.09em;white-space:nowrap}
.stills-has-motion .project-index-trigger{opacity:var(--filter-reveal,0);transform:translate3d(0,calc(42px * (1 - var(--filter-reveal,0))),0);transition:opacity .65s ease-out}
.stills-has-motion .project-index-trigger:focus-visible{opacity:1;transform:none;transition:none}
.project-index-trigger:hover .film-strip-icon i{transform:translateY(0)}
.stills-project-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:5vw;row-gap:130px;align-items:start;padding:0 3vw 60px}
.stills-project-card{display:block;grid-column:1 / span 5;min-width:0;transform:translate3d(0,var(--project-travel,0px),0)}
.stills-project-card.is-offset,.stills-page .stills-project-card:nth-child(even){grid-column:8 / span 5;margin-top:140px}
.stills-project-card.is-lead{grid-column:2 / span 10;margin:0 0 30px}
.stills-project-card.is-wide{grid-column:1 / -1;margin:0;max-width:none}
.stills-project-grid.is-filtered .stills-project-card{grid-column:1 / span 5;margin:0}
.stills-project-grid.is-filtered .stills-project-card.is-filter-offset{grid-column:8 / span 5;margin-top:140px}
.stills-project-grid.is-filtered .stills-project-card.is-wide{grid-column:1 / -1}
.project-image{position:relative;display:block;overflow:visible;transform:scale(var(--project-scale,1));transform-origin:center}
.project-image-clip{display:block;overflow:hidden;background:#22231f}
.stills-project-card.is-in-view,.stills-project-card.is-in-view .project-image{will-change:transform}
.project-image img{display:block;width:100%;height:auto;transition:transform 1s cubic-bezier(.22,1,.36,1)}
/* Cap the whole frame, so the natural ratio and exterior brackets stay together. */
#stills .project-image{--project-max-height:min(60svh,calc(100svh - 230px));width:min(100%,calc(var(--project-max-height) * var(--project-aspect,1)))}
#stills .stills-project-card.is-lead .project-image{margin-inline:auto}
.project-image::after{content:"";position:absolute;inset:-4px;z-index:1;pointer-events:none;opacity:0;color:var(--cream);background:linear-gradient(currentColor,currentColor) left top/20px 1px no-repeat,linear-gradient(currentColor,currentColor) left top/1px 20px no-repeat,linear-gradient(currentColor,currentColor) right top/20px 1px no-repeat,linear-gradient(currentColor,currentColor) right top/1px 20px no-repeat,linear-gradient(currentColor,currentColor) left bottom/20px 1px no-repeat,linear-gradient(currentColor,currentColor) left bottom/1px 20px no-repeat,linear-gradient(currentColor,currentColor) right bottom/20px 1px no-repeat,linear-gradient(currentColor,currentColor) right bottom/1px 20px no-repeat;transition:opacity .3s ease,inset .45s cubic-bezier(.22,1,.36,1)}
.stills-project-card:focus-visible .project-image::after{inset:-12px;opacity:1}
.project-meta{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:32px 0 10px;font:400 9px/1.4 DM,Arial,sans-serif;letter-spacing:.075em;text-transform:uppercase;color:var(--stills-muted)}
.project-title{display:block;margin:0;font:normal 650 clamp(28px,3.4vw,52px)/1.05 Unbounded,Arial,sans-serif;letter-spacing:-.055em;text-transform:uppercase;text-wrap:balance;overflow-wrap:anywhere;font-synthesis:none}
.project-word{display:inline-block;overflow:hidden;vertical-align:top;padding:.13em .08em .2em;margin:-.13em -.08em -.2em}
.project-word-inner{display:inline-block;vertical-align:top}
.stills-has-motion .project-word-inner{transform:translate3d(0,125%,0);transition:transform .85s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--word-order)*65ms)}
.stills-has-motion .is-title-visible .project-word-inner,.stills-has-motion .stills-project-card:focus-visible .project-word-inner{transform:translate3d(0,0,0)}
.project-arrow{-webkit-text-fill-color:currentColor;display:inline-block;font:400 .48em/1 DM,Arial,sans-serif;vertical-align:middle;margin-left:10px;transition:transform .35s}
.stills-project-card.is-lead .project-title,.stills-project-card.is-wide .project-title{font-size:clamp(46px,6vw,88px)}
.stills-collection-preview{display:grid;grid-template-columns:.78fr 1.22fr;gap:7vw;align-items:center}
.stills-project-card:focus-visible{outline:1px solid var(--cream);outline-offset:12px}
.stills-index-link{display:flex;justify-content:space-between;align-items:center;gap:30px;margin:50px 3vw 0;padding:36px 0;border-top:1px solid #e9e5d840;border-bottom:1px solid #e9e5d840}
.stills-index-link .project-title{font-size:clamp(34px,4vw,64px)}
/* Main-page photography titles share the film titles' typography. */
#stills .stills-project-card .project-title{font:normal 650 clamp(28px,3.4vw,52px)/1.05 Unbounded,Arial,sans-serif;letter-spacing:-.055em;text-transform:uppercase;text-wrap:balance}
#stills .stills-project-card.is-lead .project-title,#stills .stills-project-card.is-wide .project-title{font-size:clamp(36px,4.9vw,80px)}
@media(min-width:761px){
 #stills .stills-project-grid{row-gap:64px}
 #stills .stills-project-grid:not(.is-filtered) .stills-project-card.is-offset,#stills .stills-project-grid.is-filtered .stills-project-card.is-filter-offset{margin-top:96px}
 #stills .stills-project-card.is-lead .project-image{transform-origin:center top}
}
@media(hover:hover){.stills-filters button:hover{color:#fff}.stills-filters button:hover::after{opacity:1}.stills-project-card:hover .project-image::after{inset:-12px;opacity:1}.stills-project-card:hover .project-image img{transform:scale(1.02)}}
@media(max-width:760px){
 .stills-intro{height:clamp(250px,40svh,340px);min-height:0}
 .stills-landing{padding:66px 6vw 56px}
 .stills-intro h2{font-size:23vw;letter-spacing:-.045em}
 .stills-chapter-cue{bottom:18px;font-size:25px}
 .stills-projects{padding:0 6vw 75px;scroll-margin-top:90px}
 .stills-filters{top:66px;gap:1px;padding:4px 0;margin:0 0 24px auto}
 .stills-filters button{padding:12px 10px;font-size:10px;letter-spacing:.04em}
 .stills-toolbar{top:66px;gap:4px;flex-direction:column;align-items:flex-end;margin:0 0 24px}
 .stills-toolbar .stills-filters{margin:0;max-width:100%;padding:0}
 .project-index-trigger{order:0}
 .project-index-label{font-size:9px}
 .stills-project-grid{display:block;padding:0}
 .stills-project-card{width:84%;margin:0 0 80px}
 .stills-project-card.is-offset,.stills-page .stills-project-card:nth-child(even){margin:0 0 80px auto}
 .stills-project-card.is-lead{width:100%;margin:0 0 80px}
 .stills-project-card.is-wide{width:100%;margin:0 0 80px}
 .stills-project-grid.is-filtered .stills-project-card{width:84%;margin:0 0 80px}
 .stills-project-grid.is-filtered .stills-project-card.is-filter-offset{margin:0 0 80px auto}
 .stills-project-grid.is-filtered .stills-project-card.is-wide{width:100%}
 #stills .stills-project-grid .stills-project-card{margin-inline:auto;text-align:center}
 #stills .stills-project-card .project-image{margin-inline:auto}
 #stills .stills-project-card .project-meta{justify-content:center}
 .stills-collection-preview{gap:5vw}
 .project-title{font-size:clamp(24px,7.8vw,35px)}
 .project-meta{margin-top:24px;font-size:8px}
 .stills-project-card.is-lead .project-title,.stills-project-card.is-wide .project-title{font-size:clamp(33px,10vw,44px)}
 .stills-index-link{margin:48px 0 0;padding:28px 0;gap:15px}
 #stills .stills-project-card .project-title{font-size:clamp(24px,7.8vw,35px)}
 #stills .stills-project-card.is-lead .project-title,#stills .stills-project-card.is-wide .project-title{font-size:clamp(28px,9vw,44px)}
}
@media(max-height:500px) and (orientation:landscape){.stills-intro{height:92svh;min-height:300px}.stills-intro h2{font-size:19vw}.stills-chapter-cue{bottom:20px}}
@media(prefers-reduced-motion:reduce){.stills-has-motion .project-index-trigger{transition:none;transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.stills-has-motion .stills-title-mask,.stills-has-motion .stills-title-letter{transform:none!important;opacity:1!important;transition:none!important}}
@media(prefers-reduced-motion:reduce){.project-image img,.project-image::after,.project-arrow,.stills-has-motion .project-word-inner,.stills-has-motion .stills-filters{transition:none}.stills-project-card,.project-image,.stills-has-motion .project-word-inner,.stills-has-motion .stills-filters{transform:none!important;will-change:auto!important}.stills-intro h2,.stills-has-motion .stills-filters{opacity:1!important}}