/* ============================================================
   The site footer, for every page that is not the homepage.
   ------------------------------------------------------------
   There were three different footers: the homepage's brand
   column + three link columns, a bespoke "Let's show your
   product better" slab on discuss and the catalogues, and a
   two-line legal strip on privacy and terms. Same site, three
   endings. This is the homepage's, rebuilt so it stands on its
   own — those pages cannot load site.css, which is where the
   original lives, without inheriting the entire homepage.

   Two deliberate differences from the homepage:

   - No skyline band. That is Three.js off a CDN, and half a
     megabyte of it to decorate a privacy page is a bad trade.
     The footer simply ends instead.
   - Width is set here rather than borrowed from .container,
     which privacy and terms do not define.

   Everything is a token, so both skins follow automatically:
   the homepage footer resolves to --ink at these same alphas in
   light and dark, and its dark band is exactly --paper in
   nocturne, so plain transparency reproduces it.

   Load order on those pages: brand-tokens.css, then this, then
   footer-mobile.css — which is the homepage's own mobile tuning
   and is keyed on #footer, so it applies here unchanged.
   ============================================================ */

#footer.site-footer {
  position: relative;
  z-index: auto;
  isolation: auto;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  color: var(--ink);
  overflow: hidden;
}

/* site.css paints a --footer-night band across ::after for the skyline to sit
   in. The catalogue pages load site.css, so without this they would get that
   band under light-theme ink. The homepage already resolves to transparent in
   the light skin, and in nocturne the band is exactly --paper — so letting the
   page's own paper through reproduces the homepage in both skins. */
#footer.site-footer::before,
#footer.site-footer::after {
  background: transparent;
  border-top: 0;
}

#footer .footer-main {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: minmax(240px, .95fr) minmax(0, 1.55fr);
  gap: clamp(32px, 5vw, 72px);
  /* .container's job, inlined — privacy and terms have no .container. The
     homepage's own figures, not the host page's: discuss sets --max to 1240
     and privacy to 1180, which would have made the same footer 90px narrower
     on one page than another once the viewport was wide enough to cap. */
  width: min(100%, calc(1340px + 2 * clamp(24px, 3.6vw, 56px)));
  margin-inline: auto;
  padding: 48px 32px;
  border-top: 0;
  background: transparent;
}

/* ---- brand column ---- */

/* The hairline above the footer, as on the homepage (page-polish.css). It is
   inset to sit under the card edges above it rather than the text column. */
#footer .footer-main { position: relative; }
#footer .footer-main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10px;
  right: 10px;
  height: 1px;
  background: color-mix(in srgb, var(--ink) 11%, transparent);
  pointer-events: none;
}
html[data-skin="nocturne"] #footer .footer-main::before {
  background: color-mix(in srgb, #cfe0ff 13%, transparent);
}
@media (max-width: 860px) {
  #footer .footer-main::before { left: 7px; right: 7px; }
}

#footer .footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: inherit;
  /* The wordmark is set in the body sans, not the display serif. */
  font-family: var(--body, "DM Sans", sans-serif);
  font-size: clamp(1.55rem, 2.4vw, 2.15rem);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  text-decoration: none;
}
#footer .footer-brand .brand-mark {
  width: 36px;
  height: 36px;
  background: var(--ink) !important;
  background-image: none !important;
  -webkit-mask: url("assets/brand/logo.png") center / contain no-repeat;
  mask: url("assets/brand/logo.png") center / contain no-repeat;
}
#footer .footer-about {
  margin: 24px 0 0;
  max-width: 34ch;
  color: color-mix(in srgb, var(--ink) 68%, transparent);
  font-size: var(--type-body, 17px);
  line-height: 1.85;
}
#footer .footer-copy {
  margin: 24px 0 0;
  color: color-mix(in srgb, var(--ink) 42%, transparent);
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: var(--type-meta, 13px);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ---- link columns ---- */

#footer .footer-grid {
  display: grid;
  /* Was equal thirds for three link columns. Two of them are gone, and a lone
     column in the first of three tracks left Legal stranded in the middle of
     the footer with a third of the width empty to its right. Columns are laid
     out along the row and packed to the end instead, so whatever is here sits
     against the right edge — and a column added back still lands beside it. */
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, max-content);
  justify-content: end;
  gap: 24px;
  align-items: start;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
#footer .footer-col {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
#footer .footer-col h3 {
  margin: 0 0 16px;
  color: color-mix(in srgb, var(--ink) 48%, transparent);
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: var(--type-meta, 13px);
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
}
#footer .footer-col ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* :not(.footer-cta-button) — the CTA is also an <a> inside .footer-col--end,
   and it must keep the button's own ink, not the list-link ink. */
#footer .footer-col a:not(.footer-cta-button) {
  color: color-mix(in srgb, var(--ink) 82%, transparent);
  font-size: var(--type-meta, 13px);
  text-decoration: none;
  transition: color 180ms ease;
}
#footer .footer-col a:not(.footer-cta-button):hover,
#footer .footer-col a:not(.footer-cta-button):focus-visible { color: var(--ink); }
/* Only the link lists — the CTA below is also an <a> in a .footer-col, and on
   discuss-project it carries aria-current, which was repainting the button's
   label in ink instead of leaving it on the button's own colour. */
#footer .footer-col ul a[aria-current="page"] { color: var(--ink); }

#footer .footer-col--end {
  justify-self: end;
  width: min(100%, 240px);
  text-align: left;
}

/* ---- closing CTA ---- */

#footer .footer-cta-stack {
  display: grid;
  gap: 12px;
  justify-items: start;
  margin-top: 18px;   /* page-polish.css tightens this from site.css's 28px */
}
/* Deliberately without the #footer id: on mobile the homepage lets
   footer-mobile.css's `#footer .footer-col a` win for this link, since it sits
   inside .footer-col--end. Matching that specificity keeps the two identical. */
.site-footer .footer-cta-stack .footer-email {
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: .86rem;
  text-decoration: none;
  transition: color 180ms ease;
}
.site-footer .footer-cta-stack .footer-email:hover,
.site-footer .footer-cta-stack .footer-email:focus-visible { color: var(--ink); }

/* On the homepage this is a flex item of .footer-cta-stack, so its inline-flex
   blockifies to flex and the label centres. Pages whose button CSS leaves it as
   a plain block centred the label differently. */
#footer .footer-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#footer .footer-place {
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: .8rem;
}

/* On discuss-project the footer's "Discuss a project" points at the page you
   are already reading. The markup already marks it aria-current, so that is
   the condition — and with the button gone the email stops being pushed to
   the far edge by footer-mobile.css's margin-left:auto. */
#footer .footer-cta-button[aria-current="page"] { display: none !important; }
#footer .footer-cta-stack:has(.footer-cta-button[aria-current="page"]) .footer-email {
  margin-left: 0;
  text-align: left;
}

/* The homepage hides this above 860px — the masthead already carries a
   "Discuss a project" there, and two of them in one viewport reads as a
   mistake. Below it the masthead CTA is behind the hamburger, so the
   footer becomes the only one. Same rule here. */
@media (min-width: 861px) {
  #footer .footer-cta-button { display: none !important; }
}

@media (max-width: 900px) {
  #footer .footer-main { grid-template-columns: 1fr; }
  #footer .footer-grid { grid-template-columns: 1fr 1fr; }
  #footer .footer-col--end {
    grid-column: 1 / -1;
    justify-self: start;
    width: auto;
  }
  #footer .footer-brand { font-size: clamp(1.4rem, 6vw, 1.85rem); }
}