/* ========== FOOTER ========== */ 
/* The gold rule mirrors the header's, bookending the page, and gives Bruce a
   visible ledge even where the section above is the same green as the footer. */
.tt-footer{
  position:relative; background:var(--tt-green); color:rgba(255,255,255,.78);
  border-top:4px solid var(--tt-gold);
}

/* Bruce sits on the top edge of the footer, one small sign-off per page. The
   gold rule has to cross his seat, not his feet, or he reads as standing on it:
   in the artwork his body ends and his legs start 30% up from the bottom, so he
   is pushed down by that share of his own height and his legs dangle over the
   front. A percentage rather than a fixed offset, so it holds at every width.
   Decorative, so he is hidden from screen readers and takes no clicks, and he
   drops out below the breakpoint where the footer stacks. */
.tt-footer__bruce{
  position:absolute; bottom:calc(100% + 4px); transform:translateY(30%);
  pointer-events:none;
  /* line-height:0 so no text baseline pads the box below the artwork. */
  display:block; line-height:0; font-size:0;
  right:max(var(--tt-gutter), calc((100% - var(--tt-maxw)) / 2 + var(--tt-gutter)));
  width:clamp(76px,7.5vw,108px);
}
.tt-footer__bruce img{ display:block; width:100%; height:auto; }
@media (max-width:760px){ .tt-footer__bruce{ display:none; } }

/* A tight last section does not leave Bruce enough room and he lands on the
   content above, so it gets a little more. Both sides, or the band reads
   lopsided, and only on pages that actually carry him. */
main:has(+ .tt-footer .tt-footer__bruce) > section:last-of-type.tt-section--tight{
  padding-block:calc(var(--tt-tight-y) + 32px);
}
@media (max-width:760px){
  main:has(+ .tt-footer .tt-footer__bruce) > section:last-of-type.tt-section--tight{
    padding-block:var(--tt-tight-y);
  }
}
.tt-footer__top{
  display:grid; gap:34px; grid-template-columns:1.3fr 1fr 1fr;
  padding-block:clamp(44px,6vw,68px);
}
.tt-footer__logo{ width:210px; margin-bottom:1rem; }
.tt-footer h4{
  font-family:var(--tt-head); font-weight:600; font-size:.95rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--tt-gold); margin-bottom:1rem;
}
.tt-footer li{ margin-bottom:.55rem; }
.tt-footer a{ color:rgba(255,255,255,.82); text-decoration:none; }
.tt-footer a:hover{ color:var(--tt-white); text-decoration:underline; }
.tt-footer__bottom{
  border-top:1px solid rgba(255,255,255,.16);
  padding-block:22px; display:flex; flex-wrap:wrap; gap:10px 24px;
  justify-content:space-between; font-size:.92rem;
}
@media (max-width:760px){ .tt-footer__top{ grid-template-columns:1fr; gap:26px; } }

/* Build credit. The wordmark alone, linking out. A signature, not a second brand. */
.tt-madeby{
  display:inline-flex; align-items:center;
  text-decoration:none; transition:opacity .2s ease;
}
.tt-madeby:hover{ opacity:.75; }
/* The wordmark stacks two lines of type, so it needs real height to stay legible,
   and full white to hold up against the dark green. */
.tt-madeby img{ height:34px; width:auto; }