/* frame-to-full: finished composition first, live layout after. */
.scene[data-scene="frame-to-full"] { background: var(--ground, #f4f1ec); color: var(--ink, #161412); }
.scene[data-scene="frame-to-full"] .scene-stage { display: flex; flex-direction: column; }
.scene[data-scene="frame-to-full"] .f2f-title {
  order: -1; margin: 0; padding: clamp(40px, 8vw, 96px) 5vw clamp(24px, 4vw, 48px);
  font: 400 clamp(30px, 5vw, 56px)/1.05 var(--font-display, Georgia, serif); letter-spacing: -0.01em;
}
.scene[data-scene="frame-to-full"] .f2f-frame { margin: 0; width: 100%; height: 100svh; }
.scene[data-scene="frame-to-full"] .f2f-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.scene[data-scene="frame-to-full"] .f2f-caption {
  position: absolute; left: 5vw; bottom: 5svh; z-index: 2; margin: 0; max-width: min(34ch, 80vw);
  padding: 14px 18px; background: rgba(22, 20, 18, 0.78); color: var(--ground, #f4f1ec);
  font: 400 clamp(16px, 1.6vw, 22px)/1.35 var(--font-text, system-ui, sans-serif);
}

/* live */
.scene[data-scene="frame-to-full"].is-live .scene-stage { display: block; }
.scene[data-scene="frame-to-full"].is-live .f2f-frame { position: absolute; inset: 0; height: auto; }
.scene[data-scene="frame-to-full"].is-live .f2f-title {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2; text-align: center;
  padding: 76px 5vw 0; font-size: clamp(28px, 4.2vw, 48px); /* clears a sticky header of up to ~70px */
}
@media (max-width: 767px) {
  .scene[data-scene="frame-to-full"].is-live .f2f-title { font-size: 26px; padding-top: 80px; }
  .scene[data-scene="frame-to-full"] .f2f-caption { font-size: 16px; }
}