:root {
  --global-header-bg: rgba(24, 24, 22, .96);
  --global-header-ink: #f3efe7;
  --global-header-line: rgba(243, 239, 231, .14);
}

/* One shared masthead for Home, What I Do, Works and every secondary page. */
body .site-header,
body .works-header {
  box-sizing: border-box;
  z-index: 1000;
  display: flex;
  width: 100%;
  min-height: 86px;
  padding: 18px clamp(24px, 4vw, 78px);
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--global-header-line);
  background: var(--global-header-bg);
  color: var(--global-header-ink);
  box-shadow: none;
  backdrop-filter: blur(16px) saturate(115%);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
}

body :is(.site-header .brand, .works-header .works-brand) {
  display: grid;
  gap: 0;
  flex: 0 0 auto;
  color: var(--global-header-ink);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  line-height: .84;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body :is(.site-header .brand, .works-header .works-brand) > span {
  font-size: 1.05rem;
  line-height: .84;
}

body :is(.site-header .brand, .works-header .works-brand) > small {
  margin-top: 5px;
  font-size: .62rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .22em;
}

body :is(.site-header .nav, .works-header .works-nav) {
  display: flex;
  margin-left: auto;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(20px, 2.8vw, 46px);
  color: var(--global-header-ink);
}

body :is(.site-header .nav, .works-header .works-nav) > a,
body .site-header .nav-services > .nav-services-trigger,
body .works-header .works-nav-group > summary,
body .works-header .works-nav-group > summary > .works-index-link {
  color: inherit;
  font-family: Arial, Helvetica, sans-serif;
  font-size: .67rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .18em;
  text-transform: uppercase;
}

body :is(.site-header .nav, .works-header .works-nav) > a,
body .site-header .nav-services > .nav-services-trigger,
body .works-header .works-nav-group > summary {
  opacity: .78;
  transition: color 160ms ease, opacity 160ms ease;
}

body :is(.site-header .nav, .works-header .works-nav) > a:hover,
body :is(.site-header .nav, .works-header .works-nav) > a:focus-visible,
body .site-header .nav-services > .nav-services-trigger:hover,
body .site-header .nav-services > .nav-services-trigger:focus-visible,
body .site-header .nav-services[open] > .nav-services-trigger,
body .works-header .works-nav-group > summary:hover,
body .works-header .works-nav-group > summary:focus-visible,
body .works-header .works-nav-group[open] > summary,
body :is(.site-header .nav, .works-header .works-nav) > a[aria-current="page"] {
  color: var(--global-header-ink);
  opacity: 1;
}

body :is(.site-header .services-dropdown, .works-header .works-nav-submenu) {
  border-color: var(--global-header-line);
  background: #0f0f0e;
  color: var(--global-header-ink);
  box-shadow: 0 24px 54px rgb(0 0 0 / .34);
}

/* What I Do is rendered inside its own full-screen layer. Keep its internal
   masthead visually identical to the shared header above. */
body .v4-mobile-home-screen__header {
  box-sizing: border-box;
  min-height: 86px;
  padding: 18px clamp(24px, 4vw, 78px);
  border-bottom-color: var(--global-header-line);
  background: var(--global-header-bg);
  color: var(--global-header-ink);
  box-shadow: none;
  backdrop-filter: blur(16px) saturate(115%);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
}

body .v4-mobile-home-screen__header .v4-home-screen-brand {
  display: grid;
  gap: 0;
  flex: 0 0 auto;
  color: var(--global-header-ink);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  line-height: .84;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body .v4-mobile-home-screen__header .v4-home-screen-brand > span {
  font-size: 1.05rem;
  line-height: .84;
}

body .v4-mobile-home-screen__header .v4-home-screen-brand > small {
  margin-top: 5px;
  font-size: .62rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .22em;
}

body .v4-mobile-home-screen__header .v4-home-screen-nav {
  display: flex;
  margin-left: auto;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(20px, 2.8vw, 46px);
  color: var(--global-header-ink);
}

body .v4-mobile-home-screen__header .v4-home-screen-nav > a,
body .v4-mobile-home-screen__header .v4-home-screen-menu > summary,
body .v4-mobile-home-screen__header .v4-home-screen-menu > summary > a {
  color: inherit;
  font-family: Arial, Helvetica, sans-serif;
  font-size: .67rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .18em;
  text-transform: uppercase;
}

body .v4-mobile-home-screen__header .v4-home-screen-nav > a,
body .v4-mobile-home-screen__header .v4-home-screen-menu > summary {
  opacity: .78;
  transition: color 160ms ease, opacity 160ms ease;
}

body .v4-mobile-home-screen__header .v4-home-screen-nav > a:hover,
body .v4-mobile-home-screen__header .v4-home-screen-nav > a:focus-visible,
body .v4-mobile-home-screen__header .v4-home-screen-nav > a[aria-current="page"],
body .v4-mobile-home-screen__header .v4-home-screen-menu > summary:hover,
body .v4-mobile-home-screen__header .v4-home-screen-menu > summary:focus-visible,
body .v4-mobile-home-screen__header .v4-home-screen-menu[open] > summary {
  color: var(--global-header-ink);
  opacity: 1;
}

body .v4-mobile-home-screen__header .v4-home-screen-submenu {
  border-color: var(--global-header-line);
  background: #0f0f0e;
  color: var(--global-header-ink);
  box-shadow: 0 24px 54px rgb(0 0 0 / .34);
}

@media (max-width: 900px) {
  body .site-header,
  body .works-header {
    min-height: 72px;
    padding: 14px 18px;
  }

  body :is(.site-header .brand, .works-header .works-brand) > span {
    font-size: 1rem;
  }

  body :is(.site-header .brand, .works-header .works-brand) > small {
    font-size: .58rem;
  }

  body :is(.site-header .nav-toggle, .works-header .works-nav-toggle) {
    border-color: rgba(243, 239, 231, .35);
    background: transparent;
    color: var(--global-header-ink);
  }

  body .v4-mobile-home-screen__header {
    min-height: 72px;
    padding: 14px 18px;
  }

  body .v4-mobile-home-screen__header .v4-home-screen-brand > span {
    font-size: 1rem;
  }

  body .v4-mobile-home-screen__header .v4-home-screen-brand > small {
    font-size: .58rem;
  }
}

/* What I Do must reuse the real site masthead. Its content layer starts below
   that masthead instead of replacing it with a second, slightly different one. */
body.home-page.serious-editorial-v4.v4-mobile-menu-editorial .v4-mobile-home-screen {
  position: fixed;
  z-index: 900;
  inset: 86px 0 0;
  width: 100vw;
  height: calc(100dvh - 86px);
  max-width: none;
  max-height: none;
  margin: 0;
}

body.home-page.serious-editorial-v4.v4-mobile-menu-editorial .v4-mobile-home-screen__header {
  display: none !important;
}

body.home-page.serious-editorial-v4.v4-mobile-menu-editorial .v4-mobile-home-screen__shell {
  box-sizing: border-box;
  height: 100%;
  padding-top: clamp(48px, 5vw, 88px);
}

@media (max-width: 900px) {
  body.home-page.serious-editorial-v4.v4-mobile-menu-editorial .v4-mobile-home-screen {
    inset: 72px 0 0;
    height: calc(100dvh - 72px);
  }

  body.home-page.serious-editorial-v4.v4-mobile-menu-editorial .v4-mobile-home-screen__shell {
    padding-top: 18px;
  }
}