/* =============================================================
   COMPONENTS
   Every pattern in the Brazil deck, generalised. Nothing here
   hard-codes a color or a size — components read semantic
   tokens, so the same markup works on any ground.
   ============================================================= */

/* ---- 1. Type roles ------------------------------------------ */

/* Eyebrow: the tracked, uppercase kicker above a headline.
   "01 · THE OPPORTUNITY". Always the accent color. */
.eyebrow {
  font-family: var(--font-feature);
  font-size: var(--size-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-4);
}

.display, .headline, .h2 {
  font-family: var(--font-serif);
  font-weight: var(--weight-headline);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.display  { font-size: var(--size-display); line-height: var(--leading-tight); }
.headline { font-size: var(--size-h1);      line-height: var(--leading-tight); }
.h2       { font-size: var(--size-h2);      line-height: var(--leading-snug); }

/* Lead: the italic serif line that sits under a headline.
   Accent-colored on dark grounds, muted ink on light. */
.lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--size-lead);
  line-height: var(--leading-snug);
  color: var(--accent);
  max-width: var(--measure);
  margin-top: var(--space-3);
}
.slide--light .lead { color: var(--ink-muted); }

.body  { font-size: var(--size-body);  line-height: var(--leading-body); max-width: var(--measure); }
.small { font-size: var(--size-small); line-height: var(--leading-body); color: var(--ink-muted); }
.muted { color: var(--ink-muted); }

/* Feature: the Eurostile callout. Short strings only — tracked
   uppercase extended type is unreadable past a few words. */
.feature {
  font-family: var(--font-feature);
  font-size: var(--size-card);
  letter-spacing: var(--tracking-feature);
  text-transform: uppercase;
  line-height: var(--leading-snug);
}

/* ---- 2. Rule ------------------------------------------------
   The hairline that runs between header items in the guide. */
.rule {
  border: 0;
  border-top: var(--line-hair) solid var(--hairline);
  margin: var(--space-5) 0;
}
.rule--accent { border-top-width: var(--line-marker); border-color: var(--accent); width: 64px; }

/* ---- 3. Bullets ---------------------------------------------
   Square markers, not discs. Markers cycle through the data
   sequence so a list reads as a set of distinct points.
   ------------------------------------------------------------- */
.bullets { display: grid; gap: var(--space-4); }

.bullets li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  max-width: var(--measure);
}
.bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--leading-body) * 0.5em - 3px);
  width: 6px; height: 6px;
  background: var(--seq-1);
}
.bullets li:nth-child(2)::before { background: var(--seq-2); }
.bullets li:nth-child(3)::before { background: var(--seq-3); }
.bullets li:nth-child(4)::before { background: var(--seq-4); }
.bullets li:nth-child(5)::before { background: var(--seq-5); }

/* Single-color variant, for when the list is one idea in parts. */
.bullets--plain li::before { background: var(--accent) !important; }

/* ---- 4. Card ------------------------------------------------
   Outlined box: marker, Eurostile title, serif body. The
   workhorse of every 2×2 and 3-up slide.
   ------------------------------------------------------------- */
.card {
  padding: var(--space-5);
  border: var(--line-hair) solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--panel);
}
.card__title {
  /* Marker is absolutely positioned rather than a flex sibling: in a
     flex row the text becomes an anonymous item that cannot shrink,
     so one long uppercase word spills out of the card. */
  position: relative;
  padding-left: calc(8px + var(--space-3));
  overflow-wrap: break-word;   /* last resort only; sizing should prevent it */
  font-family: var(--font-feature);
  font-size: var(--size-card);
  letter-spacing: var(--tracking-feature);
  text-transform: uppercase;
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
}
.card__title::before {
  content: "";
  position: absolute;
  left: 0;
  /* centred on the first line, not on a multi-line block */
  top: calc((var(--leading-snug) * 1em - 8px) / 2);
  width: 8px; height: 8px;
  background: var(--seq-1);
}
.card:nth-child(2) .card__title::before { background: var(--seq-2); }
.card:nth-child(3) .card__title::before { background: var(--seq-3); }
.card:nth-child(4) .card__title::before { background: var(--seq-4); }
.card:nth-child(5) .card__title::before { background: var(--seq-5); }

.card__body { font-size: var(--size-small); line-height: var(--leading-body); color: var(--ink-muted); }

/* Filled variant, for the one card that should carry weight. */
.card--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.card--accent .card__body { color: var(--accent-ink); opacity: 0.85; }

/* ---- 5. Pillar ----------------------------------------------
   The numbered 4-up: 01 / OPERATING LEADERSHIP / description.
   Rule on top rather than a box — lighter than a card grid.
   ------------------------------------------------------------- */
.pillar { padding-top: var(--space-4); border-top: var(--line-marker) solid var(--seq-1); }
.pillar:nth-child(2) { border-top-color: var(--seq-2); }
.pillar:nth-child(3) { border-top-color: var(--seq-3); }
.pillar:nth-child(4) { border-top-color: var(--seq-4); }

.pillar__num {
  font-family: var(--font-feature);
  font-size: var(--size-eyebrow);
  letter-spacing: var(--tracking-feature);
  color: var(--ink-faint);
  margin-bottom: var(--space-3);
}
.pillar__title {
  overflow-wrap: break-word;
  font-family: var(--font-feature);
  font-size: var(--size-card);
  letter-spacing: var(--tracking-feature);
  text-transform: uppercase;
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
}
.pillar__body { font-size: var(--size-small); line-height: var(--leading-body); color: var(--ink-muted); }

/* ---- 6. Stat ------------------------------------------------
   One number, carried at display scale in the accent, with a
   caption beneath. One per slide — the point is emphasis.
   ------------------------------------------------------------- */
.stat__value {
  font-family: var(--font-serif);
  font-size: var(--size-stat);
  line-height: 0.92;
  letter-spacing: var(--tracking-tight);
  color: var(--accent);
  font-variant-numeric: lining-nums;
}
.stat__label {
  font-size: var(--size-small);
  line-height: var(--leading-body);
  color: var(--ink-muted);
  margin-top: var(--space-4);
  max-width: 26ch;
}

/* ---- 7. Contents -------------------------------------------- */
.toc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-8); }
.toc li { display: flex; align-items: baseline; gap: var(--space-4); font-size: var(--size-body); }
.toc__num {
  font-family: var(--font-feature);
  font-size: var(--size-eyebrow);
  letter-spacing: var(--tracking-feature);
  color: var(--accent);
}

/* ---- 8. Quote ----------------------------------------------- */
.quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--size-h2);
  line-height: var(--leading-snug);
  max-width: 34ch;
  border-left: var(--line-marker) solid var(--accent);
  padding-left: var(--space-5);
}
.quote__attr {
  font-style: normal;
  font-family: var(--font-feature);
  font-size: var(--size-eyebrow);
  letter-spacing: var(--tracking-feature);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: var(--space-5);
}

/* ---- 9. Logo ------------------------------------------------
   Clear space is one half the shield's width on every side, and
   the shield never renders below 24px tall (the wordmark inside
   it stops resolving). Enforced here so it cannot drift.
   ------------------------------------------------------------- */
.logo { display: block; width: auto; }
.logo--shield     { height: 96px;  min-height: 24px; }
.logo--horizontal { height: 48px;  min-height: 18px; }
.logo--lockup     { height: 140px; min-height: 32px; }
.logo-frame { display: inline-block; padding: calc(var(--logo-clear, 0.5) * 1em); }