/* The navbar: the brand and the call to action on one frosted bar across the top, following the page's light and dark acts. */
.header.cx-navbar{padding:12px 3.5%!important;pointer-events:auto}
.header.cx-navbar:before{content:'';position:absolute;inset:0;z-index:-1;background:#fbfaf8b3;-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid #302e2b12;box-shadow:0 12px 32px -26px #302e2b59;transition:background .8s,border-color .8s,box-shadow .8s}
html:not(.cx-scrolled) .header.cx-navbar:before{background:#fbfaf880;box-shadow:none}
.header.cx-navbar .nav-cta{height:48px!important;padding:0 8px 0 24px!important}
.header.cx-navbar .nav-cta>span{width:32px!important;height:32px!important}
.header .brand-mark small i,.cx-loader-by i{font-style:normal;color:var(--cx-brass)}
/* Part of the label, not a flex item of its own; dropped when the bar runs out of room. */
.cx-cta-word{display:contents;font:inherit}

html[data-cx-act="2"] .header.cx-navbar:before,html.cx-finale-dark .header.cx-navbar:before{background:#1a1917a6;border-bottom-color:#ffffff14;box-shadow:none}

/* Phones and tablets: the pinned sections hold just under the bar, so nothing in them slides beneath it. */
@media(max-width:1199px),(hover:none) and (pointer:coarse){
 :root{--cx-nav-h:72px}
 .header.cx-navbar{height:var(--cx-nav-h)}
 .story-sticky,.cx-finale-stage{top:var(--cx-nav-h);height:calc(100svh - var(--cx-nav-h))}
 /* Behind the bar, the strip above a pinned section matches the section: night in the dark act and the finale. */
 .spatial-story{transition:background-color 1.2s var(--cx-ease-io)}
 html[data-cx-act="2"] .spatial-story,.cx-finale{background-color:#1d1c1a}
}
/* Tablets: the chapter text and the details rail were placed to clear a bar laid over the stage; under the bar they can sit higher. */
@media(min-width:701px) and (max-width:1199px),(min-width:701px) and (hover:none) and (pointer:coarse){
 .story-sticky .story-copy,.story-sticky[data-phase] .detail-rail{translate:0 -40px}
}
/* Phones: the price rides as a tab on the button's top edge, so the bar keeps a little headroom for it. */
@media(max-width:700px){
 :root{--cx-nav-h:70px}
 .header.cx-navbar{padding:14px 12px 12px!important}
 .header.cx-navbar .nav-cta{height:44px!important;padding:0 6px 0 16px!important}
 .header.cx-navbar .nav-cta>span{width:30px!important;height:30px!important}
 .header.cx-navbar .cx-cta-price{left:auto;right:0}
}
/* Too narrow for the full label: "Upload photos", the same as the legal pages. */
@media(max-width:389px){
 .cx-cta-word{display:none}
}
@media(max-width:360px){
 .header .brand-mark b{font-size:26px!important}
 .header.cx-navbar .nav-cta{padding:0 5px 0 13px!important;gap:8px!important;font-size:13px!important}
 .header.cx-navbar .nav-cta>span{width:28px!important;height:28px!important}
}