/* ============================================================================
   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 ---- */
/* The slide is a centring flex column: the title is pinned near the top (absolute, out of
   flow) and the byline is pinned bottom-left (absolute), so the BODY is the only in-flow
   child and the parent's align/justify centre it both ways. Centring lives on the PARENT,
   not a transform on .s-body, because .s-body carries the entrance `anim` and the engine
   would otherwise overwrite its transform. Content stays H+V centred whatever its height. */
.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 width/height, 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;
}

/* ============================================================================
   SHOWCASE-ONLY additions
   This deck demonstrates the shortcode/content system, so it needs a couple of
   layout helpers the narrative decks don't. Kept here (not in the shared theme)
   so deep-2026 / iq-wealth stay byte-for-byte on the locked style.
   ============================================================================ */

/* Hero brand logo (same rule iq-wealth uses) */
.slide--hero .s-logo {
  position: absolute;
  left: 2%; top: 6.5%;
  width: 6.5cqw; height: auto;
  transform-origin: left center;
}

/* Space multiple inline metrics out as an even row */
.slide--statement .s-body .iqs-metric {
  margin: 1.6cqh 2.0cqw;
}
/* Video, charts and other embeds/widgets are the focus of their slide: they fill ~80% of
   the stage (it's 16:9, so 80cqw ⇒ ~80% of BOTH width and height) and stay centred.
   margin:0 auto keeps them horizontally centred within the body. On these slides the title
   is compact and pinned to the very top (via :has()) so the media dominates without a
   collision — other statement slides (metrics, sources, image…) keep the 7.2% title. */
.slide--statement .iqs-embed,
.slide--statement .iqs-widget {
  position: relative;        /* stable containing block for the pinned caption */
  width: 84cqw; max-width: 84cqw;
  margin: 0 auto;
}
/* Pull the caption OUT of the figure's flow height and pin it just under the frame, so the
   media FRAME itself is what centres — giving even top/bottom margins around the video/chart
   instead of the caption shoving the frame upward. Anchored to the figure (which the engine
   never transforms), so it's reliable in every animation state. */
.slide--statement .iqs-embed figcaption,
.slide--statement .iqs-widget figcaption {
  position: absolute;
  top: 100%; left: 0; right: 0;
  margin: 1.4cqh 0 0;
  text-align: center;
}
.slide--statement:has(.iqs-embed, .iqs-widget) .s-title {
  top: 1.5%;
  font-size: 2cqw;
}

/* Raw image-composition layouts (.split / .stack) are now standard in framework/base.css. */

/* Motif demo slide (raw): centred content over the decorative backdrop. */
.motif-demo {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 1.6cqh; padding: 0 10%;
}
.motif-title { font-size: 3.4cqw; font-weight: 300; line-height: 1.15; color: var(--deck-ink); margin: 0; }
.motif-text  { font-size: 1.7cqw; line-height: 1.6; color: var(--deck-ink-dim); max-width: 54cqw; margin: 0; }
.motif-chips { display: flex; gap: 1cqw; margin-top: 1cqh; }