/* A quiet fullscreen control inside the existing navigation. */
:is(.hero-header,.works-header,.archive-header,.profile-header,.photo-header) .site-fullscreen{display:inline-grid;place-items:center;flex:0 0 28px;width:28px;height:32px;min-width:0;min-height:0;margin:0 0 0 2px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:inherit;opacity:.55;appearance:none;cursor:pointer;transition:opacity .18s ease}
:is(.hero-header,.works-header,.archive-header,.profile-header,.photo-header) .site-fullscreen:hover{opacity:1}
:is(.hero-header,.works-header,.archive-header,.profile-header,.photo-header) .site-fullscreen:focus-visible{outline:1px solid currentColor;outline-offset:2px;opacity:1}
:is(.hero-header,.works-header,.archive-header,.profile-header,.photo-header) .site-fullscreen:disabled{opacity:.22;cursor:default}
.site-fullscreen svg{display:block;width:14px;height:14px;pointer-events:none}
@media(max-width:700px){:is(.hero-header,.works-header,.archive-header,.profile-header,.photo-header) .site-fullscreen{width:30px;height:44px;flex-basis:30px;margin-left:0}}
@media(prefers-reduced-motion:reduce){.site-fullscreen{transition:none!important}}

/* Particle Lab follows the same navigation at every breakpoint. */
@media(max-width:700px){
 :is(.hero-header,.works-header,.archive-header,.profile-header,.photo-header)>.navigation{flex-wrap:wrap;column-gap:12px!important;row-gap:0}
 .particle-lab-link{white-space:nowrap}
}

/* Readable mobile navigation, arranged in two intentional rows. */
@media(max-width:700px){
 :is(.hero-header,.works-header,.archive-header,.profile-header,.photo-header)>.navigation{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;column-gap:12px!important;row-gap:0;align-items:center}
 :is(.hero-header,.works-header,.archive-header,.profile-header,.photo-header)>.navigation .pill{font-size:12px!important;min-height:44px;justify-self:start;white-space:nowrap}
 .navigation>.nav-about-mobile{margin-left:0;justify-content:flex-start}
 :is(.hero-header,.works-header,.archive-header,.profile-header,.photo-header)>.navigation>.site-fullscreen{justify-self:end;width:44px;min-width:44px}
 .language-switch-mobile .language-choice{font-size:12px;min-width:32px}
}

/* Keep mobile imagery transparent behind the one-viewport photography layout. */
@media(max-width:700px), (max-width:1000px) and (max-height:500px) and (pointer:coarse){
 html[data-fullbleed-background]{background:transparent}
 html[data-fullbleed-background]>body{background-color:transparent;background-image:var(--viewport-backdrop-image);background-position:var(--viewport-backdrop-position,center);background-size:cover;background-repeat:no-repeat;background-attachment:scroll}
 html[data-fullbleed-background]:has(>body.photo-has-hero){overflow:hidden;overscroll-behavior-y:none}
 html[data-fullbleed-background]>body.photo-has-hero{overflow:hidden;overscroll-behavior-y:none}
 #start.hero,body.photo-has-hero #fotografia,body.photo-has-hero #fotografia .photo-featured{height:100dvh;min-height:100dvh}
}

/* The image continues under Safari chrome; its transparent controls stay in place. */
html[data-photo-edge-view],html[data-photo-edge-view]>body.photo-has-hero:not(.modal-open){overflow-x:clip!important;overflow-y:visible!important;overscroll-behavior-y:none}
html[data-photo-edge-view] body.photo-has-hero #fotografia,
html[data-photo-edge-view] body.photo-has-hero #fotografia .photo-featured{height:calc(100dvh + 240px)!important;min-height:0!important}
/* Keep the Safari edge offset, but do not let a vertical swipe move the page.
   Horizontal project selection and pinch zoom remain available; dialogs can scroll. */
html[data-photo-edge-view]>body.photo-has-hero:not(.modal-open){touch-action:pan-x pinch-zoom}

/* The home preview uses the same iPhone edge treatment as photography. */
html[data-home-edge-view],html[data-home-edge-view]>body:not(.modal-open){overflow-x:clip!important;overflow-y:visible!important;overscroll-behavior-y:none}
html[data-home-edge-view] #start.hero{height:calc(100dvh + 240px)!important;min-height:0!important}
html[data-home-edge-view]>body:not(.modal-open){touch-action:pan-x pinch-zoom}

/* Centre PLAY in the visible phone viewport, independent of the film caption. */
@media(max-width:700px), (max-width:1000px) and (max-height:500px) and (pointer:coarse){
 #start .hero-rail #play-film.ascii-play-button{position:fixed;top:50dvh;left:50vw;right:auto;bottom:auto;transform:translate(-50%,-50%);margin:0;z-index:11}
}

/* On browsers without page fullscreen, offer an explicitly labelled viewing mode. */
.site-view-only :is(.hero-header,.works-header,.archive-header,.profile-header,.photo-header){visibility:hidden;pointer-events:none}
.site-view-only :is(.hero-rail,.hero-bottom,.hero-name,.photo-featured-rail,.photo-featured-title,.photo-project-list){visibility:hidden!important;pointer-events:none!important}
.site-view-only .site-fullscreen{visibility:visible!important;pointer-events:auto!important;position:fixed;top:16px;right:18px;width:44px;height:44px;opacity:1;z-index:100}
@media(max-width:700px){
 :is(.hero-header,.works-header,.archive-header,.profile-header,.photo-header) .site-fullscreen{opacity:.85}
 :is(.hero-header,.works-header,.archive-header,.profile-header,.photo-header)>.navigation .pill{text-shadow:0 1px 5px #0009}
}

/* A balanced, transparent mobile masthead: identity above, navigation below. */
@media(max-width:700px){
 :is(.hero-header,.works-header,.archive-header,.profile-header,.photo-header){grid-template-columns:minmax(0,1fr) auto!important;align-items:center;column-gap:12px!important;row-gap:8px!important;padding-left:18px;padding-right:18px}
 :is(.hero-header,.works-header,.archive-header,.profile-header,.photo-header)>.brand.ascii-brand{margin:0;align-self:center}
 :is(.hero-header,.works-header,.archive-header,.profile-header,.photo-header)>.language-switch-mobile{position:static;grid-column:2;grid-row:1;justify-self:end;gap:2px;align-self:center}
 .language-switch-mobile .language-choice{min-width:32px;min-height:44px}
 :is(.hero-header,.works-header,.archive-header,.profile-header,.photo-header)>.navigation{grid-column:1/-1!important;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:8px!important;row-gap:0}
 :is(.hero-header,.works-header,.archive-header,.profile-header,.photo-header)>.navigation .pill{font-size:12px!important;line-height:1.25!important;letter-spacing:0!important;justify-self:start;min-height:44px;opacity:1}
 :is(.hero-header,.works-header,.archive-header,.profile-header,.photo-header)>.navigation .pill:nth-child(2),
 :is(.hero-header,.works-header,.archive-header,.profile-header,.photo-header)>.navigation .nav-about-mobile{justify-self:center}
 :is(.hero-header,.works-header,.archive-header,.profile-header,.photo-header)>.navigation .pill:nth-child(3){justify-self:end}
 :is(.hero-header,.works-header,.archive-header,.profile-header,.photo-header)>.navigation .particle-lab-link,
 :is(.hero-header,.works-header,.archive-header,.profile-header,.photo-header)>.navigation .nav-about-mobile{opacity:.82}
 :is(.hero-header,.works-header,.archive-header,.profile-header,.photo-header)>.navigation>.site-fullscreen{margin-right:-10px}
}

/* Crossfade both video layers instead of dropping the outgoing frame abruptly. */
#hero-embed .hero-preview-layer:not(.is-current){transition:opacity .38s ease}
@media(prefers-reduced-motion:reduce){#hero-embed .hero-preview-layer:not(.is-current){transition:none}}