/* ============================================================
   Shared portfolio navigation + case-study Back link.
   Loaded by every page (home, projects, contact and each case
   study). Every selector is namespaced .site-nav / .site-back so it
   never collides with a case study's own design tokens, and every
   value is set explicitly so it renders the same whatever the host
   page's base styles are. Visuals match the original home nav: plain
   logo top-left, translucent blurred pill of links top-right.
   ============================================================ */

.site-nav{
  --site-nav-top: 24px;
  --site-nav-side: 32px;
  --site-nav-h: 52px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.site-nav *{ box-sizing: border-box; }

/* The logo and the link pill are each their own fixed layer (rather than
   children of one fixed bar) so the logo can use mix-blend-mode on case
   studies: a fixed parent would isolate it and the blend would do nothing. */
.site-nav__logo{
  position: fixed;
  top: var(--site-nav-top);
  left: var(--site-nav-side);
  z-index: 960;
  height: var(--site-nav-h);
  display: flex;
  align-items: center;
  border-radius: 6px;
  text-decoration: none;
}
.site-nav__logo img{
  display: block;
  height: 32px;
  width: auto;
  max-width: none;
}
/* Case studies switch between light and dark sections, so the cream logo
   inverts against whatever is underneath, the same treatment the old
   case-study name bar used. */
.site-nav--adaptive .site-nav__logo{ mix-blend-mode: difference; }

.site-nav__links{
  position: fixed;
  top: var(--site-nav-top);
  right: var(--site-nav-side);
  z-index: 960;
  display: flex;
  align-items: center;
  gap: 40px;
  margin: 0;
  padding: 14px 28px;
  border-radius: 100px;
  background: rgba(59, 0, 0, 0.55);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(240, 238, 231, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.site-nav__links a{
  position: relative;
  color: #F0EEE7;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-decoration: none;
  opacity: .9;
  transition: opacity .2s ease;
}
.site-nav__links a:hover{ opacity: 1; }
/* Current page: full strength plus a hairline underline. Quiet on purpose. */
.site-nav__links a[aria-current="page"]{ opacity: 1; }
.site-nav__links a[aria-current="page"]::after{
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  opacity: .6;
}
.site-nav__links a:focus-visible,
.site-nav__logo:focus-visible,
.site-nav__toggle:focus-visible{
  outline: 2px solid #F0EEE7;
  outline-offset: 4px;
  border-radius: 4px;
}

/* ---------- Case studies: plain text links, no pill ----------
   Each case study sets two colours from its own palette on .site-nav:
   --site-nav-ink (its dark text colour) and --site-nav-light (its light
   text colour). site-nav.js checks what is behind each link as the page
   scrolls and marks it .is-on-dark over dark areas, so every link uses
   whichever of the two contrasts with what it sits on. */
.site-nav--adaptive .site-nav__links{
  padding: 14px 0;
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Soft fade behind the header (element added by site-nav.js), tinted with
   the background currently under the header so page content melts away
   beneath the logo, Back and links instead of colliding with them. It sits
   under any page's own fixed bars (H&M's section bar is z-index 900). */
.site-nav__fade{
  --site-fade-rgb: 245, 243, 238;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 890;
  height: 120px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background: linear-gradient(to bottom,
    rgba(var(--site-fade-rgb), 0.97) 0%,
    rgba(var(--site-fade-rgb), 0.92) 58%,
    rgba(var(--site-fade-rgb), 0) 100%);
}
/* Hidden at the very top so each hero's opening composition is untouched;
   it appears once content starts sliding under the header. */
.site-nav__fade.is-shown{ opacity: 1; }
@media (max-width: 809px){
  .site-nav__fade{ height: 108px; }
}

.site-nav--adaptive .site-nav__links a{
  color: var(--site-nav-ink, #1A1613);
  font-weight: 500;
  opacity: 1;
  transition: color .25s ease;
}
.site-nav--adaptive .site-nav__links a.is-on-dark{ color: var(--site-nav-light, #F0EEE7); }
.site-nav--adaptive .site-nav__links a:not([aria-current="page"]):hover{
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.site-nav--adaptive .site-nav__links a:focus-visible,
.site-nav--adaptive .site-nav__toggle:focus-visible{ outline-color: currentColor; }

.site-nav__toggle{ display: none; }

/* Phone: <810px, same breakpoint as the rest of the site */
@media (max-width: 809px){
  .site-nav{ --site-nav-h: 44px; }
  .site-nav__toggle{
    position: fixed;
    top: var(--site-nav-top);
    right: var(--site-nav-side);
    z-index: 961;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border-radius: 100px;
    background: rgba(59, 0, 0, 0.55);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(240, 238, 231, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    color: #F0EEE7;
    font: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }
  .site-nav__links{
    display: none;
    top: calc(var(--site-nav-top) + var(--site-nav-h) + 12px);
    left: var(--site-nav-side);
    right: var(--site-nav-side);
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 20px 24px;
    border-radius: 20px;
  }
  .site-nav.is-open .site-nav__links{ display: flex; }
  /* Case studies: a bare menu icon in the adaptive colour; the open menu
     is a panel in the project's own light tone with its dark text. */
  .site-nav--adaptive .site-nav__toggle{
    background: none;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--site-nav-ink, #1A1613);
    font-size: 24px;
    transition: color .25s ease;
  }
  .site-nav--adaptive .site-nav__toggle.is-on-dark{ color: var(--site-nav-light, #F0EEE7); }
  .site-nav--adaptive .site-nav__links{
    padding: 20px 24px;
    background: var(--site-nav-light, #F0EEE7);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 16px 36px -18px rgba(0, 0, 0, 0.35);
  }
  .site-nav--adaptive .site-nav__links a,
  .site-nav--adaptive .site-nav__links a.is-on-dark{ color: var(--site-nav-ink, #1A1613); }
}

/* ---------- Case study Back link ----------
   Pinned in the header row, just right of the logo, so it stays in reach
   the whole way down a case study. It shares the header's top band with
   the logo and links, so it never covers case-study content. Its colour
   follows the same per-project contrast logic as the links (site-nav.js
   marks it .is-on-dark over dark areas). */
.site-back{
  position: fixed;
  top: 24px;
  left: 88px;
  z-index: 960;
  height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--site-nav-ink, #1A1613);
  background: none;
  border: 0;
  text-decoration: none;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  transition: color .25s ease;
}
.site-back.is-on-dark{ color: var(--site-nav-light, #F0EEE7); }
.site-back__arrow{
  display: inline-block;
  transition: transform .2s ease;
}
.site-back:hover,
.site-back:focus-visible{ text-decoration-line: underline; }
.site-back:hover .site-back__arrow,
.site-back:focus-visible .site-back__arrow{ transform: translateX(-3px); }
.site-back:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}
@media (max-width: 809px){
  .site-back{ height: 44px; left: 80px; }
}
@media (prefers-reduced-motion: reduce){
  .site-back, .site-back__arrow, .site-nav__links a, .site-nav__toggle, .site-nav__fade{ transition: none; }
}