:root:has(.header-light) {
  --header-height: 72px;
  --header-top: var(--s4);
  --header-gutter: var(--s6);
  --header-radius: var(--s12);
  --header-glass: rgba(255, 255, 255, .78);
  --header-highlight: rgba(255, 255, 255, .9);
  --header-border: rgba(255, 255, 255, .72);
  --header-shadow: rgba(35, 37, 35, .08);
  --header-shadow-close: rgba(35, 37, 35, .05);
  --header-blur: 20px;
  scroll-padding-top: calc(var(--header-top) + var(--header-height) + 2px);
}
body:has(> .header-light) { padding-top: var(--header-top); background: var(--white); }
body:has(> .header-light) > main { background: var(--paper); }
.header-light {
  top: var(--header-top);
  width: min(var(--content), calc(100% - 2 * var(--header-gutter)));
  margin-inline: auto;
  border: 1px solid var(--header-border);
  border-radius: var(--header-radius);
  background: var(--white);
  box-shadow: inset 0 1px 0 var(--header-highlight),
    0 var(--s2) var(--s6) var(--header-shadow),
    0 1px 3px var(--header-shadow-close);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header-light {
    background: var(--header-glass);
    -webkit-backdrop-filter: blur(var(--header-blur)) saturate(140%);
    backdrop-filter: blur(var(--header-blur)) saturate(140%);
  }
}
.header-light .header-inner {
  width: 100%;
  height: var(--header-height);
  padding-inline: var(--s6);
  padding-left: 32px;
}
.header-light .brand img { width: var(--s20); }
.header-light nav { background: transparent; }
.header-light nav a { color: var(--ink); }
.header-light nav a:hover { color: var(--orange-dark); }
.header-light .header-cta {
  min-height: 44px;
  padding: var(--s3) var(--s5);
  border-color: transparent;
  border-radius: var(--s8);
  background: var(--orange);
  color: var(--ink);
}
.header-light .header-cta:hover { background: var(--ink); color: var(--white); }
.header-light .menu-toggle { border-radius: var(--s6); }
@media (max-width: 700px) {
  :root:has(.header-light) {
    --header-height: 64px;
    --header-top: var(--s3);
    --header-gutter: var(--s3);
    --header-radius: var(--s8);
  }
  .header-light .header-inner { padding-inline: var(--s4); padding-left: 32px; }
  .header-light .brand img { width: 72px; }
  .header-light:has(nav.open) {
    border-radius: var(--s6);
    max-height: calc(100dvh - 2 * var(--header-top));
    overflow-y: auto;
  }
  .header-light .header-inner:has(nav.open) {
    height: auto;
    min-height: var(--header-height);
    padding-top: var(--s3);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .header-light {
    background: var(--white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}