/*
 * The site's first navigation.
 *
 * Styles live here rather than in each page's <style> block because the markup
 * is duplicated across four static files and triplicated CSS is how the copper
 * on one page slowly stops matching the other two.
 *
 * The markup is NOT injected by script, unlike subscribe.js. Primary
 * navigation that needs JavaScript to exist is navigation a failed script
 * takes away. nav.js only toggles .is-scrolled.
 */

.tmu-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* Floors the bar itself at the same 44px used by its children below, so
     the row can't be shorter than the touch targets it contains. */
  min-height: 64px;
  box-sizing: border-box;
  padding: 0.6rem clamp(1rem, 4vw, 2.5rem);
  background: rgba(13, 9, 8, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background 0.3s ease;
}

/* The rule appears only over content, so the bar is invisible over the hero.
   Without nav.js the class is never added and the bar simply stays borderless. */
.tmu-nav.is-scrolled {
  border-bottom-color: rgba(201, 143, 111, 0.28);
  background: rgba(13, 9, 8, 0.9);
}

.tmu-nav-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* The seal is the only way home on /brunch and /album now that this task
     removed their back links, so its tap target must clear the 44px minimum
     even though the drawn circle is smaller. Padding on the anchor grows the
     invisible hit area without enlarging the artwork. */
  min-width: 44px;
  min-height: 44px;
}

.tmu-nav-seal:focus-visible {
  outline: 2px solid #e6bb97;
  outline-offset: 3px;
}

.tmu-nav-seal img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: block;
}

.tmu-nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
}

.tmu-nav-links a {
  display: inline-flex;
  align-items: center;
  /* Invisible hit-area padding, same reasoning as the seal above: the label
     text is small, the tap target under it must not be. */
  min-height: 44px;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #efe3d7;
  text-decoration: none;
  opacity: 0.82;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.tmu-nav-links a:hover,
.tmu-nav-links a:focus-visible {
  opacity: 1;
  color: #e6bb97;
}

/* Hover and focus share the colour change above, but only focus gets a ring —
   a keyboard user tabbing through gets no hover, so collapsing the two into
   one visual treatment leaves them with no feedback at all. Matches the
   outline/offset the rest of the site already uses (see .deck, .frame). */
.tmu-nav-links a:focus-visible {
  outline: 2px solid #e6bb97;
  outline-offset: 3px;
}

.tmu-nav-links a[aria-current="page"] {
  color: #c98f6f;
  opacity: 1;
}

.tmu-nav-join {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* The pill's own padding falls short of 44px tall at this font size — this
     is the one tap that matters most (it is the entire conversion goal of
     the nav), so it gets the same floor as the seal and the links. */
  min-height: 44px;
  flex-shrink: 0;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0d0908;
  background: linear-gradient(135deg, #e6bb97, #c98f6f 55%, #9c6647);
  padding: 0.62rem 1.15rem;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.tmu-nav-join:hover,
.tmu-nav-join:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

/* Lift + brightness alone is not a perceivable focus indicator for a keyboard
   user — same reasoning as the centre links, and the same site-wide ring. */
.tmu-nav-join:focus-visible {
  outline: 2px solid #e6bb97;
  outline-offset: 3px;
}

/* A phone off an Instagram link is most of the traffic. The centre links go;
   the seal and the one tap that matters stay. No hamburger — hiding Join
   behind another tap is the whole cost of a hamburger and none of the benefit. */
@media (max-width: 640px) {
  .tmu-nav-links { display: none; }
  .tmu-nav { padding: 0.55rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tmu-nav, .tmu-nav-join, .tmu-nav-links a { transition: none; }
  .tmu-nav-join:hover { transform: none; }
}