/* The site nav, on every page but the chapters' book (tools/build.mjs writes it into the HTML).
   Scoped by id, and every property set here, so the pages' own header styles can't reach it. */
#top { box-sizing: border-box; width: min(1180px, calc(100vw - 32px)); max-width: none; margin: 0 auto; padding: 22px 0; display: flex; justify-content: space-between;
  align-items: baseline; gap: 10px 18px; flex-wrap: wrap; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  view-transition-name: site-nav; }   /* held still while the page crossfades */
#top .brand { font: 500 19px var(--serif); letter-spacing: 0; text-transform: none; color: var(--strong); text-decoration: none; margin-right: auto; }
/* the links are a popover (tools/build.mjs), shown inline here: author styles win over the browser's popover ones */
#top nav { display: flex; gap: 18px; flex-wrap: wrap; position: static; inset: auto; width: auto; height: auto; overflow: visible; margin: 0; padding: 0; border: 0; background: none;
  color: inherit; backdrop-filter: none; -webkit-backdrop-filter: none; z-index: auto; }
#top nav a, #top #nav-auth { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--muted); text-decoration: none; padding: 0; }
#top nav a:hover, #top nav a[aria-current], #top #nav-auth:hover, #top #nav-auth[aria-current] { color: var(--strong); }
#top .menu { display: none; }
@media (max-width: 600px) { #top { padding: 18px 0; } #top nav { gap: 14px; } }

/* phones: one row (brand, log in, menu); the links open as a sheet from the bottom, in thumb reach */
@supports selector(:popover-open) { @media (max-width: 600px) {
  #top { padding: 8px 0; align-items: center; gap: 10px; flex-wrap: nowrap; }
  #top #nav-auth { color: var(--hi); padding: 7px 12px; border: 1px solid var(--faint); border-radius: 999px; background: var(--card); }
  #top .menu { display: grid; place-content: center; gap: 5px; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
  #top .menu i { display: block; width: 18px; height: 1.5px; background: var(--hi); }
  #top nav:not(:popover-open) { display: none; }
  #top nav:popover-open { position: fixed; inset: auto 0 0; width: auto; display: flex; flex-direction: column; gap: 0;
    padding: 10px 16px calc(24px + env(safe-area-inset-bottom)); background: var(--card); border-radius: 22px 22px 0 0; box-shadow: 0 -12px 40px #00000026; }
  #top nav:popover-open::backdrop { background: #00000026; }
  #top nav a { display: flex; align-items: center; justify-content: space-between; height: 54px; border-bottom: 1px solid var(--faint);
    font: 400 22px var(--serif); letter-spacing: 0; text-transform: none; color: var(--strong); }
  #top nav a:last-child { border-bottom: 0; }
  #top nav a::after { content: '→'; font: 14px var(--sans); color: var(--muted); }
} }

/* the footer (tools/build.mjs): at the foot of the window on a short page, after the content on a long one (the body's
   ::after takes the slack, 72px at least), on a band the window's width (border-image outset, which never scrolls) */
body:has(> #foot) { min-height: 100dvh; display: flex; flex-direction: column; padding-bottom: 0; }
body:has(> #foot)::after { content: ''; flex: 1 0 72px; }
#foot { order: 1; box-sizing: border-box; width: min(1180px, calc(100vw - 32px)); margin: 0 auto; padding: 26px 0 calc(28px + env(safe-area-inset-bottom));
  border-image: linear-gradient(var(--faint) 0 1px, var(--card) 1px) fill 0 / 0 / 0 100vmax;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; font: 13px var(--sans); color: var(--muted); }
#foot a { color: var(--muted); text-decoration: none; } #foot a:hover { color: var(--strong); }
#foot .ap { flex-basis: 100%; font-size: 12px; }
/* the language menu: a pill like the site's ghost buttons, on the right */
#foot #lang { appearance: none; -webkit-appearance: none; margin-left: auto; font: 500 12px var(--mono); letter-spacing: .02em; color: var(--hi);
  padding: 7px 32px 7px 14px; border: 1px solid var(--faint); border-radius: 999px; cursor: pointer;
  background: var(--page) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%238c8c90' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 13px center; }
#foot #lang:hover { border-color: var(--mid); }
@media (max-width: 600px) { #foot #lang { margin-left: 0; flex-basis: 100%; height: 44px; } }