/* Local brand override: SAM TQ Studio & Partners */
#header {
  mix-blend-mode: normal;
}

#header-right {
  color: #fff;
  mix-blend-mode: difference;
}

#header-title {
  position: relative;
  flex: 0 0 auto;
  width: 22rem;
  height: 7.34rem;
  max-width: 22rem;
  overflow: hidden;
  background: transparent url("/assets/sam-tq-studio-partners-bold.png") center / contain no-repeat;
}

#header-title.is-shrink {
  max-width: 22rem;
}

#header-title > svg {
  width: 100%;
  height: 100%;
  opacity: 0;
}

@media (max-width: 767px) {
  #header-title {
    width: min(15rem, 55vw);
    height: min(5rem, 18.333vw);
    max-width: min(15rem, 55vw);
  }

  #header-title.is-shrink {
    max-width: min(15rem, 55vw);
  }
}

/* Enlarge the vertical project index and its metadata together. */
#ho-wo-0-ti,
#ho-wo-0-me_ {
  font-size: 1.5rem;
}

#ho-wo-0-ti {
  height: 34.4rem;
  width: calc(var(--c) * 2 + var(--g) * 2.5);
}

/* Allow enlarged metadata to wrap without clipping at the center line. */
#ho-wo-0-me_ {
  height: 5lh;
}

#ho-wo-0-me_ #ho-wo-0-me > div {
  width: 100%;
  align-items: center;
}

#ho-wo-0-me_ #ho-wo-0-me > div > span {
  flex-shrink: 0;
  white-space: normal;
}

/* Forest & Feel: return link aligned below the studio logo. */
#wo-back.ff-back {
  position: fixed;
  top: calc(var(--m-y) + 7.34rem + 1rem);
  left: var(--m-x);
  bottom: auto;
  z-index: 9998;
  color: #1a1a1a;
  font: inherit;
  padding-block: .5rem;
}
#wo-back.ff-back .l {
  transform-origin: right;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
#wo-back.ff-back:hover .l { transform: scaleX(0); }
#wo-back.ff-back:not(:hover) .l { transform-origin: left; }
#wo-back.ff-back:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }
.ff-story { max-width: 27em; margin: 1.5em 0; line-height: 1.55; }
.ff-story p + p { margin-top: .9em; }
.ff-story .ff-tagline { opacity: .55; }
@media (max-width: 767px) {
  #wo-back.ff-back { top: calc(var(--m-y) + min(5rem, 18.333vw) + .75rem); }
  .ff-story { font-size: .9em; line-height: 1.45; margin-block: 1em; }
}

/* Give the fixed header its own space and keep navigation items separate. */
#header { gap: 2rem; }
#header-right { flex: 0 0 auto; gap: clamp(1.5rem, 3vw, 4rem); }
#header-right > * { width: auto; flex: 0 0 auto; white-space: nowrap; }
#header-menu { gap: 1.25rem; width: auto; }
#header-menu > a:not(:last-child)::after { content: none; }
#header-contact { width: auto; }
#ab-co-ma { padding-block-start: calc(var(--m-y) + 7.34rem + 4rem); }
@media (max-width: 767px) {
  #header { gap: 1rem; }
  #header-right { flex-wrap: wrap; justify-content: flex-end; column-gap: 1.25rem; row-gap: .75rem; max-width: 45%; }
  #header-menu { gap: .9rem; }
  #header-time { display: none; }
  #ab-co-ma { padding-block-start: calc(var(--m-y) + min(5rem, 18.333vw) + 3rem); }
}

body:has(#ab) #header-right { color: #111; mix-blend-mode: normal; }
body:has(#ab) #fix { top: calc(var(--m-y) + 7.34rem + 4rem); }

/* About: the brand scrolls with the introduction; navigation stays available. */
body:has(#ab) #header { position: fixed; }
body:has(#ab) #header-right {
  position: fixed;
  top: var(--m-y);
  right: var(--m-x);
}

/* Dark navigation over the pale SoYoung case-study screenshots. */
body:has(a[href="/sac/"]) #header-right { color: #111; mix-blend-mode: normal; }

/* Return links share the typography and underline of the other page links. */
#wo-back.portfolio-back {
 position: fixed; top: calc(var(--m-y) + 8.34rem); left: var(--m-x); bottom: auto;
 z-index: 9998; display: inline-block; padding: .5rem 0;
 color: #1a1a1a; background: transparent; border: 0; border-radius: 0;
 font: inherit; text-decoration: underline; text-underline-offset: .22em;
 opacity: 1; pointer-events: auto;
}
#wo-back.portfolio-back:hover { text-decoration: none; }
#wo-back.portfolio-back:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }
@media(max-width:767px) {
 #wo-back.portfolio-back { position: relative; top: auto; left: auto; margin: 100px var(--m-x) 16px; align-self: flex-start; }
}