/* Tree of Life or Loss? — Figma frames PDV1–7 (1175:5723 onwards), 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. */
.tol { --paper: #fdfdfa; --ink: #1a1a1a; --k: calc(100cqi / 1920); }
body.tol { background: var(--paper); }

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

.tol .study { grid-template-columns: var(--sidenav-w) minmax(0, 1fr); justify-content: stretch; padding-right: 0; }
@media (max-width: 1024px) { .tol .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; }

/* 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); }
.tol-flow:has(> .shot--dark:last-child) { padding-bottom: 0; }

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