/* Design tokens from app/globals.css (S8), copied by scripts/site-header-markup.cjs. */
:root {
  --type-2xs: 9px;
  --type-xs: 10px;
  --type-sm: 12px;
  --type-md: 14px;
  --type-base: 16px;
  --type-lg: 18px;
  --type-xl: 22px;
  --type-2xl: 28px;
  --type-3xl: 36px;
  --type-4xl: 48px;
  --type-5xl: 64px;
  --type-6xl: 96px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --ease-ui: cubic-bezier(.33,.62,.35,1);
  --ease-camera: cubic-bezier(.65,0,.35,1);
  --dur-ui: 180ms;
  --dur-panel: 450ms;
  --dur-camera: 1200ms;
}

/* The one site header (plan item A4): the lab, the pages and the seven case
   studies carry the same name, role, links and LinkedIn button.

   This file is imported by the app layout and copied beside the prebuilt
   articles by `scripts/build-case-studies.cjs`, so it must stand on its own
   apart from the design tokens: its colours are its own, and each font falls back from the app's
   `next/font` variable to the articles' own faces (Grace is their Cormorant
   Garamond, Space their Space Grotesk). The lab's quieter small-caps treatment
   lives with the rest of the lab chrome in `app/globals.css`.

   Sizes and spacing use the design tokens (S8) from the top of
   `app/globals.css`; the case-study builder copies that token block in front
   of this file for the articles, which do not load the app's stylesheet. */

.site-header {
  --sh-ink: #eae3d6;
  --sh-link: rgba(234, 227, 214, .76);
  --sh-muted: rgba(234, 227, 214, .56);
  --sh-accent: #f5c38f;
  --sh-accent-line: rgba(239, 178, 112, .46);
  --sh-serif: var(--font-serif, Grace), "Cormorant Garamond", Georgia, serif;
  --sh-sans: var(--font-display, Space), "Space Grotesk", Arial, sans-serif;
  position: relative;
  /* Over the page's content and no higher, as the pages' header always was:
     each page's skip link sits in the same stacking context (the About page's
     at z-index 20) and has to come up over the bar when it is focused. The
     phone menu is a popover, in the top layer, so it needs nothing from here. */
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 76px;
  padding: var(--space-3) clamp(20px, 5vw, 74px);
  color: var(--sh-ink);
  font-family: var(--sh-sans);
}
/* The pages: an ordinary bar at the top of the document. */
.site-header[data-variant="page"] {
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  background: rgba(5, 13, 20, .72);
  backdrop-filter: blur(16px);
}
/* The case studies: the same header laid over the opening image, which starts
   at the top of the page, with a scrim instead of a bar. */
.site-header[data-variant="article"] {
  position: absolute;
  inset: 0 0 auto;
  /* Over the opening image and the page controls (z-index 10); the articles'
     own skip link is at 100. */
  z-index: 20;
  background: linear-gradient(to bottom, rgba(4, 8, 12, .66), rgba(4, 8, 12, .28) 62%, rgba(4, 8, 12, 0));
}

/* --- The name and the role ------------------------------------------------ */
.site-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  color: var(--sh-ink, #eae3d6);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.site-brand-name {
  font-family: var(--sh-serif, Georgia, serif);
  font-size: var(--type-xl);
  font-weight: 400;
  letter-spacing: .005em;
}
.site-brand-role {
  font-family: var(--sh-sans, Arial, sans-serif);
  font-size: var(--type-2xs);
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--sh-muted, rgba(234, 227, 214, .56));
}
.site-header .site-brand:hover .site-brand-name,
.site-header .site-brand:focus-visible .site-brand-name { color: var(--sh-accent); }

/* --- The links and the LinkedIn button ------------------------------------ */
.site-header .site-nav { display: flex; align-items: center; }
.site-nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* On a phone the list is a native popover (below). Wider, it is ordinary
   content in the row, so the popover's own box styles are undone here; author
   styles also outrank the user agent's `display: none` for a closed popover. */
.site-header .site-nav-list[popover] {
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: none;
  color: inherit;
}
.site-header .site-nav-link {
  display: inline-block;
  padding: 10px var(--space-3);
  color: var(--sh-link);
  font-size: var(--type-md);
  letter-spacing: .01em;
  text-decoration: none;
  transition: color .2s ease;
}
.site-header .site-nav-link:hover,
.site-header .site-nav-link:focus-visible,
.site-header .site-nav-link[aria-current="page"] { color: var(--sh-accent); }
.site-header .site-nav-contact { margin-left: var(--space-3); }
.site-header .site-nav-cta {
  display: inline-block;
  padding: 10px var(--space-4);
  border: 1px solid var(--sh-accent-line);
  color: var(--sh-accent);
  background: rgba(233, 162, 92, .06);
  font-size: var(--type-md);
  letter-spacing: .01em;
  text-decoration: none;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.site-header .site-nav-cta:hover,
.site-header .site-nav-cta:focus-visible { border-color: var(--sh-accent); background: rgba(233, 162, 92, .14); color: var(--sh-accent); }
.site-header :is(a, button):focus-visible { outline: 2px solid var(--sh-accent); outline-offset: 4px; }

/* The Menu button exists for phones only. */
.site-header .site-menu-button { display: none; }

/* The phone menu's panel. It is styled at every width, not only inside the
   phone query below: an open popover stays in the top layer when the page
   widens past 720 px (a phone turned to landscape), and there the reset above
   would leave it a transparent row over the name at the top left. The header's
   script (`SiteMenuCloser`, and `integration.js` in the articles) closes it at
   that crossing; until it has, it is still this panel. After the reset above,
   which has the same specificity. */
.site-header .site-nav-list:popover-open {
  position: fixed;
  inset: 60px 12px auto auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  width: min(300px, calc(100vw - 24px));
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(211, 226, 233, .18);
  background: #060f17;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .42);
  color: var(--sh-ink);
}
.site-header .site-nav-list:popover-open .site-nav-link { display: block; padding: 13px var(--space-3); font-size: 15px; }
.site-header .site-nav-list:popover-open .site-nav-contact { margin: var(--space-2) 0 0; }
.site-header .site-nav-list:popover-open .site-nav-cta { display: block; padding: 13px var(--space-3); text-align: center; font-size: 15px; }

/* --- Phones: one row, and a menu ------------------------------------------ */
@media (max-width: 720px) {
  .site-header { min-height: 64px; padding: 10px 18px; gap: var(--space-4); }
  .site-brand-name { font-size: 19px; }
  .site-brand-role { font-size: 8px; letter-spacing: .24em; }
  .site-header .site-menu-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 -10px 0 0;
    padding: var(--space-3) 10px;
    border: 0;
    background: none;
    color: var(--sh-ink);
    font: 500 11px/1 var(--sh-sans);
    letter-spacing: .2em;
    text-transform: uppercase;
    cursor: pointer;
  }
  /* The button keeps the header's ink under the pointer and focus. The
     articles' own `.study button:hover` (gold) would otherwise win on
     specificity, and on the nutrunner study's paper a tap leaves :hover on the
     button while its menu is open: gold on paper, about 1.7:1. */
  .site-header .site-menu-button:hover,
  .site-header .site-menu-button:focus-visible { color: var(--sh-ink); }
  .site-header .site-menu-icon {
    display: block;
    width: 16px;
    height: 7px;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
  }
  .site-header .site-nav-list:not(:popover-open) { display: none; }
}
/* A browser without popovers keeps the links in the row rather than behind a
   button that cannot open them. */
@supports not selector(:popover-open) {
  .site-header .site-menu-button { display: none !important; }
  .site-header .site-nav-list { flex-wrap: wrap; justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header :is(.site-nav-link, .site-nav-cta) { transition: none; }
}
@media (forced-colors: active) {
  .site-header .site-nav-cta { border-color: LinkText; }
  .site-header .site-menu-icon { border-color: ButtonText; }
}