/* Closing content stays reachable. On phones the copy is at the top and the
   footer sits at the bottom, with the crate in the open band between them. */
/* Desktop: the left column is page content, not its own scroller. A nested
   scroller with overscroll contained ate the wheel, so scrolling up over the
   copy did not move the page. */
@media (min-width: 840px) {
  .chapter[data-chapter="closing"] .sheet { max-height: none; overflow: visible; overscroll-behavior: auto; }
}
[data-chapter="closing"] .closing-legal { opacity:1; transition:none; }
.closing-copy, .closing-end { pointer-events: auto; }
/* Bubble and Todd stack in flow on one centre line: the bubble's own height pushes him
   down, so a longer line can never reach his ears, and the 12px gap holds the tail
   about 7px above his ears. */
.todd-pacing { position:relative; width:max-content; max-width:100%; margin-top:16px; pointer-events:none; display:flex; flex-direction:column; align-items:center; }
.todd-pacing[hidden] { display:none; }
/* His Lottie viewBox (550 x 490 canvas units, see todd-pacing.js) at 0.3px a unit. The
   box's centre line is his head's, so the tail at the bubble's centre points at his head. */
.todd-pacing-cat { flex:none; width:165px; height:147px; }
.todd-pacing-cat svg { display:block; width:100%; height:100%; }
.todd-pacing-say {
  position:relative; margin:0 0 12px; width:max-content; max-width:min(300px, 100%);
  padding:10px 14px; border-radius:16px; color:var(--text);
  background:rgba(40,42,50,0.96); border:0.5px solid rgba(255,255,255,0.14);
  box-shadow:0 8px 24px rgba(137,180,250,0.12);
  font:500 0.82rem/1.3 Geist, system-ui, sans-serif; text-wrap:balance;
}
.todd-pacing-say::after {
  content:""; position:absolute; bottom:-6px; left:50%; width:12px; height:12px;
  transform:translateX(-50%) rotate(45deg); background:rgba(40,42,50,0.96);
  border-right:0.5px solid rgba(255,255,255,0.14); border-bottom:0.5px solid rgba(255,255,255,0.14);
}
@media (max-width:839px) {
  .chapter[data-chapter="closing"] .sheet {
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    max-height: none;
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: calc(62px + env(safe-area-inset-top)) 20px calc(14px + env(safe-area-inset-bottom));
    background: none;
    pointer-events: none;
  }
  .closing-copy {
    background: linear-gradient(to bottom, #0E0E10 78%, rgba(14,14,16,0));
    padding-bottom: 8px;
  }
  .closing-end {
    margin-top: auto;
    padding-top: 28px;
    background: linear-gradient(to top, #0E0E10 72%, rgba(14,14,16,0));
  }
  .closing-end .fine { text-align: center; max-width: none; }
  .todd-pacing { display:none !important; }
}
@media (max-width: 839px) and (max-height: 700px) {
  .chapter[data-chapter="closing"] .sheet {
    padding: calc(54px + env(safe-area-inset-top)) 12px calc(8px + env(safe-area-inset-bottom));
  }
  .closing-end { padding-top: 4px; }
  .chapter[data-chapter="closing"] .kicker { letter-spacing: 0.04em; }
}