/* Goose Neck - the top navigation, shared.
   Two pages had each grown their own copy and drifted apart on a dozen
   properties (mark size, wordmark weight, link size, letter-spacing, hover
   colour, mobile behaviour), so it is defined once here instead.

   The host page supplies the tokens: --ink, --beak, --soft, --rule,
   --display and --sans.

   Every selector is scoped to .gn-nav. It used to style a bare `nav`, which
   silently reached any other <nav> on the page - the projects Register page
   has a jump nav, and it inherited this bar's padding and bottom rule,
   producing a double-decker header nobody designed. */

/* Carry the bar across a page change instead of rebuilding it.

   Same-origin navigations become view transitions, and anything with a
   view-transition-name is matched between the old page and the new one and
   animated from one to the other rather than cross-faded. The bar keeps its
   position, and the indicator slides from the link you left to the link you
   arrived at. Browsers without it simply navigate as before. */
@view-transition{ navigation:auto; }

/* The bar owns its width.

   It used to sit inside each page's .wrap and inherit that page's measure -
   1240px on home and about, 1440px on the three projects pages - so moving
   between them jumped the bar 100px wider at each end. A shared component
   that changes size depending on who is hosting it is not shared, and it
   also breaks the view transition, which is trying to carry one element
   across and finds it a different shape on arrival. */
/* The bar stays put.

   An in-page link like Contact us used to scroll it off the top, which for
   a bar that is meant to read as one continuous element across the whole
   site is exactly wrong. z-index 40 puts it over the page but under the
   projects lightbox (100) and the opening (200), both of which are supposed
   to cover it. */
.gn-navbar{
  position:sticky; top:0; z-index:40;
  border-bottom:1px solid var(--rule);
  background:color-mix(in srgb, var(--paper,#FBF6E9) 94%, transparent);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
/* browsers without color-mix still need an opaque bar rather than a
   transparent one with the page running underneath it */
@supports not (background:color-mix(in srgb, red 50%, transparent)){
  .gn-navbar{ background:var(--paper,#FBF6E9); }
}
nav.gn-nav{ display:flex; align-items:center; justify-content:space-between;
     gap:24px; max-width:1440px; margin:0 auto;
     padding:26px clamp(18px,4vw,54px);
     view-transition-name:gn-nav; }

nav.gn-nav .mark{ display:flex; align-items:flex-end; gap:11px; text-decoration:none;
           color:var(--ink); text-transform:none; }
/* the nav links are uppercase; the wordmark must not inherit that -
   the brand is lowercase "goose neck" */
nav.gn-nav .mw{ font-family:var(--display); font-weight:700; font-size:21px;
         letter-spacing:-.01em; line-height:1.1; text-transform:none; }

nav.gn-nav .navgoose{ display:block; height:42px; flex:none; }
nav.gn-nav .navgoose svg{ display:block; height:100%; width:auto; overflow:visible; }

/* the rig draws itself from these - at this size the strokes must be held
   in screen pixels, or scaling the viewBox down makes them hairlines */
nav.gn-nav .navgoose .g-line{ fill:none; stroke:var(--ink); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
nav.gn-nav .navgoose .g-fill{ fill:#FFFFFF; }
nav.gn-nav .navgoose .g-beak{ fill:var(--beak); }
nav.gn-nav .navgoose .g-eye{ fill:var(--ink); }
nav.gn-nav .navgoose .g-tick{ stroke:var(--ink); stroke-width:2; stroke-linecap:round;
                   vector-effect:non-scaling-stroke; }

nav.gn-nav ul{ display:flex; gap:clamp(18px,2.6vw,38px); list-style:none; margin:0; padding:0;
                position:relative; }

/* The current-page line is its own element rather than a border on the link,
   because a border cannot travel between two links - and travelling is the
   whole point. Positioned from script once the webfont has settled, since
   the link widths move when Montserrat lands. */
nav.gn-nav .ind{ position:absolute; bottom:-1px; height:1.5px; background:var(--beak);
                 pointer-events:none; view-transition-name:gn-ind;
                 transition:left .42s cubic-bezier(.62,.02,.28,1),
                            width .42s cubic-bezier(.62,.02,.28,1); }
nav.gn-nav .ind[hidden]{ display:none; }
nav.gn-nav a{ font-family:var(--sans); font-weight:500; font-size:12px; letter-spacing:.15em;
       text-transform:uppercase; text-decoration:none; color:var(--soft);
       padding-bottom:3px; border-bottom:1px solid transparent;
       transition:color .18s ease, border-color .18s ease; }
nav.gn-nav a:hover{ color:var(--ink); border-bottom-color:var(--ink); }
nav.gn-nav a[aria-current]{ color:var(--ink); }

@media(max-width:680px){ nav.gn-nav{ flex-direction:column; align-items:flex-start; gap:14px } }

/* A slide is motion; someone who asked for less gets the line placed, not
   travelling, and the pages simply cut. */
@media (prefers-reduced-motion:reduce){
  nav.gn-nav .ind{ transition:none; }
  nav.gn-nav, nav.gn-nav .ind{ view-transition-name:none; }
}

/* An anchor target has to stop below the bar, or "Contact us" jumps the
   heading to y=0 and the bar sits on top of it. */
:root{ scroll-padding-top:calc(var(--gn-nav-h, 98px) + 14px); }