/* ─── Site footer ────────────────────────────────────────────────────────────
   One component, shared by /work (work.html) and /play (index.html).

   The <footer> is only a full-width band; .site-footer-inner re-creates the
   content column of whichever surface it sits on, so the hairline and the text
   left-align to the content above it. A surface sets its column with two
   custom properties:

     --footer-col   max-width of the content column (default: none = fill)
     --footer-pad   horizontal gutter inside that column (default: 0)

   Colours and fonts resolve against whichever page is hosting it: /work sets
   --ink / --ink-soft / --hair in work.css, /play sets --color-* in input.css.

   The space above the hairline is margin, not padding — as padding it sits
   inside the border and the rule butts straight against the content above.
--------------------------------------------------------------------------- */

.site-footer {
  --footer-ink:  var(--ink, var(--color-oatmeal, #f0eae1));
  --footer-soft: var(--ink-soft, rgba(240, 234, 225, 0.55));
  --footer-hair: var(--hair, rgba(240, 234, 225, 0.14));
  --footer-serif: var(--font-serif, "Erode", Georgia, serif);
  --footer-mono:  var(--font-mono, "JetBrains Mono", ui-monospace, monospace);

  margin-top: var(--footer-gap, clamp(2.5rem, 6vw, 4.5rem));
}

.site-footer-inner {
  max-width: var(--footer-col, none);
  margin-inline: auto;
  padding-top: var(--footer-pad-top, 6rem);
  padding-bottom: var(--footer-pad-bottom, 3rem);
  padding-inline: var(--footer-pad, 0);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  text-align: left;
  border-top: 1px solid var(--footer-hair);
}

.site-footer-center {
  font-family: var(--footer-serif);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--footer-soft);
}

.site-footer-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
  font-family: var(--footer-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--footer-soft);
}

.site-footer-row a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer-row a:hover { color: var(--footer-ink); }
.site-footer-sep { opacity: 0.5; }

/* /play: the footer closes a sticker strip inside the grid rather than a long
   scrolling page, so /work's generous spacing reads as dead air there. Same
   component, same type and alignment — only the density changes. */
.sticker-footer .site-footer {
  --footer-gap: 0.5rem;
  --footer-pad-top: 1.75rem;
  --footer-pad-bottom: 0.75rem;
}

/* Mobile: centre the footer (desktop left-aligns it to the content column).
   padding-top keeps reading the variable so a surface's own density wins here
   too — only the fallback changes. */
@media (max-width: 768px) {
  .site-footer-inner {
    align-items: center;
    text-align: center;
    padding-top: var(--footer-pad-top, 3.5rem);
  }
  .site-footer-row { justify-content: center; }
}