/* Public campaign report.

   The reader arrives with one question — how much was committed — and a second
   they may not know they have: what that figure is actually made of. Everything
   below serves those two in that order, and nothing competes with them. */

.cs-report { max-width: 46rem; margin: 0 auto; padding: 5rem 1.25rem 6rem; }

/* Prose sits narrower than the figures. The column is sized for the groupings,
   where a long label and a right-aligned amount need the width; running body
   copy across the same measure would push past 80ch. */
.cs-prose { max-width: 34rem; }

/* The campaign name is context, not the headline. It was set at display-l,
   which put a 3.4rem name directly above a 4.5rem figure — two things
   competing to be read first on a page that has one answer to give. */
.cs-campaign {
  font-family: var(--display);
  font-size: clamp(1.4rem, 1.2rem + .9vw, 1.9rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink-soft);
  margin: .35rem 0 1.75rem;
}

/* Tabular figures throughout: amounts sit in a column and must align on the
   decimal, or comparing two lines means counting digits. */
.cs-headline {
  font-family: var(--display);
  font-size: clamp(2.75rem, 8vw, 4.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--emerald);
  margin: 0 0 .6rem;
  font-variant-numeric: tabular-nums;
}

/* "committed" carries the honesty of this page — the figure includes promised
   pledges and a repayable loan, so the word is load-bearing, not a unit label.
   Set in the body face at a size that reads as a word rather than a suffix. */
.cs-unit {
  font-family: var(--body);
  font-size: .26em;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink-soft);
}

/* Sits between the headline and the provisional badge, and must not compete with
   either. Set in the ink-soft the unit label uses rather than the badge's muted
   grey: these are figures, and figures the reader is meant to take in, where the
   badge below is a caveat. Tabular so the two amounts align if the line wraps. */
.cs-split {
  font-size: .9375rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  margin: 0 0 .6rem;
}

.cs-badge {
  font-size: .875rem;
  color: var(--muted);
  margin: 0 0 3rem;
}

.cs-groupings {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.35rem 1.5rem;
  align-items: baseline;
  margin: 0 0 3rem;
  padding: 2rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* The amount is what gets scanned, so it carries the weight — labels were bold
   against regular numbers, which is backwards for a column of figures. */
.cs-groupings dt { font-weight: 500; color: var(--ink); }
.cs-groupings dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* On its own line under the label, not appended to it: "Pledged still being
   collected" reads as one phrase and loses the distinction it exists to make. */
.cs-qualifier {
  display: block;
  font-weight: 400;
  font-size: .8125rem;
  color: var(--muted);
  margin-top: .25rem;
}

/* Under the amount, mirroring how .cs-qualifier sits under the label — so the
   pledged row reads as one thing with a note on each side rather than as two
   competing figures. Deliberately not emphasised: it is smaller and lighter than
   the amount above it, because the pledged figure is what the line reports and
   this is context for it. */
.cs-paid {
  display: block;
  font-weight: 400;
  font-size: .8125rem;
  color: var(--muted);
  margin-top: .25rem;
  white-space: normal;
}

/* No rule, no tinted box, no left border. The groupings already sit between two
   hairlines; a third device here would make the page look ruled rather than
   composed, and the note earns its quiet by being set small and narrow. */
.cs-note {
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1.65;
}
.cs-note strong { color: var(--ink-soft); }
/* The global reset zeroes every margin, so multi-paragraph copy needs its own
   spacing or the paragraphs run together as one block. */
.cs-note p + p { margin-top: .85rem; }

/* Not styled as an alarm: nothing has gone wrong for the reader, and a red
   banner on a charity's finance page reads as something worse than a report
   that is not published yet or a feed that is briefly unavailable. It carries
   its own heading so the page still has an h1 when the figures are hidden. */
.cs-state { color: var(--ink-soft); font-size: 1rem; line-height: 1.65; }
.cs-state .cs-campaign { margin-bottom: .75rem; color: var(--ink); }

.cs-back { margin-top: 3rem; font-size: .9375rem; }
.cs-back a { color: var(--emerald); text-decoration: underline; text-underline-offset: .2em; }

/* One authored moment: the report rises once, when the figures actually arrive.
   It is doing work rather than decoration — without it the placeholders swap to
   real content and the page visibly jumps as each element resizes.

   A count-up on the figure was the obvious alternative and is wrong here: it
   turns a provisional total that includes a repayable loan into a celebration,
   and it makes the number unreadable for the first second to anyone screenshotting
   it. The page states the figure; it does not perform it.

   Gated on .js so the content is never hidden when the script does not run. */
.js .cs-report > * {
  transition: opacity .55s cubic-bezier(.16, 1, .3, 1),
              transform .55s cubic-bezier(.16, 1, .3, 1);
}
.js .cs-report[aria-busy="true"] > * {
  opacity: 0;
  transform: translateY(10px);
}

@media (prefers-reduced-motion: reduce) {
  .js .cs-report > *,
  .js .cs-report[aria-busy="true"] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* At narrow widths the label and its amount stop sharing a row — side by side
   in 360px, a long label wraps to three lines against a short number. */
@media (max-width: 26rem) {
  .cs-report { padding-top: 3.5rem; }
  .cs-groupings { grid-template-columns: 1fr; gap: .35rem; }
  .cs-groupings dd { text-align: left; margin-bottom: 1.1rem; }
  .cs-groupings dd:last-of-type { margin-bottom: 0; }
}