/* =====================================================================
   Shared site chrome: nav pill, mobile drawer, sigil, cursor.
   Film project pages load only project-styles.css, so when their bespoke
   nav markup was replaced with the site-standard markup there was nothing
   left to style it. This file gives those pages the same chrome as every
   other page, without pulling in the whole main stylesheet.
   ===================================================================== */
.nav{position:fixed;z-index:500;left:50%;top:14px;transform:translateX(-50%);
  width:min(calc(100% - 28px),1652px);display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;padding:14px 22px;background:rgba(9,18,18,.74);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line,rgba(241,234,216,.16));border-radius:999px;transition:.35s ease}
.nav.scrolled{background:rgba(9,18,18,.92)}
.nav a{text-decoration:none;color:inherit}
.brand{display:flex;align-items:center;width:34px;height:34px;font-size:0}
.nav-spacer{justify-self:end;width:30px}

.navlinks{display:flex;gap:34px;align-items:center;justify-self:center}
.navlinks a{position:relative;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--paper,#f1ead8)}
.navlinks a::after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1px;
  background:var(--red,#e4201b);transition:.25s}
.navlinks a:hover::after,.navlinks a:focus-visible::after,.navlinks a.active::after{right:0}

.mobile-menu{display:none;background:none;border:0;color:var(--paper,#f1ead8);
  font:10px 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.1em;cursor:pointer}

/* hidden at every width until opened */
.mobile-drawer{position:fixed;inset:0;z-index:499;background:var(--black,#091212);
  padding:100px var(--gutter,24px) 40px;display:none;flex-direction:column;
  justify-content:center;gap:15px}
.mobile-drawer.open{display:flex}
.mobile-drawer a{font-family:Impact,'Arial Narrow',sans-serif;
  font-size:clamp(56px,18vw,100px);text-transform:uppercase;color:var(--paper,#f1ead8);text-decoration:none}

/* eclipse / shutter sigil */
.sigil{--sigil-size:30px;display:inline-block;width:var(--sigil-size);height:var(--sigil-size);
  position:relative;isolation:isolate;filter:drop-shadow(0 0 8px rgba(254,126,60,.28))}
.sigil::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 12deg,transparent 0 10%,var(--orange,#fe7e3c) 10% 19%,transparent 19% 35%,var(--red,#e4201b) 35% 46%,transparent 46% 66%,#65a9aa 66% 76%,transparent 76% 100%);
  -webkit-mask:radial-gradient(circle,transparent 0 37%,#000 39% 57%,transparent 59%);
  mask:radial-gradient(circle,transparent 0 37%,#000 39% 57%,transparent 59%);
  animation:sigilSpin 1.45s linear infinite}
.sigil::after{content:"";position:absolute;inset:35%;border-radius:50%;background:var(--paper,#f1ead8);
  box-shadow:-6px 0 14px rgba(228,32,27,.95),6px 0 14px rgba(14,104,115,.9),0 0 20px rgba(254,126,60,.65);
  animation:sigilPulse 1.1s ease-in-out infinite alternate}
.sigil i,.sigil b{position:absolute;left:50%;top:50%;width:70%;height:1px;
  background:var(--orange,#fe7e3c);transform-origin:center;opacity:.78}
.sigil i{transform:translate(-50%,-50%) rotate(28deg);animation:sigilSlash 1.7s ease-in-out infinite}
.sigil b{transform:translate(-50%,-50%) rotate(-36deg);background:var(--red,#e4201b);
  animation:sigilSlash 1.7s .2s ease-in-out infinite reverse}
.sigil--nav{--sigil-size:27px}
@keyframes sigilSpin{to{transform:rotate(360deg)}}
@keyframes sigilPulse{from{transform:scale(.92);opacity:.85}to{transform:scale(1.06);opacity:1}}
@keyframes sigilSlash{0%,100%{opacity:.3}50%{opacity:.9}}

.cursor{position:fixed;width:14px;height:14px;border:1px solid var(--orange,#fe7e3c);
  border-radius:50%;z-index:9999;pointer-events:none;mix-blend-mode:difference;
  transform:translate(-50%,-50%);transition:width .2s,height .2s,background .2s}
.cursor.hot{width:52px;height:52px;background:rgba(254,126,60,.16)}

@media(max-width:900px){
  .nav{grid-template-columns:1fr auto}
  .nav-spacer{display:none}
  .navlinks{display:none}
  .mobile-menu{display:block}
  .cursor{display:none}
  .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(9,18,18,.92)}
}
@media(max-width:560px){.nav{top:8px;width:calc(100% - 16px);padding:12px 16px}}
@media(prefers-reduced-motion:reduce){
  .sigil::before,.sigil::after,.sigil i,.sigil b{animation:none!important}
}