/* lookback-v1.css — the company Look Back (2026-10-14), and any Look Back release after it.
   Rides on wcn.css tokens: teal ground, off-white, hairline boxes, no fills except pills.
   Pills use the measured ink-on-fill pairs from wcn.css (--ink on sage/gold, >= 5.7:1).
   Splat is coral on teal: decorative (2.09:1 is under 3:1 for text, fine for a mascot that
   never carries meaning on its own: every status also has a word).
   Versioned filename: /assets/ is cached immutable for a year (see ops/build.py). */

#release.wide .prose { margin-bottom: clamp(2.5rem, 7vh, 4rem); }

.lb { position: relative; z-index: 1; }
.lb + .lb { margin-top: clamp(3rem, 8vh, 5rem); padding-top: clamp(2.5rem, 6vh, 3.5rem); border-top: 1px solid var(--hairline); }
.lb h2 { margin-top: 0.4rem; max-width: 40rem; }
.lb .lede { margin-top: 0.9rem; }

/* ── The hero: Splat beside the title of the Look Back ─────────────────────── */
.lb-hero { display: grid; grid-template-columns: 1fr auto; gap: clamp(1rem, 4vw, 3rem); align-items: center; }
.lb-hero svg[data-splat] { width: clamp(6.5rem, 16vw, 11rem); height: auto; overflow: visible;
  filter: drop-shadow(0 0.6rem 1.4rem rgba(14, 22, 20, 0.35)); }

/* ── The Pivot Point: the email, as a dated document ──────────────────────── */
.pivot { margin-top: 1.6rem; border: 1px solid var(--hairline); padding: clamp(1.25rem, 3vw, 2rem); max-width: 50rem; }
.pivot-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; font-size: 0.8rem; color: var(--muted); }
.pivot-meta b { font-weight: 500; color: var(--fg); }
.pivot blockquote { margin-top: 1.2rem; font-size: 1.02rem; line-height: 1.7; }
.pivot blockquote p + p { margin-top: 0.8rem; }
.pivot blockquote p::before { content: "\201C"; }
.pivot blockquote p::after { content: "\201D"; }
.pivot .context { margin-top: 1.2rem; font-size: 0.92rem; color: var(--muted); }

.feel { margin-top: 1.4rem; font-weight: 200; font-size: clamp(1.4rem, 3.2vw, 2.1rem); line-height: 1.25; max-width: 44rem; }
.feel cite { display: block; margin-top: 0.8rem; font-style: normal; font-size: 0.8rem; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }

/* ── What We Said / What We Did ───────────────────────────────────────────── */
.ledger { list-style: none; margin-top: 1.8rem; }
.ledger li { display: grid; grid-template-columns: 9.5rem 1fr 1fr; gap: 0 clamp(1rem, 3vw, 2.25rem);
  padding: 1.5rem 0; border-top: 1px solid var(--hairline); }
.ledger li:last-child { border-bottom: 1px solid var(--hairline); }
.ledger .topic { font-weight: 500; font-size: 0.95rem; }
.ledger .topic .pill { margin-top: 0.55rem; }
.ledger .said, .ledger .did { font-size: 0.97rem; line-height: 1.65; }
.ledger .said { color: var(--muted); }
.ledger .said::before, .ledger .did::before { display: block; margin-bottom: 0.35rem; font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.ledger .said::before { content: "We said · Aug 2025"; }
.ledger .did::before { content: "We did · Oct 2026"; }
.ledger .said q { quotes: "\201C" "\201D"; }
.ledger a, .built a, .ahead a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--muted-dim); }

.pill { display: inline-block; padding: 0.18rem 0.6rem; border: 1px solid var(--muted-dim); border-radius: 999px;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.pill.done { background: var(--sage); }
.pill.going { background: var(--gold); }
.pill.let-go { background: transparent; color: var(--fg); }

/* ── Built along the way, not in the email ─────────────────────────────────── */
.built { list-style: none; margin-top: 1.4rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.built li { border: 1px solid var(--hairline); padding: 1.1rem 1.2rem; font-size: 0.93rem; line-height: 1.55; }
.built b { display: block; font-weight: 500; margin-bottom: 0.3rem; }
.built span { color: var(--muted); }

/* ── Where We're Going: dated, in order ───────────────────────────────────── */
.ahead { list-style: none; margin-top: 1.6rem; max-width: 50rem; }
.ahead li { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1.2rem; padding: 1rem 0; border-top: 1px solid var(--hairline); }
.ahead li:last-child { border-bottom: 1px solid var(--hairline); }
.ahead time { font-weight: 500; font-variant-numeric: tabular-nums; }
.ahead span small { display: block; color: var(--muted); font-size: 0.88rem; margin-top: 0.2rem; }
.ahead .mark { width: 0.9rem; height: 0.9rem; fill: var(--coral); vertical-align: -0.1rem; margin-right: 0.45rem; }

/* ── Three things for the screen ──────────────────────────────────────────── */
.three { list-style: none; counter-reset: t; margin-top: 1.6rem; display: grid; gap: 1rem; }
.three li { counter-increment: t; display: grid; grid-template-columns: 3.2rem 1fr; align-items: baseline;
  font-weight: 200; font-size: clamp(1.25rem, 2.8vw, 1.85rem); line-height: 1.25; padding: 1.1rem 0; border-top: 1px solid var(--hairline); }
.three li::before { content: counter(t); font-size: 0.8em; color: var(--muted); }
.three li:last-child { border-bottom: 1px solid var(--hairline); }

.lb-close { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.8rem; }
.lb-close svg[data-splat] { width: 4.5rem; height: auto; overflow: visible; }
.lb-close p { font-weight: 200; font-size: clamp(1.5rem, 3.6vw, 2.4rem); }

@media (max-width: 52rem) {
  .ledger li { grid-template-columns: 1fr; gap: 0.9rem; }
  .ledger .topic { display: flex; align-items: center; gap: 0.8rem; }
  .ledger .topic .pill { margin-top: 0; }
  .ahead li { grid-template-columns: 1fr; gap: 0.2rem; }
  .lb-hero { grid-template-columns: 1fr; }
  .lb-hero svg[data-splat] { justify-self: start; width: 6rem; }
}