/* ============================================================
   FOREWRD — LOGO CONTROL
   ------------------------------------------------------------
   The ONLY file you need to edit to move or resize the logo.
   Works identically on all 5 pages.

   The logo is positioned independently of everything else,
   so moving it can never disturb the hamburger or the menu.
   ============================================================ */

:root {
  /* SIZE — set the HEIGHT only.
     Width adjusts itself so the logo can never look squashed. */
  --logo-height: 130px;

  /* POSITION — measured from the top-left corner of the screen */
  --logo-x: -1px;   /* bigger = further RIGHT */
  --logo-y: -22px;   /* bigger = further DOWN  */

  /* Nav bar height (the parchment strip behind the menu).
     If the logo starts overflowing the strip, raise this. */
  --nav-height: 60px;

  /* Distance of the hamburger / desktop links from the RIGHT edge.
     Completely independent of the logo. */
  --nav-edge: 24px;
}


/* ------------------------------------------------------------
   WIRING — no need to edit below this line.
   ------------------------------------------------------------ */

/* The logo is pinned to the viewport, so --logo-x / --logo-y
   move it freely and nothing else on the page reacts. */
.nav__logo {
  position: fixed;
  left: var(--logo-x);
  top: var(--logo-y);
  display: flex;
  align-items: center;
  z-index: 1000;
  margin: 0;
  padding: 0;
}

/* Height drives the size; width:auto preserves proportions.
   max-width:none clears an old cap that squashed the logo. */
.nav__logo img {
  height: var(--logo-height);
  width: auto;
  max-width: none;
  display: block;
}

/* The logo no longer takes part in the nav's layout, so the
   remaining items (desktop links / hamburger) are pushed right
   using their own spacing value. */
.nav {
  height: var(--nav-height);
  justify-content: flex-end;
  padding-left: var(--nav-edge);
  padding-right: var(--nav-edge);
}