/* Why Berlin is broken: the conclusion, then four ranked cause cards.

   Everything is scoped by [data-slide], per CLAUDE.md. That matters more than
   usual here: .rank, .role, .claim and .stat are generic enough that an
   unscoped rule would silently restyle any future slide reaching for the same
   obvious names, and index.html loads every slide's stylesheet on every slide.

   One row of four cards is the whole slide. It previously also carried a stat
   strip above and a chain of arrows below, which made three things to read
   instead of one; each figure now lives in its own card. */
[data-slide="berlin-causes"] .inner { gap: 0.9rem; }
/* a size down from the deck's h2: this slide carries a verdict line and four
   cards under its heading, and the full-size one pushed the sources off-stage */
[data-slide="berlin-causes"] h2 { font-size: clamp(1.5rem, 2.7vw, 2.05rem); }

/* The conclusion, above the cards rather than after them: the room should know
   which of the four is the cause before reading all four. max-width:none
   because deck.css caps every p at 46ch for body copy and this is a full-width
   summary line, not a column of prose. */
[data-slide="berlin-causes"] .verdict { margin: 0; max-width: none; color: var(--fg);
           font-size: clamp(0.85rem, 1.15vw, 0.95rem); line-height: 1.5; }

/* Four cause cards, hairline-separated the way .grid-3 does it in
   components.css: a 1px gap over a border-coloured background. Not .grid-3
   itself, which is fixed at three columns. */
[data-slide="berlin-causes"] .cause-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
           background: var(--border); border: 1px solid var(--border); }
[data-slide="berlin-causes"] .cause { background: var(--surface); padding: 0.95rem 0.95rem 0.85rem;
           display: flex; flex-direction: column; gap: 0.5rem; }
[data-slide="berlin-causes"] .cause header { display: flex; align-items: center; gap: 0.45rem; }
[data-slide="berlin-causes"] .cause .rank { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent); }
[data-slide="berlin-causes"] .cause .role { font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase;
           color: var(--fg-muted); border: 1px solid var(--border); padding: 0.12rem 0.35rem; white-space: nowrap; }
/* the root cause is the one claim the slide is making, so it is the one thing marked */
[data-slide="berlin-causes"] .cause .role.primary { color: var(--accent); border-color: var(--accent); }
[data-slide="berlin-causes"] .cause h3 { margin: 0; font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; }
[data-slide="berlin-causes"] .cause p { margin: 0; max-width: none; }

/* title, then the figure, then the explanation. The figure and the words that
   name it are ONE line in one size and one colour: splitting them into a big
   number over a small caption read as two things per card and made a row of
   four cards feel like eight. Whatever qualifies the figure goes into the
   explanation below instead. */
[data-slide="berlin-causes"] .cause .stat { font-family: var(--font-mono); font-weight: 500; color: var(--accent);
           font-size: clamp(1rem, 1.55vw, 1.2rem); line-height: 1.2; letter-spacing: -0.01em; }
/* .long is the two-figure comparison, which wraps at the shared size and breaks
   the row's rhythm: one line each keeps the four cards on the same baselines */
[data-slide="berlin-causes"] .cause .stat.long { font-size: clamp(0.85rem, 1.3vw, 1rem); }
[data-slide="berlin-causes"] .cause .claim { font-size: 0.78rem; line-height: 1.5; color: var(--fg-muted); }
/* margin-top:auto pins the takeaway to the bottom of every card, so the four
   read as a row across whatever length the copy above them runs to */
[data-slide="berlin-causes"] .cause .so-what { margin-top: auto; padding-top: 0.5rem;
           border-top: 1px solid var(--border); font-size: 0.72rem; color: var(--accent); line-height: 1.4; }

/* Laptops and the standalone view. The stage scrolls rather than shrinking type
   further, which is deliberate: this slide is read, not glanced at. */
@media (max-width: 980px) {
  [data-slide="berlin-causes"] .cause-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  [data-slide="berlin-causes"] .cause-grid { grid-template-columns: 1fr; }
}