/* ==========================================================================
   Site footer — layout F-01 · Columns (components/footer-lab.js). Logo, then the message on the left;
   the links in their own column; descriptor on top and © at the bottom of
   the last column; the large name across the bottom. No grid lines, "+"
   marks or dividers — spacing does the work. The page dark, the glass
   light and the name spacing: layout/site-ui.css › footer.
   ========================================================================== */

.fl {
  position: relative;
  overflow: hidden;
  padding-top: 120px;
  background: var(--c-inverse-container);
  color: var(--c-on-inverse);
}

.fl .eyebrow { display: flex; width: max-content; }

/* ---------------------------------------------------------- shared pieces */

.fl-statement {
  margin-top: 22px;
  font-size: min(var(--fs-display-md), 64px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: none;                  /* sentence case, as written */
}

.fl-logo { color: var(--c-on-inverse); }

/* links: mono caps with the site's text roll; muted → white */
.fl-nav { display: flex; flex-direction: column; gap: 12px; }

.fl-nav a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: max-content;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-md);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--c-on-inverse-muted);
  transition: color 0.3s var(--ease);
}

.fl-nav a:hover,
.fl-nav a:focus-visible { color: var(--c-on-inverse); }

.fl-desc { max-width: 280px; }

.fl-credit {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  color: var(--c-on-inverse-muted);
}

/* the large name — fitted to the container width (decorators.js [data-fit]),
   set as the footer wordmark; the fluid hover runs on it (hero-fluid.js) */
.fl-wordmark {
  margin-top: 70px;
  white-space: nowrap;
  font-size: 15vw;
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.fl-wordmark > span {
  display: block;
  padding: 0.1em 0.06em 0.15em 0;        /* room for the final S; air below */
}

/* ------------------------------------------------- F-01 · Columns */

.fl1__top { align-items: stretch; }

.fl1__lead { grid-column: 1 / span 2; }
.fl1__msg { margin-top: 80px; }

.fl1__nav {
  grid-column: 3 / span 1;
  display: flex;
  align-items: flex-end;
}

.fl1__meta {
  grid-column: 4 / span 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 1199px) {
  .fl1__lead { grid-column: 1 / -1; }
  .fl1__nav { grid-column: 1 / span 2; margin-top: 50px; }
  .fl1__meta { grid-column: 3 / span 2; margin-top: 50px; }
}

@media (max-width: 809px) {
  .fl { padding-top: 80px; }
  .fl1__nav, .fl1__meta { grid-column: 1 / -1; }
  .fl-wordmark { margin-top: 50px; }
}