/* what you get: cover under a lamp, previews, contents */
.inside-grid { display: grid; gap: var(--s-6); }
.cover { position: relative; max-width: 300px; margin-inline: auto; }
.cover img { position: relative; width: 100%; border: 1px solid var(--brass-deep); background: var(--bottle) }
.cover-glow { position: absolute; inset: -30% -40%; background: radial-gradient(closest-side, rgba(242, 199, 122, 0.24), transparent 100%); pointer-events: none; }
.pages-wrap { position: relative; }
.pages { list-style: none; padding: 0; display: grid; gap: var(--s-7); max-width: 24rem; margin-inline: auto; }
.pg figure { margin: 0; }
.pg-paper { position: relative; display: block; aspect-ratio: 5.5 / 8.5; background: var(--ivory) url(../img/tex/paper-512.webp) 0 0 / 512px; border: 1px solid var(--brass); outline: 1px solid var(--brass-deep); outline-offset: 4px; }
.pg-paper img { width: 100%; height: 100%; object-fit: cover; }
.is-missing img { opacity: 0; }
.pg figcaption { margin-top: var(--s-4); font-size: var(--t-small); line-height: 1.5; color: var(--ivory-dim); text-align: center; }
.pg-btn { display: block; width: 100%; padding: 0; text-align: inherit; cursor: zoom-in; }
.pg-hint { margin-top: var(--s-4); text-align: center; font: 700 0.875rem var(--f-sc); letter-spacing: 0.08em; color: var(--ivory-faint); }
.h-fine { display: none; }
@media (hover: hover) and (pointer: fine) { .h-fine { display: inline; } .h-touch { display: none; } }

/* phone and tablet with JS: one lamplit page at a time, crossfaded */
.js .pages-wrap[data-ready] .pages { display: grid; grid-template-columns: 1fr; gap: 0; }
.js .pages-wrap[data-ready] .pg { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 500ms var(--ease-candle), visibility 0s 500ms; }
.js .pages-wrap[data-ready] .pg.is-on { opacity: 1; visibility: visible; transition: opacity 500ms var(--ease-candle), visibility 0s; }
.pg-ctl { margin-top: var(--s-5); display: flex; align-items: center; justify-content: center; gap: var(--s-5); }
.pg-ctl[hidden] { display: none; }
.pg-step { min-height: 44px; padding: 0 var(--s-4); font: 700 var(--t-label) var(--f-sc); letter-spacing: 0.08em; color: var(--brass); border: 1px solid var(--brass-deep); transition: background-color 200ms ease, box-shadow 200ms ease; }
.pg-step:active { background: rgba(184, 146, 74, 0.16); box-shadow: 0 0 22px rgba(242, 199, 122, 0.3); }
@media (hover: hover) and (pointer: fine) { .pg-step:hover { background: rgba(184, 146, 74, 0.12); } }
.pg-dots { display: inline-flex; gap: 8px; }
.pg-dots i { width: 8px; height: 8px; border: 1px solid var(--brass); transition: background-color 300ms ease; }
.pg-dots i.on { background: var(--brass); }

.contents { margin-top: 0; display: grid; gap: var(--s-3); }
.contents div { padding-bottom: var(--s-3); border-bottom: 1px solid rgba(122, 95, 44, 0.5); }
.contents dt { font: 700 var(--t-label) var(--f-sc); letter-spacing: 0.08em; color: var(--brass); }
.contents dd { margin: 2px 0 0; font-size: var(--t-small); line-height: 1.6; color: var(--ivory-dim); max-width: 38em; }
.format { margin-block: var(--s-5); color: var(--ivory-faint); }

@media (max-width: 899px) { .cover-col { display: none; } } /* the cover is in the buy block and the till */
@media (min-width: 900px) {
  .inside-grid { grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: var(--s-8); align-items: start; }
  .cover-col { grid-column: 1 / 6; grid-row: 1 / 4; position: sticky; top: calc(var(--bar-h) + 40px); }
  .cover { max-width: 420px; }
  .inside-text { grid-column: 7 / 13; grid-row: 1; }
  .pages-col { grid-column: 7 / 13; grid-row: 2; }
  .contents-col { grid-column: 7 / 13; grid-row: 3; }
  .pages { max-width: 24rem; margin-left: 0; gap: var(--s-8); }
  .pg-ctl { display: none; }
}
.inside-text { order: -1; }