/* ============================================================
   SHARED FOOTER — single source of truth for every page.
   Taken from the Stills page, which was the correct one.
   Edit here once; nothing to keep in sync.
   ============================================================ */
footer{position:relative;z-index:1;border-top:1px solid var(--line);padding:56px}
/* Bottom-aligned, and that choice is load-bearing. Both columns end in a 12px
   mono line — the copyright and the location — so aligning the column BOTTOMS
   puts those two on one baseline exactly, at every viewport. Aligning the tops
   instead cannot: the logo is a clamp()-sized block that grows with the
   viewport while the email is a fixed text line, so any margin that squared
   them at one width would drift at another. */
footer .frow{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:32px}
footer .fleft{display:flex;flex-direction:column;align-items:flex-start}
footer .fmark{display:block;width:clamp(100px,9.7vw,140px);height:clamp(26px,2.5vw,36px);
  background-color:var(--ink);
  -webkit-mask:var(--logo) no-repeat center/contain;mask:var(--logo) no-repeat center/contain;
  transition:background-color .3s ease}
footer .fmark:hover{background-color:var(--accent)}
footer .fmeta{text-align:right;display:flex;flex-direction:column;align-items:flex-end}
footer .email{display:inline-block;font-weight:700;font-size:20px;letter-spacing:-.01em;transition:color .25s}
footer .email:hover{color:var(--accent)}
/* 12.5px, against the copyright's 4.5px on the other side. Those two produce
   gaps of 13.5px and 10px — deliberately UNequal, because equal measurements
   did not read as equal. The eye judges a gap relative to the mass above it,
   and the logo is 29.1px of solid mark where the email is 21.5px of text; at a
   matched 10px the left pair looked tighter. The gap is scaled by the same
   ~1.35 ratio as the elements above them. */
footer .floc{margin-top:12.5px;text-align:left;font-size:12px;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
/* Right-aligned under the email — and 4.5px, not the 9px its opposite number
   uses. The logo is a masked block whose box ends exactly at the mark, while
   the email is a text line carrying ~4.25px of leading beneath its ink. Equal
   margins therefore produced UNequal gaps: 10.0px on the left against 14.5px on
   the right. This is the measured difference removed. */
footer .fcopy{text-align:right;margin-top:4.5px;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
@media(max-width:1024px){
  footer{padding:44px 32px}
}
/* Phones only. A portrait tablet keeps the opposed two-column footer: it has
   the width to hold the logo and the email on their own edges, and the pairing
   reads as deliberate there rather than as a stretched gap. */
@media(max-width:600px){
  footer{padding:36px 20px}
  /* stacks, so the email leads instead of hanging off the right edge */
  footer .frow{flex-direction:column;align-items:flex-start;gap:24px}
  footer .fmeta{text-align:left;align-items:flex-start}
  footer .email{font-size:18px}
  footer .floc{font-size:11px;margin-top:7px}
  /* 7px, matching .floc above it. This was 30px — left over from when the
     copyright was a centred row of its own — which made the email/copyright
     gap (34.5px) LARGER than the gap between the two groups (24px), so the
     copyright read as a third block instead of belonging to the email. */
  footer .fcopy{text-align:left;margin-top:7px}
}