/* An editorial navigation layer for the standalone B2B prototype. */
.header,
.page-header { isolation: isolate; }
.header .utilities { margin-left: auto; }
.header #menu {
  display: flex;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 60px;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  z-index: 3;
}
.header #menu span {
  width: 32px;
  height: 1px;
  background: currentColor;
  transform-origin: center;
  transition: transform 260ms cubic-bezier(.4,0,.2,1), opacity 180ms ease;
}
@media (hover:hover) {
  .header #menu[aria-expanded="false"]:hover span:first-child { transform: translateX(-4px); }
  .header #menu[aria-expanded="false"]:hover span:last-child { transform: translateX(4px); }
}
.header #menu[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.header #menu[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
.header nav,
.header.is-scrolled nav,
.page-header nav,
.page-header.is-scrolled nav {
  display: none;
  position: fixed;
  inset: 88px 0 auto;
  width: 100%;
  height: calc(100dvh - 88px);
  min-height: 580px;
  padding: clamp(40px,5vw,90px) var(--space) 50px;
  margin: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  overflow-y: auto;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1px;
  z-index: 2;
}
.header nav.open,
.header.is-scrolled nav.open,
.page-header nav.open,
.page-header.is-scrolled nav.open {
  display: flex;
  animation: signature-menu-enter 360ms cubic-bezier(.2,0,0,1) both;
}
.header nav.open a { animation: signature-link-enter 330ms cubic-bezier(.2,0,0,1) both; }
.header nav.open a:nth-of-type(1) { animation-delay: 30ms; }
.header nav.open a:nth-of-type(2) { animation-delay: 55ms; }
.header nav.open a:nth-of-type(3) { animation-delay: 80ms; }
.header nav.open a:nth-of-type(4) { animation-delay: 105ms; }
.header nav.open a:nth-of-type(5) { animation-delay: 130ms; }
.header nav.open a:nth-of-type(6) { animation-delay: 155ms; }
.header nav.open a:nth-of-type(7) { animation-delay: 180ms; }
@keyframes signature-menu-enter {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes signature-link-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.header nav::after {
  content: "B-vogue / B2B";
  position: absolute;
  left: var(--space);
  bottom: 36px;
  font-size: 11px;
  letter-spacing: .15em;
  color: var(--muted);
}
.header nav a,
.page-header nav a,
.header nav .nav-contact {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(100%,760px);
  min-height: 0;
  padding: 4px 0 9px;
  font-size: clamp(35px,4.5vw,72px);
  line-height: 1.12;
  letter-spacing: -.055em;
  font-weight: 500;
  color: inherit;
  transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .25s ease;
}
.header nav a:hover,
.header nav a:focus-visible { transform: translateX(12px); }
.header nav:has(a:hover) a:not(:hover) { opacity: .48; }
.header nav a::after { display: none; }
.header nav .nav-contact svg { display: none; }
.header nav a[aria-current="page"] { color: var(--olive); }
body:has(.header nav.open) { overflow: hidden; }
body:has(.header nav.open) .header,
body:has(.header nav.open) .header.is-scrolled { background: var(--paper); color: var(--ink); border-color: var(--line); }
body:has(.header nav.open) .header #menu span { background: currentColor; }
.header #menu:active span,.header #language:active { opacity: .55; }
.text-link:active,.chapter-link:active,.home-link:active,.page-footer a:active { opacity: .62; }
.action:active { transform: translateY(1px) scale(.99); transition-duration: 90ms; }
.contact-layout input:focus-visible,.contact-layout textarea:focus-visible { border-bottom-color: var(--ink); border-bottom-width: 2px; }
.signature-curtain { position: fixed; z-index: 100; inset: 0; background: var(--forest); pointer-events: auto; }
.signature-curtain::after { content: "B-vogue"; position: absolute; bottom: 32px; left: var(--space); color: var(--chalk); font-size: 12px; letter-spacing: .13em; }

/* Let the film carry the first impression; the logo remains legible in the header. */
.hero-monogram { font-size: clamp(34px,5.7vw,105px); top: 20%; color: rgba(255,255,255,.65); }
.hero h1 { font-size: clamp(43px,5.15vw,80px); max-width: 13ch; line-height: 1.04; }
.hero-heading { align-items: end; }
.hero-video { filter: sepia(.18) saturate(.87) brightness(.72); }
.hero-shade { background: linear-gradient(180deg,rgba(22,18,15,.48) 0%,rgba(22,18,15,.14) 38%,rgba(22,18,15,.34) 58%,rgba(22,18,15,.86) 100%); }
.manifesto-main img,.manifesto-aside img,.area-chapter-media img,.story-grid img { filter: saturate(.78) contrast(1.04); }
.page-hero h1 { max-width: 11ch; }
.page-hero:before { background: linear-gradient(90deg,rgba(25,20,15,.77),rgba(25,20,15,.08) 76%),linear-gradient(0deg,rgba(25,20,15,.45),transparent 58%); }
.page-body[data-page="solutions"] .page-feature-photo img { object-position: 50% 50%; }
@media(min-width:901px) {
  .page-body[data-page="solutions"] .page-hero.paper { min-height: 760px; }
  .page-body[data-page="solutions"] .page-hero.paper .page-hero-inner { margin-left: var(--space); width: 43%; min-height: 760px; padding: 112px 0 70px; justify-content: center; }
  .page-body[data-page="solutions"] .page-hero.paper h1 { max-width: 11ch; font-size: clamp(55px,5.4vw,82px); }
  .page-body[data-page="solutions"] .page-hero.paper p { max-width: 38ch; }
  .page-body[data-page="solutions"] .page-hero.paper .page-hero-bottom { display: block; margin-top: 38px; }
  .page-body[data-page="solutions"] .page-hero.paper .page-hero-bottom > span { display: block; }
  .page-body[data-page="solutions"] .page-hero.paper .page-hero-bottom a { display: flex; width: fit-content; margin-top: 10px; }
  .page-body[data-page="solutions"] .page-feature-photo { width: 43%; height: 615px; margin: -690px var(--space) 90px auto; z-index: 1; }
  .page-body[data-page="solutions"] .area-index { margin-top: 0; }
}
.area-chapter-copy dl div { transition: padding-left .35s cubic-bezier(.16,1,.3,1); }
.chapter-link { display: inline-flex; min-height: 48px; align-items: center; gap: 20px; width: fit-content; border-bottom: 1px solid currentColor; font-size: 13px; font-weight: 700; }
.chapter-link svg { width: 18px; height: 18px; transition: transform .25s cubic-bezier(.16,1,.3,1); }
.chapter-link:hover svg { transform: translate(4px,-4px); }
.manifesto-aside .chapter-link { margin-bottom: clamp(34px,5vw,72px); }
.manifesto-aside>p { margin-bottom: 16px; }
.interior .chapter-link { margin-top: 20px; }
.craft-next { background: var(--forest); color: var(--chalk); border-top: 1px solid rgba(255,255,255,.4); }
.craft-next .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 96px; }
.craft-next span { font-size: 12px; letter-spacing: .1em; }
.craft-next a { display: inline-flex; min-height: 48px; align-items: center; gap: 16px; border-bottom: 1px solid rgba(255,255,255,.6); }
.craft-next a svg { width: 18px; height: 18px; transition: transform .25s cubic-bezier(.16,1,.3,1); }
.craft-next a:hover svg { transform: translate(4px,-4px); }
@media (hover:hover) { .area-chapter-copy dl div:hover { padding-left: 12px; } }

@media(max-width:850px) {
  .header nav,.header.is-scrolled nav,.page-header nav,.page-header.is-scrolled nav {
    inset: 72px 0 auto;
    height: calc(100dvh - 72px);
    min-height: 0;
    padding: 35px var(--space) 65px;
  }
  .header nav a,.page-header nav a,.header nav .nav-contact {
    width: 100%;
    min-height: 0;
    padding: 10px 0;
    font-size: clamp(35px,8vw,63px);
    line-height: 1.18;
  }
  .header #menu { width: 54px; }
  .hero-monogram { top: 20%; font-size: 6.9vw; }
}
@media(max-width:600px) {
  .header nav,.header.is-scrolled nav,.page-header nav,.page-header.is-scrolled nav {
    justify-content: flex-start;
    padding: clamp(30px,5dvh,48px) var(--space);
  }
  .header nav a,.page-header nav a,.header nav .nav-contact {
    min-height: 52px;
    padding: 7px 0;
    border-bottom: 1px solid var(--line);
    letter-spacing: -.035em;
  }
  .manifesto-aside .chapter-link { grid-column: 1/-1; margin-bottom: 12px; }
  .manifesto-aside figure { grid-column: 1/-1; }
  .craft-next .wrap { padding-block: 18px; min-height: 82px; }
  .craft-next span { font-size: 10px; }
  .header nav a,.page-header nav a,.header nav .nav-contact { font-size: clamp(30px,8.5vw,38px); }
  .header nav::after { bottom: 17px; }
  .hero h1 { font-size: clamp(39px,10vw,51px); }
  .hero-monogram { top: 21%; font-size: 6.8vw; }
  .page-hero h1 { max-width: 13ch; }
}
@media(prefers-reduced-motion:reduce) {
  .header nav a,.area-chapter-copy dl div { transition: none; }
}

/* Inner pages use compact navigation immediately; only the homepage opens with the editorial menu. */
.page-header { height: 64px; }
.page-header nav,.page-header.is-scrolled nav { inset: 64px 0 auto; height: calc(100dvh - 64px); }
@media(min-width:901px) {
  .page-header:not(:has(nav.open)) { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); column-gap: 16px; align-items: center; }
  .page-header:not(:has(nav.open)) #menu { display: none; }
  .page-header:not(:has(nav.open)) nav { display: flex; position: static; inset: auto; width: auto; height: auto; min-height: 0; padding: 0; margin: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; align-items: center; justify-content: center; flex-direction: row; gap: clamp(14px,1.7vw,30px); justify-self: center; z-index: auto; }
  .page-header:not(:has(nav.open)) nav::before,.page-header:not(:has(nav.open)) nav::after { display: none; }
  .page-header:not(:has(nav.open)) nav a { display: inline-flex; width: auto; min-height: 44px; padding: 0; font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: .035em; text-transform: uppercase; color: var(--ink); opacity: 1; transform: none; }
  .page-header:not(:has(nav.open)) nav a:is(:hover,:focus-visible) { text-decoration: underline; text-underline-offset: 7px; }
  .page-header .utilities { margin-left: 0; justify-self: end; }
}
@media(max-width:900px) {
  .page-header { height: 60px; }
  .page-header nav,.page-header.is-scrolled nav { inset: 60px 0 auto; height: calc(100dvh - 60px); }
}
@media(max-width:700px) {
  .page-header #menu { left: auto; right: 61px; top: 50%; transform: translateY(-50%); width: 44px; }
}

/* The supplied B-vogue mark replaces the typographic brand link. Its original
   canvas has transparent margins, so the background is framed to the visible mark. */
.header .brand,.footer .brand,.page-footer .brand {
  display:block;flex:none;width:180px;height:64px;min-height:0;
  overflow:hidden;white-space:nowrap;text-indent:-9999px;
  background:url("./assets/user-media/bvogue-logo-transparent.png") -39px center / 254px auto no-repeat;
}
.home-body .header:not(.is-scrolled):not(:has(nav.open)) .brand,
.projects-body .header:not(.is-scrolled):not(:has(nav.open)) .brand {
  filter:brightness(0) invert(1);
}
@media(max-width:700px) {
  .header .brand,.footer .brand,.page-footer .brand {
    width:145px;height:54px;
    background-size:205px auto;background-position:-31px center;
  }
}