/* Hallmark · check · built: the project · redesign: polish · genre: editorial · footer: closing credits, kinetic headline over contact and links */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4 · weakest: E, one italic word broke the headline and links had no focus ring; headline set one way, rings added */
/* Hallmark · waive 10b · each morph moves one glyph, one tab row or one finished step and never the page around it · the footer letters breathe apart, the DANA wallet tab copy unfolds, the onboarding steps close up */

:root {
  --footer-day-bg: #d9d6d0;
  --footer-day-ink: #181512;
  --footer-day-ink-muted: #524c42;
  --footer-floor-1: #d3cfc8;
  --footer-floor-2: #cbc7bf;
  --footer-floor-3: #c6c2b9;
  --footer-face: "Plus Jakarta Sans", system-ui, sans-serif;
  --footer-ease: cubic-bezier(.2, .7, .25, 1);
}

/* Closing credits after the room's final object. */
.site-footer {
  width: 100%;
  padding-top: clamp(84px, 11vw, 152px);
  background: linear-gradient(180deg,
    var(--bg, var(--footer-day-bg)) 0%,
    var(--footer-floor-1) 34%,
    var(--footer-floor-2) 74%,
    var(--footer-floor-3) 100%);
  color: var(--ink, var(--footer-day-ink));
  font-family: var(--font-screen, var(--footer-face));
}

.site-footer__inner {
  width: min(1120px, 92vw);
  margin-inline: auto;
  padding-bottom: clamp(28px, 4vw, 44px);
}

.site-footer__headline {
  max-width: 1120px;
  margin: 0;
  color: var(--ink, var(--footer-day-ink));
  font-size: clamp(3.35rem, 7.15vw, 6.6rem);
  font-weight: 600;
  font-optical-sizing: auto;
  letter-spacing: -.065em;
  /* the tight tracking also ate the word gaps (0.11em); give the words
     back their air without loosening the letters. Applies to the
     no-break spaces footer.js swaps in, as well as plain ones. */
  word-spacing: .14em;
  line-height: .99;
  text-wrap: balance;
  overflow-wrap: break-word;
  min-width: 0;
}

.site-footer__headline > span { display: block; }
.site-footer__kinetic-char {
  font-weight: var(--kinetic-weight, inherit);
  -webkit-text-stroke-color: transparent;
  -webkit-text-stroke-width: .012em;
  transition:
    font-weight 400ms var(--footer-ease),
    -webkit-text-stroke-color 400ms var(--footer-ease),
    -webkit-text-stroke-width 400ms var(--footer-ease),
    padding 400ms var(--footer-ease);
}
.site-footer__kinetic-char.is-active {
  padding-inline: .045em;
  font-weight: 800;
  -webkit-text-stroke-color: currentColor;
  -webkit-text-stroke-width: .025em;
}
.site-footer__kinetic-char.is-near {
  padding-inline: .02em;
  font-weight: 700;
}
.site-footer__kinetic-char.is-far {
  font-weight: 600;
}

.site-footer__contact-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-top: clamp(42px, 6vw, 76px);
}

.site-footer__invitation {
  max-width: 28ch;
  margin: 0;
  color: var(--ink-muted, var(--footer-day-ink-muted));
  font-size: clamp(15px, 1.45vw, 18px);
  line-height: 1.5;
}

.site-footer__email {
  display: inline-flex;
  align-items: baseline;
  flex-shrink: 0;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  color: var(--ink, var(--footer-day-ink));
  font-size: clamp(17px, 1.8vw, 24px);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.15;
  text-decoration: none;
  transition: color 180ms var(--ease, ease);
}
.site-footer__email:hover {
  color: var(--ink-muted, var(--footer-day-ink-muted));
}

.site-footer__base {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 28px;
  margin-top: clamp(104px, 13vw, 180px);
  padding-top: 24px;
  border-top: 1px solid color-mix(in oklab, var(--ink, var(--footer-day-ink)) 20%, transparent);
  color: var(--ink-muted, var(--footer-day-ink-muted));
}

.site-footer__identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.site-footer__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.site-footer__identity-copy { display: grid; gap: 1px; }
.site-footer__name {
  margin: 0;
  color: var(--ink, var(--footer-day-ink));
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}
.site-footer__role {
  margin: 0;
  color: var(--ink-muted, var(--footer-day-ink-muted));
  font-size: 12px;
  line-height: 1.35;
}

.site-footer__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 28px;
}
.site-footer__links a {
  color: var(--ink-muted, var(--footer-day-ink-muted));
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color 180ms var(--ease, ease);
}
.site-footer__links a:hover { color: var(--ink, var(--footer-day-ink)); }
/* the direction glyph sits apart from its word instead of glued to it */
.site-footer__glyph {
  display: inline-block;
  margin-left: .3em;
  font-weight: 500;
  transition: transform 180ms var(--ease, var(--footer-ease));
}
.site-footer__links a:hover .site-footer__glyph { transform: translate(1px, -1px); }
.site-footer__links a[href^="#"]:hover .site-footer__glyph { transform: translateY(-2px); }
.site-footer__email:focus-visible,
.site-footer__links a:focus-visible {
  outline: 2px solid var(--ink, var(--footer-day-ink));
  outline-offset: 4px;
  border-radius: 2px;
}
.site-footer__copyright {
  grid-column: 1 / -1;
  margin: 16px 0 0;
  color: var(--ink-muted, var(--footer-day-ink-muted));
  font-size: 12px;
  line-height: 1.4;
}

@media (max-width: 760px) {
  .site-footer__headline {
    font-size: clamp(3.25rem, 9.5vw, 5.5rem);
    letter-spacing: -.06em;
  }
  .site-footer__contact-row { align-items: start; flex-direction: column; gap: 24px; }
  .site-footer__base { margin-top: 100px; }
}

@media (max-width: 560px) {
  .site-footer__headline { font-size: clamp(2.8rem, 11.5vw, 4rem); }
  .site-footer__headline > span { display: inline; }
  .site-footer__headline > span + span::before { content: " "; }
  .site-footer__email { font-size: clamp(18px, 5vw, 22px); }
  .site-footer__base { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .site-footer__links { justify-content: flex-start; }
  .site-footer__copyright { grid-column: 1; margin-top: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__email,
  .site-footer__links a { transition: none; }
  .site-footer__kinetic-char,
  .site-footer__glyph { transition: none; }
  .site-footer__links a:hover .site-footer__glyph { transform: none; }
}