/* Beauty or a Beast — Figma frames from section ABC, placed as they are.
   The page takes the frames' off-white, every frame shares one scale (one Figma px = 100cqi / 1920)
   and each frame runs to the right edge of the page. */
.bab { --paper: #fdfdfa; --ink: #1a1a1a; --k: calc(100cqi / 1920); }
body.bab { background: var(--paper); }

.bab-cover { background: #2d376f; }
.bab-cover > img { display: block; width: 100%; height: auto; }

.bab .study { grid-template-columns: var(--sidenav-w) minmax(0, 1fr); justify-content: stretch; padding-right: 0; }
@media (max-width: 1024px) { .bab .study { grid-template-columns: minmax(0, 1fr); } }
.study > main { container-type: inline-size; padding: 0 0 120px; }

.shot { position: relative; width: calc(var(--w) * var(--k)); margin: calc(var(--gap) * var(--k)) 0 0 auto; }
.shot img { display: block; width: 100%; height: auto; }
/* 3D slide: the animated lantana turntable plays inside the tilted zoom box on the tablet (Figma node 1286:3282).
   Units are Figma px of the 1930-wide frame. The box is 174.8 x 162.5, centred at (1661.3, 1016.4), rotated -24.52deg;
   the GIF fills it (cover). The window is inset 4px so the black outline from the static image stays visible. */
.bab .shot__media { position: relative; container-type: inline-size; }
.bab .shot__gif { --u: calc(100cqw / 1930); position: absolute; left: calc(1577.89 * var(--u)); top: calc(939.14 * var(--u)); width: calc(166.8 * var(--u)); height: calc(154.53 * var(--u)); transform: rotate(-24.52deg); overflow: hidden; }
.bab .shot__gif img { position: absolute; left: calc(-4 * var(--u)); top: calc(-7.22 * var(--u)); width: calc(174.8 * var(--u)); height: calc(168.97 * var(--u)); max-width: none; }

/* The quote sits alone in the middle of its own screen */
.shot--center { width: 100%; min-height: calc(100svh - 57px); display: flex; align-items: center; justify-content: flex-end; }
.shot--center .shot__inner { width: calc(var(--w) * var(--k)); }

/* The dark poster frames meet with no gap and the page ends on them */
.shot--dark { background: var(--ink); }
.bab-flow:has(> .shot--dark:last-child) { padding-bottom: 0; }

@media (max-width: 760px) {
  .shot--center { min-height: 0; padding: 48px 0; }
}

/* Frames shown a little smaller than their Figma size, centred in the column */
.bab .shot--small { width: calc(var(--w) * var(--k) * var(--s)); margin-left: auto; margin-right: auto; }
/* Every frame sits centred in the column */
.bab .shot { margin-left: auto; margin-right: auto; }
/* The last three frames are white paper: multiply drops that white into the page's off-white */
.bab #behind img, .bab #reflections img, .bab #resources img { mix-blend-mode: multiply; }