/* Global site footer, plus the scroll-reveal utility its elements use.
   Shared by index.html and any page built from page-template.html.
   Colour tokens come from the including page (:root). */

/* ---------- FOOTER ---------- */
.footer{border-top:1px solid var(--line);padding:80px 0 0;overflow:hidden}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:80px}
.footer__brand img{height:42px;margin-bottom:22px}
.footer__brand p{color:var(--cream-mut);font-size:15px;max-width:280px}
.footer__col h4{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-mut);margin-bottom:20px}
.footer__col a{display:block;color:var(--cream-dim);font-size:15px;margin-bottom:13px;transition:color .2s}
.footer__col a:hover{color:var(--cream)}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  padding-top:30px;border-top:1px solid var(--line)}
.footer__bottom p{font-family:'Space Mono',monospace;font-size:12px;color:var(--cream-mut);letter-spacing:.05em}
.footer__bigword{font-family:'Archivo Expanded',sans-serif;font-weight:900;font-stretch:125%;text-transform:uppercase;
  font-size:14.7vw;line-height:.8;color:var(--ink-3);letter-spacing:-.03em;
  text-align:center;margin-top:10px;margin-bottom:calc(0.1435em - 5px);user-select:none;pointer-events:none;
  /* break out of .wrap so the word spans the full viewport */
  width:100vw;margin-left:calc(50% - 50vw);white-space:nowrap}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

@media(max-width:1000px){
  .footer__top{grid-template-columns:1fr;gap:34px}
  .footer__top{margin-bottom:50px}
}

@media(max-width:720px){
  .footer{padding:56px 0 0}
  /* footer */
  .footer__top{margin-bottom:44px}
  .footer__bottom{
    flex-direction:row;flex-wrap:nowrap;gap:10px;align-items:center;justify-content:space-between;
    /* break out of .wrap's gutters so the row spans the viewport */
    width:100vw;margin-left:calc(50% - 50vw);padding-left:14px;padding-right:14px;
  }
  /* both halves stay on the same single line at any phone width */
  .footer__bottom p{
    white-space:nowrap;font-size:clamp(8px,2.7vw,12px);letter-spacing:.02em;
  }
}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
}