/* NJR shared layer, loaded after each page's own styles.
   All widths: header behaviour (below) and heroes filling the screen. Everything else is ≤900px. */

/* header: no background of its own over the hero; solid Onyx once past it (njr-nav.js sets .solid);
   slides up on scroll down, back on scroll up (.hide) */
header{transition:transform .28s cubic-bezier(0,0,.2,1),background-color .28s ease-out,color .4s ease}
header::before{display:none}
header.solid{background:var(--onyx);color:var(--alabaster)}
header.hide{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){header{transition:none}header.hide{transform:none}}

/* heroes fill the visible screen: 100svh, growing with the screen when Safari's toolbar collapses,
   so no band shows above or below; the page root no longer pads for the notch (the header does) */
:root{padding-top:0;padding-bottom:0}
.stage,.hero-stage,.kstage,.lh,.ch{height:100svh;min-height:100dvh}
.a-hero{background:var(--deep)}
footer{padding-bottom:calc(36px + env(safe-area-inset-bottom,0px))}

.burger,.menu{display:none}

@media (max-width:900px){
  /* burger replaces the nav */
  header nav{display:none}
  html{scroll-padding-top:calc(80px + env(safe-area-inset-top,0px))}

  .burger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;width:44px;height:44px;margin-right:-10px;padding:0;border:0;background:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .burger span{display:block;width:24px;height:1.5px;background:currentColor;border-radius:1px}

  .menu{display:flex;flex-direction:column;position:fixed;inset:0;z-index:60;background:var(--onyx);color:var(--alabaster);
    padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility 0s linear .3s}
  .menu.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s ease}
  .menu .bar{flex:none;height:80px}
  .menu .bar .mark{width:36px}
  .menu-close{display:grid;place-items:center;width:44px;height:44px;margin-right:-10px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
  .menu-close svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.5;fill:none}
  .menu nav{display:block;flex:1;overflow:auto}
  .menu nav ul{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,3.2svh,28px);list-style:none;width:min(1280px,100% - 48px);margin-inline:auto;padding:clamp(28px,8svh,72px) 0 40px}
  .menu nav li{display:block!important}
  .menu nav a{display:inline-block;font-size:clamp(36px,10.5vw,56px);font-weight:300;letter-spacing:-.04em;line-height:1.05;text-decoration:none;
    color:rgba(229,228,226,.38);opacity:1;transition:color .3s}
  .menu nav a[aria-current]{color:var(--alabaster);text-decoration:none}
  .menu nav a:hover,.menu nav a:focus-visible{color:var(--alabaster)}
  html.menu-open{overflow:hidden}

  /* the empty spacer above the footer on inner pages */
  .endzone .next{height:24svh}
  /* older Safari has no overflow:clip; keep the wide orbit art from widening the page */
  @supports not (overflow:clip){.endzone{overflow:hidden}}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){.menu,.menu.open{transition:none}}