/* Site footer. Its own file so the light standalone pages (privacy, 404) can
   carry it without loading the header and section layout. Markup comes from
   scripts/build-footer.mjs. Tokens come from tokens.css; the button and the
   lockup come from components.css. */

/* ---------- Footer ----------
   Ink surface, matching the header, so the page is bookended. The mark's
   own tile is near-cream, which vanished against the paper background
   and left the yellow T floating on its own; on ink the whole lockup
   reads as one object.

   Three tiers of type carry the hierarchy: the brand (lockup, hand-set
   tagline, one CTA), the link groups (tape display labels over cream
   links), and the fine print (ink-3, always last). A strip of tape along
   the top edge is the page's last torn-tape moment; the halftone and the
   ghosted wordmark are texture only and are hidden from assistive tech. */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
  border-top: var(--border-w-accent) solid var(--tape);
  /* Size of the ghosted wordmark; the footer reserves half of it below the
     fine print so the letters are cropped, never behind any text. */
  --footer-ghost: clamp(64px, 20vw, 250px);
  padding: var(--space-12) var(--gutter-page-mobile) calc(var(--footer-ghost) * .5);
}
/* Halftone dots fading out to the left, the same texture as the header
   card's, drawn in cream so it reads on ink. */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--cream) 14%, transparent) 1px, transparent 1.3px);
  background-size: var(--halftone-size);
  -webkit-mask-image: linear-gradient(250deg, black, transparent 55%);
  mask-image: linear-gradient(250deg, black, transparent 55%);
}
/* Ghosted wordmark, cropped by the footer's bottom edge in a band of its
   own under the fine print. Decorative: the
   empty alt after the slash keeps it out of the accessibility tree where
   supported, and the plain declaration above is the fallback. */
.site-footer::after {
  content: "TUSOME";
  content: "TUSOME" / "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: calc(var(--footer-ghost) * -.42);
  translate: -50% 0;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--footer-ghost);
  line-height: 1;
  letter-spacing: -.02em;
  color: color-mix(in srgb, var(--cream) 6%, var(--ink));
}

.site-footer__inner {
  max-width: var(--page-max);
  margin: 0 auto;
}
.site-footer__top {
  display: grid;
  gap: var(--space-10);
  padding-bottom: var(--space-12);
}

/* ---- Brand block ---- */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}
.site-footer__id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}
.site-footer__stamp { margin: 0; }
.site-footer__tagline {
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: var(--text-size-hand);
  line-height: 1.25;
  color: var(--cream);
}
.site-footer .ts-btn {
  box-shadow: 4px 4px 0 var(--cream);
}
.site-footer .ts-btn:hover { box-shadow: 6px 6px 0 var(--cream); }
.site-footer .ts-btn:active { box-shadow: 0 0 0 var(--cream); }
.site-footer .ts-btn:focus-visible { outline-color: var(--tape); }

/* ---- Link groups ---- */
.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8) var(--space-6);
  align-content: start;
}
.site-footer__group--contact { grid-column: 1 / -1; }
.site-footer__label {
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-w-thin) solid color-mix(in srgb, var(--cream) 22%, transparent);
  font-family: var(--font-display);
  font-size: var(--text-size-label);
  letter-spacing: var(--text-ls-label);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--tape);
}
.site-footer__list { display: flex; flex-direction: column; }

.site-footer a:not(.ts-btn):not(.tu-lockup) {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: var(--tap-min);
  color: var(--cream);
  font-size: var(--text-size-caption);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  background: none;
  transition: color var(--snap);
}
/* A strip of tape draws in under the label on hover and stays put on the
   page you are already on. */
.site-footer a:not(.ts-btn):not(.tu-lockup)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 8px;
  width: 0;
  height: 3px;
  background: var(--tape);
  transition: width var(--snap);
}
.site-footer a:not(.ts-btn):not(.tu-lockup):hover,
.site-footer a:not(.ts-btn):not(.tu-lockup):active {
  color: var(--tape);
  background: none;
}
.site-footer a:not(.ts-btn):not(.tu-lockup):hover::after,
.site-footer a:not(.ts-btn):not(.tu-lockup)[aria-current="page"]::after { width: 100%; }
.site-footer a:not(.ts-btn):not(.tu-lockup)[aria-current="page"] { color: var(--tape); }
.site-footer a:not(.ts-btn):focus-visible { outline-color: var(--tape); }

/* The address is the one thing a parent may need in a hurry, so it is set
   in the display face at heading size, not as one more small link. */
.site-footer .site-footer__mail {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-size-h3);
  letter-spacing: var(--text-ls-h3);
  color: var(--cream);
  overflow-wrap: anywhere;
}
.site-footer__mail-hint {
  margin: var(--space-1) 0 0;
  font-size: var(--text-size-micro);
  color: var(--ink-3);
}

/* ---- Fine print ---- */
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  padding: var(--space-5) 0 var(--space-6);
  border-top: var(--border-w-thin) solid color-mix(in srgb, var(--cream) 22%, transparent);
}
/* 5:1 against ink, so it stays legible while still reading as fine print. */
.site-footer__note,
.site-footer__copy {
  margin: 0;
  font-size: var(--text-size-micro);
  line-height: 1.5;
  color: var(--ink-3);
}
.site-footer__note { max-width: 70ch; }

@media (min-width: 760px) {
  .site-footer { padding-left: var(--gutter-page); padding-right: var(--gutter-page); }
  .site-footer__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: var(--space-12);
  }
  .site-footer a:not(.ts-btn):not(.tu-lockup) { min-height: 38px; }
  .site-footer a:not(.ts-btn):not(.tu-lockup)::after { bottom: 5px; }
  .site-footer .site-footer__mail { min-height: 0; }
}
@media (min-width: 1120px) {
  .site-footer__top { gap: var(--space-16); }
  /* Three columns only where the address fits on one line; below this the
     contact group keeps a full row of its own. */
  .site-footer__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__group--contact { grid-column: auto; }
}