/* Local behavior for the original layout; typography comes from original CSS. */
.page-section.has-section-divider{--divider-height:0px!important;--previous-section-divider-offset:0px!important;padding-bottom:0!important}
.sqs-video-background-native__video-player video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.local-lightbox{position:fixed;inset:0;margin:auto;border:0;padding:0;background:#fff;color:#000;width:100vw;max-width:none;height:100vh;height:100svh;max-height:none;box-sizing:border-box;overflow:hidden;font-family:"Cutive Mono",monospace}
.local-lightbox::backdrop{background:#000b}
.local-lightbox-stage{position:absolute;inset:calc(60px + env(safe-area-inset-top)) 16px calc(76px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center}
.local-lightbox-stage img{display:block;width:100%;height:100%;object-fit:contain}
.local-lightbox button{position:relative;border:0;background:#fff;color:#000;font:inherit;font-size:14px;padding:12px;min-height:44px;cursor:pointer;touch-action:manipulation}
.local-lightbox .local-lightbox-close{position:absolute;z-index:2;top:calc(8px + env(safe-area-inset-top));right:12px}
.local-lightbox-controls{position:absolute;z-index:2;bottom:calc(12px + env(safe-area-inset-bottom));left:12px;right:12px;display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:12px}
.local-lightbox button:focus-visible{outline:1px solid #000;outline-offset:-3px}
.local-lightbox button:disabled{opacity:.35;cursor:default}
.local-gallery-static{cursor:default!important}

/* The header follows scrolling on subpages; the homepage stays visible. */
#header{position:fixed!important;top:0;left:0;width:100%;transition:transform .22s ease!important}
#header.local-header-hidden{transform:translateY(-100%)}
.header--menu-open #header,
.mobile-project-home #header{transform:none!important}
@media(prefers-reduced-motion:reduce){#header{transition:none!important}}

/* The homepage's image sequence is exclusive to the mobile layout. */
.project-vimeo-cover{position:relative;background:#000;overflow:hidden}
.project-vimeo-cover>.project-cover-player{position:absolute!important;inset:0;z-index:2;width:100%;height:100%;padding-bottom:0!important;container-type:size;overflow:hidden}
.project-vimeo-cover>.project-cover-player:fullscreen{width:100vw!important;height:100vh!important}
.project-cover-player>iframe{position:absolute;inset:auto;top:50%;left:50%;width:max(100cqw,calc(100cqh / var(--project-video-height-ratio)))!important;height:max(100cqh,calc(100cqw * var(--project-video-height-ratio)))!important;max-width:none!important;transform:translate(-50%,-50%)}
.project-cover-player:fullscreen>iframe{inset:0;width:100%!important;height:100%!important;transform:none}
.mobile-home-projects{display:none}
.local-email-link,.local-phone-link{color:inherit!important;text-decoration:none;white-space:nowrap}
.local-email-link:hover,.local-phone-link:hover{text-decoration:underline}
@media(max-width:767px){
 .header--menu-open #header .header-menu,
 .header--menu-open #header .header-menu-bg{background:#fff!important;opacity:1!important}
 .header--menu-open #header .header-background{background:transparent!important;opacity:0!important;transition:none!important}
 .header--menu-open #header .header-menu a,
 .header--menu-open #header .header-menu-nav,
 .header--menu-open #header #site-title,
 .header--menu-open #header .header-title-logo a{color:#000!important}
 .header--menu-open #header .top-bun,
 .header--menu-open #header .patty,
 .header--menu-open #header .bottom-bun{background-color:#000!important}
 .mobile-vimeo-block{grid-column:1/-1!important}
 .local-footer-contacts{display:flex!important;flex-direction:column;gap:24px;padding-inline:var(--sqs-mobile-site-gutter,6vw);box-sizing:border-box}
 .local-footer-contacts>.fe-block{width:100%;min-width:0}
 .local-email-block{grid-column:2/-2!important}
 /* A landscape cover at the very top of each project page. */
 .page-section.mobile-project-cover{height:calc(100vw * 2 / 3)!important;min-height:0!important;max-height:none!important;padding:0!important;overflow:hidden}
 .mobile-project-cover>.content-wrapper{display:none}
 .mobile-project-cover .section-background img{width:100%;height:100%;object-fit:cover}
 body.mobile-project-home{background:#000;height:100vh;height:100svh;overflow:hidden}
 .mobile-project-home #page{padding:0!important;margin:0!important}
 .mobile-project-home #page>article,
 .mobile-project-home #footer-sections{display:none}
 .mobile-project-home .mobile-home-projects{display:block;width:100%;height:100vh;height:100svh;margin:0;padding:0;background:#000;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;overscroll-behavior-y:contain;scrollbar-width:none}
 .mobile-home-projects::-webkit-scrollbar{display:none}
 .mobile-home-project{display:block;position:relative;width:100%;height:100vh;height:100svh;overflow:hidden;color:#fff;text-decoration:none;scroll-snap-align:start;scroll-snap-stop:always}
 .mobile-home-project img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
 .mobile-home-project--sideways img{inset:auto;top:50%;left:50%;width:100vh;width:100svh;height:100vw;max-width:none;transform:translate(-50%,-50%) rotate(-90deg)}
 .mobile-home-project::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.25),transparent 18%,transparent 65%,rgba(0,0,0,.55));pointer-events:none}
 .mobile-home-project-title{position:absolute;z-index:1;bottom:calc(24px + env(safe-area-inset-bottom));left:12px;right:12px;text-align:center;color:#fff;font-family:"Cutive Mono",monospace;font-size:9px;font-weight:400;line-height:1.1;letter-spacing:normal;text-shadow:0 1px 8px #0006}
 .mobile-home-project-name,.mobile-home-project-role{display:block;white-space:nowrap}
 .mobile-home-project:focus-visible{outline:2px solid #fff;outline-offset:-4px}
 .mobile-project-home #header{position:fixed!important;top:0;left:0;width:100%;background:transparent}
 .mobile-project-home:not(.header--menu-open) #header .header-background{background:transparent!important;opacity:0}
 .mobile-project-home:not(.header--menu-open) #site-title{color:#fff!important}
 .mobile-project-home:not(.header--menu-open) #header .top-bun,
 .mobile-project-home:not(.header--menu-open) #header .patty,
 .mobile-project-home:not(.header--menu-open) #header .bottom-bun{background-color:#fff!important}
}

/* Text controls over Vimeo's video, using the site's Cutive Mono face. */
.custom-vimeo{background:#000;isolation:isolate;container-type:inline-size}
.custom-vimeo iframe{pointer-events:none}
.custom-youtube-poster{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.custom-youtube.custom-vimeo--idle .custom-youtube-poster{display:block}
.custom-vimeo-ui{position:absolute;inset:0;z-index:2;color:#fff;font-family:"Cutive Mono",monospace;font-size:14px;line-height:1.2;letter-spacing:.4px}
.custom-vimeo-ui button{font:inherit;letter-spacing:inherit;background:none;border:0;border-radius:0;color:inherit;cursor:pointer;padding:12px 0;white-space:nowrap}
.custom-vimeo-ui button:focus-visible,.custom-vimeo-seek:focus-visible{outline:1px solid #fff;outline-offset:3px}
.custom-vimeo-start{position:absolute;inset:0;margin:auto;display:none;width:max-content;height:max-content;font-size:24px!important;pointer-events:auto;text-shadow:0 1px 2px rgba(0,0,0,.32),0 0 5px rgba(0,0,0,.16)}
.custom-vimeo--idle .custom-vimeo-start{display:block}
.custom-vimeo-controls{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:18px;padding:18px 24px 10px;background:linear-gradient(transparent,#000a);pointer-events:auto}
.custom-vimeo--idle .custom-vimeo-controls{opacity:0!important;visibility:hidden;pointer-events:none!important}
.custom-vimeo-time{white-space:nowrap;font-variant-numeric:tabular-nums}
.custom-vimeo-seek{--played:0%;flex:1;min-width:30px;width:100%;height:20px;margin:0;cursor:pointer;appearance:none;-webkit-appearance:none;background:transparent}
.custom-vimeo-seek::-webkit-slider-runnable-track{height:1px;background:linear-gradient(to right,#fff var(--played),#fff6 var(--played))}
.custom-vimeo-seek::-moz-range-track{height:1px;background:#fff6}
.custom-vimeo-seek::-moz-range-progress{height:1px;background:#fff}
.custom-vimeo-seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:5px;height:5px;background:#fff;border:0;border-radius:50%;margin-top:-2px}
.custom-vimeo-seek::-moz-range-thumb{width:5px;height:5px;background:#fff;border:0;border-radius:50%}
.custom-vimeo-status{position:absolute;top:12px;left:12px;right:12px;text-align:center;text-shadow:0 1px 4px #000}
.custom-vimeo:fullscreen{padding-bottom:0!important;width:100vw!important;height:100vh!important;background:#000}
.custom-vimeo:fullscreen iframe{width:100%;height:100%}
/* Mouse users reveal controls on hover; keyboard focus also reveals them. */
@media(hover:hover) and (pointer:fine){
 .custom-vimeo-controls{opacity:0;pointer-events:none;transition:opacity .18s ease}
 .custom-vimeo--mouse-active:hover .custom-vimeo-controls,
 .custom-vimeo:focus-visible .custom-vimeo-controls,
 .custom-vimeo:has(:focus-visible) .custom-vimeo-controls{opacity:1;pointer-events:auto}
}
@media(prefers-reduced-motion:reduce){
 .custom-vimeo-controls{transition:none}
}
@container(max-width:600px){
 .custom-vimeo-ui{font-size:10px;letter-spacing:0}
 .custom-vimeo-controls{gap:10px;padding:18px 12px 8px}
}
@media(max-width:767px){
 .custom-vimeo-ui{font-size:10px;letter-spacing:0}
 .custom-vimeo-start{font-size:20px!important}
 .custom-vimeo-controls{gap:10px;padding:20px 12px 6px;flex-wrap:wrap}
 .custom-vimeo-seek{order:-1;flex-basis:100%;height:12px}
 .custom-vimeo-time{margin-right:auto}
}

/* Keep the B93 x Kcal subjects within the thumbnail crop. */
@media(min-width:768px){.b93-kcal-cover .project-cover-player.custom-vimeo--idle:not(:fullscreen)>iframe{top:calc(50% + 8cqh)}}
@media(max-width:767px){.mobile-home-project[href="/work/direction-b93xkcal"] img,.mobile-home-project[href="/work/direction-b93xkcal/"] img{object-position:72% 50%}}

/* Semantic headings retain the original paragraph/section-title appearance. */
.seo-site-title{display:block;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;margin:0}
.seo-from-p{font:inherit;line-height:var(--body-font-line-height);letter-spacing:inherit;text-transform:inherit;color:var(--paragraphMediumColor);margin:1rem 0;overflow-wrap:break-word}
.seo-from-p.sqsrte-large{color:var(--paragraphLargeColor)}
.seo-from-h4{line-height:calc(var(--heading-font-line-height) * (1 + (1 - var(--heading-4-size-value))/25));color:var(--headingSmallColor)}
@media screen and (max-width:767px) and (orientation:portrait){
 .seo-from-p.sqsrte-large{font-size:calc((var(--large-text-size-value) - 1) * calc(.012 * min(100vh, 900px)) + 1rem)}
 .seo-from-h4{font-size:calc((var(--heading-4-size-value) - 1) * calc(.012 * min(100vh, 900px)) + 1rem)}
}
@media screen and (min-width:768px),screen and (orientation:landscape){
 .seo-from-p.sqsrte-large{font-size:min(calc((var(--large-text-size-value) - 1) * 1.2vw + 1rem),max(calc((var(--large-text-size-value) - 1) * .012 * var(--maxPageWidth) + 1rem),calc(var(--large-text-size-value) * 1rem)))}
 .seo-from-h4{font-size:min(calc((var(--heading-4-size-value) - 1) * 1.2vw + 1rem),max(calc((var(--heading-4-size-value) - 1) * .012 * var(--maxPageWidth) + 1rem),calc(var(--heading-4-size-value) * 1rem)))}
}