/* ==========================================================================
   NXXS site footer, second edition
   --------------------------------------------------------------------------
   Loaded after every other theme sheet, on every page. It reads the bright
   palette's colour tokens and only adds the measures the footer itself needs.

   Layout is flexbox throughout. Nothing here is positioned: the closing
   wordmark sits in normal flow under the base row and is revealed with
   clip-path and transform only.
   ========================================================================== */

:root {
  --w-footer-proof:    220px;
  --w-footer-col:      150px;
  --w-footer-brand:    380px;
  --sz-footer-icon:    40px;
  --sz-ruo-mark:       32px;
  --fs-footer-word:    clamp(6rem, 27vw, 21rem);
  --lh-footer-word:    0.78;
  --ls-footer-word:    -0.045em;
  --bw-footer-word:    1.5px;
  --c-footer-word:     var(--c-line-strong);
  --c-footer-word-lit: var(--c-halo);
  --x-footer-link:     3px;
  --x-footer-cta:      4px;
  --y-footer-word:     18%;
  --op-footer-word-in: 0;
}

/* ---- Frame ------------------------------------------------------------- */

.site-footer-v2 {
  display: flex;
  flex-direction: column;
  padding-block: var(--s-9) var(--s-0);
  overflow: clip;
  background-color: var(--c-sunken);
}

/* ---- Proof row ---------------------------------------------------------- */

.footer-proofs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin: var(--s-0) var(--s-0) var(--s-9);
  padding: var(--s-0);
  list-style: none;
}

.footer-proof {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  flex: 1 1 var(--w-footer-proof);
  padding: var(--s-5);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--radius);
  background-color: var(--c-surface);
  box-shadow: var(--shadow-1);
}

.footer-proof-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--sz-footer-icon);
  height: var(--sz-footer-icon);
  border-radius: var(--radius-pill);
  background-color: var(--c-sunken);
  color: var(--c-cold);
}

.footer-proof-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}

.footer-proof-title {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
}

.footer-proof-text {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--c-text-2);
}

/* ---- Brand and links ---------------------------------------------------- */

.site-footer-v2 .footer-top {
  gap: var(--s-9);
  padding-bottom: var(--s-8);
}

.site-footer-v2 .footer-brand {
  flex: 1 1 var(--w-footer-brand);
  max-width: var(--w-footer-brand);
  gap: var(--s-5);
}

.footer-home {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  align-self: flex-start;
  color: var(--c-text);
  text-decoration: none;
}

.footer-home .brand-mark { width: var(--s-8); }

.footer-home-name {
  display: flex;
  flex-direction: column;
  gap: var(--s-0);
}

.footer-home-word {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-snug);
}

.footer-home-sub {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  color: var(--c-text-3);
}

.site-footer-v2 .footer-line {
  margin: var(--s-0);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--c-text-2);
}

.footer-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  align-self: flex-start;
  min-height: var(--h-tap);
  padding-inline: var(--s-5);
  border-radius: var(--radius-pill);
  background-color: var(--c-action);
  color: var(--c-on-action);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  text-decoration: none;
  box-shadow: var(--shadow-2);
  transition: background-color var(--t-fast) var(--ease), transform var(--t-press) var(--ease);
}

.footer-cta-arrow {
  display: flex;
  transition: transform var(--t-fast) var(--ease);
}

.footer-cta:active { transform: scale(var(--sc-press)); }

.site-footer-v2 .footer-cols {
  flex: 1 1 auto;
  justify-content: flex-end;
  gap: var(--s-8) var(--s-9);
}

.site-footer-v2 .footer-col {
  flex: 0 1 var(--w-footer-col);
  gap: var(--s-1);
}

.site-footer-v2 .footer-heading {
  margin: var(--s-0) var(--s-0) var(--s-2);
}

.site-footer-v2 .footer-link {
  align-self: flex-start;
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .footer-cta:hover { background-color: var(--c-action-hover); }
  .footer-cta:hover .footer-cta-arrow { transform: translateX(var(--x-footer-cta)); }
  .site-footer-v2 .footer-link:hover { color: var(--c-cold); transform: translateX(var(--x-footer-link)); }
  .footer-top-link:hover { color: var(--c-cold); }
}

.site-footer-v2 .footer-link:focus-visible,
.footer-cta:focus-visible,
.footer-home:focus-visible,
.footer-top-link:focus-visible {
  outline: var(--bw-2) solid var(--c-focus);
  outline-offset: var(--s-1);
  border-radius: var(--radius-input);
}

/* ---- Research-use notice ----------------------------------------------- */

.site-footer-v2 .ruo-band {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  margin-top: var(--s-0);
  padding: var(--s-5);
  border: var(--bw-1) solid var(--c-line-strong);
  background-color: var(--c-surface);
}

.site-footer-v2 .ruo-band p {
  margin: var(--s-0);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.ruo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--sz-ruo-mark);
  height: var(--sz-ruo-mark);
  border-radius: var(--radius-pill);
  background-color: var(--c-sunken);
  color: var(--c-action);
}

/* ---- Base row ----------------------------------------------------------- */

.site-footer-v2 .footer-base {
  align-items: center;
  margin-top: var(--s-6);
}

.site-footer-v2 .footer-base .meta {
  margin: var(--s-0);
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}

.footer-top-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--h-tap);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-2);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

/* ---- Closing wordmark --------------------------------------------------- */

.footer-wordmark {
  display: flex;
  justify-content: center;
  margin-top: var(--s-6);
  user-select: none;
  pointer-events: none;
}

.footer-wordmark-text {
  font-family: var(--font-display);
  font-size: var(--fs-footer-word);
  font-weight: var(--fw-bold);
  line-height: var(--lh-footer-word);
  letter-spacing: var(--ls-footer-word);
  color: transparent;
  -webkit-text-stroke: var(--bw-footer-word) var(--c-footer-word);
  background-image: linear-gradient(var(--c-footer-word-lit), var(--c-scrim-0));
  -webkit-background-clip: text;
  background-clip: text;
}

/* Where the browser can tie an animation to scroll, the wordmark rises out of
   the footer floor as it comes into view. Elsewhere it is simply there. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .footer-wordmark-text {
      animation: footer-word-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
  }
}

@keyframes footer-word-rise {
  from {
    opacity: var(--op-footer-word-in);
    transform: translateY(var(--y-footer-word));
    clip-path: inset(100% 0 0 0);
  }
  to {
    opacity: 1;
    transform: translateY(var(--s-0));
    clip-path: inset(0 0 0 0);
  }
}

/* ---- Tablet ------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1023px) {
  .footer-proofs { gap: var(--card-gap); }
  .footer-proof  { flex: 0 0 var(--card-2up); }
}

@media (max-width: 1023px) {
  .site-footer-v2 .footer-brand { max-width: none; flex-basis: 100%; }
  .site-footer-v2 .footer-cols { justify-content: flex-start; flex-basis: 100%; }
}

/* ---- Phone -------------------------------------------------------------- */

@media (max-width: 767px) {
  :root { --w-footer-col: 130px; }

  .site-footer-v2 { padding-top: var(--s-8); }
  .footer-proofs { gap: var(--s-3); margin-bottom: var(--s-8); }
  .footer-proof { flex-basis: 100%; padding: var(--s-4); }
  .site-footer-v2 .footer-top { gap: var(--s-8); }
  .site-footer-v2 .footer-cols { gap: var(--s-7) var(--s-6); }
  .site-footer-v2 .footer-col { flex: 1 1 var(--w-footer-col); }
  .site-footer-v2 .ruo-band { padding: var(--s-4); }
}