/* Layout follows the available viewport, never a device-name whitelist. */
html{min-width:0}
.work-cinema{height:100vh;height:100svh}
.portfolio-index__links a,.expertise__list li,.studio__copy,.contact__email{min-width:0;overflow-wrap:anywhere}
html.has-cinema-preview .contact__email{white-space:normal;overflow-wrap:anywhere}

/* Narrow outer screens and split-window browsing. */
@media(max-width:340px){
 html.has-cinema-preview .nav-links{gap:4px;font-size:9px;letter-spacing:0}
 .portfolio-index__links{grid-template-columns:minmax(0,1fr)}
 .expertise__list{grid-template-columns:minmax(0,1fr);gap:20px}
 .work-cinema__credit p{flex-wrap:wrap;gap:6px 10px}
 .work-cinema__credit h1{font-size:24px}
 .work-cinema__timeline-head{letter-spacing:0}
 .work-cinema__timeline-head>span{max-width:100px}
 .work-cinema__controls{gap:2px}
 .work-cinema__continue{font-size:8px;letter-spacing:0;gap:6px}
 .theme-hint{font-size:9px}
 .contact .display span:first-child{white-space:normal}
}

/* A wide unfolded screen needs clearance above the taller filmstrip. */
@media(min-width:1101px){
 .work-cinema__caption{bottom:calc(170px + var(--thumb-width) * .208334 + var(--safe-bottom))}
}
/* Short landscape windows keep controls in reach rather than adding a tall blank stage. */
@media(min-width:601px) and (max-height:500px){
 .work-cinema{min-height:360px}
 .work-cinema__caption{bottom:calc(174px + var(--safe-bottom))}
}

/* Wide touch screens still use touch controls, including tri-fold/tablet widths. */
@media(hover:none),(pointer:coarse){
 .folio-frame img{transition:none}
 .portfolio-index__links a,.folio-film,.theme-toggle{min-height:44px}
 .client-name{touch-action:manipulation}
 .consult-widget{right:max(16px,env(safe-area-inset-right));bottom:calc(64px + env(safe-area-inset-bottom))}
 html.has-cinema-preview .back-to-top{right:max(16px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom))}
}

/* Progressive enhancement when the browser exposes physical viewport segments.
   Media stays continuous. Only captions and navigation avoid the fold. */
@media(horizontal-viewport-segments:2){
 .work-cinema__credit{max-width:calc(env(viewport-segment-width 0 0) - 2 * var(--cinema-edge))}
 .folio-viewer footer{left:env(viewport-segment-left 1 0);right:max(12px,env(safe-area-inset-right))}
}
@media(horizontal-viewport-segments:3){
 .work-cinema__credit{max-width:calc(env(viewport-segment-width 0 0) - 2 * var(--cinema-edge))}
 .folio-viewer footer{left:env(viewport-segment-left 1 0);right:calc(100% - env(viewport-segment-right 1 0))}
}
@media(vertical-viewport-segments:2){
 .folio-viewer img{height:env(viewport-segment-height 0 0);padding-bottom:12px}
 .folio-viewer footer{bottom:calc(12px + env(safe-area-inset-bottom))}
}

/* Shared page edges remain close to the viewport, including ultrawide desktops. */
html.has-cinema-preview {
 --wide: calc(100% - max(var(--space), var(--safe-left)) - max(var(--space), var(--safe-right)));
}
.portfolio-index {max-width:none;padding-left:max(var(--space),env(safe-area-inset-left));padding-right:max(var(--space),env(safe-area-inset-right))}
/* Keep the approved mosaic geometry, but remove the presentation's outer canvas. */
.folio-spread--frames .folio-spread__canvas {display:flex;flex-direction:column;aspect-ratio:auto;padding:0;container-type:normal}
.folio-spread--frames .folio-spread__type {
 position:relative;inset:auto;order:0;display:flex;flex-direction:column;align-items:flex-start;
 gap:16px;margin:0;padding:clamp(32px,4vw,64px) max(var(--space),env(safe-area-inset-right)) 28px max(var(--space),env(safe-area-inset-left));
}
.folio-spread--frames .folio-spread__images {position:relative;inset:auto;order:1;width:100%;transform:none;aspect-ratio:var(--folio-grid-ratio)}
@media(max-width:760px){
 .folio-spread--frames .folio-spread__images {aspect-ratio:auto;gap:10px}
}
/* One text grid across navigation, cinema, editorial sections and project covers. */
html.has-cinema-preview {
 --page-left:max(var(--space),var(--safe-left));
 --page-right:max(var(--space),var(--safe-right));
}
html.has-cinema-preview .work-cinema {--cinema-edge:var(--space)}
.work-cinema__timeline-head {margin-left:var(--page-left);margin-right:var(--page-right)}
.work-cinema__edition {left:var(--page-left)}
html.has-cinema-preview .site-footer {width:100%;max-width:none;padding-left:var(--page-left);padding-right:var(--page-right)}
html.has-cinema-preview .clients__status a {justify-self:end}
@media(min-width:761px){
 .folio-cover-copy {left:var(--page-left);right:var(--page-right)}
 .folio-film {right:var(--page-right)}
 .folio-spread--hero .folio-spread__canvas {padding-left:0;padding-right:0}
}
@media(max-width:760px){
 .folio-spread--hero .folio-spread__canvas {padding-left:var(--page-left);padding-right:var(--page-right)}
 .folio-spread--hero .folio-spread__images {margin-left:calc(-1 * var(--page-left));margin-right:calc(-1 * var(--page-right))}
}
/* The service labels need a readable column, not a third of an ultrawide screen. */
@media(min-width:901px){
 .expertise {grid-template-columns:minmax(0,1fr) max-content;column-gap:clamp(28px,3vw,48px)}
}

/* Contact is one compact closing section: invitation, direct contact, social links. */
html.has-cinema-preview .contact__grid {grid-template-columns:max-content minmax(0,1fr);gap:clamp(36px,7vw,140px);align-items:start}
html.has-cinema-preview .contact__details {
 display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:36px;row-gap:18px;
 width:100%;max-width:none;align-self:start;justify-self:stretch;text-align:left;padding:0;border:0;
}
html.has-cinema-preview .contact__details>p,html.has-cinema-preview .contact__email {grid-column:1;margin:0;justify-content:flex-start}
html.has-cinema-preview .contact__details>p:first-child {font-size:12px;letter-spacing:.04em;line-height:1.5}
html.has-cinema-preview .contact__email {line-height:1.25}
html.has-cinema-preview .contact__details .socials {
 grid-column:2;grid-row:1 / 4;display:flex;flex-direction:column;justify-content:flex-start;
 align-items:flex-end;gap:14px;border:0;padding:0;
}
@media(max-width:1100px){
 html.has-cinema-preview .contact__grid {grid-template-columns:1fr;gap:32px}
}
@media(max-width:600px){
 html.has-cinema-preview .contact__details {grid-template-columns:minmax(0,1fr);row-gap:18px}
 html.has-cinema-preview .contact__details .socials {grid-column:1;grid-row:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:16px 20px;padding-top:10px}
}