/* ── The footer, once ───────────────────────────────────────────
   Loaded by every generated page, after that page's own stylesheet, so this
   is the last word on `.foot` wherever it lands.

   It used to be defined four times. scenario.css had it red, home.css and a
   hand-copied duplicate in books.css had it bone with a red rule, and
   category.css had it as an unbacked strip of three links — so the same
   element was a different object on each third of the site.

   Red was the answer to that for a while, and it stopped being the right one
   once the light panels arrived: on bone, a red slab is the loudest thing on
   the screen and it shouts over the shelf it is meant to sit under. It is
   black now, with the red kept as the rule that separates it from whatever it
   lands on — a seam rather than a slab. Under bone that reads as a block; on
   the near-black pages the footer joins the ground and the red rule is the
   line that says the page has ended.

   The tokens are declared here rather than assumed, because the four
   stylesheets that load alongside this one do not all define the same ones —
   scenario.css and home.css carry --signal and --void, category.css carries
   --hair-dark, and a page that loads only base.css has none of the rest. */
.foot {
  --foot-ink: #EFEBE4;
  --foot-ground: #0C0C0C;
  --foot-seam: #E8321E;
  /* The ink as a triple, because four of the five colours in here are the
     same ink at different strengths. Written once so the footer can be
     turned over by changing this line rather than by finding five rgba()s
     and hoping none was missed. */
  --foot-rgb: 239, 235, 228;

  flex: 0 0 auto;
  background: var(--foot-ground);
  color: rgba(var(--foot-rgb), 0.8);
  border-top: 3px solid var(--foot-seam);
  padding: clamp(10px, 1.6vh, 18px) var(--gutter, clamp(20px, 5vw, 72px)) clamp(9px, 1.3vh, 14px);
  font-size: 10px;
  letter-spacing: 1px;
  /* The document pages put the footer at the end of a centred column, so it
     has to break out to the full width or it reads as one more paragraph.
     Harmless on the decks, where the panel is already full width. */
  margin-top: clamp(30px, 5vh, 60px);
}

.foot-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px clamp(16px, 2.6vw, 36px); }

.foot .foot-mark {
  font-family: 'Anton', 'Arial Narrow', Impact, sans-serif;
  font-size: clamp(15px, 1.7vw, 22px);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--foot-ink);
  transition: opacity 0.2s;
}
.foot .foot-mark .amp { color: inherit; }
.foot .foot-mark:hover { opacity: 0.66; }

.foot-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px clamp(12px, 1.8vw, 24px); }
.foot-links button { background: none; border: 0; font: inherit; letter-spacing: inherit; cursor: pointer; }

.foot a,
.foot-links button {
  color: rgba(var(--foot-rgb), 0.78);
  text-transform: uppercase;
  font-weight: 600;
  transition: opacity 0.2s;
}
.foot a:hover,
.foot-links button:hover { opacity: 0.6; }

/* Three classes plus the tag, so it outranks the `.foot a` rule above rather
   than depending on which of the two the bundle happens to emit last. */
.foot .foot-social { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 16px); }
.foot .foot-social a { color: var(--foot-ink); }
.foot .foot-social a:hover { opacity: 0.6; }
.foot .foot-social svg { display: block; }

.foot-fine {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px clamp(12px, 2vw, 28px);
  margin-top: clamp(8px, 1.2vh, 14px);
}
.foot-copy { flex: 0 0 auto; font-weight: 600; color: rgba(var(--foot-rgb), 0.62); }
.foot-note {
  flex: 1 1 40ch;
  min-width: 0;
  font-size: clamp(11px, 0.95vw, 12.5px);
  line-height: 1.55;
  letter-spacing: 0.2px;
  color: rgba(var(--foot-rgb), 0.55);
}

/* The deck pages pin the footer inside the last panel, which is one screen
   tall and already padded. A second margin there pushes the panel over. */
.deck-panel > .foot,
.panel > .foot { margin-top: 0; }

@media (max-width: 860px) {
  .foot-top { gap: 0 18px; }
  .foot-note { flex-basis: 100%; }
  /* Only reaches document pages: .deck-panel/.panel footers are zeroed
     above regardless of width. */
  .foot { margin-top: clamp(18px, 3vh, 36px); }

  /* The footer's own bottom edge is the last thing above the home indicator
     on a phone that reports a bottom inset, and viewport-fit=cover means the
     page runs under it. */
  .foot { padding-block: 2px calc(2px + var(--safe-b, 0px)); }

  /* Every link in here was 11-15px tall. They are the site's secondary
     navigation and they were the smallest targets on the page. The height
     comes from the flex box rather than from type size or margin, so the
     rows keep their leading and the footer only grows by what the targets
     actually need. footer.js emits one link (About) and three icons now,
     which fit one row at 44px with room to spare, so nothing here forces a
     second row for them any more. */
  .foot-links a,
  .foot-links button,
  .foot .foot-social a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* The social icons are 15px square. Height alone would have left them a
     15px-wide target in a 44px-tall box. */
  .foot .foot-social a { min-width: 44px; justify-content: center; }
  .foot .foot-social { gap: 0; }

  .foot { font-size: 11px; }
  .foot-note { font-size: 11.5px; }
  .foot-fine { margin-top: 2px; padding-top: 6px; }
}

@media print {
  .foot { background: #fff; color: #000; border-top: 3px solid #000; }
}

/* ── The fine print reads as fine print ─────────────────────────
   On a 375px screen the footer came to 146px, 18% of the window, and 93px
   of that was the disclosure block: a four-line paragraph set at 11.5px on
   1.55 leading, which is body copy. Next to it sat a nav of one link and
   three icons. So two thirds of the footer was the legal notice, set at
   nearly the size of the sentence above it on the page.

   The notice stays, in full and unhidden: it is an Associates requirement
   and it has to be legible without a tap. What changes is that it stops
   competing with content. Smaller and tighter is what fine print is, and at
   10.5px on 1.4 it is still well above the 10px floor the rest of the
   site's small type sits on.

   The tap targets above it are untouched. They were raised to 44px on
   purpose and they are the one part of this footer that should not shrink. */
@media (max-width: 860px) {
  .foot-note {
    font-size: 10.5px;
    line-height: 1.4;
    letter-spacing: 0.1px;
  }
  .foot-fine { gap: 2px clamp(12px, 2vw, 28px); }
}

/* ── The footer joins the page it ends ──────────────────────────
   Black, and now black at every width again.

   It was turned bone on a phone because the thing above it was bone on
   five of the seven pages that have a footer, so a black slab under the
   Essential Shelf read as a different object rather than an ending. With
   css/dark-mobile.css in place the argument is spent: those five surfaces
   are void below 860px now, so the footer continues them by staying what
   it always was. It is listed among the surfaces that file turns over, so
   it inherits the swap and needs nothing of its own.

   The red seam does move, though, and on a phone it goes. It was drawn to
   separate the footer from whatever it landed on, and on a dark page under
   a dark section there is nothing left to separate: a 3px red rule across
   the width is the one hard edge in a scroll that was just made continuous
   on purpose, so it reads as a divider looking for something to divide.

   Kept above 860px, where the panel over it is still bone and the line is
   doing the job it was drawn for. Kept in print at any width, where the
   page has no colour to end it with otherwise. */

@media (max-width: 860px) {
  .foot { border-top: 0; }
}