/* ============================================================================
   theme.css · deck "deep-2026"
   Exact overrides to match the original presentation design.
   Ground truth: reference/deep-deck-replica.html
   Exact values: reference/STYLE-SPEC.md
   All sizes in cqw/cqh; positions are absolute % of the 16:9 stage.
   ============================================================================ */

:root {
  --deck-ink-dim:   #9aa3b8;
  --deck-ink-faint: #7e879c;
  --deck-line:      rgba(242,243,245,.42);
  --deck-card:      rgba(255,255,255,.028);
  --deck-card-bd:   rgba(255,255,255,.075);
}

/* ---- HERO ---- */
.slide--hero {
  display: block;
  padding: 0;
}
.slide--hero .s-eyebrow {
  position: absolute;
  left: 2%; top: 22%;
  font-size: 2.083cqw;
  font-style: italic;
  font-weight: 300;
  text-transform: none;
  letter-spacing: normal;
  color: var(--deck-ink);
}
.slide--hero .s-title {
  position: absolute;
  left: 2%; top: 40%; width: 87%;
  font-size: 3.75cqw;
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: .002em;
}
.slide--hero .s-divider {
  position: absolute;
  left: 2.8%; top: 52.4%;
  width: 66%; height: 1.4px;
  background: var(--deck-line);
  border-radius: 0;
  transform-origin: left center;
}
.slide--hero .s-subtitle {
  position: absolute;
  left: 2%; top: 55%; width: 76%;
  font-size: 2.917cqw;
  font-style: italic;
  font-weight: 300;
  color: var(--deck-ink);
}

/* ---- STATEMENT ---- */
/* Centring flex column: title pinned near the top and byline bottom-left (both out of flow)
   so the BODY is the only in-flow child and the parent centres it H + V. Centring is on the
   PARENT, not a transform on .s-body (which carries the entrance anim). Embed/widget sizing
   and the symmetric-frame caption rules are inherited from framework/base.css. */
.slide--statement {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.slide--statement .s-title {
  position: absolute;
  left: 3%; top: 7.2%; width: 94%;   /* was 12% — pinned near the top, body centres below */
  text-align: center;
  font-size: 3.333cqw;
  line-height: 1.2;
}
.slide--statement .s-body {
  position: static;          /* in flow → parent flex centres it H + V */
  width: 88%; max-width: none;
  margin: 0;
  text-align: center;
  font-size: 2.5cqw;
  line-height: 1.72;
  color: var(--deck-ink);
}
.slide--statement .s-byline {
  position: absolute;
  left: 4%; top: 80.5%;
  gap: 1.7cqw;
}
.slide--statement .s-avatar {
  width: 8.2cqw;
  height: 8.2cqw;
}
.slide--statement .s-name {
  font-size: 2.5cqw;
  font-style: italic;
  color: var(--deck-ink);
}

/* ---- BULLETS ---- */
.slide--bullets {
  display: block;
  padding: 0;
}
.slide--bullets .s-title {
  position: absolute;
  left: 3%; top: 7.2%; width: 94%;   /* was 12% — pulled ~40% closer to the top */
  text-align: center;
  font-size: 4.167cqw;
  line-height: 1.15;
}
/* Bullets as a self-centring block: pinned to the slide's centre point and offset by half
   its own size, so the group stays horizontally AND vertically centred no matter how many
   points are added or removed. The engine animates the <li> .frag items, not this <ul>,
   so its transform is safe from the build animation. */
.slide--bullets .s-bullets {
  position: absolute;
  left: 50%; top: 50%; width: 86%;
  transform: translate(-50%, -50%);
  text-align: center;
  max-width: none;
  margin: 0;
  gap: 1.8cqh;
}
.slide--bullets .s-bullet {
  font-size: 2.292cqw;
  line-height: 1.78;
  font-weight: 300;
  color: var(--deck-ink);
}

/* ---- CARDS ---- */
.slide--cards .s-title {
  font-size: 2.083cqw;
}