.header-tools{position:absolute;top:42px;left:calc(50% + clamp(150px,18vw,265px) + 24px);display:flex;align-items:center;gap:10px;white-space:nowrap}.header-tools button,.header-tools a{display:flex;align-items:center;justify-content:center;border:1px solid #ffffff60;background:transparent;color:#eee;height:30px;min-width:30px;border-radius:18px;text-decoration:none;font-size:11px;padding:0 9px}.header-tools .email-tool{font-size:17px}.header-tools .shop-tool{padding:0 14px}.search-symbol{position:relative;width:10px;height:10px;border:1.3px solid currentColor;border-radius:50%;margin-right:2px}.search-symbol::after{content:'';position:absolute;width:5px;height:1px;background:currentColor;transform:rotate(45deg);right:-4px;bottom:-2px}.header-tools a:hover,.header-tools button:hover{background:#ffffff20}.film-search{width:min(590px,92vw);max-height:85svh;overflow:auto;padding:36px;border:1px solid #666;background:#111416;color:#eee}.film-search::backdrop{background:#000c;backdrop-filter:blur(8px)}.film-search h2{font-size:38px;margin:0 0 28px}.film-search label{display:block;font:13px Arial,sans-serif;margin-bottom:10px}.film-search input{display:block;width:100%;padding:14px;background:#202426;border:1px solid #777;color:#fff;font-size:16px}.film-search .search-close{float:right;color:#eee;background:none;border:0;font-size:20px;cursor:pointer}.search-results{margin-top:20px;font:14px Arial,sans-serif}.search-results a{display:block;color:#eee;padding:15px 0;border-bottom:1px solid #ffffff25}.search-results span{display:block;color:#aaa;margin-top:6px;font-size:12px}.search-results a:hover{color:#a6c9e6}@media(max-width:1050px){.header-tools{position:static;order:3;margin-top:3px;gap:12px}.chosen-header nav,.masthead nav{order:2}.header-tools button,.header-tools a{height:32px}}@media(pointer:coarse){.header-tools button,.header-tools a{min-width:44px;min-height:44px}}
.chosen-header .centered-brand img,.stage[data-layout=a] .logo{width:clamp(340px,48vw,700px);max-width:90vw}
header.chosen-header,.stage[data-layout=a] .masthead{gap:0}
.chosen-header nav,.stage[data-layout=a] .masthead nav{margin-top:-3px}
.chosen-header nav>a,.chosen-header .studio-menu summary,.stage[data-layout=a] .masthead nav>a,.stage[data-layout=a] .studios summary{padding-top:0;padding-bottom:7px}
.chosen-header .studio-menu>div,.stage[data-layout=a] .studios>div{top:25px}
.header-tools{left:calc(50% + clamp(170px,24vw,350px) + 18px);top:54px}
@media(max-width:1200px){.header-tools{position:static;order:3;margin-top:4px}.chosen-header nav,.masthead nav{order:2}}
@media(max-width:760px){header.chosen-header,.stage[data-layout=a] .masthead{gap:0}.chosen-header .centered-brand img,.stage[data-layout=a] .logo{width:90vw;max-width:650px}.chosen-header nav,.stage[data-layout=a] .masthead nav{margin-top:-2px}}
.chosen-header nav,.stage[data-layout=a] .masthead nav{margin-top:-7px}
@media(max-width:760px){.chosen-header nav,.stage[data-layout=a] .masthead nav{margin-top:-5px}}
@media(min-width:1201px){.header-tools{top:var(--logo-midpoint,78px);transform:translateY(-50%)}}
.header-tools button,.header-tools a{height:27px;min-width:27px;font-size:10px;padding:0 8px}
.header-tools .email-tool{font-size:15px}
.header-tools .shop-tool{padding:0 12px}
.search-symbol{width:9px;height:9px}
@media(pointer:coarse){.header-tools button,.header-tools a{min-width:44px;min-height:44px}}

.studio-menu-toggle{position:absolute;left:5%;top:var(--logo-midpoint,70px);transform:translateY(-50%);width:32px;height:32px;border:1px solid #c7dfef70;border-radius:50%;background:#13202b55;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:white}.studio-menu-toggle span{width:12px;height:1px;background:currentColor}.full-menu{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border:0;padding:9vh 12% 5vh;background:linear-gradient(115deg,#08131fee,#112b40e8),url('johnston-assets/research-vessel.jpg') center/cover;color:#eaf3fa}.menu-brand{display:block;width:min(580px,65vw);margin:0 auto 9vh}.menu-brand img{width:100%}.menu-dismiss{position:absolute;top:6vh;left:5%;border:1px solid #a6c9e680;border-radius:50%;width:34px;height:34px;background:none;color:white}.menu-links{display:grid;grid-template-columns:1fr 1fr;max-width:760px;gap:6vw;margin:auto}.menu-links>div{display:flex;flex-direction:column;gap:16px}.menu-links a{font-size:clamp(23px,3vw,42px);letter-spacing:-1px}.menu-links a:hover{color:#9fc8e4;transform:translateX(5px)}.menu-bottom{margin-top:12vh;display:flex;justify-content:space-between;gap:30px;align-items:center;font-size:11px}.menu-bottom>div{display:flex;gap:24px;align-items:center}.menu-socials span:not(.social-note){width:27px;height:27px;border:1px solid #9bb8cc66;border-radius:50%;display:grid;place-items:center;font-size:12px}.social-note{font-size:9px;color:#a6b9c8}.full-menu a:focus-visible{outline:2px solid white}.about-content{max-width:800px;margin:auto;padding:230px 8% 120px;min-height:100vh}.about-content h1{font-size:70px}.about-content p{line-height:1.9;color:#bccbd6}
@media(max-width:760px){.studio-menu-toggle{top:auto;bottom:10px;transform:none;left:5%;width:38px;height:38px}.full-menu{padding:10vh 8% 5vh}.menu-brand{margin-bottom:8vh;width:78vw}.menu-links{gap:20px}.menu-links a{font-size:22px}.menu-bottom,.menu-bottom>div{flex-wrap:wrap}.menu-bottom{margin-top:8vh}.menu-socials{gap:14px!important}.social-note{width:100%}}
@media(pointer:coarse){.studio-menu-toggle{width:44px;height:44px}}
/* Compact left navigation, with the existing header retained in place. */
html{scrollbar-gutter:stable}.full-menu{padding:var(--menu-start,180px) 5% 30px;overflow:auto;background:linear-gradient(115deg,#081827ed,#23465be6),url('johnston-assets/research-vessel.jpg') center/cover}.full-menu>header{position:absolute;top:0;left:0;right:0;background:none!important}.full-menu:before{content:'';position:absolute;left:var(--rule-x,6%);top:var(--rule-y,85px);bottom:0;width:1px;background:#bdd9e52b;pointer-events:none}.full-menu .menu-dismiss[hidden]{display:none}.full-menu .menu-links{margin:0 0 0 34px;max-width:640px;grid-template-columns:max-content max-content;gap:68px}.full-menu .menu-links>div{gap:7px}.full-menu .menu-links a{font-family:'DM Sans',Arial,sans-serif;font-size:25px;font-weight:600;line-height:1.25;letter-spacing:-.35px}.full-menu .menu-links a:hover{transform:none;color:#b8d8ed}.full-menu .menu-bottom{margin:0 0 0 34px;position:absolute;left:5%;right:5%;bottom:30px;gap:25px}.full-menu .menu-bottom>div{gap:22px}.studio-menu-toggle.is-open span:first-child{transform:translateY(5px) rotate(45deg)}.studio-menu-toggle.is-open span:nth-child(2){opacity:0}.studio-menu-toggle.is-open span:last-child{transform:translateY(-5px) rotate(-45deg)}.full-menu .studio-menu-toggle{background:#152a3c}.full-menu .menu-socials .social-note{font-size:9px}
@media(max-width:760px){.full-menu .menu-links{margin-left:32px;gap:25px}.full-menu .menu-links a{font-size:20px;line-height:1.3}.full-menu .menu-links>div{gap:9px}.full-menu .menu-bottom{position:static;margin:100px 0 0 32px}.full-menu{padding-bottom:30px}.full-menu .menu-bottom>div{gap:16px}.full-menu:before{bottom:0}.full-menu>header{width:100%}}
@media(max-height:620px) and (min-width:761px){.full-menu .menu-bottom{position:static;margin-top:75px}}
/* Temple Gate opening artwork: preserve the arch and its original warm light. */
.full-menu{background-color:#101316;background-image:linear-gradient(90deg,rgba(3,8,13,.42),rgba(3,8,13,.08) 55%,rgba(3,8,13,.15)),url('temple-gate-menu.png');background-position:center center;background-size:cover;background-repeat:no-repeat}.full-menu .menu-links a,.full-menu .menu-bottom{text-shadow:0 2px 10px #000b}.full-menu:before{background:#e4edf44a}
@media(max-width:760px){.full-menu{background-position:55% center;background-image:linear-gradient(90deg,#040a125e,#040a1226),url('temple-gate-menu.png')}}

/* Stationary header with a sequenced page/menu handoff. */
body>main,body>footer,header>nav{transition:opacity .28s ease,transform .32s cubic-bezier(.22,.65,.3,1)}
body.menu-page-away>main,body.menu-page-away>footer{opacity:0;transform:translateY(-70px);pointer-events:none}
body.menu-page-away header>nav{opacity:0;transform:translateY(-22px);pointer-events:none}
body.menu-page-away{overflow:hidden}
.full-menu{background:transparent!important;isolation:isolate}.full-menu::backdrop{background:transparent;backdrop-filter:none}
.full-menu:after{content:'';position:fixed;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(3,8,13,.42),rgba(3,8,13,.08) 55%,rgba(3,8,13,.15)),url('temple-gate-menu.png') center/cover;transform:translateY(100%);opacity:0;transition:transform .5s cubic-bezier(.22,.65,.3,1),opacity .4s}
.full-menu.menu-revealed:after{transform:translateY(0);opacity:1}
.full-menu .menu-links,.full-menu .menu-bottom{opacity:0;transform:translateY(75px);transition:transform .45s cubic-bezier(.22,.65,.3,1),opacity .3s}
.full-menu.menu-revealed .menu-links,.full-menu.menu-revealed .menu-bottom{opacity:1;transform:translateY(0);transition-delay:.07s}
.full-menu:before{opacity:0;transition:opacity .3s}.full-menu.menu-revealed:before{opacity:1;transition-delay:.15s}
.full-menu .menu-links a{font-size:27px}
@media(max-width:760px){.full-menu .menu-links a{font-size:22px}.full-menu:after{background-position:55% center}}
@media(prefers-reduced-motion:reduce){body>main,body>footer,header>nav,.full-menu:after,.full-menu:before,.full-menu .menu-links,.full-menu .menu-bottom{transition:none!important;transform:none!important}}

/* Shared transparent header stays anchored throughout scrolling and menu transitions. */
header.chosen-header,.full-menu>header.chosen-header{position:fixed;inset:0 0 auto;z-index:40;background:transparent;box-shadow:none;backdrop-filter:none}
html{scroll-padding-top:var(--sticky-header-offset,180px)}
/* Keep brand and utilities together on one row at every viewport width. */
header.chosen-header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:18px;row-gap:0}
.chosen-header .centered-brand{grid-column:2;grid-row:1;min-width:0}
.chosen-header .centered-brand img{width:min(48vw,700px,calc(90vw - 350px));max-width:100%}
.chosen-header .header-tools{position:static;grid-column:3;grid-row:1;justify-self:start;align-self:center;transform:none;margin:0;gap:8px;order:initial}
.chosen-header nav{grid-column:1/-1;grid-row:2;justify-content:center;justify-self:center;order:initial}
.chosen-header .studio-menu-toggle{top:var(--logo-midpoint,70px);bottom:auto;transform:translateY(-50%)}
@media(max-width:760px){
 header.chosen-header{grid-template-columns:44px minmax(0,1fr) auto;column-gap:8px;padding-left:3%;padding-right:3%}
 .chosen-header .centered-brand{width:100%}
 .chosen-header .centered-brand img{width:100%;max-width:100%}
 .chosen-header .header-tools{gap:4px}
 .chosen-header .header-tools button,.chosen-header .header-tools a{min-width:32px;padding:0 6px}
 .chosen-header .header-tools .shop-tool{padding:0 8px}
 .chosen-header .studio-menu-toggle{left:3%}
 .chosen-header nav{margin-top:8px}
}
@media(max-width:760px) and (pointer:coarse){.chosen-header .header-tools button,.chosen-header .header-tools a{min-width:44px;min-height:44px}}

/* Studio dropdown follows the homepage Explore button finish. */
.chosen-header .studio-menu>div{width:240px;max-width:90vw;padding:7px;border:1px solid #c6d7e0a6;border-radius:10px;background:#142333eb;backdrop-filter:blur(8px);box-shadow:0 12px 30px #0003}
.chosen-header .studio-menu>div a{display:flex;align-items:center;min-height:40px;padding:10px 17px;border:1px solid transparent;border-radius:7px;color:#f1f5f8;font-size:10px;font-weight:600;letter-spacing:1px;line-height:1.5;transition:background .18s,border-color .18s}
.chosen-header .studio-menu>div a:hover,.chosen-header .studio-menu>div a:focus-visible{background:#263e52e6;border-color:#c6d7e0a6;color:#fff}
.chosen-header .studio-menu>div a:focus-visible{outline:2px solid #edf4fa;outline-offset:1px}
.chosen-header .studio-menu>div a+a{margin-top:3px}
@media(pointer:coarse){.chosen-header .studio-menu>div a{min-height:44px}}
@media(prefers-reduced-motion:reduce){.chosen-header .studio-menu>div a{transition:none}}
.menu-socials{flex-wrap:wrap;gap:12px!important;max-width:540px}.menu-socials a{font-size:10px!important}


/* Scroll header experiment. Remove this block and its paired JS to revert. */
header.chosen-header{transition:transform .26s ease,background-color .22s ease,padding .22s ease,box-shadow .22s ease}
header.chosen-header.scroll-header-compact{padding-top:12px!important;padding-bottom:7px!important;background:#09131e!important;box-shadow:0 1px 0 #d2e1ec30,0 7px 24px #0004}
header.chosen-header.scroll-header-compact .centered-brand img{width:min(35vw,450px,calc(90vw - 350px));max-height:64px;object-fit:contain}
header.chosen-header.scroll-header-compact.storybyte-header .centered-brand img{width:145px;max-height:70px}
header.chosen-header.scroll-header-compact nav{margin-top:3px!important}
header.chosen-header.scroll-header-hidden{transform:translateY(calc(-100% - 12px));pointer-events:none}
header.chosen-header.scroll-header-hidden:focus-within{transform:none;pointer-events:auto}
.full-menu>header.chosen-header{transform:none!important;pointer-events:auto;background:transparent!important;box-shadow:none!important}
@media(max-width:760px){header.chosen-header.scroll-header-compact .centered-brand img{width:100%;max-height:45px}header.chosen-header.scroll-header-compact.storybyte-header .centered-brand img{width:100%;max-height:55px}header.chosen-header.scroll-header-compact{padding-top:9px!important;padding-bottom:5px!important}}
@media(prefers-reduced-motion:reduce){header.chosen-header{transition:none!important}}

/* Persistent frosted header; fading surface is separate from crisp controls. */
header.chosen-header{isolation:isolate;transform:none!important;pointer-events:auto!important}
header.chosen-header.scroll-header-compact{background:transparent!important;box-shadow:none!important}
header.chosen-header::after{content:'';position:absolute;inset:0 0 -32px;z-index:-1;pointer-events:none;opacity:0;background:linear-gradient(to bottom,rgba(7,18,29,.83) 0%,rgba(7,18,29,.72) 65%,rgba(7,18,29,0) 100%);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);mask-image:linear-gradient(to bottom,#000 0%,#000 65%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 65%,transparent 100%);transition:opacity .22s ease}
header.chosen-header.scroll-header-compact::after{opacity:1}
.full-menu>header.chosen-header::after{opacity:0!important}
@media(prefers-reduced-motion:reduce){header.chosen-header::after{transition:none!important}}

/* Shared center axis, including the compact scroll state. */
@media(min-width:1025px){
header.chosen-header,header.chosen-header.scroll-header-compact{grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr)!important;padding-left:5%!important;padding-right:5%!important}
header.chosen-header .centered-brand{width:max-content!important;justify-self:center!important;display:block;max-width:none}
header.chosen-header .centered-brand img{display:block;margin-inline:auto}
header.chosen-header>nav{grid-column:1/-1!important;justify-self:center!important;justify-content:center!important;width:max-content!important;max-width:100%;margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important}
}
footer .footer-admin-link,footer .footer-privacy-link{display:inline-block;color:#eef3f7;font-size:12px;padding:8px 0;text-decoration:none}
footer{flex-wrap:wrap;gap:16px 24px}

/* Side controls stay at the content margins as the centered brand shrinks. */
@media(min-width:1025px){
header.chosen-header .header-tools{position:absolute!important;right:5%!important;left:auto!important;top:var(--logo-midpoint,70px)!important;transform:translateY(-50%)!important;margin:0!important}
header.chosen-header .studio-menu-toggle{position:absolute!important;left:5%!important;right:auto!important;top:var(--logo-midpoint,70px)!important;transform:translateY(-50%)!important}
}
@media(min-width:1025px){header.chosen-header .header-tools,header.chosen-header .studio-menu-toggle{grid-area:auto!important}}

/* Align controls with the logo top and homepage action edges. */
@media(min-width:1025px){
header.chosen-header .header-tools{right:5%!important;top:var(--logo-top,30px)!important;transform:none!important;gap:9px!important}
header.chosen-header .studio-menu-toggle{left:8%!important;top:var(--logo-top,30px)!important;transform:none!important;width:36px;height:36px}
header.chosen-header .header-tools button,header.chosen-header .header-tools a{height:34px;min-width:34px;font-size:12px;padding:0 10px}
header.chosen-header .header-tools .email-tool{font-size:19px}
header.chosen-header .search-symbol{width:12px;height:12px}
header.chosen-header .studio-menu-toggle span{width:15px}
}

@media(min-width:1025px){
header.chosen-header.scroll-header-compact .header-tools button,header.chosen-header.scroll-header-compact .header-tools a{height:28px;min-width:28px;font-size:10px;padding:0 8px}
header.chosen-header.scroll-header-compact .header-tools .email-tool{font-size:16px}
header.chosen-header.scroll-header-compact .search-symbol{width:10px;height:10px}
header.chosen-header.scroll-header-compact .studio-menu-toggle{width:30px;height:30px}
header.chosen-header.scroll-header-compact .studio-menu-toggle span{width:12px}
}

/* Coordinated logo, navigation and control glide when the header compacts. */
header.chosen-header{transition:padding .48s cubic-bezier(.22,.61,.36,1),background-color .48s ease,box-shadow .48s ease}
header.chosen-header .centered-brand img{transition:width .48s cubic-bezier(.22,.61,.36,1),max-height .48s cubic-bezier(.22,.61,.36,1)}
header.chosen-header>nav{transition:margin-top .48s cubic-bezier(.22,.61,.36,1),opacity .28s ease,transform .32s cubic-bezier(.22,.65,.3,1)}
header.chosen-header::after{transition:opacity .48s ease}
@media(min-width:1025px){
header.chosen-header .header-tools button,header.chosen-header .header-tools a,header.chosen-header .studio-menu-toggle{transition:height .48s cubic-bezier(.22,.61,.36,1),width .48s cubic-bezier(.22,.61,.36,1),min-width .48s cubic-bezier(.22,.61,.36,1),padding .48s ease,font-size .48s ease,background .2s ease}
header.chosen-header .search-symbol,header.chosen-header .studio-menu-toggle span{transition:width .48s ease,height .48s ease}
}
@media(prefers-reduced-motion:reduce){header.chosen-header,header.chosen-header .centered-brand img,header.chosen-header>nav,header.chosen-header::after,header.chosen-header .header-tools button,header.chosen-header .header-tools a,header.chosen-header .studio-menu-toggle,header.chosen-header .search-symbol,header.chosen-header .studio-menu-toggle span{transition:none!important}}

/* Stable logo container prevents intrinsic grid sizing from restarting expansion. */
@media(min-width:1025px){
header.chosen-header:not(.storybyte-header) .centered-brand{width:min(48vw,700px,calc(90vw - 350px))!important}
header.chosen-header:not(.storybyte-header) .centered-brand img{max-height:none!important;max-width:none;transition:width .48s cubic-bezier(.22,.61,.36,1)}
}

/* Keep menu copy inset from its moving vertical rule. */
@media(min-width:1025px){
.full-menu .menu-links{margin-left:calc(var(--rule-x,8vw) + 24px - 5vw)}
.full-menu .menu-bottom{left:calc(var(--rule-x,8vw) + 24px);margin-left:0}
}