/* About-local header presence during the Genesis experience.
   The shared header remains the implementation owner. This page-local layer
   only de-prioritizes desktop navigation after the compact header beam starts
   leaving, then restores normal shared presentation when pointer or keyboard
   intent returns to the upper-right navigation area. */

@media(min-width:921px) and (hover:hover) and (pointer:fine){
  html.about-nav-quiet:not(.about-nav-present) body:is([data-page="about"],[data-page="about-inwork"]) .nav-link:not(:hover):not(:focus-visible){
    color:color-mix(in srgb,var(--ink) 60%,var(--bg));
    transition-duration:2.1s,.22s;
  }

  /* The current About label deliberately gives up its accent while quiet so
     the whole text-navigation layer recedes together without becoming faint
     or pointer-dependent for discovery. */
  html.about-nav-quiet:not(.about-nav-present) body:is([data-page="about"],[data-page="about-inwork"]) .nav-link[aria-current="page"]:not(:hover):not(:focus-visible){
    color:color-mix(in srgb,var(--ink) 60%,var(--bg));
  }

  html.about-nav-quiet:not(.about-nav-present) body:is([data-page="about"],[data-page="about-inwork"]) .language-switch:not(:hover):not(:focus-visible) .language-switch__option[aria-current="true"]{
    color:color-mix(in srgb,var(--ink) 60%,var(--bg));
    transition-duration:.34s,.2s,2.1s;
  }
}

/* During the authored Genesis handoff, the full shared 158px shield belongs to
   the compact wordmark/beam presence while the shallower 88px About shield is
   already the persistent navigation base beneath it. `about-nav-quiet` begins
   at the same authored instant as the logo/beam fade, so the full shield layer
   can dissolve over the existing 2.85s beam envelope instead of disappearing
   in one hard geometry switch when `about-home-affordance-ready` arrives. */
@media(min-width:921px){
  body:is([data-page="about"],[data-page="about-inwork"]) .header-shield::after{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:158px;
    background:linear-gradient(
      to bottom,
      var(--shield-surface) 0,
      var(--shield-surface) 132px,
      color-mix(in srgb,var(--shield-surface) 94%,transparent) 138px,
      color-mix(in srgb,var(--shield-surface) 58%,transparent) 149px,
      transparent 158px
    );
    opacity:1;
    pointer-events:none;
    transition:opacity 2.85s cubic-bezier(.22,.61,.36,1);
  }

  html.about-nav-quiet body:is([data-page="about"],[data-page="about-inwork"]) .header-shield,
  html.about-home-affordance-ready body:is([data-page="about"],[data-page="about-inwork"]) .header-shield{
    height:88px;
    background:linear-gradient(
      to bottom,
      var(--shield-surface) 0,
      var(--shield-surface) 58px,
      color-mix(in srgb,var(--shield-surface) 94%,transparent) 64px,
      color-mix(in srgb,var(--shield-surface) 58%,transparent) 77px,
      transparent 88px
    );
  }

  html.about-nav-quiet body:is([data-page="about"],[data-page="about-inwork"]) .header-shield::after,
  html.about-home-affordance-ready body:is([data-page="about"],[data-page="about-inwork"]) .header-shield::after{
    opacity:0;
  }

  /* Reduced-motion and history-settled Genesis states resolve directly to the
     final shield composition rather than replaying the decorative handoff. */
  html.about-genesis-intro-complete body:is([data-page="about"],[data-page="about-inwork"]) .header-shield::after{
    opacity:0;
    transition:none;
  }

  /* Left-side photographic About media may underlap the fixed header shield
     while its section overlaps it. The right half keeps the normal cream/dark
     surface so shared navigation remains visually grounded. Friedrich uses
     this on both About routes; Briese adds the same treatment on /about/inwork/.
     The behavior remains disabled in the stacked one-column layout. */
  html:is(.about-friedrich-header-underlap,.about-briese-header-underlap) body:is([data-page="about"],[data-page="about-inwork"]) .header-shield{
    clip-path:inset(0 0 0 50%);
    -webkit-clip-path:inset(0 0 0 50%);
  }
}