/* ============================================
   HOME — big-word footer (homepage only)
   Under the film: the one statement the homepage
   was missing, then IMPACT / INVESTMENT /
   COMMUNITY set big, each a door to its page.
   Content pages keep their video footers; this
   file is loaded by index.html alone.

   Five directions share the base below and differ
   by modifier: --ledger, --echo, --knockout,
   --poster, --sentence. home.js sizes [data-fit]
   words to their column and lights the echo.
============================================= */

.home-words {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: clamp(72px, 14vh, 160px) var(--gutter) clamp(24px, 4vh, 40px);
  background: var(--paper);
  color: var(--ink);
}

/* The statement: the sentence a first-time visitor needs. */
.home-words__lead {
  max-width: 22em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 2.6vw, 2.2rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.home-words__eyebrow {
  font-size: 11px;
  margin-bottom: clamp(14px, 2.2vh, 22px);
}

/* Big words: the display face, typed in capitals. */
.home-words .bw {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: normal;
  line-height: 0.86;
  letter-spacing: 0.01em;
  white-space: nowrap;
  font-size: clamp(3rem, 13vw, 12rem);   /* home.js refines it to fit */
}

/* The quiet base: wordmark and a line, the way every page signs off. */
.home-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: auto;
  padding-top: clamp(40px, 7vh, 80px);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.home-base img {
  width: clamp(120px, 11vw, 170px);
  height: auto;
}

/* ============================================
   A — LEDGER (recommended)
   Three rows like the Community list: number,
   word, what's behind it, arrow. Hover lifts one
   to wine and lets the others recede.
============================================= */
.home-words--ledger .home-words__lead { margin-bottom: clamp(40px, 8vh, 96px); }

.ledger {
  list-style: none;
  border-bottom: 1px solid var(--rule);
}
.ledger li { border-top: 1px solid var(--rule); }
.ledger a {
  display: grid;
  grid-template-columns: 2.6em minmax(0, 1fr) minmax(0, 15em) 1.6em;
  align-items: end;
  gap: clamp(14px, 2.4vw, 36px);
  padding: clamp(18px, 3.2vh, 34px) 0 clamp(14px, 2.4vh, 26px);
  text-decoration: none;
  transition: color 0.35s ease, opacity 0.35s ease;
}
.ledger__num {
  align-self: start;
  padding-top: 0.4em;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.ledger__word { min-width: 0; }
.ledger__desc {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.92rem, 1.15vw, 1.05rem);
  line-height: 1.5;
  color: var(--ink-soft);
  padding-bottom: 0.3em;
}
.ledger__arrow {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  padding-bottom: 0.25em;
  transition: transform 0.35s ease;
}
.ledger:hover a { opacity: 0.28; }
.ledger a:hover,
.ledger a:focus-visible { opacity: 1; color: var(--wine); }
.ledger a:hover .ledger__arrow { transform: translateX(8px); }

/* ============================================
   B — ECHO
   The new Impact heading's grey-then-ink, as
   a stack: each word fills in as it scrolls up,
   empties again on the way back. Centred.
============================================= */
.home-words--echo { align-items: center; text-align: center; }
.home-words--echo .home-words__lead { margin: 0 auto clamp(40px, 8vh, 90px); }

.echo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 3.4vh, 40px);
  width: 100%;
}
.echo a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #ddd8cf;
  transition: color 0.6s ease;
}
.echo a.is-lit { color: var(--ink); }
.echo a:hover,
.echo a:focus-visible { color: var(--wine); }
.echo .bw { font-size: clamp(3rem, 11vw, 9.5rem); }
.echo__desc {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.6s ease;
}
.echo a.is-lit .echo__desc { opacity: 1; }
.echo__amp {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  color: #ddd8cf;
  line-height: 1;
}
.home-words--echo .home-base { width: 100%; }

/* Words only (the homepage build of Echo): no lead, no captions.
   Three bands split by hairlines, each band the whole link, the
   words all one size so the longest fills the column. The bands
   centre in the space above the Coral mark. */
.home-words--echo-only {
  justify-content: flex-start;
  padding-top: clamp(110px, 22vh, 260px);   /* a long breath of dark after the film */
  padding-bottom: clamp(32px, 6vh, 56px);
}
.echo--ruled {
  list-style: none;
  gap: 0;
  max-width: 1240px;
  margin: auto;
  border-bottom: 1px solid #d6cfc4;
}
/* A shade firmer than the site's usual hairline: here the rules do
   the job the captions used to, telling the three places apart. */
.echo--ruled li {
  width: 100%;
  border-top: 1px solid #d6cfc4;
}
.echo--ruled a {
  padding: clamp(22px, 4.4vh, 52px) clamp(8px, 3vw, 48px) clamp(16px, 3.4vh, 40px);
}
.echo--ruled .bw { font-size: clamp(3rem, 11vw, 9rem); }

/* The Coral mark signs off at the foot, as it does on Docs:
   centred, 64px, and a way back to the top of the page. */
.home-mark {
  display: inline-flex;
  align-self: center;
  margin-top: clamp(40px, 7vh, 72px);
  transition: opacity 0.3s ease;
}
.home-mark:hover { opacity: 0.7; }
.home-mark img { width: 64px; height: auto; }

/* ---- Night: the Echo on the ink band, the colours of the Docs
   footer (#16120e / #f3eee6). Unlit words sit just above the
   dark; lit ones are paper; hover is a deep burgundy, the wine
   with more red in it so it still glows on ink. ---- */
.home-words--night {
  background: #16120e;
  color: #f3eee6;
}
.home-words--night .echo a { color: #3b352e; }
.home-words--night .echo a.is-lit { color: #f3eee6; }
.home-words--night .echo a:hover,
.home-words--night .echo a:focus-visible { color: #a3203a; }
.home-words--night .echo--ruled,
.home-words--night .echo--ruled li { border-color: rgba(243, 238, 230, 0.16); }
.home-words--night :focus-visible { outline: 1px solid #f3eee6; outline-offset: 4px; }

/* ============================================
   C — KNOCKOUT
   The film carries on from the hero, seen only
   through the letters of a white sheet (the cut
   paper on the mood board). A white layer in
   screen mode: white stays white, black lets the
   video through.
============================================= */
.home-words--knockout {
  isolation: isolate;
  overflow: hidden;
  background-color: var(--dark);
  background-size: cover;
  background-position: center;
  padding: 0;
}
.home-words--knockout .bg-video { z-index: 0; }
.knockout {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(6px, 1.4vh, 14px);
  padding: clamp(72px, 12vh, 140px) var(--gutter) clamp(72px, 12vh, 120px);
  background: #fff;
  color: #000;
  mix-blend-mode: screen;
}
.knockout a {
  display: block;
  text-decoration: none;
  color: #000;
  transition: color 0.4s ease;
}
.knockout .bw { line-height: 0.82; }
.knockout:hover a { color: #c4c4c4; }   /* the others fade toward the paper */
.knockout a:hover,
.knockout a:focus-visible { color: #000; }
/* Ink that stays ink sits above the blend. */
.knockout__ink {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(28px, 5vh, 48px) var(--gutter) clamp(24px, 4vh, 40px);
}
.knockout__ink .home-base { padding-top: 0; pointer-events: auto; }
.knockout__top {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================
   D — POSTER
   The loud one. Wine stock, words cut edge to
   edge, a dark offset print under the cream like
   a misregistered screenprint.
============================================= */
.home-words--poster {
  background: var(--wine);
  color: #f3ece2;
  padding-left: clamp(14px, 2vw, 28px);
  padding-right: clamp(14px, 2vw, 28px);
}
.home-words--poster .home-words__eyebrow {
  text-align: center;
  color: #f3ece2;
  opacity: 0.85;
  margin-bottom: clamp(18px, 3vh, 34px);
}
.poster {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 1vh, 10px);
}
.poster a {
  display: block;
  text-align: center;
  text-decoration: none;
  color: #f3ece2;
  text-shadow: 0.035em 0.035em 0 #2b0a11;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.poster .bw { line-height: 0.8; }
.poster a:hover,
.poster a:focus-visible {
  color: #fff;
  text-shadow: 0.06em 0.06em 0 #1a0509;
}
.home-words--poster .home-base { color: rgba(243, 236, 226, 0.75); }

/* ============================================
   E — SENTENCE
   The statement and the doors are the same thing:
   one paragraph, ink fading to wine down the lines,
   the three words set in the display face and
   underlined as the links they are.
============================================= */
.home-words--sentence { justify-content: center; }
.sentence {
  max-width: 17em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 5.2vw, 4.8rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin-top: auto;
}
.sentence__soft { color: #b9897f; }
.sentence a {
  font-family: var(--font-display);
  font-size: 1.04em;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.12em;
  transition: color 0.3s ease;
}
.sentence .sentence__soft a { color: var(--wine); }
.sentence a:hover,
.sentence a:focus-visible { color: var(--wine); text-decoration-thickness: 3px; }

/* ============================================
   NARROW
============================================= */
@media (max-width: 760px) {
  .ledger a {
    grid-template-columns: minmax(0, 1fr) 1.4em;
    row-gap: 8px;
  }
  .ledger__num { display: none; }
  .ledger__desc { grid-column: 1; grid-row: 2; }
  .ledger__arrow { grid-column: 2; grid-row: 1; }
  .home-base { flex-direction: column; align-items: flex-start; gap: 12px; }
  .knockout__top { flex-direction: column; gap: 6px; }

  /* On a phone the words can only be as wide as the screen, so the
     bands grow taller instead: three big tap targets that share the
     screen rather than three small words floating in white. */
  .echo--ruled a { padding: clamp(40px, 8vh, 72px) 0 clamp(34px, 7vh, 64px); }
  .home-mark img { width: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .echo a, .echo__desc, .ledger a, .ledger__arrow { transition: none; }
}