/* The site's one footer (Kevin, 2026-11-04, "Create a universal footer based on the home page footer and put it on every single page"):
   the homepage's footer on every public page. Privacy at the left and Krewe login at the right in the small mono capitals,
   © 2026 SOLD OUT! Comedy between them in Inter Tight, its row the pages' 1080px column; on a phone the mark on top and the two links
   under it. **In the page's nav band's colours since the same day** (Kevin, "have the footer pull the navigation header colors on every
   page. It adapts to do that."): the script in assets/site-footer.html reads what the nav band paints, its background, the words on its
   other buttons and their full stops, and sets them here as --sf-bg, --sf-ink and --sf-mark (the words and the links in the words'
   colour, SOLD OUT! in the stops'), so the footer follows the nav in any palette and on any page; a page with no nav band (the homepage,
   /props/, /classic/, the 404 page) takes the homepage's top bar's colours from the palette, below. Markup: assets/site-footer.html,
   copied into each page by tools/build-footer.py. Its own names for the two faces it uses, so it draws the same on pages that load
   other fonts. */
@font-face { font-family: 'SOC Foot Tight'; font-style: normal; font-weight: 900; font-display: swap; src: url(/assets/fonts/inter-tight-900.woff2?v=2026-11-04-1) format('woff2'); }
@font-face { font-family: 'SOC Foot Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/space-mono-700.woff2?v=2026-11-04-1) format('woff2'); }

footer.site-foot {
  display: block !important; position: relative !important; box-sizing: border-box; width: auto !important; max-width: none !important;
  align-self: stretch; justify-self: stretch;   /* the window's width in a centring flex or grid body too (/classic/, the 404 page) */
  margin: 40px 0 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important;
  background: var(--sf-bg, var(--palette-band-paper, var(--palette-ink, #111))) !important;
  color: var(--sf-ink, var(--palette-band-ink, var(--palette-surface, #fff))) !important;
}
/* No page's own footer decoration: the old footer.css (on /show/ and /shop/, for the hidden social footer) gives every <footer> a
   ::before with a black gradient, which hung over the top of those pages like a curtain for a few hours on 2026-11-04. */
footer.site-foot::before, footer.site-foot::after { content: none !important; display: none !important; }
footer.site-foot .sf-in {
  box-sizing: border-box; max-width: 1080px; margin: 0 auto; padding: 14px 20px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px 20px;
}
footer.site-foot .sf-links { justify-self: start; display: flex; flex-wrap: wrap; gap: 6px 22px; }
footer.site-foot .sf-link {
  justify-self: start; display: inline-block; padding: 11px 0; margin: -11px 0; background: none !important;
  font: 700 .7rem/1 'SOC Foot Mono', 'Space Mono', monospace; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sf-ink, var(--palette-band-ink, var(--palette-surface, #fff))) !important; text-decoration: none !important; transition: color .15s;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; min-width: 0; min-height: 0;   /* no page's own link style reaches it (the 404 page boxes its links) */
}
footer.site-foot .sf-in > .sf-link:last-child { justify-self: end; }
footer.site-foot .sf-link:hover, footer.site-foot .sf-link:focus-visible { color: var(--sf-mark, var(--palette-accent, #FF3A3A)) !important; }
footer.site-foot .sf-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
footer.site-foot .sf-mark {
  font: 900 1rem/1 'SOC Foot Tight', 'Inter Tight', 'Inter', sans-serif; letter-spacing: -.01em; text-transform: none !important;
  white-space: nowrap; color: var(--sf-ink, var(--palette-band-ink, var(--palette-surface, #fff))) !important;
}
footer.site-foot .sf-mark b, footer.site-foot .sf-mark b .public-punctuation { font-weight: 900; color: var(--sf-mark, var(--palette-accent, #FF3A3A)) !important; }

@media (min-width: 761px) and (max-height: 600px) { footer.site-foot .sf-in { padding: 7px 20px; } footer.site-foot .sf-link { padding: 6px 0; margin: -6px 0; } }
@media (max-width: 959px) { footer.site-foot .sf-in { padding-top: 10px; padding-bottom: 12px; } }   /* the links' tap area inside the footer */
@media (max-width: 560px) {
  footer.site-foot .sf-in { grid-template-columns: 1fr 1fr; }
  footer.site-foot .sf-mark { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
}

/* A page that fills the window keeps the footer at its foot; a form shown inside another page's frame has none. */
body:has(.coming-soon) > footer.site-foot { margin-top: auto !important; }
html.embed footer.site-foot { display: none !important; }