/* Blue Productions — site header (Oct 19, 2026), after a24films.com:
   small uppercase links on the left, the mark + name in the middle, social
   icons and Login on the right. A slightly darkened, see-through bar.
   On the homepage it floats over the page (.bph--overlay); elsewhere it
   sits at the top and stays there as you scroll. */
.bph{
  --bph-h:58px;
  position:sticky;top:0;z-index:90;
  height:var(--bph-h);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  padding:0 clamp(14px,2.2vw,30px);
  background:rgba(19,25,35,.58);
  -webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid rgba(201,211,192,.10);
  color:#E6ECE1;
  font-family:"Space Mono",ui-monospace,monospace;
}
.bph--overlay{position:fixed;left:0;right:0}
.bph a{color:inherit;text-decoration:none}
.bph a:focus-visible,.bph button:focus-visible{outline:2px solid #EA7A39;outline-offset:3px;border-radius:2px}

.bph__nav{display:flex;align-items:center;gap:clamp(16px,2.1vw,30px)}
.bph__nav a,.bph__login{font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;line-height:1;padding:8px 0;transition:color .2s ease}
.bph__nav a:hover,.bph__login:hover,.bph__nav a[aria-current="page"]{color:#EA7A39}

.bph__brand{justify-self:center;display:flex;align-items:center;min-width:0}
.bph__brand img{height:26px;width:auto;max-width:100%;display:block;transition:opacity .2s ease}
/* the aperture turns when you reach for it (Oct 22, 2026: back by request) */
.bph__brand .bph__mark{height:25.6px;flex:none;margin-right:.4px;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.bph__brand:hover .bph__mark,.bph__brand:focus-visible .bph__mark{transform:rotate(60deg)}
.bph__brand:hover .bph__type{opacity:.85}

.bph__right{justify-self:end;display:flex;align-items:center;gap:clamp(14px,1.6vw,22px)}
.bph__social{display:flex;align-items:center;gap:14px}
.bph__social a,.bph__menu [data-social-icons] a{display:flex;opacity:.82;transition:opacity .2s ease,color .2s ease,transform .2s ease}
.bph__social a:hover,.bph__menu [data-social-icons] a:hover{opacity:1;color:#EA7A39;transform:translateY(-1px)}
.bph__social svg{width:16px;height:16px;display:block}

.bph__burger{display:none;background:none;border:0;cursor:pointer;width:40px;height:40px;padding:10px 8px;color:inherit}
.bph__burger span{display:block;height:1.5px;background:currentColor;border-radius:2px;transition:transform .3s ease,opacity .3s ease}
.bph__burger span+span{margin-top:6px}
.bph.is-open .bph__burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.bph.is-open .bph__burger span:nth-child(2){opacity:0}
.bph.is-open .bph__burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.bph__menu{position:fixed;left:0;right:0;top:var(--bph-h);bottom:0;z-index:89;
  background:rgba(19,25,35,.97);padding:34px 24px 40px;display:flex;flex-direction:column;gap:28px;overflow:auto}
.bph__menu[hidden]{display:none}
/* a blurred bar becomes the box its fixed children are measured against, which
   would squeeze the open menu into the 58px bar, so drop the blur while open */
.bph.is-open{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(19,25,35,.97)}
html.bph-open .mf-bar{display:none!important}
.bph__menu nav{display:flex;flex-direction:column;gap:6px}
.bph__menu nav a,.bph__menu .bph__login{font-size:15px;letter-spacing:.16em;padding:12px 0;text-transform:uppercase}
.bph__menu nav a[aria-current="page"]{color:#EA7A39}
.bph__menu [data-social-icons]{display:flex;gap:22px}
.bph__menu [data-social-icons] svg{width:22px;height:22px;display:block}

@media (max-width:980px){
  .bph{grid-template-columns:40px 1fr 40px}
  .bph > .bph__nav,.bph__right > .bph__social,.bph__right > .bph__login{display:none}
  .bph__burger{display:block}
  .bph__brand{grid-column:2}
  .bph__right{grid-column:3}
}
@media (min-width:981px){ .bph__menu{display:none!important} }
@media (max-width:420px){ .bph__brand img{height:20px} .bph__brand .bph__mark{height:19.7px} }
@media (prefers-reduced-motion:reduce){ .bph *{transition:none!important} .bph__brand:hover .bph__mark{transform:none} }

/* The light at the top of the page: a soft glow of sea-light under the
   header (Films, Booking, About Us, Contact). Pages opt in with <body class="bp-lit">. */
.bp-lit{position:relative}
.bp-lit::before{
  content:"";position:absolute;left:0;right:0;top:0;height:min(1100px,130vh);z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 240px at 50% 0,rgba(236,242,230,.22),transparent 72%),
    radial-gradient(62% 520px at 50% 0,rgba(84,160,170,.34),transparent 74%),
    radial-gradient(100% 900px at 50% 0,rgba(53,113,124,.30),transparent 78%);
}