/* Resizable artwork: fixed corners/endcaps, flexible centers. Original assets are retained. */
.parchment-surface::before {
  inset: -16px;
  background: none;
  border: 96px solid transparent;
  border-image: url(lorbo-parchment-frame.webp) 220 fill / 96px / 0 stretch;
}
.reader-preview .reader-intro::before {
  inset: 0 -14px;
  height: auto;
  background: none;
  border: 80px solid transparent;
  border-image: url(lorbo-parchment-frame.webp) 220 fill / 80px / 0 stretch;
  transform: none;
}
.reader-preview .reader-intro::after {
  content: none;
}
.parchment-ribbon,
.hero-copy .hero-facts {
  --ribbon-art-height: 108px;
  --ribbon-end: 116px;
}
.parchment-ribbon::before,
.hero-copy .hero-facts::before {
  inset: auto 0;
  top: 50%;
  width: 100%;
  height: var(--ribbon-art-height);
  box-sizing: border-box;
  transform: translateY(-50%);
  background: none;
  border: solid transparent;
  border-width: 0 var(--ribbon-end);
  border-image: url(lorbo-ribbon-frame.webp) 0 340 fill / 0 var(--ribbon-end) / 0 stretch;
}
body .ink-action::before {
  inset: 4px -4px;
  width: auto;
  height: auto;
  box-sizing: border-box;
  transform: none;
  background: none;
  border: solid transparent;
  border-width: 0 var(--ink-end, 60px);
  border-image: url(lorbo-ink-frame.webp) 0 350 fill / 0 var(--ink-end, 60px) / 0 stretch;
}
body .hero-copy .invite::before,
.book-sample-button::before,
.flow-access-button::before {
  background: none;
  border: solid transparent;
  border-width: 0 var(--bronze-end, 34px);
  border-image:
    url(lorbo-bronze-frame.webp) 0 16.4355% fill / 0 var(--bronze-end, 34px) / 0 stretch;
}
/* Solid bronze keeps the buttons legible until the plate art has loaded. */
:root:not([data-bronze-ready]) .hero-copy .invite::before,
:root:not([data-bronze-ready]) .book-sample-button::before,
:root:not([data-bronze-ready]) .flow-access-button::before {
  background: #a67c51;
  border-radius: 999px;
}
/* Later scenes leave their artwork unrequested until they come near; without scripts it loads. */
.js [data-defer-art],
.js [data-defer-art]::before,
.js [data-defer-art]::after,
.js [data-defer-art] *,
.js [data-defer-art] *::before,
.js [data-defer-art] *::after {
  background-image: none !important;
  border-image-source: none !important;
}
@media (min-width: 1001px) and (max-width: 1799px) {
  .parchment-track .parchment-section {
    min-height: 650px;
    padding-top: 116px;
    padding-bottom: 76px;
    align-items: start;
  }
  .parchment-summary {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 26px;
  }
  .parchment-summary #what-title,
  .parchment-summary .parchment-intro,
  .parchment-summary .parchment-actions {
    margin-top: 0;
    margin-bottom: 0;
  }
  .parchment-points {
    align-content: start;
    row-gap: 36px;
  }
  .parchment-ribbon {
    --ribbon-art-height: 98px;
    --ribbon-end: 106px;
  }
  .hero-copy .hero-facts {
    --ribbon-art-height: 80px;
    --ribbon-end: 88px;
  }
}

/* Keep the introduction beside a naturally spaced two-by-two feature grid. */
@media (min-width: 1001px) {
  .parchment-track .parchment-section {
    min-height: 650px;
    padding-top: 112px;
    padding-bottom: 90px;
    align-items: center;
  }
  .parchment-summary {
    display: flex;
    flex-direction: column;
    gap: 26px;
  }
  .parchment-summary #what-title,
  .parchment-summary .parchment-intro,
  .parchment-summary .parchment-actions {
    margin-top: 0;
    margin-bottom: 0;
  }
  .parchment-points {
    align-content: center;
    align-self: center;
    row-gap: 48px;
    column-gap: 28px;
  }
}