/* sign the book (body, slip) and the close (meeting frame, buy block) */
.sign-body .wrap { max-width: 56rem; margin-inline: auto; }
.sign-body h2 { max-width: 14em; margin-bottom: var(--s-5); }
.sign-text { max-width: 34em; }

.scrim-book { background: linear-gradient(to top, var(--night) 0%, rgba(13, 15, 12, 0.6) 30%, transparent 60%); }
.glow-book { background: radial-gradient(ellipse 50% 30% at 50% 24%, rgba(242, 199, 122, 0.2), transparent 70%); }
.slip-copy { position: absolute; left: var(--gutter); right: var(--gutter); top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; padding-top: var(--bar-h); }
.frame-book { display: block; }
.slip-flow { margin-top: var(--s-7); }
.sign-body .slip-flow { max-width: 26rem; margin-inline: auto; }
.slip {
  position: relative; width: min(100%, 26rem); padding: var(--s-6) var(--s-5); text-align: center;
  background: var(--ivory) url(../img/tex/paper-512.webp) 0 0 / 512px; color: var(--ink);
  border: 1px solid var(--brass); outline: 1px solid var(--brass); outline-offset: 5px; box-shadow: 0 0 90px 6px rgba(242, 199, 122, 0.18);
}
.slip .sc { color: var(--oxblood); }
.slip-line { margin: var(--s-4) 0 var(--s-6); font: italic 400 1.5rem/1.25 var(--f-display); color: var(--ink); text-wrap: balance; }
.slip-lines { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s-5); }
.slip-lines span { display: block; font: 700 0.875rem var(--f-sc); letter-spacing: 0.08em; color: var(--oxblood); text-align: left; }
.slip-lines i { display: block; height: 28px; border-bottom: 1px solid var(--oxblood); }
.slip-small { margin-top: var(--s-5); font-size: var(--t-small); color: var(--ink); }

.scrim-meeting { background: linear-gradient(to top, var(--night) 0%, rgba(13, 15, 12, 0.9) 26%, rgba(13, 15, 12, 0.4) 54%, transparent 72%); }
.glow-meeting {
  background:
    radial-gradient(circle 22% at 17% 63%, rgba(242, 199, 122, 0.2), transparent 70%),
    radial-gradient(circle 22% at 50% 48%, rgba(242, 199, 122, 0.2), transparent 70%),
    radial-gradient(circle 22% at 83% 32%, rgba(242, 199, 122, 0.2), transparent 70%);
}
.frame-meeting { display: block; }
.close-copy { position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(40px + env(safe-area-inset-bottom)); }
.close-copy h2 { max-width: 11em; margin-bottom: var(--s-4); }
.close-body { max-width: 26em; font-size: var(--t-body); color: var(--ivory); }

.buy { padding-top: var(--s-6); }
.buy-grid { display: grid; gap: var(--s-6); justify-items: center; text-align: center; }
.buy-cover { position: relative; width: 160px; margin: 0; }
.buy-cover img { position: relative; width: 100%; border: 1px solid var(--brass-deep); background: var(--bottle); }
.buy-sub { font: italic 400 var(--t-lede)/1.4 var(--f-body); color: var(--ivory); margin: 6px 0 var(--s-4); }
.price { font: 600 var(--t-price)/1 var(--f-display); color: var(--ivory); position: relative; display: inline-block; overflow: clip; margin-bottom: var(--s-3); }
.buy-line { margin-bottom: var(--s-5); }
.social { margin-top: var(--s-6); font-size: var(--t-small); color: var(--ivory-dim); }
.social a { display: inline-block; padding-block: 12px; }
.soc-t { display: block; }
@media (min-width: 768px) and (orientation: landscape) {
  .close-copy { top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; padding-top: var(--bar-h); width: min(48vw, 640px); }
  .scrim-meeting { background: linear-gradient(to right, var(--night) 0%, rgba(13, 15, 12, 0.85) 34%, transparent 58%); }
  .glow-meeting { background: radial-gradient(ellipse 40% 30% at 70% 50%, rgba(242, 199, 122, 0.22), transparent 70%); }
  .scrim-book { background: linear-gradient(to right, var(--night) 0%, rgba(13, 15, 12, 0.5) 40%, transparent 60%); }
  .slip-copy { justify-content: flex-start; padding-left: calc(var(--gutter) + 4vw); }
}
@media (max-width: 767px) { .frame-book, .buy-cover { display: none; } } /* a phone: the slip sits in the text above, the till shows the cover */
@media (min-width: 768px) {
  .slip-flow { display: none; }
  .buy-grid { grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: var(--s-8); align-items: center; max-width: 60rem; }
  .buy-cover { width: 220px; }
}