/* Header and footer. Every page loads this after its own sheet, so they look the same everywhere. */
:root { --frame-pad: max(clamp(20px, 5.5vw, 80px), calc((100vw - 1440px) / 2)); }

.strip {
  position: fixed; inset: 0 0 auto 0; height: var(--strip); z-index: 30;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px;
  padding: 0 var(--frame-pad); background: var(--bp-2); color: var(--chalk); border-bottom: 1px solid var(--chalk-20);
  font-family: var(--mono); font-size: 12px; line-height: 1.55;
}
.brand .logo-mark { width: 0.9em; height: 0.9em; display: block; flex: none; transform: translateY(-0.1em); }
.strip .brand, .site-foot .brand { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--serif); font-size: 20px; letter-spacing: -0.02em; text-decoration: none; color: var(--chalk); }
.strip .sheet { justify-self: center; color: var(--chalk-70); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.strip .sheet b { color: var(--chalk); font-weight: 500; }
.menu { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.menu a { text-decoration: none; color: var(--chalk-70); white-space: nowrap; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--chalk); text-decoration: underline; text-underline-offset: 4px; }
.menu .github { margin-left: 6px; padding-left: 18px; border-left: 1px solid var(--chalk-40); color: var(--chalk); }
.menu-toggle { display: none; grid-column: 3; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--chalk-40); background: transparent; color: var(--chalk); font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.menu-toggle:hover { border-color: var(--chalk); }
.menu-toggle .bars { position: relative; width: 16px; height: 11px; }
.menu-toggle .bars i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform 0.2s ease, opacity 0.2s ease; }
.menu-toggle .bars i:nth-child(1) { top: 0; }
.menu-toggle .bars i:nth-child(2) { top: 4.75px; }
.menu-toggle .bars i:nth-child(3) { bottom: 0; }
.strip.open .menu-toggle .bars i:nth-child(1) { transform: translateY(4.75px) rotate(45deg); }
.strip.open .menu-toggle .bars i:nth-child(2) { opacity: 0; }
.strip.open .menu-toggle .bars i:nth-child(3) { transform: translateY(-4.75px) rotate(-45deg); }

.site-foot { margin-top: auto; padding: 36px var(--frame-pad) 28px; background: var(--bp-2); border-top: 1px solid var(--chalk-20); color: var(--chalk-70); font-family: var(--mono); font-size: 12px; line-height: 1.55; }
.foot-top, .foot-base { display: flex; justify-content: space-between; align-items: center; gap: 24px 40px; flex-wrap: wrap; }
.foot-top { padding-bottom: 28px; margin-bottom: 18px; border-bottom: 1px solid var(--chalk-20); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.site-foot nav a, .foot-base a { color: var(--chalk); text-decoration: none; }
.site-foot nav a:hover, .foot-base a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-base { letter-spacing: 0.02em; }

@media (max-width: 1180px) {
  .strip .sheet { visibility: hidden; }
}
@media (max-width: 980px) {
  .js .menu-toggle { display: inline-flex; }
  .js .menu {
    display: none; position: fixed; top: var(--strip); left: 0; right: 0; z-index: 29;
    flex-direction: column; align-items: stretch; gap: 0;
    max-height: calc(100svh - var(--strip)); overflow-y: auto;
    padding: 6px var(--frame-pad) 22px; background: var(--bp-2); border-bottom: 1px solid var(--chalk-40);
    box-shadow: 0 18px 40px rgba(10, 22, 42, 0.45);
  }
  .js .strip.open .menu { display: flex; }
  .js .menu a { padding: 15px 0; border-bottom: 1px solid var(--chalk-20); font-size: 15px; color: var(--chalk); }
  .js .menu a[aria-current="page"] { text-decoration: none; box-shadow: inset 3px 0 0 var(--chalk); padding-left: 14px; }
  .js .menu .github { margin: 0; padding-left: 0; border-left: 0; border-bottom: 0; color: var(--chalk-70); }
  /* Without script the links wrap onto a second row under the brand. */
  html:not(.js) { --strip: 92px; }
  html:not(.js) .strip { height: auto; min-height: var(--strip); grid-template-columns: auto minmax(0, 1fr); align-content: center; padding-block: 10px; row-gap: 8px; }
  html:not(.js) .strip .sheet { display: none; }
  html:not(.js) .menu { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; gap: 12px 16px; }
  html:not(.js) .menu .github { margin-left: 0; padding-left: 0; border-left: 0; }
}
@media (max-width: 560px) {
  .foot-top, .foot-base { align-items: flex-start; }
  .site-foot nav { gap: 8px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-toggle .bars i { transition: none; }
}