@font-face{font-family:Condensed;src:url('/assets/condensed.ttf') format('truetype');font-display:swap;font-weight:300 400}@font-face{font-family:Condensed;src:url('/assets/condensed-medium.ttf') format('truetype');font-display:swap;font-weight:500 700}
:root{--black:#000;--text:#fff;--muted:#aaa;--accent:rgba(0,130,133,.65);--page:5vw;--index-type:clamp(24px,2.76vw,52px);--title-type:clamp(40px,4.79166667vw,92px)}*{box-sizing:border-box}html{scrollbar-gutter:stable;background:#000}body{margin:0;background:var(--black);color:var(--text);font-family:Condensed,'Arial Narrow',Arial,sans-serif;font-size:16px;line-height:1.3;isolation:isolate}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a,button{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}a:focus-visible,button:focus-visible,.gallery:focus-visible{outline:2px solid #75ecf0;outline-offset:5px}h1:focus{outline:none}img{display:block;max-width:100%}button{background:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:fixed;top:12px;left:12px;z-index:100;background:#fff;color:#000;padding:12px 18px;transform:translateY(-180%)}.skip:focus{transform:none}.site-header{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:16px 2.5vw;gap:24px;transition:transform .25s,opacity .25s;background:none}.site-header.is-hidden{transform:translateY(-110%);opacity:0;pointer-events:none}.wordmark{font-size:20px;font-weight:400;line-height:1;text-transform:uppercase;white-space:nowrap}.site-header nav{display:flex;gap:26px}.site-header nav a{font-size:11px;line-height:1;font-weight:300;text-transform:uppercase;color:rgba(255,255,255,.65);padding:8px 0}.site-header nav a[aria-current]{text-decoration:underline;text-underline-offset:3px}.site-header a:hover{color:#fff}@keyframes page-in{from{opacity:0}to{opacity:1}}#page-view{opacity:1;transition:opacity .2s;animation:page-in .35s ease}#page-view.is-leaving{opacity:0}.project-index{position:relative;min-height:100svh;display:flex;align-items:center}.index-backdrop{position:fixed;inset:0;z-index:-1;background:#000;overflow:hidden}.cover{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:hidden;will-change:opacity}.shade{position:absolute;inset:0;background:none}.index-content{width:100%;padding:80px var(--page)}.project-list{list-style:none;margin:0;padding:0}.project-link{font-size:var(--index-type);line-height:1.08;font-weight:300;text-transform:uppercase;letter-spacing:0;display:inline-block;padding:0;color:rgba(255,255,255,.65);transition:color .15s linear}.project-list li{line-height:1.08}.project-list li+li{margin-top:1px}.project-link:hover,.project-link:focus-visible,.project-link.is-active{color:var(--accent)}.project-content{position:relative;background:#000}.film-hero{position:relative;height:100svh;min-height:560px;isolation:isolate;overflow:hidden;background:#000}.hero-image{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:hidden;z-index:-2}.hero-shade{position:absolute;inset:0;z-index:-1;background:none}.project-intro{opacity:1;transform:translateY(0);transition:transform 400ms ease,opacity 250ms 100ms ease;will-change:opacity,transform;position:absolute;left:var(--page);right:var(--page);top:15.4vh;pointer-events:none}.film-hero.is-scrolled .project-intro,.film-duo.is-scrolled .project-intro{opacity:0;transform:translateY(-60px)}.project-intro h1,.project-intro h2,h1{font-size:var(--title-type);line-height:1.3;letter-spacing:0;font-weight:500;text-transform:uppercase;margin:0 0 14px;overflow-wrap:anywhere}.film-meta{font-size:12px;line-height:1.1;font-weight:300;max-width:55vw}.film-meta p{margin:0}.film-launch{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:80px;height:80px;display:block;border:0;padding:0;border-radius:50%;transition:opacity .15s}.film-launch svg{display:block;width:100%;height:100%;fill:none;stroke:#fff;stroke-width:2}.film-launch svg path{fill:#fff;stroke:none}.film-launch:hover{opacity:.7}.video-fallback{position:absolute;right:2.5vw;bottom:20px;font-size:12px;color:#ddd;line-height:1.2}.video-fallback:hover{color:#fff}.film-stills{margin:0;padding:0;display:block;background:#000}.film-stills picture{display:block}.film-stills img{width:100%;height:auto;margin:0;border:0}.gallery-main{padding:100px var(--page) 50px;min-height:100svh}.gallery-main h1{font-size:clamp(34px,4.0625vw,78px)}.gallery-stage{height:calc(100svh - 255px);min-height:280px;display:flex;align-items:center;justify-content:center}.gallery-image{width:100%;height:100%;object-fit:contain}.gallery-controls{display:flex;align-items:center;justify-content:center;gap:32px;margin-top:18px}.gallery-controls button{border:1px solid #ffffff35;width:48px;height:44px;font-size:23px;line-height:1}.gallery-controls button:hover{border-color:#fff}.gallery-count{min-width:70px;text-align:center;font-size:16px;color:#ccc}.gallery-caption{text-align:center;font-size:16px;color:var(--muted);margin:15px 0 0}.gallery-caption:empty{display:none}.contact-main{padding:110px var(--page) 100px;max-width:1100px}.contact-main h1{margin-bottom:55px}.contact-bio{font-size:32px;line-height:1.2;text-transform:uppercase;margin:0 0 25px}.contact-medium{font-size:18px;line-height:1.4;color:#bbb;margin-bottom:45px}.contact-links{display:flex;flex-direction:column;align-items:flex-start;gap:12px;font-size:28px;line-height:1.2}.contact-links a{border-bottom:1px solid #ffffff40;padding-bottom:3px}.contact-links a:hover{color:#75ecf0}.video-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}.video-dialog{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#000;color:#fff;overflow:hidden;color-scheme:normal}.video-dialog::backdrop{background:#000}.video-dialog[open]{display:flex;flex-direction:column}.video-stage{position:relative;width:100%;flex:1;min-height:0;overflow:hidden;background:#000;line-height:0}.video-stage iframe{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#000;color-scheme:normal}.video-controls{flex:0 0 64px;display:flex;align-items:center;justify-content:center;background:#000;padding-bottom:env(safe-area-inset-bottom)}.close-video{border:0;width:48px;height:48px;padding:12px;display:grid;place-items:center}.close-video svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.5}.close-video:hover{opacity:.6}
@media(max-width:700px){:root{--page:5vw;--index-type:24px;--title-type:40px}.site-header{padding:18px 5vw;align-items:flex-start;gap:16px;flex-direction:column}.wordmark{font-size:21px}.site-header nav{width:100%;gap:24px}.site-header nav a{font-size:12px;min-height:30px;padding:4px 0}.index-content{padding:140px var(--page) 80px}.film-hero{min-height:570px;display:flex;flex-direction:column;align-items:center;padding-top:145px}.project-intro{position:static;width:90%}.film-hero.is-scrolled .project-intro,.film-duo.is-scrolled .project-intro{transform:translateY(-40px)}.project-intro h1,.project-intro h2{line-height:1.15;margin-bottom:22px}.film-meta{max-width:90vw;font-size:12px;line-height:1.2}.film-launch{position:static;transform:none;width:72px;height:72px;flex:0 0 72px;margin-top:clamp(36px,8vh,90px)}.video-fallback{bottom:22px;right:5vw}.gallery-main{padding-top:135px}.gallery-main h1{font-size:31px;line-height:1.2;margin-bottom:24px}.gallery-stage{height:calc(100svh - 330px);min-height:270px}.contact-main{padding-top:145px}.contact-bio{font-size:30px}.contact-medium{font-size:16px}.contact-links{font-size:26px}.desktop-break{display:none}.video-controls{flex-basis:calc(64px + env(safe-area-inset-bottom))}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.project-intro{transform:none!important}}

.film-duo{position:relative;height:100svh;min-height:570px;background:#000;isolation:isolate;overflow:hidden}.film-pair{height:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.film-panel{position:relative;min-width:0;height:100%;isolation:isolate;overflow:hidden}.film-duo>.duo-heading{position:absolute;z-index:2;top:15.4vh;left:5vw;right:5vw;width:auto}.film-duo .film-label{position:absolute;top:auto;bottom:88px;left:5vw;right:3vw;width:auto}.film-label h2{font-size:clamp(24px,2.5vw,44px);line-height:1.1;margin:0}.film-panel .hero-shade{background:none}.film-panel .film-launch{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);margin:0}.film-duo .video-fallback{right:3vw}.film-duo .film-meta{max-width:90vw}
@media(max-width:700px){.film-duo>.duo-heading{top:145px}.film-duo .film-label{left:5vw;right:4vw;bottom:100px}.film-label h2{font-size:24px;line-height:1.15}.film-panel .film-launch{width:64px;height:64px;top:60%}.film-duo .video-fallback{max-width:85%;font-size:11px}.film-duo .project-intro h1{font-size:40px}}

/* Keep source-image exposure intact; contrast belongs to the controls. */
.site-header,.project-link,.project-intro,.video-fallback{text-shadow:0 1px 4px #0009}.film-launch{filter:drop-shadow(0 1px 3px #0009)}

/* Keep video controls focused without adding colored outlines. */
.close-video:focus,.film-launch:focus{outline:none}
.close-video:focus-visible svg{stroke-width:2.5}
.film-launch:focus-visible svg{stroke-width:3}

/* Smaller desktop presentation for the Instagram-source films. */
.film-stills--editorial{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,48px);max-width:1800px;margin:0 auto;padding:clamp(24px,4vw,64px) clamp(18px,3vw,48px);align-items:center}
.film-still{margin:0;min-width:0}
.film-still.is-featured{grid-column:1/-1;width:82%;justify-self:center}
.film-frame{position:relative;overflow:hidden;width:100%}
.film-frame>picture,.film-frame>img{position:absolute;top:0;left:var(--frame-left);width:var(--frame-width);max-width:none}
@media(max-width:700px){.film-stills--editorial{display:block;padding:20px 0}.film-still,.film-still.is-featured{width:100%;margin:0 0 20px}.film-still:last-child{margin-bottom:0}}
@media(min-width:701px){
  .video-dialog[data-playback^="compact-"] .video-stage iframe{inset:50% auto auto 50%;transform:translate(-50%,-50%);width:min(80%,960px);height:min(82%,540px)}
  .video-dialog[data-playback="compact-portrait"] .video-stage iframe{width:min(80%,360px);height:min(82%,640px)}
}

/* Portrait campaign stills keep their complete frame in a compact paired gallery. */
.film-stills--portrait-pairs{max-width:1100px;gap:clamp(18px,3vw,36px)}
.film-stills--portrait-pairs .film-still:last-child:nth-child(odd){grid-column:1/-1;width:calc((100% - clamp(18px,3vw,36px))/2);justify-self:center}
@media(max-width:700px){.film-stills--portrait-pairs .film-still:last-child:nth-child(odd){width:100%}}

/* Shift this 2048px-wide video poster toward the jacket on mobile. */
@media(max-width:700px){.hero-image[data-src="/assets/sixth-street-specials-selected-02-film-2048.webp"]>image{transform:translateX(-230px)}}

/* Project index, soft dissolve: the teal fades out of one title as it fades into the next, in step
   with the cover image (same 620 ms curve as the image dissolve in app.js). The teal follows
   .is-active, which app.js sets after the hover intent, so the colour and the image change together. */
@media (hover:hover) and (pointer:fine){
  .project-link{transition:color .62s cubic-bezier(.33,0,.2,1)}
  .project-link:hover:not(.is-active){color:rgba(255,255,255,.65)}
}
.index-backdrop .cover{transform-origin:50% 50%}

/* No layout box on non-touch devices: the original fixed backdrop is unchanged. */
.moving-cover-pin{display:contents}
/* Pin a zero-height anchor across the entire Moving Images page. Keeping the
   100lvh cover out of flow avoids relying on negative-margin sticky constraints
   while Safari's scrolling viewport changes height.
   The anchor stays at the top through the footer reveal; only its child clips
   the dissolving covers, so no ancestor becomes a separate scroll container. */
@media (hover:none) and (pointer:coarse){
  #page-view[data-kind="moving"]{min-height:100lvh}
  #page-view[data-kind="moving"]>.moving-cover-pin{
    display:block;position:sticky;top:0;height:0;z-index:-1;
  }
  .moving-cover-pin>.index-backdrop{
    position:absolute;inset:0 0 auto;height:100lvh;overflow:clip;
  }
}

/* About & Contact. The page opens on the Bolex's first frame with the email and Instagram already in
   place; the first sign of a visitor (a mouse or trackpad move after a brief 0.3 s settle, a click, a tap, a key, a
   scroll) or 2.5 seconds of stillness (1 second on touch screens) starts the turn, and the bio rises line by line as the camera
   glides clear of it.
   The video is never resampled by the browser: bolex-open.js picks the largest pre-rendered size that
   fits and shows it at one video pixel per screen pixel, on the pixel grid. The artboard takes that
   size (--aw/--ah, placed at --ax/--ay) and the copy is sized in container units, so the composition
   is identical at every size. Desktop artboard: 1600 × 900 units, 1 unit = .0625cqw.
   Nothing is shown until the script has placed everything (.is-ready), so the copy never flashes. */
.open-main{background:#000}
.open-reel{position:relative;height:var(--vh,100svh);overflow:hidden;background:#000}
.open-sticky{position:absolute;left:var(--ax,0px);top:var(--ay,0px);width:var(--aw,min(100vw,calc(100svh*16/9)));height:var(--ah,auto);aspect-ratio:16/9;container-type:inline-size}
.open-copy{position:absolute;left:20cqw;width:23.75cqw;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;z-index:2;opacity:1;transition:opacity .5s cubic-bezier(.33,0,.2,1)}
/* Until the script has sized and placed the page, the copy waits (with a failsafe if it never runs). */
.open-reel:not(.is-ready) .open-copy{opacity:0;transition:none;animation:open-failsafe .5s 2s forwards}
.open-reel:not(.is-ready):not(.is-still) .open-bio{visibility:hidden;animation:open-failsafe-bio 0s 8s forwards}
@keyframes open-failsafe{to{opacity:1}}
@keyframes open-failsafe-bio{to{visibility:visible}}
.open-copy .ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.open-copy .ln-in{display:inline-block;white-space:nowrap;transform:translateY(calc((1 - var(--p, 0)) * (100% + .3em)));opacity:clamp(0, calc(var(--p, 0) * 3), 1)}
.open-reel.is-still .open-copy .ln-in{transform:none;opacity:1}
.open-copy h1{font-size:3.4cqw;line-height:1.08;margin:0 0 2cqw;white-space:nowrap}
.open-story{font-size:max(15px,1.3cqw);line-height:1.5;font-weight:300;margin:0}
/* Email and Instagram: always on screen, bottom-left, their last line level with the foot of the
   camera once it has settled (the camera's first frame stays well clear of them). */
.open-reel .open-contact{position:absolute;left:0;bottom:7cqw;display:flex;flex-direction:column;align-items:flex-start;gap:.75cqw;font-size:max(17px,1.625cqw);line-height:1.3}
.open-reel .open-contact a{display:block;width:max-content;max-width:100%;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:2px;transition:border-color .3s,color .3s}
.open-reel .open-contact a:hover{color:#fff;border-color:#75ecf0}
.open-figure{position:absolute;inset:0;margin:0}
.open-stage{position:absolute;inset:0;background:#000}
.open-poster,.open-video,.open-still{position:absolute;left:0;top:0;width:100%;height:100%;display:block;background:#000}
.open-video{opacity:0}
.open-still[hidden],.open-poster[hidden]{display:none}
.open-caption{position:absolute;right:3cqw;bottom:1.6cqw;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4);opacity:0;transition:opacity .9s .4s}
.open-reel.is-open .open-caption{opacity:1}
.open-stage{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.open-stage img,.open-stage video{-webkit-user-drag:none;user-select:none;pointer-events:none}
.bolex-motion{position:absolute;left:3cqw;bottom:1.2cqw;border:0;padding:6px 0;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);z-index:3}
.bolex-motion:hover{color:#fff}.bolex-motion[hidden]{display:none}
.bolex-motion .motion-play,.bolex-motion.is-paused .motion-pause{display:none}.bolex-motion.is-paused .motion-play{display:inline}
@media(max-width:999px){.contact-page .site-header nav{flex-wrap:wrap;row-gap:4px}}
/* One screen, no scrolling or rubber-banding past the frame, whenever the whole page fits (the script
   sets data-lock; it leaves it off when the content can't fit, e.g. a phone turned sideways). */
html:has(.open-reel[data-lock]),html:has(.open-reel[data-lock]) body{overflow:hidden;overscroll-behavior:none}
/* Stacked layout (portrait windows, phones, narrow windows): set by the script together with the video
   size; the media query further down covers only the moment before the script runs. */
.open-reel[data-layout="tall"]{height:auto;min-height:var(--vh,100svh);overflow:visible}
.open-reel[data-layout="tall"] .open-sticky{position:relative;left:auto;top:auto;width:auto;height:auto;min-height:var(--vh,100svh);aspect-ratio:auto;container-type:normal;padding:var(--top,118px) var(--page) 48px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.open-reel[data-layout="tall"] .open-figure{position:relative;inset:auto;width:100%;display:flex;justify-content:center;flex:none}
.open-reel[data-layout="tall"] .open-stage{position:relative;inset:auto;width:var(--sw,min(100%,calc(50svh*8/9),560px));height:var(--sh,auto);aspect-ratio:8/9;flex:none}
.open-reel[data-layout="tall"] .open-copy{position:relative;left:auto;top:auto;bottom:auto;width:100%;max-width:560px;display:block;order:2;margin-top:18px}
.open-reel[data-layout="tall"] .open-copy h1{font-size:30px;margin-bottom:10px;white-space:normal}
.open-reel[data-layout="tall"] .open-story{font-size:16px;line-height:1.45}
.open-reel[data-layout="tall"] .open-contact{position:static;font-size:19px;gap:8px;margin-top:18px}
.open-reel[data-layout="tall"] .open-caption{display:none}
.open-reel[data-layout="tall"] .bolex-motion{left:auto;right:var(--page);bottom:14px}
/* Locked to one screen: camera, bio and contact form one group, centred in the spare room. Before the
   turn starts, the email and Instagram sit right under the camera (bolex-open.js lifts them over the
   bio's empty space); as it starts they ease down and the bio opens up between. */
.open-reel[data-layout="tall"][data-lock]{height:var(--vh,100svh);min-height:0;overflow:hidden}
.open-reel[data-layout="tall"][data-lock] .open-sticky{height:100%;min-height:0;padding-bottom:16px;justify-content:flex-start}
.open-reel[data-layout="tall"][data-lock] .open-figure{margin-top:auto}
.open-reel[data-layout="tall"][data-lock] .open-copy{display:contents}
.open-reel[data-layout="tall"][data-lock] .open-bio{order:2;width:100%;max-width:560px;margin-top:0}
/* Locked phone type: a touch tighter than the scrolling layout, and the heading (which repeats the menu's
   underlined "About & Contact") is left to screen readers, so the bio leaves the camera its size. */
.open-reel[data-layout="tall"][data-lock] .open-copy h1{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.open-reel[data-layout="tall"][data-lock] .open-story{font-size:15px;line-height:1.42}
.open-reel[data-layout="tall"][data-lock] .open-contact{order:3;width:100%;max-width:560px;margin:0 0 auto;padding-top:18px}
.open-reel[data-layout="tall"][data-lock] .bolex-motion{bottom:16px}
/* Shorter phone screens (e.g. iPhone Duo folded): slightly tighter type, and the heading (which repeats
   the menu's "About & Contact") is left to screen readers, so the camera keeps its size. */
@media(max-height:640px){
.open-reel[data-layout="tall"] .open-copy h1{font-size:26px;margin-bottom:8px}
.open-reel[data-layout="tall"] .open-story{font-size:15px;line-height:1.42}
.open-reel[data-layout="tall"][data-lock] .open-story{font-size:14px;line-height:1.4}
.open-reel[data-layout="tall"] .open-contact{font-size:18px;gap:6px}
}
@media(max-width:799px),(max-aspect-ratio:999/1000){
.open-reel:not([data-layout]){height:auto;min-height:100svh;overflow:visible}
.open-reel:not([data-layout]) .open-sticky{position:relative;left:auto;top:auto;width:auto;height:auto;min-height:100svh;aspect-ratio:auto;container-type:normal;padding:118px var(--page) 48px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.open-reel:not([data-layout]) .open-figure{position:relative;inset:auto;width:100%;display:flex;justify-content:center}
.open-reel:not([data-layout]) .open-stage{position:relative;inset:auto;width:var(--sw,min(100%,calc(50svh*8/9),560px));height:var(--sh,auto);aspect-ratio:8/9;flex:none}
.open-reel:not([data-layout]) .open-copy{position:relative;left:auto;top:auto;bottom:auto;width:100%;max-width:560px;display:block;order:2;margin-top:18px}
.open-reel:not([data-layout]) .open-contact{position:static;font-size:19px;gap:8px;margin-top:18px}
.open-reel:not([data-layout]) .open-caption{display:none}
}



/* Still Images (28 Sept 2026 edit), in the design of the 27 Sept Still Images mockup.
   Index: the project titles in one column under small group headings, over a soft dark fade at the
   left; a hovered title dissolves its cover in (app.js, as on Moving Images) and turns teal.
   Project pages: the photographs stacked large on black, each at most 88% of the window's height, then a
   pause on the credits, then the index again with the next project lit. Phones: a scroll of covers
   with titles in place of the list. */
.still-index{--m:max(24px,4.5vw)}
.still-index .shade{background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.18) 45%,rgba(0,0,0,0) 70%)}
.still-index .index-content{padding:96px var(--m) 48px}
.project-groups{display:grid;gap:18px}
.project-group{display:grid}
.group-title{margin:0 0 4px;font-size:11px;line-height:1.3;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.52)}
.still-index .project-list li+li{margin-top:0}
/* The mockup's 24–30px titles, scaled down on short windows so all 22 projects stay on one screen. */
.still-index .project-link{font-size:clamp(18px,min(max(24px,2.2vw),calc(4.1vh - 12px)),30px);line-height:1.08;color:#fff}
.still-index .project-link.is-active{color:var(--accent)}
@media (hover:hover) and (pointer:fine){.still-index .project-link:hover:not(.is-active){color:#fff}}
.stills-main{--m:max(24px,4.5vw)}
.stills-head{padding:clamp(110px,16vh,170px) var(--m) 0;display:grid;gap:10px}
.stills-head h1{margin:0;font-weight:300;font-size:clamp(44px,7vw,96px);line-height:.92;text-wrap:balance}
.stills-meta{margin:0;font-size:11px;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.52)}
.stills-stack{container-type:inline-size;display:grid;justify-items:center;gap:clamp(40px,9vh,110px);padding:clamp(48px,10vh,120px) var(--m)}
.still{margin:0;width:min(100%,calc(88vh * var(--ar)))}
.still img{width:100%;height:auto;background:#0b0b0b}
.still figcaption{margin-top:10px;font-size:11px;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.52)}
.still-spread{--spread-gap:clamp(14px,2vw,28px);display:flex;justify-content:center;align-items:flex-start;gap:var(--spread-gap);width:100%}
.still-spread .still{flex:none;width:calc(min(78vh,(100cqw - var(--spread-gap)) / var(--sum)) * var(--ar))}
.stills-credits{min-height:62vh;display:grid;align-content:center;justify-items:center;gap:22px;padding:10vh var(--m);text-align:center}
.stills-credits dl{display:grid;gap:10px;margin:0}
.stills-credits dl>div{display:grid;gap:2px}
.stills-credits dt{font-size:11px;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.52)}
.stills-credits dd{margin:0;font-size:19px;line-height:1.25;text-transform:uppercase}

/* Phones (touch screens, or windows under 480px) get the Evagria-style grid of tall covers, one row per
   group. The screen holds still while the reader swipes: the first row slides sideways, then each next row
   rises from underneath as it slides, rows alternating direction so the edit snakes up the screen (app.js
   pins the stage, sizes the covers for the screen and runs the motion, eased so it has some weight).
   A tap on a picture plays the project's first photographs in place and lights its title (tap again to
   open); a tap on the title opens the project. Without scripting, or with reduced motion, each row is a
   plain two-column grid. A narrow desktop window keeps the list and its hover. */
.m-index{display:none}
@media (hover:none) and (pointer:coarse),(max-width:479px){
.still-index .index-backdrop,.still-index .project-groups{display:none}
.project-index.still-index{display:block;min-height:0}
.still-index .index-content{padding:0 0 48px}
.m-index{display:block}
.m-stack{padding:130px 12px 0}
.m-row+.m-row{margin-top:30px}
.m-lead{margin:0 0 9px}
.m-track{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.m-track .m-card{aspect-ratio:.7}
.m-card{position:relative;overflow:hidden;background:#0b0b0b}
.m-pic,.m-pic img,.m-card .m-slide{position:absolute;inset:0;width:100%;height:100%}
.m-pic img,.m-card .m-slide{object-fit:cover}
.m-card .m-slide{opacity:0;transition:opacity .45s ease}
.m-card .m-slide.is-on{opacity:1}
.m-card::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0));pointer-events:none}
.m-title{position:absolute;left:8px;right:8px;bottom:12px;z-index:2;text-align:center;font-size:var(--title,17px);line-height:1.02;text-transform:uppercase;text-wrap:balance;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.45);transition:color .25s ease}
.m-card.is-playing .m-title,.m-card.is-next .m-title{color:#7fd0d2}
.m-index.is-live .m-stage{position:sticky;top:0;height:100lvh;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent calc(var(--window,100px) - 16px),#000 calc(var(--window,100px) + 10px));mask-image:linear-gradient(to bottom,transparent calc(var(--window,100px) - 16px),#000 calc(var(--window,100px) + 10px))}
.still-index .index-content:has(.m-index.is-live){padding-bottom:0}
.m-index.is-live .m-stack{position:absolute;left:0;right:0;top:0;padding:0;will-change:transform}
.m-index.is-live .m-row{margin:0}
.m-index.is-live .m-row+.m-row{margin-top:var(--row-gap,26px)}
.m-index.is-live .m-lead{padding:0 var(--edge,12px);margin:0 0 9px}
.m-index.is-live .m-track{display:flex;gap:var(--gap,8px);padding:0 var(--edge,12px);width:max-content;min-width:100%;will-change:transform}
.m-index.is-live .m-row.is-rev .m-track{flex-direction:row-reverse}
.m-index.is-live .m-card{flex:0 0 auto;width:var(--cw);height:var(--ch);aspect-ratio:auto}
.still-spread{flex-direction:column;align-items:center}
.still-spread .still{width:min(100%,calc(88vh * var(--ar)))}
}
@media (prefers-reduced-motion:reduce){.m-card .m-slide{transition:none}}
@media(max-width:700px) and (hover:hover) and (pointer:fine) and (min-width:480px){.still-index .index-content{padding-top:140px}}