:root {
  color-scheme: light;
  --nav-background: #fff;
  --nav-glass: rgba(255, 255, 255, 0.88);
  --nav-ink: #595959;
  --nav-accent: #043361;
  --nav-line: #eeeeee;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --nav-background: #20212b;
  --nav-glass: rgba(32, 33, 43, 0.9);
  --nav-ink: #dadbdf;
  --nav-accent: #3eb7f0;
  --nav-line: #363740;
}

#about-me, #news, #publications { scroll-margin-top: 80px; }
.bibliography li[id] { scroll-margin-top: 80px; }
#top { scroll-margin-top: 0; }

.skip-link { position: fixed; left: 16px; top: -80px; z-index: 30; padding: 10px 16px; background: var(--nav-background); color: var(--nav-accent); }
.skip-link:focus { top: 8px; }

/* Contain the existing floated columns so the sticky navigation spans the page. */
.wrapper { display: flow-root; }

.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--nav-background);
  border-bottom: 1px solid var(--nav-line);
}

@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .site-nav { background: var(--nav-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}

.site-nav-inner {
  max-width: 1160px;
  min-height: 60px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}

.site-brand { margin-right: auto; color: var(--nav-accent); font-size: 17px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
.site-brand:hover { color: var(--nav-accent); text-decoration: none; }
.site-menu { display: flex; align-items: center; gap: 28px; }
.site-menu a { position: relative; color: var(--nav-ink); font-size: 16px; padding: 8px 0; }
.site-menu a::after { content: ""; position: absolute; height: 2px; bottom: 1px; left: 0; right: 0; border-radius: 2px; background: var(--nav-accent); transform: scaleX(0); transition: transform 160ms ease; }
.site-menu a:hover, .site-menu a[aria-current="location"] { color: var(--nav-accent); text-decoration: none; }
.site-menu a[aria-current="location"]::after { transform: scaleX(1); }

.site-nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--nav-ink);
  cursor: pointer;
}

.site-nav button:hover { background: var(--nav-line); color: var(--nav-accent); }
.site-nav :focus-visible { outline: 2px solid var(--nav-accent); outline-offset: 3px; }
.site-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.site-nav [hidden], .sun-icon, .menu-close { display: none; }
html[data-theme="dark"] .moon-icon { display: none; }
html[data-theme="dark"] .sun-icon { display: block; }
.menu-toggle[aria-expanded="true"] .menu-lines { display: none; }
.menu-toggle[aria-expanded="true"] .menu-close { display: block; }
html[data-theme="dark"] hr { background: var(--nav-line); }
html[data-theme="dark"] section { border-color: var(--nav-line); }

.site-nav-inner { width: calc(100% - 48px); }

@media (min-width: 961px) {
  .wrapper { width: calc(100% - 48px); max-width: 1160px; }
  section { width: calc(100% - 312px); }
}

@media (min-width: 961px) and (max-width: 1250px) {
  section { width: calc(100% - 290px); }
}

@media (max-width: 960px) {
  .site-nav { margin: -15px -15px 0; }
  .site-nav-inner { width: calc(100% - 30px); margin: 0 15px; }
}

@media (max-width: 600px) {
  .site-nav-inner { gap: 4px; }
  .site-nav:not(.is-enhanced) .site-nav-inner { flex-wrap: wrap; padding: 8px 0; gap: 8px; }
  .site-nav:not(.is-enhanced) .site-brand { flex-basis: 100%; }
  .site-menu { gap: 18px; }
  .site-nav.is-enhanced .site-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 10px 24px 16px;
    background: var(--nav-background);
    border-bottom: 1px solid var(--nav-line);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .site-nav.is-enhanced .site-menu a { padding: 10px 0; }
  .site-nav.is-enhanced .site-menu a::after { right: auto; width: 24px; bottom: 6px; }
}

@media (prefers-reduced-motion: reduce) { .site-menu a::after { transition: none; } }
@media print { .site-nav { display: none; } }