header.site-header {
  --nav-sky: url("/assets/nav-sky-light.png");
  --nav-ink: #352d30;
  --nav-accent: #aa853e;
  --nav-selected: #f2e9dc;
  --nav-panel: #fffaf0;
}
html[data-theme="dark"] header.site-header {
  --nav-sky: url("/assets/nav-sky-dark.png");
  --nav-ink: #f6f1eb;
  --nav-accent: #e2c383;
  --nav-selected: #37415b;
  --nav-panel: #202a40;
}
html header.site-header:has(#site-nav) {
  background: var(--nav-panel) var(--nav-sky) center top / 100% 100% no-repeat;
  border-bottom: 1px solid #c7a347;
  color: var(--nav-ink);
}
html[data-theme] header.site-header .brand { background: transparent; }
html[data-theme] header.site-header #site-nav :is(a,summary,strong),
html[data-theme] header.site-header .menu-toggle { color: var(--nav-ink); }
html[data-theme] header.site-header #site-nav .nav-list {
  background: var(--nav-panel);
  border-color: var(--nav-accent);
}
html[data-theme] header.site-header #site-nav :is(a,summary):is(:hover,:active,[aria-current]),
html[data-theme] header.site-header #site-nav details:is([open],:has([aria-current])) > summary,
html[data-theme] header.site-header :is(.menu-toggle,#theme-toggle):hover {
  background: var(--nav-selected);
  color: var(--nav-ink);
}
html[data-theme] header.site-header #site-nav a[aria-current],
html[data-theme] header.site-header #site-nav details:has([aria-current]) > summary {
  box-shadow: inset 0 -3px var(--nav-accent);
}
html[data-theme] header.site-header #theme-toggle {
  color: var(--nav-ink);
  border-color: var(--nav-accent);
}
html[data-theme="dark"] header.site-header :is(#theme-toggle,[data-share-site]) { color: #e9d39e; }
html[data-theme] header.site-header :is(a,summary,button):focus-visible {
  outline: 2px solid var(--nav-ink);
  outline-offset: 2px;
}