/* =====================================================================
   FOOTER — and the sponsors ledger at the end of the paper ground.

   Owned by layouts/partials/footer.html and
   layouts/partials/sponsors.html. Nothing else writes here.
   See .claude/design-language.md §9.

   Only what Tailwind's CDN build cannot say well lives in this file:
   the square social cells and the two parent-hover states. Type,
   colour and spacing stay in the markup as utilities.

   Deleted with revision 2: the `.ft-measure` gold registration rule,
   the `.ft-tick` hairline that grew in front of every footer link, the
   `.ft-col` column borders and `.ft-umn` — the footer no longer has
   four columns, a decorative rule, or a nav to tick (§2). Gold is gone
   from this file entirely; the only gold left on the dark ground is
   the focus ring, which system.css owns.

   No box-shadow, no gradient, no blur. Depth is hairline and value.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Links on the dark ground

   A hairline under the word, brightening on hover. Colour and border
   only — no movement (§7).
   --------------------------------------------------------------------- */
.ft-link {
  color: rgba(255, 255, 255, 0.82);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--void-line);
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.ft-link:hover,
.ft-link:focus-visible {
  color: #fff;
  border-color: var(--void-edge);
}

/* ---------------------------------------------------------------------
   Social marks

   A square hairline cell per mark — square, not a rounded square, and
   the icon is the cell's whole content rather than a glyph parked
   inside a soft box (§6).
   --------------------------------------------------------------------- */
.ft-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  color: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--void-line);
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.ft-social:hover,
.ft-social:focus-visible {
  color: #fff;
  border-color: var(--void-edge);
}

/* =====================================================================
   SPONSORS — the ledger (layouts/partials/sponsors.html)

   On paper, so the dark-on-light logo files are used as supplied. Each
   one sits on a white plate of fixed height: trimmed logos arrive at
   wildly different proportions, and a common field is the only way a
   wide wordmark and a tall mark read as the same size.
   ===================================================================== */
.sponsor-mark {
  display: flex;
  align-items: center;
  /* Centred in its column, not flush left. Left-aligned, the two marks
     sat hard against the measure's edge with a wide gap before the
     text; centred, the column reads as a balanced logo field. */
  justify-content: center;
  min-height: 7rem;
}

@media (max-width: 639px) {
  /* Single column on phones — centring a lone mark above left-aligned
     text looks accidental, so it goes back to flush left there. */
  .sponsor-mark { justify-content: flex-start; }
}

.sponsor-mark img {
  /* A fixed HEIGHT, not a max-height. basler-logo.png is only 209x76,
     so under a max-height cap it never reached the cap and rendered at
     its native 76px while ideal-vac.png sat at 84px — the mismatch was
     the asset, not the layout. Driving both to one height makes any
     future logo match automatically, whatever its source size. */
  height: 5rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  /* basler-logo.png carries an opaque white background; multiply drops
     it into the paper ground so both marks sit on the page the same
     way, with no plate behind either. */
  mix-blend-mode: multiply;
}

@media (min-width: 640px) {
  .sponsor-mark img { height: 6.5rem; }
}


/* The link out, and the one-line invitation under the ledger. The bare
   domain in maroon, with an arrow that steps one pixel out of the
   corner. Transform only. */
.sponsor-out {
  color: var(--maroon);
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(122, 0, 25, 0.28);
  transition: border-color var(--t) var(--ease);
}

.sponsor-out:hover,
.sponsor-out:focus-visible {
  border-color: var(--maroon);
}

.sponsor-arrow {
  display: inline-block;
  border: 0;
  transition: transform var(--t) var(--ease);
}

.sponsor-out:hover .sponsor-arrow,
.sponsor-out:focus-visible .sponsor-arrow {
  transform: translate(1px, -1px);
}

/* ---------------------------------------------------------------------
   Reduced motion (§7)
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ft-link,
  .ft-social,
  .sponsor-out,
  .sponsor-arrow {
    transition: none;
  }
}


/* ---------------------------------------------------------------------
   CONTACT BUTTON

   Replaces the bare mailto address in the footer. Ghost button on the
   void ground, matching the menu's .nav-cta-ghost so the two contact
   routes read as the same control.
   --------------------------------------------------------------------- */
.ft-contact {
  height: 3.25rem;
  padding: 0 2rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: #fff;
  border: 1px solid var(--void-edge);
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}

.ft-contact:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.06);
}