/* ========================================
   CHAPTER CONTENT FRAME
   Shared scaffolding for chapter pages.
   ======================================== */
body :is(main.chapter, .chapter) {
  padding: calc(var(--section-pad-y) * 0.5) 1rem calc(var(--section-pad-y) * 0.7);
}

body :is(main.chapter, .chapter) .chapter__paper {
  width: min(100%, var(--content-width));
  max-width: var(--content-width);
  min-height: var(--chapter-paper-min-height);
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body :is(main.chapter, .chapter) .chapter__header {
  margin: 0 0 clamp(2rem, 5vw, 4rem);
}

body :is(main.chapter, .chapter) .chapter__header h1 {
  margin: 0;
  line-height: 1.2;
}

body :is(main.chapter, .chapter) .chapter__lead {
  margin: 0.75rem 0 0;
  max-width: 62ch;
  line-height: 1.7;
}

/* ========================================
   STORY GRID LAYOUT
   Reusable editorial block pattern.
   ======================================== */
.story {
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(360px, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.story + .story {
  margin-top: clamp(56px, 8vw, 120px);
}

.story__media {
  align-self: start;
  justify-self: start;
}

.story__image {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
}

.story__text {
  align-self: start;
}

.story__text h2 {
  margin: 0 0 0.9rem;
  max-width: 24ch;
  line-height: 1.2;
  text-wrap: balance;
}

.story__text p,
.story__text li {
  margin: 0;
  max-width: 58ch;
  line-height: 1.7;
}

.story__text p + p {
  margin-top: 1rem;
}

.story__text ul {
  margin: 0;
  padding-left: 1.1rem;
}

/* ========================================
   ALTERNATING COMPOSITION
   Reverse rows for image-right layout.
   ======================================== */
.story--reverse .story__media {
  order: 2;
  justify-self: end;
}

.story--reverse .story__text {
  order: 1;
}

/* ========================================
   IMAGE DISPLAY MODE
   Reveal animation is disabled for chapter information images.
======================================== */
body :is(main.chapter, .chapter) .slide-in {
  opacity: 1;
  transform: none;
  transition: none;
}

body :is(main.chapter, .chapter) .story--reverse .slide-in {
  transform: none;
}

body :is(main.chapter, .chapter) .slide-in.active {
  opacity: 1;
  transform: none;
}

/* ========================================
   LEGACY CLASS SAFETY
   Neutralize old float helpers.
   ======================================== */
.align-left,
.align-right {
  float: none;
  margin: 0;
}

.site-wrap {
  max-width: none;
  margin: 0;
  background: transparent;
  padding: 0;
  text-align: left;
}

/* ========================================
   STORY RESPONSIVE STACK
   ======================================== */
@media (max-width: 900px) {
  .story {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }

  .story + .story {
    margin-top: 3rem;
  }

  .story--reverse .story__media,
  .story--reverse .story__text {
    order: initial;
    justify-self: start;
  }

  .story__image {
    max-width: min(100%, 640px);
  }

  .story__text h2,
  .story__text p {
    max-width: none;
  }
}