:root {
  --site-header-clearance: 64px;
  --site-header-content-gap: 64px;
  --site-header-surface: #f7f6f3;
  --site-header-text: #17171a;
  --site-header-muted: #26262b;
  --site-header-border: rgba(23, 23, 26, 0.14);
  --site-header-active: #b9522d;
}

@media (prefers-color-scheme: dark) {
  :root {
    --site-header-surface: #16131f;
    --site-header-text: #faf8f3;
    --site-header-muted: rgba(250, 248, 243, 0.8);
    --site-header-border: rgba(250, 248, 243, 0.18);
    --site-header-active: #f4b38b;
  }
}

:root[data-site-theme="light"] {
  color-scheme: light;
  --site-header-surface: #f7f6f3;
  --site-header-text: #17171a;
  --site-header-muted: #26262b;
  --site-header-border: rgba(23, 23, 26, 0.14);
  --site-header-active: #b9522d;
}

:root[data-site-theme="dark"] {
  color-scheme: dark;
  --site-header-surface: #16131f;
  --site-header-text: #faf8f3;
  --site-header-muted: rgba(250, 248, 243, 0.8);
  --site-header-border: rgba(250, 248, 243, 0.18);
  --site-header-active: #f4b38b;
}

tre-site-header {
  display: block;
  position: relative;
  z-index: 100;
  min-height: var(--site-header-clearance);
}

tre-site-header *,
tre-site-header *::before,
tre-site-header *::after { box-sizing: border-box; }

tre-site-header .site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  min-height: var(--site-header-clearance);
  margin: 0;
  padding: 0;
  color: var(--site-header-text);
  border: 0;
  border-bottom: 1px solid var(--site-header-border);
  background: var(--site-header-surface);
  box-shadow: none;
  font-family: var(--font-dm-sans, "DM Sans", system-ui, sans-serif);
}

tre-site-header .site-header[data-theme="dark"] {
  --site-header-surface: #16131f;
  --site-header-text: #faf8f3;
  --site-header-muted: rgba(250, 248, 243, 0.8);
  --site-header-border: rgba(250, 248, 243, 0.18);
  --site-header-active: #f4b38b;
}

/* Case-study heroes borrow the first viewport for the opening scene. The
   utility bar becomes a solid surface as soon as the reader begins to scroll. */
body.reader-hero-overlay tre-site-header .site-header {
  --site-header-surface: transparent;
  --site-header-text: #fff;
  --site-header-muted: rgba(255, 255, 255, 0.86);
  --site-header-border: transparent;
  --site-header-active: #f4b38b;
  background: transparent;
}

/* The opening story scene begins behind its transparent header. Once the
   reader scrolls, the normal header surface returns without a visual seam. */
body:has(.reader) tre-site-header { min-height: 0; }

tre-site-header .site-header__inner {
  display: flex;
  align-items: center;
  width: min(1600px, calc(100% - 72px));
  min-height: var(--site-header-clearance);
  margin: 0 auto;
  padding: 0;
}

tre-site-header .site-header__brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 44px;
}

tre-site-header .site-header__brand img {
  display: block;
  width: 48px;
  height: 23px;
  object-fit: contain;
}

tre-site-header .site-header__menu,
tre-site-header .site-header__utilities,
tre-site-header .site-header__actions { display: flex; align-items: center; }

tre-site-header .site-header__menu {
  min-width: 0;
  margin-left: auto;
  padding: 0;
  gap: clamp(16px, 1.8vw, 28px);
}

tre-site-header .site-header__menu a,
tre-site-header .site-header__toggle {
  min-height: 44px;
  font: 500 14px/20px var(--font-dm-sans, "DM Sans", system-ui, sans-serif);
  letter-spacing: -0.01em;
}

tre-site-header .site-header__menu a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 12px 0 11px;
  color: var(--site-header-muted);
  border-radius: 0;
  box-shadow: inset 0 -1px transparent;
  text-decoration: none;
  white-space: nowrap;
}

tre-site-header .site-header__work { gap: 6px; }

tre-site-header .site-header__lock {
  display: block;
  width: 13px;
  height: 13px;
  opacity: 0.72;
}

tre-site-header .site-header__menu a:hover .site-header__lock,
tre-site-header .site-header__menu a[aria-current="page"] .site-header__lock { opacity: 1; }

tre-site-header .site-header__menu a:hover,
tre-site-header .site-header__menu a[aria-current="page"] {
  color: var(--site-header-text);
  background: transparent;
  box-shadow: inset 0 -1px var(--site-header-active);
}

tre-site-header .site-header__actions {
  flex: 0 0 auto;
  margin-left: 6px;
}

tre-site-header .site-header__utilities { flex:0 0 auto; margin-left:12px; }

@media (min-width: 961px) {
  tre-site-header .site-header__inner { position:relative; }

  tre-site-header .site-header__menu {
    position:absolute;
    left:50%;
    margin-left:0;
    transform:translateX(-50%);
  }

  tre-site-header .site-header__utilities { margin-left:auto; }
}

tre-site-header .site-header__theme {
  position:relative;
  display:grid;
  place-items:center;
  width:44px;
  min-width:44px;
  height:44px;
  min-height:44px;
  padding:0;
  border:0;
  color:var(--site-header-muted);
  background:transparent;
  cursor:pointer;
}

tre-site-header .site-header__theme::before {
  position:absolute;
  inset:6px;
  border:1px solid var(--site-header-border);
  border-radius:999px;
  content:"";
}

tre-site-header .site-header__theme:hover { color:var(--site-header-text); }
tre-site-header .site-header__theme:hover::before { background:color-mix(in srgb, var(--site-header-text) 6%, transparent); }
tre-site-header .site-header__theme-icon { position:relative; z-index:1; width:15px; height:15px; }
tre-site-header .site-header__theme-icon--sun { display:none; }
tre-site-header .site-header__theme[data-theme="dark"] .site-header__theme-icon--sun { display:block; }
tre-site-header .site-header__theme[data-theme="dark"] .site-header__theme-icon--moon { display:none; }

tre-site-header .site-header__toggle {
  display: none;
  place-items: center;
  width: 44px;
  padding: 0;
  border: 1px solid var(--site-header-border);
  border-radius: 999px;
  color: var(--site-header-text);
  background: transparent;
  cursor: pointer;
}

tre-site-header .site-header__toggle span,
tre-site-header .site-header__toggle span::before,
tre-site-header .site-header__toggle span::after {
  display: block;
  width: 17px;
  height: 1px;
  background: currentColor;
  content: "";
}

tre-site-header .site-header__toggle span { position: relative; }
tre-site-header .site-header__toggle span::before,
tre-site-header .site-header__toggle span::after { position: absolute; left: 0; }
tre-site-header .site-header__toggle span::before { top: -6px; }
tre-site-header .site-header__toggle span::after { top: 6px; }
tre-site-header[open] .site-header__toggle span { background: transparent; }
tre-site-header[open] .site-header__toggle span::before { transform: translateY(6px) rotate(45deg); }
tre-site-header[open] .site-header__toggle span::after { transform: translateY(-6px) rotate(-45deg); }

tre-site-header a:focus-visible,
tre-site-header button:focus-visible { outline: 3px solid var(--site-header-active); outline-offset: 3px; }

.skip-link:focus-visible,
.skip:focus-visible { z-index: 101; }
html { scroll-padding-top: calc(var(--site-header-clearance) + 16px); }

@media (max-width: 960px) {
  :root { --site-header-clearance: 64px; }

  tre-site-header .site-header__inner {
    position: relative;
    width: 100%;
    min-height: var(--site-header-clearance);
    margin: 0;
    padding: 0 16px;
  }

  tre-site-header .site-header__brand img { width: 48px; height: 23px; }
  tre-site-header[enhanced] .site-header__toggle { display: grid; }
  tre-site-header:not([enhanced]) .site-header { position: absolute; }

  tre-site-header .site-header__menu {
    position: absolute;
    top: calc(100% + 1px);
    right: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: min(360px, 100vw);
    max-height: calc(100dvh - var(--site-header-clearance) - 1px);
    margin: 0;
    padding: 12px 20px 16px;
    overflow-y: auto;
    border: 1px solid var(--site-header-border);
    border-radius: 0;
    background: var(--site-header-surface);
    box-shadow: 0 18px 42px rgba(30, 43, 51, 0.16);
  }

  tre-site-header .site-header__menu a { min-height: 48px; padding: 14px 0; }
  tre-site-header[enhanced]:not([open]) .site-header__menu { display: none; }
}

@media (forced-colors: active) {
  tre-site-header .site-header,
  tre-site-header .site-header__menu { background: Canvas; color: CanvasText; border-color: CanvasText; }
  tre-site-header .site-header__toggle { background: ButtonFace; color: ButtonText; border-color: ButtonText; }
}

/* Match the enhanced closed state before the custom element script connects. */
@media(max-width:960px){html.has-js tre-site-header:not([open]) .site-header__menu{display:none}html.has-js tre-site-header .site-header__toggle{display:grid}}

/* Paint the correct logo before hydration refreshes the custom-element controls. */
html[data-site-theme='dark'] tre-site-header .site-header__brand img{content:var(--site-header-brand-dark)}
html[data-site-theme='light'] tre-site-header .site-header__brand img{content:var(--site-header-brand-light)}
@media(prefers-color-scheme:dark){html:not([data-site-theme]) tre-site-header .site-header__brand img{content:var(--site-header-brand-dark)}}

@media(max-width:960px){tre-site-header .site-header__utilities{margin-left:auto}}