/* Studio Nebula -- the panel nav (Decision #99, kept as the site's nav on
   Louis's call, 16 Sep 2026). The mark sits at centre-top; the menu unfolds
   from beneath it as a glass panel on hover, click or keyboard focus, and
   folds back. One file for the homepage and every generated page.
   The homepage's opening (home.html) drives the same elements from --open
   while <html> has .opening; these are the resting rules. */

.pnav{position:fixed;left:0;right:0;top:0;height:0;z-index:70;pointer-events:none}
/* The mark never scrolls, so without this the page's own copy runs straight
   through it -- worst on a phone, where the text column is the full width and
   the mark is centred in it (23 Sep 2026). The scrim is the mark's ground:
   solid void to --nav-h, which is exactly as far down as the masthead is held
   clear (site_shell.py), then a short fade so copy dissolves into it rather
   than meeting an edge. A tint alone is not enough -- heading ink is near
   white on near black and ghosts through anything short of opaque. Painted
   before the mark, the hint and the panel: they are children, this is ::before. */
.pnav::before{content:"";position:fixed;left:0;right:0;top:0;pointer-events:none;
  height:calc(var(--nav-h, 92px) + 34px);
  background:linear-gradient(180deg,#0A0908 0,#0A0908 var(--nav-h, 92px),rgba(10,9,8,0) 100%)}
/* the mark opens in the hero and settles here as the hero scrolls out (#144, Louis 22 Oct):
   --dive is 0 at the top of the home and 1 once the hero has gone; a page that never sets it
   reads 1. --mark-drop is how far down the hero position sits, --mark-grow the extra scale. */
.pnav{--mark-drop:calc(21vh - 58px);--mark-grow:1.1}
.pnav__logo{position:fixed;left:50%;top:58px;
  transform:translate(-50%,-50%) translateY(calc((1 - var(--dive,1))*var(--mark-drop))) scale(calc(.72 + (1 - var(--dive,1))*var(--mark-grow)));
  display:flex;align-items:center;gap:14px;color:var(--lum);text-decoration:none;
  pointer-events:auto;cursor:pointer}
.pnav__logo:hover{color:var(--lum)}
.pnav__logo svg{height:40px;width:auto;display:block;color:var(--lum)}
.pnav__logo .brand__q{font-size:11px;letter-spacing:.18em;color:var(--soft);font-weight:500;display:block}
.pnav__logo .brand__n{font-size:22px;font-weight:700;letter-spacing:-.012em;margin-top:3px;display:block;color:var(--lum)}
/* the desktop bar (17 Sep 2026): visible text links either side of the mark
   above 1100px; below that the panel is the menu and the hint says so */
.pnav__bar{display:none}
.pnav__bar-l,.pnav__bar-r{position:fixed;top:58px;transform:translateY(-50%);display:flex;
  align-items:center;gap:clamp(16px,2vw,28px);pointer-events:auto;
  padding:8px 16px;border-radius:11px;background:var(--glass);border:1px solid var(--glass-line);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:inset 0 1px 0 var(--glass-spec)}
.pnav__bar-r{padding-right:8px}
.pnav__bar-l{left:clamp(20px,4vw,56px)}
.pnav__bar-r{right:clamp(20px,4vw,56px)}
.pnav__bar a{color:var(--soft);font-size:11px;letter-spacing:.17em;font-weight:600;text-transform:uppercase;
  position:relative;padding-bottom:3px;text-decoration:none;
  text-shadow:0 0 10px rgba(10,9,8,.95),0 0 3px rgba(10,9,8,.9);transition:color .2s}
.pnav__bar a:hover{color:var(--lum);text-decoration:none}
.pnav__bar a[aria-current]{color:var(--sii)}
/* the bar's and the panel's buttons are glass like every other (#144): see site_shell's button block */
.pnav__bar .pnav__bar-cta{padding:9px 16px;background:var(--glass);color:var(--lum);border-radius:999px;border:1px solid rgba(217,164,65,.6);
  font-weight:600;text-shadow:none;margin-left:4px;text-transform:none;letter-spacing:.02em;font-size:12.5px;
  position:relative;overflow:hidden;isolation:isolate;transition:border-color .3s var(--ease)}
.pnav__bar .pnav__bar-cta::before,.pnav__panel .pnav__cta::before{content:"";position:absolute;inset:-45%;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side at 32% 50%,rgba(217,164,65,.55),transparent 72%),radial-gradient(closest-side at 70% 48%,rgba(180,99,58,.5),transparent 72%);
  filter:blur(10px);transition:opacity .5s var(--ease)}
.pnav__bar .pnav__bar-cta:hover::before,.pnav__panel .pnav__cta:hover::before{opacity:.6;animation:nebdrift 7s ease-in-out infinite alternate}
/* the underline (#144): the current page's, and on a page with data-spy sections the one in view */
.pnav__bar a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--sii);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.pnav__bar a.is-spy::after,.pnav__bar a[aria-current]::after{transform:scaleX(1)}
.pnav__bar a.pnav__bar-cta::after{display:none}
.pnav__panel .pnav__cta{border-radius:999px}
.pnav__bar .pnav__bar-cta:hover{border-color:rgba(217,164,65,.95);color:var(--lum)}
@media(min-width:1101px){.pnav__bar{display:block}.pnav__hint{display:none}}
.pnav__hint{position:fixed;left:50%;top:calc(84px + (1 - var(--dive,1))*var(--mark-drop,0px));transform:translateX(-50%);margin:0;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--soft);
  opacity:.6;pointer-events:none;transition:opacity .3s var(--ease)}
.nav-open .pnav__hint,.pnav:focus-within .pnav__hint{opacity:0}
.pnav__hint{opacity:calc(.6*var(--dive,1))}

/* the panel and the hint hang under the mark wherever --dive has put it (the hero, or the bar) */
.pnav__panel{position:fixed;left:50%;top:calc(100px + (1 - var(--dive,1))*var(--mark-drop,0px));transform:translateX(-50%);
  width:min(520px,calc(100% - 40px));padding:8px;pointer-events:auto;
  background:var(--glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);border-radius:var(--r);
  box-shadow:inset 0 1px 0 var(--glass-spec),0 18px 44px rgba(0,0,0,.34);
  clip-path:inset(0 0 100% 0 round var(--r));transition:clip-path .55s var(--ease)}
.nav-open .pnav__panel,.pnav:focus-within .pnav__panel{clip-path:inset(0 0 0 0 round var(--r))}
.pnav__panel nav{display:flex;flex-direction:column}
.pnav__panel a{display:block;padding:13px 14px;text-decoration:none;color:var(--lum);
  font-size:17px;font-weight:500;border-bottom:1px solid var(--glass-line);border-radius:8px;
  opacity:0;transform:translateY(8px);
  transition:opacity .4s var(--ease) calc(.05s*var(--i,0)),transform .4s var(--ease) calc(.05s*var(--i,0)),background .2s}
.nav-open .pnav__panel a,.pnav:focus-within .pnav__panel a{opacity:1;transform:none}
.pnav__panel a:hover{background:rgba(246,243,238,.05);text-decoration:none;color:var(--lum)}
.pnav__panel a[aria-current]{color:var(--sii)}
.pnav__panel a:last-of-type{border-bottom:none}
.pnav__panel .pnav__cta{text-align:center;margin:10px 4px 2px;background:var(--glass);color:var(--lum);border:1px solid rgba(217,164,65,.6);
  position:relative;overflow:hidden;isolation:isolate;
  font-weight:600;border-bottom:none}
.pnav__panel .pnav__cta:hover{border-color:rgba(217,164,65,.95);color:var(--lum)}

@media(max-width:820px){
  .pnav{--mark-drop:calc(16vh - 44px);--mark-grow:.7}
  .pnav__logo{top:44px;
    transform:translate(-50%,-50%) translateY(calc((1 - var(--dive,1))*var(--mark-drop))) scale(calc(.62 + (1 - var(--dive,1))*var(--mark-grow)))}
  .pnav__hint{top:calc(66px + (1 - var(--dive,1))*var(--mark-drop,0px))}
  .pnav__panel{top:calc(82px + (1 - var(--dive,1))*var(--mark-drop,0px))}
  .pnav__panel a{padding:12px 12px;font-size:16px}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .pnav__panel{background:rgba(10,9,8,.94)}}
@media (prefers-reduced-motion: reduce){
  .pnav__panel,.pnav__panel a,.pnav__logo,.pnav__hint{transition-duration:.001ms!important}
  .pnav__bar .pnav__bar-cta:hover::before,.pnav__panel .pnav__cta:hover::before{animation:none}}