/*
 * STR-001 Story Table framework.
 *
 * This file defines the structural vocabulary shared by every book page. The
 * existing book-detail classes continue to own presentation, so adopting the
 * framework does not change the rendered page, carousel, or motion behaviour.
 */
.story-table{
  --story-table-content-width:1200px;
  display:block;
}

.story-table__navigation,
.story-table__hero,
.story-table__chapter,
.story-table__closing{
  display:block;
}

.story-table__content{
  max-width:var(--story-table-content-width);
}

/* Named chapter hooks keep future content variants structural, not decorative. */
.story-table__chapter[data-story-table-chapter]{scroll-margin-top:7rem}

/* Keep the product story and hero book visually connected at wide widths. */
.story-table--book .bd-hero{
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(1.5rem,3vw,2.5rem);
}

.story-table--book .bd-hero > :last-child{justify-self:start}

.story-table--book .bd-cover-stage{
  justify-content:flex-start;
  gap:clamp(1rem,2vw,1.6rem);
  padding:.5rem 0;
}

/* Product imagery keeps its supplied aspect ratio at every breakpoint. */
.story-table--book .bd-cover-flat img,
.story-table--book .bd-cover-mock img{height:auto}

@media(max-width:1100px){
  .story-table--book .bd-hero{grid-template-columns:1fr;gap:2rem}
  .story-table--book .bd-hero > :last-child{order:2;justify-self:center}
  .story-table--book .bd-cover-stage{justify-content:center}
}

@media(max-width:680px){
  .story-table__chapter[data-story-table-chapter]{scroll-margin-top:6rem}
  .story-table--book .bd-hero{gap:1.5rem}
}