/* One header, one footer.
 *
 * This file is linked LAST on every page, after each page's own stylesheet and
 * after both *.late.css files. That is deliberate and it is the whole trick:
 * the cascade here resolves by document order, so loading last is the only way
 * to give one header the final word on 20 pages without moving a single
 * existing <link>. See CLAUDE.md — reordering the others silently repaints two
 * pages.
 *
 * It also repairs a live defect. business-engineering.late.css:26 and
 * start.late.css:26 declare `.nav-links{display:flex}` unconditionally and load
 * after site.css, overriding
 *     @media(max-width:960px){.nav-links{display:none}}
 * so on those two pages the mobile drawer was permanently open below the bar
 * while the hamburger was also showing. Measured at 390/768/940: the panel had
 * height 98/98/448 where every other page had 0.
 *
 * Selectors are prefixed `nav ` where they must out-specify nav-dark.css's
 * `nav .nav-links a` (0,2,1). Equal specificity plus later order is not enough
 * against that file; the prefix is load-bearing, not decoration.
 *
 * Design rules this obeys, from design-system/SKILL.md:
 *   1. two tones, #faf9f6 / #111110. Colour is spent on state only.
 *   2. one full pill on the page, and it is the marketing CTA. The panel adds none.
 *   3. no shadows. Separation is a 1px hairline, emphasis 1.5px.
 *   4. utility controls are IBM Plex Mono; eyebrows are Space Mono +0.07em.
 */

/* 180ms is --duration-hover and the curve is --ease-standard, both from
   design-system/tokens/motion.css. The shipped site does not load the token
   files, so the values are restated here under a private name rather than
   silently diverging. */
:root{--nav-dur:180ms;--nav-ease:cubic-bezier(.25,.1,.25,1)}

/* ── the bar ───────────────────────────────────────────────────────────────
   Ground and hairline are already uniform on all pages (site.css:237 sets the
   ink background for everyone; nav-dark.css only adds !important where a page
   stylesheet asked for paper). Nothing here changes the ground. */
/* Horizontal padding is deliberately NOT set here. site.css:10 gives .nav-in
   `padding-inline: max(20px, env(safe-area-inset-*))`, stepping to 24px at
   721px, and it already wins on every page. An earlier draft of this file wrote
   `padding:13px 24px`, which silently dropped both the 20px mobile step and the
   safe-area inset — the gate caught it as `padding-left: 20px -> 24px` at
   390px. Vertical only. */
nav .nav-in{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px}
nav .logo-link{gap:0}
footer .logo-link{gap:0}

/* The bar's vertical padding becomes a variable because two things need to
   agree on it: the bar itself, and how far below the bar a dropdown panel has
   to sit. site.css:47 shrinks the padding to 9px once the page scrolls
   (`nav.cond`), so a panel offset hardcoded to 13px would detach by 4px the
   moment anyone scrolled. One value, two consumers. */
nav{--nav-pad:13px}
nav.cond{--nav-pad:9px}
nav .nav-in,nav.cond .nav-in{padding-top:var(--nav-pad);padding-bottom:var(--nav-pad)}

/* The pill's border was authored per page — index.css and section.css each gave
   it `border:1.5px solid`, business-engineering.late.css re-adds it by hand, and
   article.css never had the rule at all. So the handbook pill was borderless and
   2px shorter, which made the whole bar 66.44px there against 68.44px
   everywhere else. Width and style are pinned here; the colour stays with
   site.css, which paints it --paper against a --paper fill. */
nav .nav-cta{border-width:1.5px;border-style:solid}

/* Every page stylesheet except article.css carries `.nav-links a{text-decoration:
   none}` — index.css:24, join.css:21, section.css:20, and both *.late.css:27.
   article.css never needed it, because until the shared header landed those
   pages had no .nav-links at all: it resets only .logo-link and .nav-in a.back.
   So the three handbook pages fell through to the UA default and every nav link
   rendered underlined. Reset it on the component instead of patching that one
   file, or the next page built on article.css inherits the same bug.

   This is text-decoration only. site.css's `.nav-links a:not(.nav-cta)::after`
   draws the hover underline as a scaled pseudo-element and is untouched — two
   mechanisms that look alike and must not be collapsed into one. */
nav .nav-links a{text-decoration:none}

/* ── desktop ───────────────────────────────────────────────────────────────── */
@media(min-width:961px){
  nav .nav-links{display:flex;gap:20px;align-items:center;position:static;background:none;border:none;padding:0;max-height:none;overflow:visible}

  /* A dropdown parent is a real link. It navigates without JavaScript and on
     touch, while :hover and :focus-within open the panel — which is why this
     component needs no disclosure script at all. Focusing the parent opens the
     panel, which makes its children focusable, which keeps :focus-within true
     as you tab through them. */
  /* align-self:stretch makes the group span the bar's content box rather than
     just its own 36px label, so `top:100%` lands on the content edge and the
     panel offset needs only the padding and the 1px hairline added back. Left
     alignment still comes from the group, which is why the panel cannot simply
     be positioned against `nav`. */
  nav .nav-group{position:relative;display:flex;align-items:center;align-self:stretch}
  nav .nav-links .nav-parent{display:inline-flex;align-items:center;gap:6px}

  /* Caret rides ::before with order:1 so it sits after the label — ::after is
     already taken by site.css's underline sweep. */
  nav .nav-links .nav-parent::before{
    content:"";order:1;width:0;height:0;
    border-left:3.5px solid transparent;border-right:3.5px solid transparent;
    border-top:4px solid currentColor;opacity:.7;
    transition:transform var(--nav-dur) var(--nav-ease),opacity var(--nav-dur) var(--nav-ease);
  }
  nav .nav-group:hover>.nav-parent::before,
  nav .nav-group:focus-within>.nav-parent::before{transform:rotate(180deg);opacity:1}

  /* The panel is a flat extension of the bar, not a floating card: rule 3 bans
     shadows, so separation is a hairline on three sides and the bar's own
     bottom hairline serves as the fourth. */
  nav .nav-panel{
    position:absolute;top:calc(100% + var(--nav-pad) + 1px);left:0;min-width:220px;z-index:60;
    display:flex;flex-direction:column;
    background:var(--ink);
    border:1px solid #2e2d2a;border-top:none;border-radius:0;
    visibility:hidden;opacity:0;transform:translateY(-4px);
    transition:opacity var(--nav-dur) var(--nav-ease),
               transform var(--nav-dur) var(--nav-ease),
               visibility var(--nav-dur);
  }
  nav .nav-group:hover>.nav-panel,
  nav .nav-group:focus-within>.nav-panel{visibility:visible;opacity:1;transform:none}

  nav .nav-links .nav-panel a{
    display:flex;align-items:center;min-height:40px;
    padding:0 16px;white-space:nowrap;
    letter-spacing:.12em;
    border-bottom:1px solid #2e2d2a;
  }
  nav .nav-links .nav-panel a:last-child{border-bottom:none}
  /* The one colour move in the component, and it is a state — the only thing
     rule 1 permits colour for. Mixed from the two tones rather than written as a
     third literal, so it cannot drift away from the palette: 4% paper into ink
     reads as a band, not as decoration. */
  nav .nav-links .nav-panel a:hover{background:color-mix(in srgb,var(--paper) 4%,var(--ink));color:var(--paper)}
  nav .nav-links .nav-panel a.on{color:var(--paper)}
  /* Kill the underline sweep inside the panel: 0,2,2 beats site.css's 0,2,1. */
  nav .nav-links .nav-panel a::after{display:none}
}

/* ── drawer ────────────────────────────────────────────────────────────────
   Groups do not nest here. Each renders as a section — eyebrow row, then plain
   rows — because one scroll beats two taps, and it removes the deepest-group
   problem entirely. */
@media(max-width:960px){
  /* gap and align-items are restated, not just display. Both *.late.css set
     `.nav-links{display:flex;gap:22px;align-items:center}` with no media query
     and load after site.css, so on business-engineering and start the drawer
     inherited a 22px row gap against 2px everywhere else, and centred rows
     instead of stretched ones — which stops a row's bottom hairline from
     spanning the panel. Fixing only `display` would have left a drawer that
     still looked different on two pages. */
  nav .nav-links{display:none;gap:2px;align-items:stretch}
  nav .nav-links.open{display:flex}

  /* Undoes @media(max-width:900px){.nav-links a:not(.nav-cta){display:none}}
     in both *.late.css — 0,2,1 there, 0,2,1 here, and this file loads later. */
  nav .nav-links a:not(.nav-cta){display:block}

  nav .nav-group{display:block;border-bottom:1px solid #2e2d2a}
  nav .nav-links .nav-parent{display:block;padding:13px 0;min-height:48px}
  nav .nav-links .nav-parent::before{display:none}

  nav .nav-panel{
    position:static;visibility:visible;opacity:1;transform:none;
    display:block;background:none;border:none;padding:0 0 6px;
  }
  nav .nav-links .nav-panel a{
    display:block;padding:11px 0 11px 14px;min-height:44px;
    border-bottom:none;font-size:12.5px;
  }
}

/* ── states ────────────────────────────────────────────────────────────────
   The pill's hover deliberately has no rule in this file. nav-dark.css records
   why: an !important background here plus site.css's !important colour once
   produced white text on a white fill. Hover stays in site.css. */
nav .nav-links a.on{color:var(--paper)}
nav .nav-links>a.on{border-bottom:1.5px solid var(--paper)}
nav .nav-links .nav-parent.on{border-bottom:1.5px solid var(--paper)}

/* ── the handbook back-link ────────────────────────────────────────────────
   It used to be the entire nav on those pages. Now the shared header sits
   above it and it is what it always claimed to be: a way back. */
.back-row{margin:0 0 22px}
.back-row .back{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-mute);text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;min-height:36px;
}
.back-row .back:hover{color:var(--ink)}

/* 404 keeps a minimal stub, the single documented header exception. Its old
   label read "The Handbook →" and pointed at the homepage's #os section, which
   was neither the handbook nor honest. */
nav .nav-in a.back{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:#c9c7bf;text-decoration:none;
}
nav .nav-in a.back:hover{color:var(--paper)}

/* ── footer ────────────────────────────────────────────────────────────────
   Five variants collapse to the 14-page majority. business-engineering and
   start were on --paper with 44px of top padding; the handbook three had no
   top hairline and no padding at all.

   The plane is ink, not paper-2. site.css:402 states the intent — "footer
   closes the page rather than trailing off" — and on a two-tone system the
   only move that actually closes a page is the other tone. It bookends the ink
   nav, so the page reads as a finished object. Nothing here spends colour: ink,
   paper and the three dark-plane steps this site already ships (#c9c7bf for
   secondary text, #9b9992 for labels, #2e2d2a for hairlines) are the whole
   palette, which keeps rule 1 intact.

   The lockup needs no new artwork for this. site.css:151 paints it through a
   mask with background-color:currentColor precisely so "one cached file serves
   the ink nav and the paper footer" — flipping the plane flips the mark.

   Three pages end on a .dark section (business-engineering, join, solvers), so
   the footer meets ink on those. The #2e2d2a top hairline is the same
   separation site.css:395 gives `.dark+.dark`, rather than a second treatment
   that only those three pages would ever show. */
/* Reported: the footer filled most of a phone screen. Measured, it was 1009px
   at 390 against a ~800px usable viewport — it overflowed by a quarter screen
   before you could read the legal line. 268px of the 678px desktop height was
   padding alone, so the density pass below takes the chrome down first and the
   Industries column prune takes the tallest content block second. */
footer{background:var(--ink);border-top:1px solid #2e2d2a;padding:clamp(32px,4vw,48px) 0 clamp(24px,2.4vw,32px)}

/* Five page sheets set `.foot-in{display:flex;...;align-items:center}` with
   `padding:0 24px`. The shorthand is the problem: on business-engineering and
   start the *.late.css copies load AFTER site.css, so they beat site.css:10's
   `padding-inline:max(20px,env(safe-area-inset-*))` and silently drop both the
   20px mobile step and the safe-area inset — the same defect this file already
   documents for .nav-in at line 39. Longhands only, restated here.

   1080px is written out rather than var(--max) on purpose: --max is declared in
   index/join/section/*.late.css but never in article.css, so the three handbook
   pages and 404 would fall back to `none` and run the footer full-bleed. */
footer .foot-in{display:block;max-width:1080px;margin:0 auto;
  padding-left:max(20px,env(safe-area-inset-left));
  padding-right:max(20px,env(safe-area-inset-right));
  padding-top:0;padding-bottom:0}
@media(min-width:721px){footer .foot-in{
  padding-left:max(24px,env(safe-area-inset-left));
  padding-right:max(24px,env(safe-area-inset-right))}}

footer ul{list-style:none;margin:0;padding:0}
footer .logo-link{color:var(--paper)}
footer .lockup{height:20px}

/* Bands are separated by a hairline and nothing else — rule 3 bans shadows, and
   a footer this tall needs the reader to see where one band ends. */
footer .foot-nav,footer .foot-legal{border-top:1px solid #2e2d2a}
@media(min-resolution:2dppx){
  footer .foot-nav,footer .foot-legal{border-width:.5px}
}

/* ── band 1 · who this is ─────────────────────────────────────────────────
   Bands 1 and 2 share one four-column grid, so the contact list lands on the
   same rail as "The handbook" below it rather than floating at whatever
   position its own ratio produced. The empty third column is the composition,
   not a gap left over from it. */
footer .foot-top{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px 32px;align-items:start;padding-bottom:clamp(20px,2.4vw,28px)}
footer .foot-id{grid-column:1/3}
footer .foot-contact{grid-column:4/5;display:flex;flex-direction:column;gap:2px}
footer .foot-desc{font-family:var(--body);font-size:14.5px;line-height:1.5;
  letter-spacing:.01em;color:#c9c7bf;max-width:46ch;margin:10px 0 0;
  text-align:left;hyphens:none}

/* ── band 2 · the index ───────────────────────────────────────────────────── */
footer .foot-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px 32px;padding:clamp(20px,2.4vw,28px) 0}
/* The four groups are the nav's own groups, and every entry is a real page in
   sitemap.xml. The old footer listed 17 links in one run-on mono sentence,
   including the homepage anchors; anchors belong to the header, where you are
   browsing, and 19 of 20 pages would have jumped you off the page to reach one. */
footer .foot-h{font-family:var(--mono);font-size:11px;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:#9b9992;
  margin:0 0 8px;line-height:1.4}

/* ── band 3 · the colophon ────────────────────────────────────────────────
   The brand's three beats — reimagine what's next / redefine the how / realize
   the next now — are deliberately NOT here. They were set as a sign-off band in
   an earlier pass and pulled: index.html argues them as a section, join.html
   states them verbatim, and business-engineering.html quotes them in prose, so
   a footer copy repeated the line twice on those pages and shipped it on
   seventeen more that never make the argument. A claim the page already makes
   is filler when the footer makes it again. */
footer .foot-legal{padding-top:clamp(16px,1.8vw,20px)}
/* 1.7 -> 1.55. The colophon runs to five lines at 390 and the trademark
   sentence got longer this round ("trademarks of their respective owners"
   replaces "registered trademarks"), which pushed it from two lines to three
   at 1440. Mono at 11.5px carries 1.55 without crowding. site.css:415 also
   declares line-height here; this file loads after it and wins. */
footer .legal{font-family:var(--mono);font-size:11.5px;color:#9b9992;
  max-width:104ch;line-height:1.55;text-align:left;margin:0}

/* ── links ────────────────────────────────────────────────────────────────
   One idiom for every link down here, borrowed from site.css:102 rather than
   invented: the underline is a background gradient that grows from 0% width, so
   nothing reflows on hover and the footer matches how body links already
   behave. Colour lifts to paper at the same time, which is the only state
   change rule 1 permits. */
footer .foot-nav a,footer .foot-contact a{
  /* 5px -> 4px, not lower. At 13.5px/1.45 the line box is 19.6px, so 4px of
     padding holds the row at 27.6px and keeps it clear of the 24px minimum
     target size. 3px would still pass at 25.6px, but shaving a tap target to
     the floor to save 7px of footer is a bad trade. */
  display:inline-block;padding:4px 0;
  font-family:var(--body);font-size:13.5px;line-height:1.45;letter-spacing:.01em;
  color:#c9c7bf;text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 calc(100% - 4px);
  transition:background-size .28s var(--nav-ease),color .18s var(--nav-ease);
}
footer .foot-nav a:hover,footer .foot-contact a:hover{color:var(--paper);background-size:100% 1px}
/* The one action in the footer is a text link, never a second pill: rule 2 gives
   the page exactly one, and it is the header's marketing CTA. Paper instead of
   #c9c7bf, and an arrow, is the whole distinction — enough to find, not enough
   to compete with the header. */
footer .foot-contact .go{color:var(--paper)}
footer .foot-contact .go::after{content:"\2192";margin-left:.45em}
/* The colophon carries exactly one link — the privacy notice — and it takes the
   same underline, one size down to sit inside a 11.5px mono line. It is not
   promoted into band 2: the index lists pages you browse, and this is the page
   you are sent to. */
footer .legal a{color:#c9c7bf;text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .28s var(--nav-ease),color .18s var(--nav-ease)}
footer .legal a:hover{color:var(--paper);background-size:100% 1px}

/* site.css:130 scopes the paper focus ring to `.dark` and `nav`, and the footer
   is neither — without this the ring stayed ink and vanished against the plane. */
footer :focus-visible{outline-color:var(--paper)}
footer ::selection{background:var(--paper);color:var(--ink)}

/* ── footer · narrow ──────────────────────────────────────────────────────
   grid-column has to be released along with the template. Collapsing .foot-top
   to a single column while .foot-id still claimed 1/3 and .foot-contact 4/5 did
   not stack them — it made the browser generate three implicit columns to reach
   track 4, and the two blocks sat side by side at 123px and 150px on a 390px
   screen. Resetting the template alone looks correct in the CSS and is not. */
@media(max-width:900px){
  footer .foot-top{grid-template-columns:1fr;gap:18px}
  footer .foot-id,footer .foot-contact{grid-column:auto}
  footer .foot-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px}
}
/* The index stays two columns to the bottom of the range. It was seventeen
   links; the six industry children now live only in the header nav and on
   /industries, so it is eleven — still a stack worth splitting, and two
   columns is what keeps the Proof and Handbook groups off each other. */

/* Print: the plane inverts back. An ink footer is a page of toner. */
@media print{
  footer{background:none;border-top:1px solid #000;padding:16px 0 0}
  footer .foot-nav{display:none}
  footer .foot-desc,footer .legal,footer .logo-link{color:#000}
}

/* ── reduced motion ────────────────────────────────────────────────────────
   The panel still opens; it just stops sliding. tools/capture.mjs forces
   reduced motion, so this is the branch the gate actually photographs. */
@media(prefers-reduced-motion:reduce){
  nav .nav-panel{transition:none;transform:none}
  nav .nav-links .nav-parent::before{transition:none}
  /* The footer underline stops sweeping but still arrives, same bargain
     site.css:115 strikes for buttons: a reduced-motion reader still has to see
     which link is under the pointer. */
  footer .foot-nav a,footer .foot-contact a{transition:none}
}