/* V32: the photographs and films supply the colour. Each collection has its own rhythm. */
html{background:#0b1418;scrollbar-color:#53655d #0b1418}
html:has(#screening[open],#photo-viewer[open]){scrollbar-gutter:auto;overflow:hidden}
.shots-section{position:relative;z-index:3;background:linear-gradient(180deg,#0b171b 0,#111a1c 220px,#111a1c calc(100% - 280px),#090e10 100%);color:#eeeae3;padding:clamp(90px,10vw,160px) var(--pad) 80px;overflow:clip}
.collection-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;max-width:1600px;margin:0 auto 64px}
.collection-heading .section-label{color:#b6a18b;margin-bottom:22px;letter-spacing:.12em}
.collection-heading h2{font-size:clamp(56px,7.3vw,112px);line-height:1.03;letter-spacing:-.065em;font-weight:450}
.collection-heading .collection-note{max-width:270px;color:#a4aeac;font-size:14px;line-height:1.7;margin-bottom:5px}
.shots-header-side{display:grid;gap:24px;justify-items:start}
.profile-link{display:inline-flex;align-items:center;gap:14px;min-height:48px;font-size:14px;line-height:1.5}
.profile-link svg{width:24px;height:24px;fill:currentColor;flex:none}
.profile-link span{display:grid}.profile-link small{font-size:11px;color:#a8b1ad;letter-spacing:.025em}
.profile-link:hover span{color:#d1b99f}
.photo-essay{max-width:1600px;margin:auto}
.photo-spread{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(24px,4.3vw,72px);align-items:start;margin:0 0 clamp(80px,9vw,150px)}
.shot{min-width:0;margin:0;grid-column:span 6}
.shot button{display:block;width:100%;text-align:left;cursor:zoom-in}
.shot-window{display:block;position:relative;overflow:hidden;background:#0b1213}
.shot img{width:100%;height:auto;max-width:none;display:block}
.shot-caption{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-top:16px;line-height:1.5}
.shot-caption h3{font-size:14px;line-height:1.4;letter-spacing:-.015em;font-weight:450}
.shot-caption .shot-number{font-size:10px;color:#82918f;font-variant-numeric:tabular-nums;letter-spacing:.1em}
.shot-caption p{font-size:11px;color:#8f9c99;margin-top:3px}
.shot-zoom{position:absolute;right:18px;bottom:18px;width:40px;height:40px;border:1px solid #ffffff80;border-radius:50%;display:grid;place-items:center;background:#101a1c50;opacity:0;transform:scale(.9);transition:opacity .25s,transform .35s}
.shot-zoom svg{width:18px;height:18px;stroke:#fff;stroke-width:1.2;fill:none}
.shot button:hover .shot-zoom,.shot button:focus-visible .shot-zoom{opacity:1;transform:none}
.photo-spread-arrival .shot{grid-column:1/-1}
.photo-spread-arrival{margin-bottom:clamp(90px,11vw,170px)}
.photo-spread-encounter .shot:first-child{grid-column:2/6}
.photo-spread-encounter .shot:last-child{grid-column:7/13;align-self:end;padding-bottom:52px}
.photo-spread-movement .shot:first-child{grid-column:1/8;align-self:center}
.photo-spread-movement .shot:last-child{grid-column:9/13;margin-top:56px}
.photo-spread-architecture{column-gap:clamp(20px,2.8vw,48px);align-items:center;padding:20px 0}
.photo-spread-architecture .shot:first-child{grid-column:1/6}
.photo-spread-architecture .shot:nth-child(2){grid-column:7/10;margin-top:100px}
.photo-spread-architecture .shot:last-child{grid-column:10/13;margin-top:-60px}
.photo-spread-departure .shot:first-child{grid-column:2/6}
.photo-spread-departure .shot:last-child{grid-column:7/13;align-self:center}
.collection-close{display:flex;justify-content:space-between;align-items:center;gap:30px;max-width:1600px;margin:0 auto;border-top:1px solid #b0b9b323;padding:30px 0 15px;font-size:12px;color:#98a7a2}
.collection-close a{min-height:44px;display:inline-flex;align-items:center;border-bottom:1px solid #9fa9a95c;color:#e2e5dd;font-size:14px}

.work-section{position:relative;z-index:3;background:#090e10;color:#ecebe5;padding:clamp(100px,11vw,170px) var(--pad) 100px;overflow:clip}
.work-section .collection-heading{margin-bottom:50px}
.work-topline{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #c2cbc827;padding:18px 0 28px;max-width:1600px;margin:auto}
.work-filters{display:flex;gap:8px;flex-wrap:wrap;scroll-margin-top:110px}
.work-filters button{min-height:46px;padding:11px 17px;border-radius:30px;color:#87918f;font-size:13px;border:1px solid transparent;transition:color .2s,border-color .2s,background .2s}
.work-filters button:hover{color:#e7e7df}
.work-filters button[aria-pressed="true"]{color:#f1eee7;border-color:#b8bfb84d;background:#ffffff04}
.work-filters sup{font-size:9px;margin-left:5px;color:#c0aa91;vertical-align:super}
.work-preview-controls{display:flex;align-items:center;gap:18px}
.work-preview-controls button{font-size:11px;min-height:44px;white-space:nowrap;color:#acb7b1;text-decoration:underline;text-decoration-color:#5b6662;text-underline-offset:5px}
.work-count{font-size:11px;font-variant-numeric:tabular-nums;color:#87958e;white-space:nowrap}
.film-grid{max-width:1600px;margin:auto}
.work-row{display:grid;gap:clamp(20px,3vw,48px);align-items:start;margin-bottom:clamp(56px,6vw,90px)}
.work-row-wide{grid-template-columns:repeat(2,minmax(0,1fr))}
.work-row-portrait{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1240px;margin-left:auto;margin-right:auto;gap:clamp(24px,4vw,64px)}
.work-row-portrait[data-count="1"]{grid-template-columns:minmax(0,1fr);max-width:350px}
.work-row-portrait[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr));max-width:840px}
.work-row-wide[data-count="1"]{grid-template-columns:minmax(0,1fr);max-width:1050px;margin-left:auto;margin-right:auto}
.work-tile{min-width:0}
.film-open{display:block;position:relative;outline-offset:8px}
.film-image{position:relative;display:block;aspect-ratio:var(--film-ratio);background:#11191b;overflow:hidden}
.film-image>img,.film-image>video{width:100%;height:100%;object-fit:contain;display:block;position:absolute;inset:0;max-width:none}
.film-image>img{transition:transform .75s cubic-bezier(.2,.6,.2,1)}
.film-image>video{opacity:0;transition:opacity .4s;pointer-events:none}
.has-preview .film-image>video{opacity:1}
.film-play{position:absolute;left:22px;bottom:22px;display:inline-flex;align-items:center;gap:10px;color:#fff;min-height:44px;font-size:12px;z-index:2;background:#0a121ae0;border:1px solid #c2c6c55c;border-radius:30px;padding:0 16px 0 10px;opacity:0;translate:0 5px;transition:opacity .25s,translate .35s;backdrop-filter:blur(8px)}
.film-play{white-space:nowrap}.film-play svg{width:24px;height:24px;fill:currentColor;flex:none}
.film-open:hover .film-play,.film-open:focus-visible .film-play{opacity:1;translate:none}
.film-length{position:absolute;right:16px;top:14px;font-size:10px;font-variant-numeric:tabular-nums;letter-spacing:.05em;line-height:1.6;color:#fff;padding:3px 7px;background:#081012a6;border-radius:4px}
.film-caption{display:block;padding:18px 0 0}
.film-kind{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.13em;color:#b3a18d;margin-bottom:8px;line-height:1.5}
.film-caption h3{font-size:clamp(20px,1.8vw,28px);letter-spacing:-.035em;line-height:1.25;font-weight:450;transition:color .25s}
.film-open:hover h3{color:#ccb89e}
.film-credit{display:block;color:#a3adaa;font-size:12px;line-height:1.5;margin-top:8px}
.film-client{display:block;font-size:10px;color:#7d8b86;margin-top:4px;line-height:1.5}
.work-bottom{display:flex;align-items:center;justify-content:space-between;gap:30px;max-width:1600px;margin:auto;padding-top:28px;border-top:1px solid #bdc5bf2b}
.work-bottom button{display:inline-flex;align-items:center;justify-content:center;border:1px solid #c7cec54a;border-radius:30px;padding:14px 24px;font-size:13px;min-height:50px;gap:20px;transition:background .3s,color .3s}
.work-bottom button:hover{background:#e3ded3;color:#172024}
.work-bottom button span{color:#a99880;font-size:11px}
.work-bottom a{font-size:12px;color:#a7b3ad;min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:5px;text-decoration-color:#68726f}

/* An opaque viewing room, with the complete source aspect ratio and no cropped footage. */
#screening.screening,#photo-viewer.photo-viewer{inset:0;margin:0;width:100vw;max-width:none;height:100dvh;max-height:none;padding:0;border:0;border-radius:0;background:#070c0e;color:#f0ede5;overflow:hidden;overscroll-behavior:contain}
#screening[open],#photo-viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
#screening::backdrop,#photo-viewer::backdrop{background:#070c0e;backdrop-filter:none}
.viewer-top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px max(28px,env(safe-area-inset-right)) 14px max(28px,env(safe-area-inset-left));min-height:74px}
.viewer-topline{display:flex;gap:28px;align-items:center;font-size:10px;letter-spacing:.1em;color:#a0ada7}
.viewer-topline span:first-child{color:#d7d9d0}
.viewer-close{display:flex;align-items:center;gap:14px;min-height:46px;font-size:11px;letter-spacing:.02em}
.viewer-close svg{width:44px;height:44px;border:1px solid #96a49c52;border-radius:50%;padding:12px;stroke:currentColor;stroke-width:1.4;fill:none;transition:background .25s}
.viewer-close:hover svg{background:#ffffff12}
.film-stage,.photo-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;margin:0 24px;overflow:hidden}
.film-stage>video,.film-stage>iframe,.film-stage>#youtube-mount{position:absolute;inset:0;width:100%;height:100%;max-height:none!important;aspect-ratio:auto!important;background:transparent;object-fit:contain;border:0}
.film-stage>video{opacity:0;transition:opacity .25s}.film-stage.has-frame>video{opacity:1}
.film-stage>#viewer-poster{position:relative;z-index:1;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;pointer-events:none;transition:opacity .35s}
.film-stage.has-frame>#viewer-poster{opacity:0}
.viewer-start{position:absolute;inset:50% auto auto 50%;translate:-50% -50%;z-index:3;display:flex;align-items:center;gap:12px;min-height:58px;padding:12px 24px 12px 18px;border:1px solid #d4dacf90;border-radius:40px;background:#0b151bd9;backdrop-filter:blur(8px);font-size:14px;color:#fff}.viewer-start svg{width:24px;height:24px;fill:currentColor}
.viewer-bottom{padding:22px 28px max(24px,env(safe-area-inset-bottom));display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 45px}
.viewer-heading h2{font-size:clamp(22px,2.7vw,38px);letter-spacing:-.045em;line-height:1.2;font-weight:450}
.viewer-heading>p{font-size:11px;color:#94a39b;margin-top:7px;line-height:1.5}
.viewer-actions{display:flex;align-items:center;gap:10px;align-self:start}
.viewer-round{display:grid;place-items:center;min-width:44px;min-height:44px;border:1px solid #91a0964a;border-radius:50%;transition:background .2s}
.viewer-round:hover{background:#ffffff12}
.viewer-round svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.2}
.viewer-state{grid-column:2;grid-row:2;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:22px;align-self:start}
#screening .player-status{margin:0;font-size:11px;line-height:1.5;color:#c1a98e}
.viewer-links{display:flex;align-items:center;flex-wrap:wrap;gap:20px;margin-left:auto;font-size:11px;color:#a8b6ac;line-height:1.5}
.viewer-links a,.viewer-links button{min-height:36px;display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#5e6b62}
.viewer-links label{display:flex;gap:7px;align-items:center;font-size:11px}
.viewer-links select{font-size:11px;width:auto;background:transparent;color:#d7ded6;border:0;padding:4px 16px 4px 4px;margin:0;cursor:pointer;border-radius:0}
.viewer-links option{color:#ddd;background:#152023}
.viewer-details{grid-column:1;grid-row:2;max-width:950px;font-size:12px;color:#a3b0a7;line-height:1.7}
.viewer-details summary{cursor:pointer;min-height:30px;width:max-content;color:#c8d0c7;font-size:11px;list-style:none;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#5e6b62}
.viewer-details summary::-webkit-details-marker{display:none}
.viewer-details summary::after{content:' +';margin-left:8px}.viewer-details[open] summary::after{content:' −'}
.viewer-details p{margin-top:8px}.viewer-details p:empty{display:none}
.photo-stage img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.photo-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 28px max(24px,env(safe-area-inset-bottom))}
.photo-bottom h2{font-size:18px;letter-spacing:-.025em;line-height:1.4}
.photo-bottom p{font-size:10px;color:#8f9f95;margin-top:4px}
.photo-bottom a{font-size:11px;min-height:44px;display:inline-flex;align-items:center;gap:10px;text-decoration:underline;text-underline-offset:5px;text-decoration-color:#607066}
.photo-controls{display:flex;align-items:center;gap:12px}
.photo-bottom #photo-counter{font-size:11px;color:#8f9f95;font-variant-numeric:tabular-nums;min-width:54px;text-align:center}

@media(prefers-reduced-motion:no-preference){
  @supports(animation-timeline:view()){
    .shots-section.is-moving .photo-spread{animation:spread-arrive linear both;animation-timeline:view();animation-range:entry 5% entry 65%}
    .shots-section.is-moving .photo-spread-arrival .shot-window img{animation:print-settle linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
    .work-section.is-moving .work-row{animation:film-arrive linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    @keyframes spread-arrive{from{opacity:.55;transform:translate3d(0,35px,0)}to{opacity:1;transform:none}}
    @keyframes print-settle{from{transform:scale(1.035)}to{transform:scale(1)}}
    @keyframes film-arrive{from{opacity:.6;transform:translate3d(0,28px,0);clip-path:inset(3% 0 0)}to{opacity:1;transform:none;clip-path:inset(0)}}
  }
}
@media(hover:none){.film-play{opacity:1;translate:none;font-size:10px;padding:0 10px 0 6px;min-height:34px;left:12px;bottom:12px;gap:4px}.film-play svg{width:20px;height:20px}.shot-zoom{opacity:1;width:32px;height:32px;right:12px;bottom:12px}}
@media(min-width:1800px){.photo-spread-arrival{max-width:1500px;margin-left:auto;margin-right:auto}}
@media(max-width:1000px){
  .collection-heading{gap:30px}.collection-heading .collection-note{max-width:230px;font-size:12px}.shots-header-side{gap:15px}
  .work-topline{align-items:flex-start}.work-filters{gap:3px}.work-filters button{padding:10px 12px}.work-preview-controls{gap:10px}.work-count{display:none}
  .photo-spread-architecture .shot:nth-child(2){grid-column:6/9}.photo-spread-architecture .shot:last-child{grid-column:9/13}
}
@media(max-width:700px){
  .shots-section,.work-section{padding:80px 22px 64px}
  .collection-heading{display:block;margin-bottom:40px}.collection-heading h2{font-size:58px}.collection-heading .section-label{font-size:9px;margin-bottom:17px}
  .collection-heading .collection-note{max-width:290px;font-size:13px;margin:20px 0 0}
  .shots-header-side{display:block;margin-top:24px}.shots-header-side .collection-note{display:none}.profile-link{gap:12px}.profile-link svg{width:20px;height:20px}
  .photo-spread{display:grid;grid-template-columns:1fr;gap:48px;margin-bottom:48px;animation:none!important;transform:none!important;opacity:1!important;padding:0}
  .photo-spread .shot{grid-column:1!important;margin:0!important;padding:0!important;align-self:auto!important}
  .photo-spread-arrival{margin-left:-22px;margin-right:-22px;margin-bottom:50px}.photo-spread-arrival .shot-caption{margin-left:22px;margin-right:22px}
  .photo-spread-encounter .shot:first-child,.photo-spread-movement .shot:last-child,.photo-spread-departure .shot:first-child{width:88%;justify-self:center}
  .photo-spread-architecture .shot:nth-child(2){width:74%;justify-self:end}.photo-spread-architecture .shot:last-child{width:88%}
  .shot-caption{margin-top:12px}.shot-caption h3{font-size:14px}.shot-caption p{font-size:11px}
  .collection-close{display:block;padding-top:22px}.collection-close a{margin-top:13px;font-size:13px}
  .work-section .collection-heading{margin-bottom:28px}.work-topline{display:block;padding:10px 0 25px}.work-filters{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px}.work-filters button{min-height:44px;padding:9px 6px;font-size:12px;grid-column:span 2}.work-filters button:nth-child(-n+2){grid-column:span 3}.work-preview-controls{justify-content:flex-end;margin-top:7px}.work-preview-controls button{font-size:10px}
  .work-row{gap:25px;margin-bottom:45px;animation:none!important;transform:none!important;opacity:1!important;clip-path:none!important}
  .work-row-wide{grid-template-columns:1fr}
  .work-row-portrait,.work-row-portrait[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .work-row-portrait .work-tile:last-child:nth-child(odd){grid-column:1/-1;width:65%;justify-self:center;margin-top:22px}
  .work-row-portrait[data-count="1"]{width:70%;max-width:none;grid-template-columns:1fr}
  .work-row-portrait[data-count="1"] .work-tile:last-child:nth-child(odd){width:100%;margin:0}
  .film-caption{padding-top:13px}.film-caption h3{font-size:22px}.film-credit{font-size:11px}.film-kind{font-size:8px;letter-spacing:.1em;margin-bottom:6px}.film-client{font-size:10px}
  .work-row-portrait .film-caption h3{font-size:18px}.work-row-portrait .film-credit{font-size:10px}.work-row-portrait .film-kind{font-size:7px}
  .film-length{right:9px;top:9px;font-size:9px;padding:2px 5px}.film-play{left:10px;bottom:10px}
  .work-bottom{align-items:flex-start;gap:18px}.work-bottom button{font-size:12px;padding:12px 17px;gap:10px}.work-bottom a{font-size:11px;text-align:right;max-width:100px}
  .viewer-top{min-height:64px;padding:9px 16px}.viewer-topline{font-size:8px;gap:16px}.viewer-close{font-size:10px;gap:9px}.viewer-close svg{width:44px;height:44px}
  .film-stage,.photo-stage{margin:0 10px}.viewer-bottom{padding:18px 18px max(18px,env(safe-area-inset-bottom));gap:12px 15px}.viewer-heading h2{font-size:22px}.viewer-heading>p{font-size:10px;max-width:260px}.viewer-actions{gap:6px}.viewer-round{min-width:44px;min-height:44px}
  .viewer-state{display:block;min-height:0;grid-column:1/-1;grid-row:3}.viewer-links{gap:16px;margin-top:5px;font-size:10px}.viewer-details{font-size:11px;max-height:20dvh;overflow:auto;grid-column:1/-1;grid-row:2}
  .viewer-links select{font-size:16px}.photo-bottom{padding:16px 18px max(18px,env(safe-area-inset-bottom));align-items:flex-start;gap:12px;flex-wrap:wrap}.photo-bottom h2{font-size:16px}.photo-controls{gap:7px}.photo-bottom a{font-size:10px}.photo-bottom #photo-counter{font-size:10px;min-width:42px}
}
@media(max-height:500px) and (min-width:600px){
  .viewer-top{min-height:48px;padding:3px 20px}.viewer-close svg{height:36px;width:36px;padding:9px}.viewer-bottom{padding:10px 20px;gap:5px 20px}.viewer-heading h2{font-size:20px}.viewer-heading>p{font-size:9px;margin-top:4px}.viewer-state{min-height:0}.viewer-links{gap:14px}.viewer-links a,.viewer-links button{min-height:24px}.viewer-details{max-height:60px;overflow:auto}.viewer-details summary{min-height:22px}.photo-bottom{padding:10px 20px}.photo-bottom h2{font-size:14px}.photo-controls .viewer-round{min-width:44px;min-height:44px}
}
