/* Checkout and preview dialogs: stop-press slips that drop in from the top edge. */
dialog.slip {
  --slip-top: 0px;
  position: fixed; inset: var(--slip-top) 0 auto 0; margin: 0 auto; width: 100%; max-width: 100%; max-height: 100dvh; overflow: auto; padding: 0;
  background-color: var(--newsprint); background-image: url(../img/tex-newsprint.webp); background-size: 512px; color: var(--ink);
  border: 0; border-bottom: 3px solid var(--ink); box-shadow: 0 1px 0 var(--newsprint), 0 2px 0 var(--ink);
  overscroll-behavior: contain;
  transform: translateY(calc(-100% - var(--slip-top))); opacity: 0;
  transition: transform 150ms var(--ease-out), opacity 150ms var(--ease-out), overlay 150ms allow-discrete, display 150ms allow-discrete;
}
dialog.slip[open] { transform: translateY(0); opacity: 1; transition-duration: 240ms; }
@starting-style { dialog.slip[open] { transform: translateY(calc(-100% - var(--slip-top))); opacity: 0; } }
dialog.slip::backdrop {
  background: rgb(23 21 18 / 0.55); opacity: 0;
  transition: opacity 150ms var(--ease-out), overlay 150ms allow-discrete, display 150ms allow-discrete;
}
dialog.slip[open]::backdrop { opacity: 1; transition-duration: 240ms; }
@starting-style { dialog.slip[open]::backdrop { opacity: 0; } }
.slip-in { padding: 28px var(--gut) 32px; max-width: 640px; margin: 0 auto; }
.slip-in h2 { font-size: clamp(1.75rem, 6vw, 2.5rem); margin-bottom: 14px; outline: none; }
.slip-in > p:not(.kicker):not(.note) { margin-bottom: 18px; }
.co-links { margin: 8px 0 18px; border-bottom: 1px solid var(--ink); }
.co-links a { display: flex; align-items: center; min-height: 52px; border-top: 1px solid var(--ink); text-decoration: none; font-weight: 700; letter-spacing: 0.04em; }
.slip-in .note { margin-bottom: 18px; }
dialog.slip-wide { height: auto; max-height: 100dvh; }
.pv { display: flex; flex-direction: column; height: 100%; max-width: 1140px; padding-bottom: 16px; }
.pv h2 { font-size: 1.375rem; margin-bottom: 10px; }
.pv-scroll { flex: 1; min-height: 0; display: grid; align-content: start; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--ink); background: var(--newsprint-deep); }
.pv-scroll img { width: 100%; height: auto; background: var(--newsprint); }
.pv-bar { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding-top: 12px; }
.pv-bar .buy { grid-column: 1 / -1; }
.pv-bar .btn-ink { min-height: 44px; padding: 0 6px; font-size: 0.75rem; letter-spacing: 0.05em; }
@media (min-width: 768px) {
  .pv-bar .btn-ink { padding: 0 22px; font-size: var(--fs-btn); letter-spacing: 0.08em; min-height: 48px; }
  dialog.slip { --slip-top: 6vh; width: min(640px, 92vw); border: 1px solid var(--ink); }
  dialog.slip-wide { width: min(1180px, 96vw); height: 88dvh; }
  .pv-bar { grid-template-columns: auto auto auto 1fr; }
  .pv-bar .buy { grid-column: auto; width: auto; justify-self: end; }
}