/* ============================================================
   Navigation — fixed bar.

   Both pages open on a photograph, so the bar starts as paper-on-
   image and turns into ink-on-paper the moment the page scrolls onto
   a white section. Everything inside it is drawn in currentColor at
   an opacity, which is what lets one rule flip the whole bar.
   ============================================================ */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 8000;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  color: var(--paper);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color 0.45s var(--ease),
    border-color 0.45s var(--ease),
    color 0.45s var(--ease),
    backdrop-filter 0.45s var(--ease),
    /* The bar is held back through the boot sequence and fades in with
       the room — see css/boot.css. The transition has to live here
       rather than there, because boot.css is loaded first and a second
       `transition` declaration would replace this whole list. */
    opacity 0.8s var(--ease),
    visibility 0.8s var(--ease);
}

.nav[data-scrolled='true'] {
  color: var(--blue);
  background: rgb(255 255 255 / 0.92);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: rgb(10 22 40 / 0.12);
}

.nav__inner {
  width: 100%;
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* ---- Wordmark — the one place capitals are the point ---- */

.brand { display: flex; flex-direction: column; gap: 0.2rem; line-height: 1; }
.brand__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3125rem);
  letter-spacing: 0.02em;
  color: currentColor;
}
.brand__sub {
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.3em;
  color: currentColor;
  opacity: 0.62;
}

/* ---- Links ---- */

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.25rem);
}

.nav__link {
  position: relative;
  padding-block: 0.35rem;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.68;
  transition: opacity 0.4s var(--ease);
}

/* The signature underline: wipes in from the left, out to the right. */
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.5s var(--ease);
}

@media (hover: hover) {
  .nav__link:hover { opacity: 1; }
}
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current='true']::after {
  transform: scaleX(1);
  transform-origin: left center;
}
.nav__link[aria-current='true'] { opacity: 1; }

.nav__cta { display: flex; align-items: center; }

/* The bar's CTA is drawn against whatever is behind the bar, not
   against a section ground, so it takes its colours from the bar's
   own currentColor rather than from --btn-bg. */
/* Stated in literals, not currentColor: currentColor on a button
   resolves to the button's OWN colour, so `background: currentColor`
   paints the fill in the label's colour and the button disappears.
   Both states are written out instead. */
.nav .btn--primary {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--blue);
}
.nav[data-scrolled='true'] .btn--primary {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--paper);
}

@media (hover: hover) {
  .nav .btn--primary:hover { background: var(--blue-soft); border-color: var(--blue-soft); color: var(--blue); }
  .nav[data-scrolled='true'] .btn--primary:hover { background: var(--blue-mid); border-color: var(--blue-mid); color: var(--paper); }
}

/* ============================================================
   Mobile — hamburger + slide-in drawer
   ============================================================ */

.nav__toggle {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: currentColor;
}

.nav__toggle span {
  position: absolute;
  left: 11px;
  width: 22px; height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.45s var(--ease), opacity 0.25s var(--ease);
}
.nav__toggle span:nth-child(1) { top: 18px; }
.nav__toggle span:nth-child(2) { top: 25px; }

.nav__toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav__toggle[aria-expanded='true'] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* The drawer is a room of its own: it declares a ground and reads the
   ordinary tokens, so it is paper inside whatever the bar is doing. */
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 8400;
  width: min(86vw, 380px);
  padding: calc(var(--nav-h) + 2rem) var(--gutter) 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: var(--bg);
  color: var(--fg);
  border-left: 1px solid var(--rule);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.55s var(--ease), visibility 0s linear 0.55s;
}
.drawer[data-open='true'] {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.55s var(--ease), visibility 0s linear 0s;
}

.drawer__link {
  padding-block: 1rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.drawer__cta { margin-top: 2rem; }
.drawer__meta {
  margin-top: auto;
  padding-top: 2rem;
  font-size: var(--t-small);
  color: var(--muted);
  line-height: 1.7;
}
.drawer__meta a { border-bottom: 1px solid var(--rule); }

.drawer__scrim {
  position: fixed;
  inset: 0;
  z-index: 8300;
  background: rgb(10 22 40 / 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0s linear 0.45s;
}
.drawer__scrim[data-open='true'] {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s var(--ease), visibility 0s linear 0s;
}

body[data-locked='true'] { overflow: hidden; }

@media (max-width: 1023px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: block; }
}

@media (min-width: 1024px) {
  .drawer, .drawer__scrim { display: none; }
}