/* ==========================================================================
   Site footer. Deliberately quiet: the closing CTA lives in SYS.10 directly
   above, so the footer is wayfinding and legals only — no third call to
   action, and no back-to-top button (the floating control in chrome.css
   covers that from anywhere on the page).
   ========================================================================== */

footer{ border-top:1px solid var(--line); padding-block:11vh 5vh; position:relative; overflow:hidden; }

.foot-cols{ display:grid; grid-template-columns:1.55fr 1.65fr 1.2fr 1.05fr; gap:clamp(28px,4vw,56px); }
.foot-col h2{ font-size:var(--fs-2xs); letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }
.foot-col ul{ list-style:none; margin-top:10px; display:grid; gap:2px; }
.foot-col li, .foot-col a{ font-size:var(--fs-md); letter-spacing:.03em; color:var(--muted); }
.foot-col li{ display:flex; align-items:center; min-height:44px; }
.foot-col a{ display:flex; align-items:center; min-height:44px; width:100%; transition:color .35s var(--ease-out); }
@media (hover:hover){ .foot-col a:hover{ color:var(--accent); } }

/* Navigate is the full sitemap — eight entries against four in every other
   column, which left it running ~180px past its neighbours. Split into two,
   flowing DOWN each column rather than across rows, so the list still reads in
   page order: Modules -> Scopes on the left, Engagement -> Contact on the right. */
.foot-navcol ul{ grid-auto-flow:column; grid-template-rows:repeat(4,auto); column-gap:clamp(14px,1.8vw,30px); }

.foot-brandcol .fb-name{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:1.2rem; color:var(--ink); }
/* Mono, uppercase, tracked out — the same treatment the boot screen gives it,
   so the tagline reads as one fixed piece of the brand rather than as a
   sentence that happens to appear twice. */
.foot-brandcol .fb-tagline{
  margin-top:10px; font-family:var(--mono); font-size:var(--fs-xs);
  letter-spacing:.28em; text-transform:uppercase; color:var(--accent);
}
.foot-brandcol .fb-tag{ margin-top:14px; font-size:var(--fs-md); line-height:1.75; color:var(--muted); max-width:32ch; }
.foot-brandcol .fb-tag strong{ color:var(--ink); font-weight:500; }
.f-status{ display:inline-flex; align-items:center; gap:9px; margin-top:22px; font-size:var(--fs-2xs); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.f-status .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); animation:pulse 2.6s var(--ease-out) infinite; }

/* Follow row — bare glyphs, no chrome around them.

   The circles this replaced put three 44px rings under a column that has no
   other boxed element in it, so the row read as a widget bolted onto the
   footer rather than part of it. Stripped back, the glyphs need something to
   sit ON or they float: the label anchors the row on one line, and the
   hairline that grows under the hovered icon is the same gesture .wr::before
   and .sh-line already use, so the footer gains a detail rather than a
   component.

   The 44px target survives the visual going from a 44px circle to an 18px
   glyph. It is the same figure .theme-toggle and .nav-toggle use, and it is
   the reason .fs-link is sized rather than the <svg> inside it — shrink the
   box to the glyph and the hit area goes with it. */
.foot-social{ display:flex; align-items:center; gap:clamp(8px,1vw,14px); margin-top:16px; }
/* An author `display` beats the UA sheet's [hidden]{display:none}, so the
   hidden attribute on this row would do nothing without this line. */
.foot-social[hidden]{ display:none; }
.fs-k{
  flex:0 0 auto; margin-right:2px;
  font-size:var(--fs-2xs); letter-spacing:.2em; text-transform:uppercase; color:var(--faint);
}
/* EVERY rule below is scoped to .foot-social, and that is not tidiness.
   .foot-col a two rules up sets `width:100%` at (0,1,1), which out-specifies
   a bare `.fs-link` at (0,1,0) — the glyphs stretched to a third of the
   column each and sat 60px apart instead of in a group. The same rule's
   :hover is (0,2,1), so the hover colour needs the extra class too. */
.foot-social .fs-link{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto; width:38px; height:44px; min-height:44px;
  color:var(--faint);
  transition:color .35s var(--ease-out);
  /* No cursor declaration. The custom pointer these icons used to work
     around is gone (see chrome.css), so the native cursor applies: an <a>
     with no href gets the arrow, not the hand, which is honest for an icon
     that is not yet a link. It becomes the hand on its own the moment an
     href is added. */
}
.foot-social .fs-link svg{
  width:18px; height:18px; fill:currentColor; display:block;
  transition:transform .35s var(--ease-out);
}
/* Grows from the centre out, under the glyph rather than the 44px box, so the
   rule is the width of the thing it underlines. */
.foot-social .fs-link::after{
  content:""; position:absolute; left:50%; bottom:9px; translate:-50% 0;
  width:0; height:1px; background:var(--accent);
  transition:width .4s var(--ease-out);
}
.foot-social .fs-link:focus-visible{ color:var(--accent); outline:none; }
.foot-social .fs-link:focus-visible::after{ width:22px; }
@media (hover:hover){
  .foot-social .fs-link:hover{ color:var(--accent); }
  .foot-social .fs-link:hover svg{ transform:translateY(-2px); }
  .foot-social .fs-link:hover::after{ width:22px; }
}
/* Placeholders still get the hover colour/lift/rule — asked for explicitly,
   over the muted version above. They stay genuinely inert otherwise: no
   href, not in the tab order, hidden from assistive tech (see the comment
   on the row in index.html). Hover is the one exception, and it costs
   nothing to promise — it is not a navigation affordance without a
   keyboard-reachable equivalent, just a colour change on point, which
   :focus-visible above already extends to keyboard users on the live icons. */

@media (prefers-reduced-motion:reduce){
  .foot-social .fs-link svg,.foot-social .fs-link::after{ transition:none; }
  .foot-social .fs-link:hover svg{ transform:none; }
}

.foot-meta{ margin-top:8vh; padding-top:4vh; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; font-size:var(--fs-2xs); letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }

@media (max-width:960px){ .foot-cols{ grid-template-columns:1fr 1fr; gap:32px clamp(24px,4vw,48px); } .foot-brandcol{ grid-column:1 / -1; } }
@media (max-width:520px){
  .foot-cols{ grid-template-columns:1fr; }
  /* Full width now, so two sub-columns still hold and halve the footer's height. */
  .foot-navcol ul{ column-gap:clamp(12px,4vw,28px); }
}
@media (max-width:360px){
  /* Tap targets sit too close side by side at this width. */
  .foot-navcol ul{ grid-auto-flow:row; grid-template-rows:none; }
}

/* Oversized wordmark, sized to the footer's own content box rather than the
   viewport: a vw-based size overflowed by up to 915px once .wrap's max-width
   capped the container, so most of the word sat outside the clip. cqi is 1% of
   that box, and 11.1cqi is the largest size at which the nine glyphs still fit
   on one line.
   Ghosted rather than outline-only — a 0.16-alpha hairline was close to
   invisible. A light fill plus a stronger stroke reads as a watermark without
   competing with the footer text above it. */
footer{ container-type:inline-size; }
footer .big{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:11.1cqi; line-height:.8; letter-spacing:-.03em; margin-top:8vh; white-space:nowrap;
  color:color-mix(in oklab, var(--ink) 7%, transparent);
  -webkit-text-stroke:1.5px color-mix(in oklab, var(--ink) 30%, transparent); }
@supports not (font-size:1cqi){ footer .big{ font-size:clamp(2.2rem,10vw,9.6rem); } }