/* Cinematic Flow: preview only. Existing brand and media. */
:root{--flow-ease:cubic-bezier(.22,1,.36,1);--flow-gutter:clamp(22px,4vw,76px);--muted:#b1b1a9;scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}.lenis.lenis-stopped{overflow:clip}.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.site-header{position:sticky;top:0;background:#080808;transition:background .4s,border-color .4s;}
.header-inner{height:92px;max-width:none}.site-header,.header-inner{padding-left:0;padding-right:0}
.site-header{padding:0 var(--flow-gutter)}.header-inner{border-color:#ffffff1c}
body[data-page=home] .site-header{position:fixed;left:0;right:0;background:transparent}
body[data-page=home].past-hero .site-header{background:#080808f5}
body.menu-open .site-header{background:transparent}
main{animation:page-in .55s ease both;overflow:clip}
.loader-active main{animation-play-state:paused}
main,.site-footer{max-width:none;padding-left:var(--flow-gutter);padding-right:var(--flow-gutter)}
.cinematic-hero{position:relative;isolation:isolate;height:100vh;height:100svh;min-height:630px;margin:0 calc(-1 * var(--flow-gutter));padding:160px var(--flow-gutter) 40px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;overflow:hidden}
.hero-canvas{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#172027;transform:translateY(var(--hero-y,0px))}
.hero-film{position:absolute;inset:0;opacity:1;pointer-events:none}

.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,#08080845 0%,#0808080d 34%,#080808aa 100%)}
.hero-copy{position:relative;z-index:1;transform:translateY(var(--copy-y,0px));opacity:var(--copy-opacity,1)}
.cinematic-hero h1{font-size:clamp(76px,9.4vw,164px);line-height:.98;letter-spacing:-.058em;margin:0;max-width:1200px}
.line-mask{display:block;overflow:hidden;padding-bottom:.075em;margin-bottom:-.075em}.line-mask>span{display:block}
.hero-copy .home-intro-about{max-width:550px;margin-top:30px}
.hero-copy .home-intro-about>p{color:var(--text);font-size:18px;line-height:1.5;max-width:470px}
.hero-copy .home-intro-about .text-link{margin-top:18px;font-size:14px;border-color:#ffffff88}
.hero-actions{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:46px;padding-top:20px;border-top:1px solid #ffffff40;font-size:12px}
.hero-explore{display:flex;align-items:center;gap:26px}.hero-explore>span{font-size:21px}
.hero-film-actions{display:flex;align-items:center;gap:24px}.hero-watch{display:flex;align-items:center;gap:14px;background:none;padding:7px 0;font-size:12px}.hero-watch svg{width:17px;height:17px}
.hero-pause{display:grid;place-items:center;width:38px;height:38px;background:none;border:1px solid #ffffff66;font-size:15px}
.home-intro+#photographs{margin-top:0}
.home-work{margin-top:0;padding-top:112px;scroll-margin-top:85px}
.home-work+#films{padding-top:120px}
.home-work .section-heading{margin-bottom:40px;align-items:flex-end;gap:35px}
.home-work .section-heading h2{color:var(--text);font-size:clamp(36px,4.2vw,72px);line-height:1.05;letter-spacing:-.045em;max-width:900px;margin:0}
.home-work .section-heading>.text-link{font-size:13px}
.work-reel{--slide-width:min(83vw,125svh);margin:0 calc(-1 * var(--flow-gutter));min-width:0}
.reel-track{display:flex;gap:24px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-left:var(--flow-gutter);scrollbar-width:none;padding:12px var(--flow-gutter) 20px;outline-offset:-4px}
.reel-track::-webkit-scrollbar{display:none}
.reel-track>[data-slide]{flex:0 0 var(--slide-width);min-width:0;scroll-snap-align:start;scroll-snap-stop:normal;max-width:none;grid-column:auto}
.reel-track .photo-link{aspect-ratio:1.9;overflow:hidden;display:block}
.reel-track .photo-link>img{width:100%;height:100%;object-fit:cover}
.reel-track .image-expand{right:22px;bottom:22px}
.reel-track .film-image{aspect-ratio:1.9;overflow:hidden;background:#141414}
.reel-track .film-image>img{width:100%;height:100%;object-fit:cover;transition:transform .95s var(--flow-ease)}
.reel-track .film-link:hover .film-image>img{transform:scale(1.025)}
.reel-track .play-mark{left:26px;bottom:26px;background:#080808bd;backdrop-filter:none;font-size:13px;padding:12px 17px}
.reel-track .film-label{padding-top:22px;align-items:center}
.reel-track .film-label h2{font-size:clamp(27px,3.2vw,52px);letter-spacing:-.04em;line-height:1.1}
.reel-track .film-label>svg{width:26px;height:26px}
.reel-track .film-category{font-size:12px;margin-top:10px;color:var(--muted)}
.reel-bar{display:flex;align-items:center;gap:36px;padding:12px var(--flow-gutter) 0}
.reel-count{font-family:Arimo,Arial,sans-serif;font-size:11px;letter-spacing:.08em;width:65px;flex:none;color:var(--muted)}
.reel-progress{height:1px;background:#30302c;flex:1;overflow:hidden}
.reel-progress>span{display:block;height:100%;background:var(--text);width:100%;transform:scaleX(var(--progress,.25));transform-origin:left;transition:transform .6s var(--flow-ease)}
.reel-arrows{display:flex;gap:9px}.reel-arrows button{background:none;border:1px solid #454540;border-radius:50%;width:48px;height:48px;font-size:22px;transition:background .2s,border-color .2s}.reel-arrows button:hover{background:#242421;border-color:#8b8b82}.reel-arrows button:disabled{opacity:.25;cursor:default}
.page-intro{padding:80px 0 56px;display:block}
.page-intro h1{font-size:clamp(78px,10.8vw,184px);line-height:.96;letter-spacing:-.055em}
.page-intro>p{margin-top:28px;font-size:16px;line-height:1.6;max-width:600px}
body[data-page=video] .work-reel,body[data-page=fpv] .work-reel{margin-top:0}
body[data-page=video] .site-footer,body[data-page=fpv] .site-footer{margin-top:112px}
.gallery-toolbar{position:sticky;top:92px;background:#080808ed;z-index:10;padding:22px 0 26px;gap:25px}
.filters button{font-size:13px}.gallery-count{font-size:11px}
.photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 28px;align-items:start}
.photo-grid>.photograph:nth-child(7n+1){grid-column:1/-1}
.photo-grid>.photograph:nth-child(7n+1) .photo-link{aspect-ratio:1.9}
.photo-grid .photo-link{overflow:hidden;aspect-ratio:1.5}
.photo-grid .photo-link>img{width:100%;height:100%;object-fit:cover}
.photo-grid .image-expand{bottom:20px;right:20px}
body[data-page=contact] main,body[data-page=contact] .site-footer{max-width:calc(1280px + 2 * var(--flow-gutter))}
.about-profile{margin-top:100px;column-gap:clamp(60px,8vw,140px);row-gap:42px}
.about-profile-heading h1{font-size:clamp(64px,6.7vw,96px);line-height:1}
.about-profile .about-copy>p{font-size:18px;line-height:1.75}
body[data-page=contact] .contact-section{margin-top:120px}
.site-footer{margin-top:120px;padding-bottom:30px}
.footer-top.project-cta{padding:72px 0 80px;position:relative}
.project-cta h2,.footer-top h2{font-size:clamp(48px,6.4vw,110px);line-height:1.02;letter-spacing:-.05em;max-width:1100px;margin:0}
.project-cta .project-cta-action{font-size:15px;margin-top:32px}
.project-cta:hover,.project-cta:focus-visible{background:transparent}
.project-cta:hover h2,.project-cta:focus-visible h2{text-decoration:none}
.project-cta:hover .project-cta-action svg{transform:translate(5px,-5px)}
@media(max-width:1000px) and (min-width:768px){
 .desktop-nav{gap:18px}.brand{font-size:18px}.header-actions{gap:22px}.cinematic-hero h1{font-size:11vw}
 .work-reel{--slide-width:86vw}.page-intro h1{font-size:12vw}
}
@media(max-width:767px){
 :root{--flow-gutter:6vw}.header-inner{height:78px}.site-header{}
 .cinematic-hero{min-height:650px;height:94svh;padding:120px var(--flow-gutter) 26px}
 .cinematic-hero h1{font-size:clamp(47px,12.8vw,78px);line-height:1.01}
 .hero-copy .home-intro-about{margin-top:24px;max-width:320px}.hero-copy .home-intro-about>p{font-size:16px;line-height:1.5}
 .hero-copy .home-intro-about .text-link{font-size:13px;margin-top:16px}
 .hero-actions{margin-top:32px;padding-top:20px;gap:15px;font-size:11px}
 .hero-explore{gap:15px}.hero-film-actions{gap:16px}.hero-watch{font-size:11px;gap:9px}.hero-watch svg{width:14px;height:14px}.hero-pause{width:32px;height:32px;font-size:13px}
 
 .home-work{padding-top:72px;scroll-margin-top:95px}.home-work+#films{padding-top:84px}
 .home-work .section-heading{align-items:flex-start;flex-direction:column;gap:20px;margin-bottom:24px}
 .home-work .section-heading h2{font-size:36px;line-height:1.05;max-width:320px}.home-work .section-heading>.text-link{font-size:12px}
 .work-reel{--slide-width:88vw}
 .reel-track{gap:16px;padding-top:8px;padding-bottom:14px}
 .reel-track .photo-link{aspect-ratio:1.13}
 .reel-track .film-image{aspect-ratio:1.33}
 .reel-track .film-label{padding-top:20px}.reel-track .film-label h2{font-size:29px}.reel-track .film-label>svg{width:21px;height:21px}
 .reel-track .film-category{font-size:11px;margin-top:9px}
 .reel-track .play-mark{left:18px;bottom:18px;font-size:11px;padding:10px 13px}
 .reel-bar{gap:22px;padding-top:7px}.reel-count{font-size:10px;width:58px}.reel-arrows button{width:44px;height:44px}
 .page-intro{padding:48px 0 32px}.page-intro h1{font-size:clamp(54px,13.5vw,100px)}.page-intro>p{margin-top:22px;font-size:14px}
 .gallery-toolbar{position:relative;top:0;gap:16px;padding-top:12px;padding-bottom:25px}
 .filters{gap:11px 19px}.filters button{font-size:12px}
 .photo-grid{grid-template-columns:1fr;gap:24px}
 .photo-grid>.photograph:nth-child(7n+1){grid-column:auto}
 .photo-grid .photo-link,.photo-grid>.photograph:nth-child(7n+1) .photo-link{aspect-ratio:auto}
 .photo-grid .photo-link>img{height:auto;object-fit:contain}
 .about-profile{margin-top:50px;row-gap:38px}.about-profile-heading h1{font-size:62px}
 .about-profile .about-copy>p{font-size:17px}
 body[data-page=contact] .contact-section{margin-top:74px}
 .site-footer,body[data-page=video] .site-footer,body[data-page=fpv] .site-footer{margin-top:80px}
 .footer-top.project-cta{padding:42px 0 48px}.project-cta h2,.footer-top h2{font-size:50px;max-width:600px}
 .project-cta .project-cta-action{font-size:14px;margin-top:27px}
}
@media(prefers-reduced-motion:reduce){
 :root{scroll-behavior:auto}.hero-canvas,.hero-copy{transform:none;opacity:1}.hero-film{display:none}.hero-pause{display:none}
}

#featured-photo-title{scroll-margin-top:110px}.photo-grid>.photograph:has([data-photo="photo-15"]){grid-column:auto}.photo-grid>.photograph:has([data-photo="photo-15"]) .photo-link{aspect-ratio:1.5}
@media(max-width:767px){.photo-grid>.photograph:has([data-photo="photo-15"]) .photo-link{aspect-ratio:auto}}

:root:not(.lenis){scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){:root:not(.lenis){scroll-behavior:auto}}
/* Desktop centring and circular neighbours. Mobile sizes and layout remain unchanged. */
@media(min-width:768px){
 .reel-track{padding-inline:max(0px,calc((100% - var(--slide-width)) / 2));scroll-padding-inline:0;overscroll-behavior-x:contain}
 .reel-track>[data-slide]{scroll-snap-align:center}
 .photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
 .photo-grid>.photograph:nth-child(7n+1){grid-column:auto}
 .photo-grid>.photograph:nth-child(7n+1) .photo-link{aspect-ratio:1.5}
}
@media(min-width:1100px){
 body[data-page=photo] main{max-width:calc(1680px + 2 * var(--flow-gutter))}
 .photo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Keep YouTube chrome outside the decorative background frame. */



/* V4: three photographs across on desktop, original stacked gallery on mobile. */
body[data-page=photo] main{max-width:none}
.gallery-reel{display:block;scroll-margin-top:120px}
.gallery-reel .reel-track{gap:24px;align-items:start}
.gallery-reel .reel-track .photo-link{aspect-ratio:1.5}
.gallery-reel .reel-track .photo-link>img{height:100%;object-fit:cover}
.work-reel[aria-label]{scroll-margin-top:110px}
/* The player occupies its own poster frame; page scrolling remains native. */
.film-card{position:relative}
.inline-film{position:absolute;top:0;left:0;width:100%;aspect-ratio:1.9;z-index:2;background:#080808}
.inline-film iframe{display:block;width:100%;height:100%;border:0}
.inline-stop{position:absolute;top:calc(100% + 14px);right:0;display:grid;place-items:center;width:44px;height:44px;padding:10px;background:#080808;border:1px solid #454540;border-radius:50%;color:var(--text);cursor:pointer}
.inline-stop svg{width:22px;height:22px}
.inline-stop:hover{background:#242421;border-color:#8b8b82}
.inline-stop:focus-visible{outline:2px solid var(--text);outline-offset:4px}
.is-playing>.film-link .film-label{padding-right:58px}
.is-playing>.film-link .film-label>svg{visibility:hidden}
@media(max-width:767px){
 .gallery-reel .reel-track{display:grid;grid-template-columns:1fr;gap:24px;padding:0 var(--flow-gutter);overflow:visible;scroll-snap-type:none}
 .gallery-reel .reel-track>[data-slide]{scroll-snap-align:none}
 .gallery-reel .reel-track .photo-link{aspect-ratio:auto}
 .gallery-reel .reel-track .photo-link>img{height:auto;object-fit:contain}
 .gallery-reel .reel-bar{display:none}
 .inline-film{aspect-ratio:1.33}
 .inline-stop{top:calc(100% + 12px)}
}

/* V5: uploaded banner video, with no embedded third-party player UI. */
.hero-film{overflow:hidden}
.hero-film .hero-video{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;transform:scale(1.08);border:0;pointer-events:none}

/* V8: the live gallery layout expanded to the viewport width. */
body[data-page=photo] main{max-width:none}
.full-width-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-inline:calc(-1 * var(--flow-gutter))}
.full-width-gallery>.photograph:nth-child(7n+1){grid-column:auto}
.full-width-gallery .photo-link,.full-width-gallery>.photograph:nth-child(7n+1) .photo-link{aspect-ratio:3/2}
.full-width-gallery .photo-link>img{width:100%;height:100%;object-fit:cover}
/* Centered play affordance, with the existing full-card link handling playback. */
.reel-track .play-mark{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);display:grid;place-items:center;width:76px;height:76px;padding:0;border:1px solid #ffffffcc;border-radius:50%;background:#0808087a;color:#fff;pointer-events:none;transition:background .2s,border-color .2s,transform .2s}
.reel-track .play-mark svg{width:30px;height:30px;margin-left:4px}
.reel-track .film-link:hover .play-mark,.reel-track .film-link:focus-visible .play-mark{background:#080808b3;border-color:#fff;transform:translate(-50%,-50%) scale(1.06)}
@media(max-width:767px){
 .full-width-gallery{grid-template-columns:1fr;gap:14px}
 .full-width-gallery .photo-link,.full-width-gallery>.photograph:nth-child(7n+1) .photo-link{aspect-ratio:auto}
 .full-width-gallery .photo-link>img{height:auto;object-fit:contain}
 .reel-track .play-mark{width:58px;height:58px}
 .reel-track .play-mark svg{width:24px;height:24px;margin-left:3px}
}

/* V9: align visible letter edges, including the homepage's two title lines. */
.page-intro h1{margin-inline-start:calc(-1 * var(--title-inset,0em))}
.hero-copy .line-mask>span{text-indent:calc(-1 * var(--title-inset,0em))}
.page-intro>p,.hero-copy .home-intro-about>p,.hero-copy .home-intro-about>.text-link{margin-inline-start:calc(-1 * var(--copy-inset,0em))}
.reel-arrows button{display:grid;place-items:center;padding:0;line-height:1}
.reel-arrows button>svg{display:block;width:22px;height:22px}
.reel-track.is-settling,.reel-track.can-drag.is-dragging{scroll-snap-type:none;scroll-behavior:auto}
.reel-track.can-drag.is-dragging{user-select:none;-webkit-user-select:none}
@media(min-width:768px) and (hover:hover) and (pointer:fine){
 .reel-track.can-drag,.reel-track.can-drag a{cursor:grab}
 .reel-track.can-drag.is-dragging,.reel-track.can-drag.is-dragging *{cursor:grabbing;user-select:none;-webkit-user-select:none}
 .reel-track.can-drag.is-dragging{scroll-snap-type:none;scroll-behavior:auto}
 .reel-track.can-drag img{-webkit-user-drag:none}
}
/* Homepage section stops use native viewport snapping, independent of horizontal reels. */
html:has(body[data-page="home"]){scroll-snap-type:y proximity}
body[data-page="home"] .cinematic-hero,
body[data-page="home"] .home-work{scroll-snap-align:start;scroll-margin-block:0}
body[data-page="home"] .site-footer{scroll-snap-align:start;scroll-margin-block-start:112px}
@media(min-width:768px) and (min-height:600px){
 html:has(body[data-page="home"]){scroll-snap-type:y proximity}
 body[data-page="home"] .home-work{min-height:100svh;scroll-snap-stop:normal}
}
html.loader-active:has(body[data-page="home"]),
html:has(body[data-page="home"].menu-open),
html:has(body[data-page="home"] dialog[open]){scroll-snap-type:none}
@media(max-width:767px){
 body[data-page="home"] .site-footer{scroll-margin-block-start:94px}
}
@media(prefers-reduced-motion:reduce){
 html:has(body[data-page="home"]){scroll-snap-type:none}
}
/* Film/FPV entry settles on the reel below the sticky header, including its film title. */
html:has(body:is([data-page="video"],[data-page="fpv"])){scroll-snap-type:y proximity;scroll-padding-block-start:112px}
body:is([data-page="video"],[data-page="fpv"]) :is(.page-intro,.work-reel,.site-footer){scroll-snap-align:start;scroll-margin-block:0}
body:is([data-page="video"],[data-page="fpv"]) .work-reel{scroll-snap-stop:normal}
@media(min-width:768px) and (min-height:600px){
 html:has(body:is([data-page="video"],[data-page="fpv"])){scroll-snap-type:y proximity}
}
@media(max-width:767px){
 html:has(body:is([data-page="video"],[data-page="fpv"])){scroll-padding-block-start:94px}
}
html.loader-active:has(body:is([data-page="video"],[data-page="fpv"])),
html:has(body:is([data-page="video"],[data-page="fpv"]).menu-open),
html:has(body:is([data-page="video"],[data-page="fpv"]) dialog[open]){scroll-snap-type:none}
@media(prefers-reduced-motion:reduce){
 html:has(body:is([data-page="video"],[data-page="fpv"])){scroll-snap-type:none}
}
/* Compact collection entry, shared title/gallery edges. */
body[data-page=photo] .full-width-gallery{margin-inline:0}
.gallery-toolbar{position:static;top:auto;background:transparent;padding:14px 0 20px}
body[data-page=photo] .page-intro,body[data-page=video] .page-intro,body[data-page=fpv] .page-intro{padding:28px 0 24px}
body[data-page=photo] .page-intro h1,body[data-page=video] .page-intro h1,body[data-page=fpv] .page-intro h1{font-size:clamp(54px,8vw,128px)}
body[data-page=photo] .page-intro>p,body[data-page=video] .page-intro>p,body[data-page=fpv] .page-intro>p{margin-top:14px}
@media(min-width:768px){
 body[data-page=video] .work-reel,body[data-page=fpv] .work-reel{--slide-width:min(83vw,max(360px,calc((100svh - 350px) * 1.9)))}
}
@media(max-width:767px){
 body[data-page=photo] .page-intro,body[data-page=video] .page-intro,body[data-page=fpv] .page-intro{padding:22px 0 20px}
 body[data-page=photo] .page-intro h1,body[data-page=video] .page-intro h1,body[data-page=fpv] .page-intro h1{font-size:clamp(46px,12vw,76px)}
 body[data-page=video] .work-reel,body[data-page=fpv] .work-reel{--slide-width:min(88vw,max(240px,calc((100svh - 335px) * 1.33)))}
}

/* Keep the matching opening frame visible until motion is actually painted. */
body[data-page="home"] main{animation:none}
.hero-first-frame{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-first-frame img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;transform:scale(1.08)}
.cinematic-hero .hero-film{opacity:0;transition:none}
.cinematic-hero.hero-playing .hero-film{opacity:1}

/* Free vertical scrolling on mobile; horizontal gallery snapping is unchanged. */
@media(max-width:767px){
 html:has(body:is([data-page="home"],[data-page="video"],[data-page="fpv"])){scroll-snap-type:none;scroll-padding-block-start:0}
 body:is([data-page="home"],[data-page="video"],[data-page="fpv"]) :is(.cinematic-hero,.home-work,.page-intro,.work-reel,.site-footer){scroll-snap-align:none;scroll-snap-stop:normal;scroll-margin-block:0}
}

/* Mobile reels scroll freely between cards on Home, Film and FPV. */
@media(max-width:767px){
 body:is([data-page="home"],[data-page="video"],[data-page="fpv"]) .reel-track{scroll-snap-type:none}
 body:is([data-page="home"],[data-page="video"],[data-page="fpv"]) .reel-track>[data-slide]{scroll-snap-align:none;scroll-snap-stop:normal}
}
