/* The desk world. Static layout first (stills above cards); .can-3d turns each chapter into a pinned stage. */
#scene {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; height: 100lvh;
  z-index: 0; display: block; opacity: 0; visibility: hidden; pointer-events: none;
}
.scene-on #scene { visibility: visible; }

.chapter { position: relative; z-index: 1; background: var(--panel); padding: var(--s4) var(--gutter); }
.chapter:first-of-type { padding-top: var(--s5); }
.stage { max-width: 1312px; margin-inline: auto; }
.still { margin-bottom: var(--s2); }
.still img { display: block; width: 100%; height: auto; border: 1px solid var(--moulding); background: var(--pearl); aspect-ratio: 4 / 5; }
.card { padding: 22px 22px 20px; }
.card h2 { font-size: var(--step-2); margin-bottom: var(--s1); }
.card p + p { margin-top: 10px; }
.card .cap { color: var(--walnut); }
.skiplink { font-style: italic; font-size: var(--step--1); }
@media (min-width: 900px) {
  .chapter { padding: var(--s5) var(--gutter); }
  .stage { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center; }
  .still { grid-column: 1 / 8; margin: 0; }
  .still img { aspect-ratio: 14 / 9; }
  .card { grid-column: 8 / 12; padding: 32px 32px 28px; }
}

/* ---- 3D capable: tall chapters, the stage pinned, the card anchored at the foot of the screen ---- */
.can-3d .chapter {
  --pin: 30vh;
  height: calc(var(--pin) + 100vh);
  height: calc(var(--pin) + 100svh);
  padding: 0; background: transparent;
}
.can-3d #desk { --pin: 18vh; }
.can-3d #tidy { --pin: 20vh; }
.can-3d .stage { position: sticky; top: 0; height: 100vh; height: 100svh; max-width: none; display: block; overflow: hidden; }
.can-3d .still {
  position: absolute; inset: var(--bar-top) 0 auto 0; height: calc(55% - var(--bar-top)); margin: 0;
  transition: opacity 300ms ease;
}
.can-3d .still img { height: 100%; object-fit: cover; aspect-ratio: auto; border: 0; background: transparent; }
.scene-on .still { opacity: 0; }
.can-3d .card {
  position: absolute; left: var(--s2); right: var(--s2);
  bottom: calc(var(--bar-bottom) + var(--safe) + 12px);
  padding: 16px 18px 14px;
}
.can-3d .card h2 { font-size: 1.5rem; }
.can-3d .card > p { font-size: 1.0625rem; line-height: 1.45; }
.can-3d .card .cap { display: none; }
.can-3d .card .note { margin-top: 6px; font-size: 0.9375rem; line-height: 1.35; }
@media (min-width: 900px) {
  .can-3d .chapter { --pin: 80vh; }
  .can-3d #desk { --pin: 60vh; }
  .can-3d #tidy { --pin: 90vh; }
  .can-3d .still { inset: 0 42% 0 0; height: auto; }
  .can-3d .card {
    left: auto; bottom: auto; top: 50%; transform: translateY(-50%);
    right: calc(var(--gutter) + max(0px, (100vw - 1312px) / 2) + 12px);
    width: min(29rem, 36vw); padding: 32px 32px 28px;
  }
  .can-3d .card h2 { font-size: var(--step-2); }
  .can-3d .card > p { font-size: var(--step-0); line-height: 1.55; }
  .can-3d .card .note { font-size: var(--step--1); }
}
@media (max-width: 899px) and (max-height: 700px) {
  .can-3d .card { padding: 12px 16px 10px; }
  .can-3d .card h2 { font-size: 1.3125rem; }
  .can-3d .card > p { font-size: 1rem; line-height: 1.4; }
}

/* ?still=N capture mode: the canvas alone */
.still-mode body > *:not(#scene) { display: none !important; }
.still-mode #scene { position: fixed; inset: 0; width: 100vw; height: 100vh; visibility: visible; opacity: 1; }