/* Header surfaces — the received Figma distinguishes each viewport and page.
   Keep paint separate from header layout: the desktop fade is 157px tall,
   while the navigation occupies a 122px layout region at the 1920px reference.
   This is the only stylesheet that paints .site-header backgrounds. */
.site-header {
  --header-surface-height: clamp(108.09836px, 8.177083333vw, 157px);
  --header-surface: linear-gradient(180deg, #e6e7e9 0%, #e6e7e900 100%);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  isolation: isolate;
}
.site-header::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: var(--header-surface-height);
  background: var(--header-surface);
  pointer-events: none;
  z-index: -1;
}

@media (min-width: 701px) {
  /* 2026-10-25 owner review: slightly strengthen ABOUT behind the text,
     retaining a transparent endpoint and the same fade height. */
  .page-about .site-header {
    --header-surface: linear-gradient(180deg, #e6e7e9 0%, rgb(230 231 233 / 80%) 40%, #e6e7e900 100%);
  }

  /* MAIN remains transparent. 27 Oct additional PDF p2 supersedes the
     original transparent WORKS navigation with the shared grey fade. */
  .page-home .site-header { --header-surface: none; }

  /* Original 25:6871 / revised E24 4:84: 60% alpha -> 0 at 84.1346%.
     The written guide specifies #141414 for this dark surface. */
  .page-work-detail .site-header {
    --header-surface-height: clamp(71.606557px, 5.416666667vw, 104px);
    --header-surface: linear-gradient(180deg, #14141499 0%, #14141400 84.134614%);
  }
}

@media (max-width: 700px) {
  /* Mobile Rectangle 457: 170px includes a 63px iOS status region.
     Stop positions in web coordinates: 170*.65384614-63 = 48.15384;
     170*.75480771-63 = 65.31731. The browser owns the device status bar. */
  .site-header {
    --header-surface-height: 66px;
    --header-surface: linear-gradient(180deg, #e6e7e9 0px, #e6e7e9 48.15384px, #e6e7e900 65.31731px);
  }
  /* Mobile work-detail 6:961 uses the same stops with a dark fill. */
  .page-work-detail .site-header {
    --header-surface: linear-gradient(180deg, #141414 0px, #141414 48.15384px, #14141400 65.31731px);
  }
  /* Open menu 7:3615: the title is centered in a pink-to-white fill.
     Map the fill to this header's actual height, not Figma's device-chrome
     coordinates: a fixed 47px stop ended just 4px below the 66px header's title. */
  .menu-open .site-header {
    --header-surface: linear-gradient(180deg, #f31192 0%, #fff 100%);
  }

}