/* ============================================================
   Ink & Intuition — Footer
   The dark ink close. Compact and quiet, not a section flip:
   a single brand-gradient hairline is the only colour moment.
   ============================================================ */

.footer {
  position: relative;
  background: var(--ink-900);
  padding-block: clamp(56px, 7vw, 88px) clamp(40px, 5vw, 56px);
  /* Muted/faint cream tiers for dark-on-dark text, tokenised via color-mix
     with a flat-rgba fallback for browsers without color-mix() support. */
  --footer-muted: rgba(251, 246, 238, 0.68);
  --footer-muted: color-mix(in srgb, var(--cream-on-dark) 68%, transparent);
  --footer-faint: rgba(251, 246, 238, 0.58);
  --footer-faint: color-mix(in srgb, var(--cream-on-dark) 58%, transparent);
  color: var(--footer-muted);
}

/* Brand-gradient hairline at the very top edge of the footer.

   It was authored when the sheet above ran straight into --ink-900 in one row,
   where a full-strength rule read as a deliberate edge. Since the CTA gained
   its --cta-foot-* ramp the paper arrives at this line already down at roughly
   55 CIE L*, and since the 2026-07-26 cohesion pass it arrives as an afterglow
   rather than as bright cream. Against that, an unmodulated full-chroma bar
   terminating hard at both viewport edges reads as a leftover border.

   Same gradient, same 1px, two changes so it reads as the last filament of the
   light that just ran out: eased off slightly, and faded to nothing at the two
   ends so it has no hard terminations of its own. Both ends are spelled
   rgba(0,0,0,0) rather than `transparent` for the same reason every other zero
   stop on this project is; see the --atmos-* block in tokens.css. */
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--grad-cta);
  opacity: 0.74;
  -webkit-mask-image: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 13%,
    rgba(0, 0, 0, 1) 87%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 13%,
    rgba(0, 0, 0, 1) 87%, rgba(0, 0, 0, 0) 100%);
}

/* Decoration only. A masked, part-opacity hairline in a forced palette is just
   a broken line, so the forced-colours build keeps the plain rule. */
@media (forced-colors: active) {
  .footer::before {
    opacity: 1;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: clamp(40px, 6vw, 80px);
}

/* ---------- Brand block ---------- */

.footer-brand {
  flex: 1 1 300px;
  max-width: 420px;
}

.footer-wordmark {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  color: var(--cream-on-dark);
  text-wrap: balance;
  margin: 0 0 14px;
}

.footer-amp {
  color: var(--pink);
}

.footer-tagline {
  font-size: var(--text-small);
  line-height: 1.6;
  max-width: 34ch;
}

/* ---------- Link columns ---------- */

/* Two text columns at a readable measure, then Follow sized to its own three
   38px buttons (134px) rather than given a third 190px track it cannot fill.
   The old value was repeat(2, minmax(150px, 190px)); a third equal track cost
   about 190px of width and started wrapping the whole block under the brand at
   mid widths, for a column of icons that needs 134. */
/* THREE FIXED COLUMNS PLUS AUTO became FOUR on 2026-08-23, when the "On this
   page" column was split out of Explore. The count is written explicitly
   rather than left to auto-placement on purpose: a fourth child under the old
   `repeat(2, ...) auto` did not widen the grid, it silently wrapped onto a
   second row and sat under the first, which reads as a layout bug rather than
   a new column. If a fifth column is ever added, this number has to move with
   it. The trailing `auto` is the Follow column, which is icons and sizes to
   its content. */
.footer-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 180px)) auto;
  gap: clamp(24px, 3.4vw, 56px);
  flex: 0 0 auto;
}

.footer-col-heading {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--footer-muted);
  margin: 0 0 16px;
}

/* gap 11px -> 0 with the space moved INTO the links as padding, 2026-07-29.
   The visual rhythm is identical - the pitch was 23.3px of line box plus 11px
   of gap, and it is now 23.3 plus 2x5.5px of padding, so every link sits where
   it always did. What changes is that the 11px between them is now part of a
   hit area rather than dead space: the links go from 23.3px tall to 34.3px.
   Measured on iPhone widths, where a 23px target with 16px of nothing around it
   is a mis-tap waiting to happen. See .footer-links a below for why 34 and not
   44. */
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.footer-links a {
  display: inline-block;
  /* Half the old 11px gap on each side, so the column looks unchanged and the
     hit area absorbs the space that used to be dead. 34.3px, not 44: reaching
     44 needs 10px more per link, which is 50px added to the column and a
     visibly airier footer - a composition change, and those are Daniel's.
     34 with zero dead space between targets is a large improvement on 23 with
     16px of nothing, and these are text links whose own words are the target,
     which is the weaker half of the tap-target finding. The icon-only social
     buttons, which are the sharp half, do reach 44 (see base.css). */
  padding-block: 5.5px;
  /* The contact address is a single 283px unbreakable token in a 190px column.
     Without these it simply ran past the column and lost its last characters to
     the page's overflow clip at mid widths. */
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: var(--text-small);
  color: var(--footer-muted);
  transition: color var(--dur-quick) var(--ease-brand), transform var(--dur-quick) var(--ease-brand);
}
.footer-links a:hover {
  color: var(--amber-soft);
  transform: translateX(4px);
}
.footer-links a:active {
  transform: scale(0.98);
}

/* ---------- Legal / acknowledgement ---------- */

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: 28px;
  border-top: 1px solid rgba(251, 246, 238, 0.14);
}

.footer-legal {
  font-size: 0.8125rem;
  color: var(--footer-faint);
}

.footer-acknowledgement {
  font-size: var(--text-small);
  line-height: 1.65;
  max-width: 640px;
  color: var(--footer-muted);
}

/* ---------- Mobile collapse (<768px) ---------- */

/* Flipping .footer-top to a column changes what two declarations further up this
   file MEAN, because the flex main axis becomes the block axis.

   1. `.footer-brand { flex: 1 1 300px }` at the top of this file was written for
      the row direction, where 300px is a WIDTH. In a column it is a HEIGHT. So
      the brand block was 300px tall to hold 123.2px of wordmark and tagline,
      leaving 176.8px of pure void between the tagline and "Explore" - measured
      at 390x844 DPR 3 with tools/footer-mobile-space.mjs, and clearly visible in
      Jess's iPhone screenshot. That is the "too much dead space in footer" both
      testers reported on 2026-07-30. `max-width: none` alone does not touch it;
      the flex shorthand has to be reset, and resetting flex-basis is the whole
      fix. This is the same class of bug as reading a declaration instead of a
      computed value: the property did not change, its meaning did.

   2. `justify-content: space-between` distributes along the block axis here too.
      With the basis fixed there is no free space left for it to distribute, so
      it is now inert rather than harmful. It is set to flex-start anyway, so
      that any future change to this block cannot silently reintroduce the void
      through a different route.

   The remaining reductions are modest and deliberate. .footer-bottom is trimmed
   least of the four: the acknowledgement of Country keeps its breathing room. */
@media (max-width: 767px) {
  .footer {
    padding-block: 44px 32px;
  }

  .footer-top {
    flex-direction: column;
    justify-content: flex-start;
    gap: 32px;
  }

  .footer-brand {
    flex: 0 0 auto;
    max-width: none;
  }

  .footer-columns {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-bottom {
    margin-top: 36px;
  }
}