/* ENVOY — footer.css
   the closing panel and the footer

   One part of a stylesheet split across files. The load order in
   index.html is part of the stylesheet — see css/base.css for the map. */

/* ---------------------------------------------------------------- footer */

/* Full width, and holding no measure of its own. The 1560px cap and the side
   gutters used to live here, which meant they applied to the wordmark at the
   foot as well and left it floating in the middle of the panel with a gutter
   either side. They belong to the columns, so they moved down to .foot-top —
   which leaves this box the full width of .closing (a section with no padding
   of its own) and lets the banner below simply take `width: 100%`.

   That is why there is no 100vw breakout here. `100vw` is the viewport
   *including* the scrollbar, so a full-bleed built that way overhangs the page
   by the scrollbar's width and puts a horizontal scrollbar on the document —
   about 15px on this machine. Widening the container the image is already in
   has no such edge case. */
.foot {
  width: 100%;
}

/* Links left, slogan right, and they meet in the middle. flex-end on the
   slogan hangs it off the same baseline the last column ends on rather than
   letting it float against the top of a taller column.

   Capped and centred so the columns and the slogan stay a composition on a
   wide monitor instead of drifting to opposite edges of the screen — the job
   .foot used to do for the whole footer, now scoped to the only part of it
   that wants a measure. No bottom padding: the gap to the banner is this
   block's own margin, so there is one number between them rather than two. */
.foot-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 5vw, 90px);
  max-width: 1560px;
  margin: 0 auto clamp(28px, 6vh, 72px);
  padding: clamp(32px, 5vh, 64px) clamp(20px, 4vw, 64px) 0;
}

.foot-cols {
  display: flex;
  gap: clamp(28px, 5.5vw, 96px);
}

.foot-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot-col li + li { margin-top: clamp(8px, 1.4vh, 14px); }

/* Archivo Narrow throughout this block — the condensed grotesque is the
   counterweight to all the Bodoni above it, and it is the one place on the
   page where the type is meant to read as plain signage rather than as
   lettering. */
.foot-head {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin: 0 0 clamp(12px, 2vh, 20px);
  font-family: "Archivo Narrow", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(17px, 1.55vw, 24px);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--gold);
}

/* The mark sits on the gold of the heading but a size up, so it reads as a
   bullet rather than as a letter. line-height 1 keeps the glyph from pushing
   the heading's box taller than the text it sits next to. */
.foot-mark {
  font-size: 1.15em;
  line-height: 1;
}

.foot-col a {
  font-family: "Archivo Narrow", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(15px, 1.35vw, 21px);
  font-weight: 400;
  color: #fff;
  text-decoration: none;
  transition: color 0.18s ease;
}

.foot-col a:hover,
.foot-col a:focus-visible { color: var(--red-bright); }

/* Both red pieces are transparent PNGs of drawn outlines. Capped in vw so they
   scale with the page, and the banner is allowed to run the full width because
   that full-bleed wordmark is the point of the composition. */
.foot-slogan {
  flex: none;
  width: clamp(260px, 40vw, 640px);
  height: auto;
  display: block;
}

/* Edge to edge, and flush with the foot of the document. `width: 100%` is the
   full width of .closing now that .foot carries no cap and no gutter, so the
   wordmark runs from one side of the screen to the other and the panel ends on
   its last row of pixels.

   Flush rather than nearly flush on purpose: a full-bleed image with a sliver
   of background under it does not read as breathing room, it reads as a
   misaligned image. Either it touches the edge or it is inset enough to be
   obviously deliberate, and this one is the first.

   The one cost is upscaling. The source is 1164px wide and this asks for the
   viewport, so past about 1200px the drawn outlines are being enlarged — 1.6×
   on a 1920 screen, 2.2× on a 2560 one, which is where the strokes start to
   soften. Nothing here can fix that; it wants a wider export. */
.foot-banner {
  display: block;
  width: 100%;
  height: auto;
}