/* Closing footer used on every page. Replaces the old single-line "Say
   hi." headline with a tiny manifesto + invite + social links. The
   donkey still roams this section and chases the cursor when it's
   nearby (bottom-anchored, see below). */

.say-hi {
  position: relative;
  min-height: 70vh;
  /* 40 vh of breathing room below the paragraph — the donkey roams
     in this empty space and the page closes with a quiet exhale
     rather than abruptly ending. Top padding stays modest so the
     paragraph sits high in its block. */
  padding: 96px var(--pad) 40vh;
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  overflow: hidden;
}

/* Footer prose — same font / size / weight / letter-spacing as the
   hero copy (.hero-c). Roman by default; only the inline links pick
   up italic, matching the live-data sentence in the hero. */
.say-hi-line {
  font-family: 'Edict Display', Georgia, serif;
  font-weight: 300;
  font-style: normal;
  /* −25% from clamp(32px, 4.4vw, 64px) to match the hero paragraphs. */
  font-size: clamp(24px, 3.3vw, 48px);
  line-height: 1.15;
  /* Orphan-aware wrapping — keeps a lone word off the last line.
     (donkey.js's word-wrap pass already keeps whole words intact;
     this stops the final word from stranding.) */
  text-wrap: pretty;
  letter-spacing: 0.002em;
  color: var(--ink);
  margin: 0;
  max-width: 960px;
  padding: 0 2rem;
}
/* Kept in case future drafts split back into multiple paragraphs. */
.say-hi-line + .say-hi-line {
  margin-top: 0.9em;
}

/* Mobile: match the hero paragraphs' bumped per-char size (.hero-c is
   clamp(25px, 8.1vw, 43px) on mobile). The desktop clamp above renders
   small on phones (3.3vw), so this 3rd paragraph was lagging behind the
   first two — bring it in line. */
@media (max-width: 800px) {
  .say-hi-line { font-size: clamp(25px, 8.1vw, 43px); }
  /* Flip the per-char spans + word wrappers to plain inline on mobile
     (same rationale as hero.css). The donkey trail only ever writes
     filter/opacity to .say-hi-c — never transform — so inline-block
     isn't needed on touch, and inline lets the Unicode line-breaker
     keep a lone "," or "." (after "Twitter", "Instagram", etc.) from
     starting a line. .say-hi-word keeps its white-space:nowrap so words
     stay whole. */
  .say-hi-word,
  .say-hi-c { display: inline; }
}

/* Per-character spans inside the footer copy — created at runtime by
   donkey.js so the donkey's proximity can blur the text he passes
   over. Each char is inline-block so it can take a transform/filter.
   To keep words from breaking mid-letter (the browser treats each
   inline-block as its own break opportunity), consecutive chars get
   grouped into a .say-hi-word wrapper that's itself inline-block +
   nowrap. So lines break BETWEEN words, never inside them. */
.say-hi-word {
  display: inline-block;
  white-space: nowrap;
}
.say-hi-c {
  display: inline-block;
  /* will-change is a perf hint — keeps the browser from re-creating
     the layer every time the donkey walks past. */
  will-change: transform, filter;
}

/* Inline social + email links — italic + underlined, matching the
   .hero-link convention (underline fades to transparent on hover so
   the cursor effect can read through). */
.say-hi-link {
  color: inherit;
  font-style: italic;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-color: currentColor;
  cursor: pointer;
  transition: text-decoration-color 280ms ease;
}
.say-hi-link:hover,
.say-hi-link:focus-visible {
  text-decoration-color: transparent;
  outline: none;
}

/* The donkey, when active inside .say-hi, uses absolute positioning
   anchored to the footer bottom (overrides the default fixed-to-
   viewport position). */
.say-hi .donkey {
  position: absolute;
  bottom: 24px;
  z-index: 5;
}