/* ===== SCROLL PROGRESS ===== */
.scroll-bar {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--chroma);
  z-index: 9999; pointer-events: none;
}

/* ===== NAVBAR ===== */
.nav {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; height: 66px;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  /* Nothing behind it at the top of the page. A tint here, even at .88,
     flattened the dot field into a plain cream band across the width of
     the screen - the one place on the page where the texture stopped. */
  background: transparent;
  /* No rule under the header either. Once the header does take a fill it
     is translucent and blurred, so the content scrolling beneath already
     reads as a separate layer; a hairline on top of that is a seam the
     page does not need. */
}

/* The fill is meant to arrive once something is actually passing
   underneath: below the fold the nav sits over photographs, and a dark
   logo on a dark photograph is not a header.

   In practice you will not see this today. The sticky positioning above
   never engages, because body carries overflow-x: hidden - which computes
   overflow-y to auto and makes body a scroll container, so the nav sticks
   to a scrollport that is not the one moving. The header scrolls away
   with the page, is-scrolled is set on an element already off screen, and
   this rule paints nothing.

   It is kept because it is the correct behaviour the moment that is
   fixed (overflow-x: clip in place of hidden), not because it is doing
   anything now. theme.js already sets the class at 72px with 24px of
   slack, and editorial.css already transitions background-color here, so
   it would fade in rather than snap. */
.nav.is-scrolled {
  background: rgba(244, 241, 236, .88);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
}
.nav-logo { display: inline-flex; align-items: center; padding: 8px 4px; margin: -8px -4px; color: var(--ink); }
/* the artwork is 720x365, so height alone sets its size */
.logo-mark { height: 30px; width: auto; display: block; border-radius: 0; }
.nav-side { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.nav-left { justify-self: start; }
.nav-logo span { color: var(--accent); }
.nav-center { display: flex; align-items: center; gap: 2rem; }
.nav-link { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .13em; color: var(--text2); transition: color .3s; white-space: nowrap; }
.nav-link:hover { color: var(--ink); }
.nav-link.active { color: var(--ink); }
/* the icons carry negative margins so their tap targets bleed past the glyph;
   the gap has to clear 23px of that or cart and menu overlap */
.nav-right { gap: clamp(1.5rem, 3vw, 2rem); }
.nav-icon { position: relative; color: var(--accent); display: flex; padding: 11px; margin: -11px; transition: color .3s; }
.nav-icon:hover { color: var(--accent-dk); }
.nav-icon svg { width: 21px; height: 21px; }
.cart-count::after {
  content: attr(data-count);
  position: absolute; top: 3px; right: 1px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--accent); color: #fff;
  font-size: .62rem; font-weight: 700; line-height: 16px; text-align: center;
}
.cart-count[data-count="0"]::after { display: none; }
.nav-hamburger { display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; margin: -14px -12px; }
.nav-hamburger span { width: 20px; height: 2px; background: var(--accent); transition: transform .3s, opacity .3s, background-color .3s; display: block; }
.nav-hamburger:hover span { background: var(--accent-dk); }
.nav-hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ===== MOBILE MENU ===== */
.mobile-menu {
  position: fixed; inset: 66px 0 0 0; z-index: 190;
  background: var(--bg); padding: 1.5rem clamp(1.25rem, 5vw, 2.5rem);
  display: none; flex-direction: column; gap: .25rem; overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mobile-menu a { padding: 1.05rem 0; border-bottom: 1px solid var(--border); font-size: 1rem; color: var(--text2); }
.mobile-menu a:hover { color: var(--ink); }

/* ===== BREADCRUMB ===== */
.breadcrumb-bar { padding: 14px clamp(1.25rem, 4vw, 2.5rem) 0; font-size: 13px; color: var(--text2); max-width: var(--maxw); margin: 0 auto; }
.breadcrumb-bar ol { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.breadcrumb-bar a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }