/* Goose Neck - the opening, standalone.
   Pairs with intro.js. Lifted out of themes/motion.css so a page that is
   not one of the four themed treatments can still carry the Hatch.

   The type here is deliberately hard-coded rather than tokenised: the
   overlay sits above the page on its own ground and must look identical
   whichever page it is opening. */

/* ── the opening overlay ──────────────────────────────── */
html.gn-intro-on, html.gn-intro-on body{ overflow:hidden; }
.gn-intro{
  position:fixed; inset:0; z-index:200;
  background:#F7F6F2; display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.gn-stage{ position:relative; width:min(86vw,660px); aspect-ratio:540/340; }

/* The bird in the opening is drawn by rig.js, so it needs the same class
   contract the nav mark uses. Held in screen pixels, or scaling the stage
   down turns the outline into hairlines. */
.gn-intro .g-line{ fill:none; stroke:#14140F; stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.gn-intro .g-fill{ fill:#F7F6F2; }
.gn-intro .g-beak{ fill:#D6842B; }
.gn-intro .g-eye{ fill:#14140F; }
.gn-intro .g-tick{ stroke:#14140F; stroke-width:3.6; stroke-linecap:round;
  vector-effect:non-scaling-stroke; }
.gn-intro svg{ width:100%; height:100%; display:block; }

/* the button sits just past the beak, so the strike lands on it */
.gn-enter{
  position:absolute; left:69%; top:20.5%;
  transform-origin:0 50%;
  background:#14140F; color:#F7F6F2; border:0; cursor:pointer;
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  padding:12px 20px; border-radius:2px; white-space:nowrap;
}
.gn-enter:hover{ background:#9E5F18; }
.gn-enter.hit{ background:#D6842B; color:#14140F; }
.gn-enter:focus-visible{ outline:2px solid #D6842B; outline-offset:3px; }
.gn-enter[disabled]{ cursor:default; }
@media (max-width:620px){
  .gn-enter{ left:50%; top:auto; bottom:-14%; transform:translateX(-50%); }
}
/* The wordmark takes the host page's own faces where they exist, so the
   opening is set in the same type as the page it opens - and falls back to
   the themed pair when a page defines no tokens. Otherwise the front door
   would have to load two extra families just to say "goose neck". */
.gn-intro .i-name{
  font-family:var(--display,"Cormorant Garamond",Georgia,serif);
  font-size:52px; fill:#14140F;
}
.gn-intro .i-sub{
  font-family:var(--sans,"Hanken Grotesk",system-ui,sans-serif);
  font-size:15px; font-weight:500; letter-spacing:.06em; fill:#14140F;
}
.gn-skip{
  position:absolute; right:20px; bottom:18px; background:none; border:0; cursor:pointer;
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:#6F7264; padding:10px;
}
.gn-skip:hover{ color:#9E5F18; }
.gn-skip:focus-visible{ outline:2px solid #9E5F18; outline-offset:2px; }

/* The opening is the one thing on the site that is pure motion. There is
   no still version worth showing, so under reduced motion it does not
   play at all and the visitor lands directly on the page. */
@media (prefers-reduced-motion:reduce){
  .gn-intro{ display:none; }
}