/* 047 v5: the chrome every page shares beside the locked header (theme.css stays untouched).
   The skip link, the current page in the nav, the header travelling down the page, and the footer (_rig/footer.py writes its markup).
   The footer is quiet chrome: black ground, the one light from the top right, no divider of its own (the seam above the
   page's closer is the site's only divider), nothing moves. */

/* ------------------------------------------------------------------ the skip link: off screen until it has focus */
.skip { position: absolute; left: var(--gutter); top: 12px; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  background: var(--bw-white); color: var(--bw-ground); font: 600 .75rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  transform: translateY(-200%); }
.skip:focus, .skip:focus-visible { transform: none; outline: 2px solid var(--bw-white); outline-offset: 3px; }
main:focus { outline: none; }

/* ------------------------------------------------------------------ targets of at least 24 x 24 px (the accessibility statement), drawn exactly as before:
   the locked nav's links and the wordmark get taller boxes around the same text (vertical padding inside a centred row moves
   nothing); a link inside a sentence gets vertical padding, which never changes an inline line's layout */
.links a:not(.btn) { padding-block: 7px; }
.wordmark { min-height: 24px; }
:where(main) :where(p, li, dd) > a:not([class]) { padding-block: .24em; }

/* ------------------------------------------------------------------ the nav: the page the reader is on (the rule 1 px, 9 px under the text, as before) */
.links a[aria-current="page"] { position: relative; color: var(--bw-white); }
.links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: linear-gradient(90deg, rgba(254, 254, 253, .2), rgba(254, 254, 253, .85)); }
.menu__in nav a[aria-current="page"]::after { content: ""; display: inline-block; width: 22px; height: 1px; margin-left: 16px; vertical-align: middle;
  background: var(--bw-white); }

/* ------------------------------------------------------------------ the header travels down every page (the Captain, 2026-10-12)
   At the top of a page the header is exactly the approved one, over the hero. The head script (_rig/footer.py NAV_HEAD) sets
   html.nav-stick when the browser has IntersectionObserver: the header is then fixed to the screen. Once the page has scrolled
   (html.nav-scrolled, from one IntersectionObserver on a 1 px mark at the top of the page; nothing runs per frame) it closes into a
   compact bar: black with a faint blur behind it, its row raised to the bar's middle, a thin hairline at its foot lit from the lamp's
   side. Opacity and transform only: nothing on the page moves or reflows. scroll-padding-top is the bar, so the snap centres a stop in
   the screen below it, an anchor or a focused control lands under it, and motion.js starts every reading zone under it. Without the
   script the header stays where it always was, at the top of the page, so words can never run under it. */
:root { --bar-h: 60px; }
@media (max-width: 899.98px) { :root { --bar-h: 56px; } }
html.nav-stick { scroll-padding-top: var(--bar-h); }
.nav-stick .nav { position: fixed; pointer-events: none; }      /* the box is the approved 72 (64) px; only its controls take the pointer */
.nav-stick .nav__in > * { pointer-events: auto; }
.nav-stick .nav::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: var(--bar-h); opacity: 0;
  background: rgba(10, 11, 12, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.nav-stick .nav::after { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--bar-h) - 1px); height: 1px; opacity: 0;
  background: linear-gradient(90deg, rgba(254, 254, 253, 0) 0%, rgba(254, 254, 253, .05) 32%, rgba(254, 254, 253, .18) 72%, rgba(254, 254, 253, .34) 100%); }
.nav-scrolled .nav::before, .nav-scrolled .nav::after { opacity: 1; }
.nav-scrolled .nav__in { transform: translateY(calc((var(--bar-h) - var(--nav-h)) / 2)); }   /* 6 px up (4 on phones): centred in the bar */
@media (prefers-reduced-motion: no-preference) {
  .nav-stick .nav::before, .nav-stick .nav::after { transition: opacity .32s var(--ease-light); }
  .nav-stick .nav__in { transition: transform .32s var(--ease-light); }
}
.nav-mark { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; }
@media print { .nav-stick .nav { position: absolute; } }

/* ------------------------------------------------------------------ the footer */
.foot { position: relative; isolation: isolate; overflow: hidden; background: var(--bw-ground); padding: 72px 0 40px; }
.foot__light { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(38% 80% at 94% -10%, rgba(223, 223, 219, .05) 0%, rgba(223, 223, 219, .014) 46%, transparent 74%);
  /* it began at full strength on the footer's top edge, a straight step under every seam: it now rises out of the black, nothing at
     the edge, full a little under it (as the close's light and the head's dark corner fade before their edges) */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .35) 48px, #000 168px); mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .35) 48px, #000 168px); }
.foot__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 2.2fr) minmax(0, 2.8fr) minmax(0, 2.6fr); column-gap: var(--gap); row-gap: 64px;
  align-items: baseline; }        /* the wordmark, the first page, the email and the first legal link stand on one baseline (the wordmark sat high) */
.foot__brand { display: grid; gap: 24px; justify-items: start; }
.foot__line { font: 600 1.25rem/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--bw-white); font-feature-settings: "case"; }
.foot__pages, .foot__legal, .foot__reach { display: grid; gap: 2px; justify-items: start; align-content: start; }
.foot__pages a, .foot__legal a { display: inline-flex; align-items: center; min-height: 34px; font: 500 .75rem/1.2 var(--sans); letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none; color: var(--bw-gun-300); transition: color .2s; }
.foot__reach { font-style: normal; }
.foot__reach a { display: inline-flex; align-items: center; min-height: 34px; font: 400 .9375rem/1.3 var(--sans); color: var(--bw-silver); text-decoration: none; transition: color .2s; }
.foot__reach span { display: inline-flex; align-items: center; min-height: 34px; font: 450 .75rem/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bw-gun-300); }
.foot a:hover, .foot a[aria-current="page"] { color: var(--bw-white); }
.foot__copy { grid-column: 1 / -1; font: 400 .6875rem/1.6 var(--mono); letter-spacing: .08em; color: var(--bw-gun-350); }
.foot__nw { white-space: nowrap; }

@media (max-width: 899.98px) {
  .foot { padding: 56px 0 32px; }
  /* the pages' column takes only its longest name; the legal column takes the rest, so RECRUITING FRAUD NOTICE stands on one line
     down to a 360 px screen (and, narrower still, wraps with room between its lines) */
  .foot__in { grid-template-columns: max-content minmax(0, 1fr); column-gap: clamp(16px, 6vw, 40px); row-gap: 40px; }
  .foot__pages a, .foot__legal a { font-size: .6875rem; letter-spacing: .12em; line-height: 1.35; }
  .foot__light { background: radial-gradient(92% 42% at 92% -4%, rgba(223, 223, 219, .05) 0%, rgba(223, 223, 219, .014) 46%, transparent 74%); }   /* a round pool, not a tall sliver with a straight side */
  .foot__brand, .foot__reach { grid-column: 1 / -1; }
  .foot__reach { order: 3; }
  .foot__copy { order: 4; }
}