/* Quiet navigation with a gold star.
   Plain text links on the sky header, a gold rule under the current page and a small
   eight-pointed gold star above it. "Scholars" opens a small menu. The day/night switch
   is a round moon button (a sun in night mode). Class prefix: qn- */

.qn {
  --qn-ink: #2b3a55; --qn-strong: #0a1c4a; --qn-rule: rgba(27,58,143,.25);
  --qn-gold: #c9962a; --qn-menu-bg: #fffaf0; --qn-menu-hover: #f2ead6; --qn-btn-bg: #fffaf0;
  display: flex; align-items: center; gap: 1.8rem;
  padding: 1.1rem .2rem .6rem; border-bottom: 1px solid var(--qn-rule);
  font-family: var(--serif, "Gentium Book Plus", Georgia, serif);
}
:root[data-theme="dark"] .qn {
  --qn-ink: #c9d1dd; --qn-strong: #fff6dc; --qn-rule: rgba(233,200,120,.25);
  --qn-gold: #e3b23c; --qn-menu-bg: #17253a; --qn-menu-hover: #22344f; --qn-btn-bg: #17253a;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .qn {
  --qn-ink: #c9d1dd; --qn-strong: #fff6dc; --qn-rule: rgba(233,200,120,.25);
  --qn-gold: #e3b23c; --qn-menu-bg: #17253a; --qn-menu-hover: #22344f; --qn-btn-bg: #17253a;
} }

.qn-links { display: flex; align-items: center; gap: 1.8rem; margin: 0; padding: 0; list-style: none; }
.qn-links > li { position: relative; }
.qn-link {
  position: relative; display: inline-flex; align-items: center; padding: .3rem 0;
  font: inherit; font-size: 1.04rem; color: var(--qn-ink); text-decoration: none;
  background: none; border: 0; cursor: pointer; white-space: nowrap;
}
.qn-link:hover { color: var(--qn-strong); }
/* gold rule: grows in on hover, stays under the current page */
.qn-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.62rem; height: 2px;
  background: var(--qn-gold); transform: scaleX(0); transition: transform .2s;
}
.qn-link:hover::after, .qn-link[aria-current]::after, .qn-link.is-current::after { transform: scaleX(1); }
.qn-link[aria-current], .qn-link.is-current { color: var(--qn-strong); font-weight: 700; }
/* Current page uses the underline only. */
.qn-link[aria-current]::before, .qn-link.is-current::before { display: none; content: none; }
.qn-caret {
  display: inline-block; width: .42em; height: .42em; margin-left: .4em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-.18em) rotate(45deg); transition: transform .2s;
}
.qn-link[aria-expanded="true"] .qn-caret { transform: translateY(.05em) rotate(-135deg); }

/* Scholars menu */
.qn-menu {
  position: absolute; left: -.9rem; top: calc(100% + .9rem); z-index: 50; min-width: 12rem;
  margin: 0; padding: .4rem; list-style: none; background: var(--qn-menu-bg);
  border: 1px solid var(--qn-rule); border-top: 2px solid var(--qn-gold); border-radius: 0 0 10px 10px;
  box-shadow: 0 14px 30px -14px rgba(20,30,60,.45);
}
.qn-menu[hidden] { display: none; }
.qn-menu a { display: block; padding: .45rem .7rem; border-radius: 6px; color: var(--qn-ink); text-decoration: none; }
.qn-menu a:hover, .qn-menu a:focus-visible { background: var(--qn-menu-hover); color: var(--qn-strong); }
.qn-menu a[aria-current] { color: var(--qn-strong); font-weight: 700; }

/* day/night button */
.qn-mode {
  margin-left: auto; flex: none; width: 2.3rem; height: 2.3rem; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--qn-btn-bg) url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22%3E%3Cpath d=%22M13.5 3.2A7 7 0 1 0 16.8 14 6 6 0 0 1 13.5 3.2Z%22 fill=%22%231b3a8f%22/%3E%3C/svg%3E") center / 1.1rem no-repeat;
  box-shadow: 0 2px 6px -2px rgba(20,30,60,.4), inset 0 0 0 1px var(--qn-rule);
}
:root[data-theme="dark"] .qn-mode { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22%3E%3Cg stroke=%22%23e3b23c%22 stroke-width=%221.8%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M10 1.5v2.4M10 16.1v2.4M1.5 10h2.4M16.1 10h2.4M4 4l1.7 1.7M14.3 14.3L16 16M4 16l1.7-1.7M14.3 5.7L16 4%22/%3E%3C/g%3E%3Ccircle cx=%2210%22 cy=%2210%22 r=%224%22 fill=%22%23e3b23c%22/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .qn-mode { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22%3E%3Cg stroke=%22%23e3b23c%22 stroke-width=%221.8%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M10 1.5v2.4M10 16.1v2.4M1.5 10h2.4M16.1 10h2.4M4 4l1.7 1.7M14.3 14.3L16 16M4 16l1.7-1.7M14.3 5.7L16 4%22/%3E%3C/g%3E%3Ccircle cx=%2210%22 cy=%2210%22 r=%224%22 fill=%22%23e3b23c%22/%3E%3C/svg%3E"); } }

.qn :focus-visible { outline: 2px solid #17a2b4; outline-offset: 4px; border-radius: 3px; }

/* phones: links scroll sideways in one row, the moon stays put */
@media (max-width: 760px) {
  .qn { gap: .8rem; }
  .qn-links { gap: 1.2rem; overflow-x: auto; scrollbar-width: none; padding: 1.1rem .2rem .7rem; margin: -1.1rem 0 -.7rem;
    -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); }
  .qn-links::-webkit-scrollbar { display: none; }
  .qn-link { font-size: .98rem; }
  .qn-menu { position: fixed; left: 16px; right: 16px; top: auto; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .qn-link::after, .qn-caret { transition: none; } }
/* Override the former pill navigation with a transparent header. */
header.site nav.qn{background:none;box-shadow:none;border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none;flex-wrap:nowrap;gap:1.2rem;padding:1.1rem .2rem .6rem}
header.site nav.qn a.qn-link{padding:.3rem 0;border-radius:0;color:var(--qn-ink);background:none;box-shadow:none}
header.site nav.qn a.qn-link[aria-current]{color:var(--qn-strong)}
header.site nav.qn a.qn-link:hover{color:var(--qn-strong);background:none}
header.site .bar{align-items:center}
@media(max-width:1000px){header.site nav.qn{width:100%;min-width:0}.qn-links{flex:1;min-width:0;gap:1.3rem}}
@media(max-width:760px){header.site nav.qn{gap:.8rem}.qn-links{gap:1.2rem}.qn-mode{margin-left:0}}

/* Let the page background show through the shared navigation. */
header.site{background:transparent;box-shadow:none}
header.site::after{display:none}