/* The new JWH mark shares the Hero's clean silhouette. Navigation keeps its existing geometry. */
@media (min-width: 901px) {
  body > .header,
  #project-dialog > .project-dialog-bar {
    background: #18181873;
    backdrop-filter: blur(24px) saturate(125%);
    -webkit-backdrop-filter: blur(24px) saturate(125%);
    border-bottom-color: #ffffff14;
    box-shadow: 0 8px 32px #00000024, inset 0 1px #ffffff08;
  }

  #project-dialog > .project-dialog-bar {
    display:grid;
    grid-template-columns:1fr auto 1fr;
  }
  .project-dialog-bar > .back-to-home {
    justify-self:start;
    font:500 12px/16px var(--font-sans);
    color:var(--muted);
    transition:color 300ms cubic-bezier(.22,1,.36,1);
  }
  .project-dialog-bar > .back-to-home:is(:hover,:focus-visible) { color:var(--ink); }
  .project-dialog-bar>.project-home-nav {display:flex;justify-self:end;align-items:center;gap:32px;font:500 12px/16px var(--font-sans);letter-spacing:.05em;}
  .project-home-nav>a {color:var(--muted);transition:color 300ms cubic-bezier(.22,1,.36,1);}
  .project-home-nav>a:is(:hover,:focus-visible) {color:var(--ink);}

  body > .header.header-material-active {
    opacity: 0;
    translate: 0 -100%;
  }

  body > .header.header-material-active.header-is-ready {
    opacity: var(--header-visibility, 1);
    translate: 0 0;
  }

  /* The same downward motion runs after Hero has completely left the screen. */
  body > .header.header-is-entering {
    transition: translate 500ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 500ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  body > .header.header-is-concealed {
    pointer-events: none;
  }

  .header > .wordmark {
    position: relative;
    flex: none;
    gap: 0;
    min-height: 48px;
  }

  .header > .wordmark > .signature-mark {
    display: none;
  }

  .header > .wordmark::before {
    content: "";
    display: block;
    width: 80px;
    height: 40px;
    flex: none;
    background: var(--ink);
    -webkit-mask: url("assets/hero-beauty-mask.svg?v=beauty-mask-vector-2") center / contain no-repeat;
    mask: url("assets/hero-beauty-mask.svg?v=beauty-mask-vector-2") center / contain no-repeat;
  }

  .header > .wordmark > .name {
    position: absolute;
    inset-inline-start: 100%;
    border: 0;
    padding: 0 0 0 16px;
    /* Title 5 matches the navigation labels. */
    font: 500 12px/16px var(--font-sans);
    letter-spacing: .05em;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translateX(-8px);
    transition:
      clip-path 500ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 300ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .header > nav {
    font: 500 12px/16px var(--font-sans);
    letter-spacing: .05em;
  }

  .header > .wordmark > .name > span {
    display: none;
  }

  .header > .wordmark:is(:hover, :focus-within) > .name {
    pointer-events: auto;
    opacity: 1;
    clip-path: inset(0);
    transform: translateX(0);
  }

  .header > .wordmark:focus-visible {
    border-radius: 4px;
    outline: 2px solid var(--accent);
    outline-offset: 4px;
  }
}

@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  body > .header.header-material-active {
    translate: none;
  }

  body > .header.header-is-entering {
    transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .header > .wordmark > .name {
    clip-path: none;
    transform: none;
    transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1);
  }
}