/* Acts 4-5 (Claude): flow sections on the same table, the lamp a little lower. Copy on paper. */
.act-endpaper, .act-author { position: relative; padding: 16vh 6vw 14vh; overflow: hidden;
  background: linear-gradient(var(--sc-canvas), rgba(26,18,12,0) 20vh), linear-gradient(rgba(16,10,6,.62), rgba(16,10,6,.7)), url(../assets/table.webp) center 70% / cover var(--sc-canvas); }
.act-endpaper::before, .act-author::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 12% 0%, rgba(232,181,106,.16), transparent 70%) 0 18vh / 100% 100% no-repeat; }

/* the author's section hands over to the back cover through the dark of the room, never a hard edge */
.act-author::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18vh; pointer-events: none;
  background: linear-gradient(rgba(26,18,12,0), var(--sc-canvas)); }

.act-author > * { position: relative; z-index: 1; }

/* act 4: the endpaper. Quiet, printed, slow; one small flame drawn in ink as you read */
.endpaper { position: relative; max-width: 62rem; margin: 0 auto 0 4vw; display: grid; grid-template-columns: 9rem 1fr; gap: 3.5rem;
  padding: 4.5rem 5rem 4rem 3.5rem; background: var(--grain), var(--paper); color: var(--ink); rotate: -.6deg;
  box-shadow: -4px 18px 34px rgba(6,3,1,.6), 0 1px 2px rgba(6,3,1,.5); }
.endpaper::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, rgba(42,30,18,.16), transparent 7%); }
.flame { width: 100%; height: auto; align-self: center; overflow: visible; }
.flame__ink { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - min(1, max(0, (var(--sc-p, 1) - .15) * 2.6))); }
.endpaper__text { max-width: 36rem; }
.endpaper__q { font-family: var(--sc-font-display); font-style: italic; font-size: clamp(1.7rem, 2.4vw, 2.3rem); line-height: 1.18;
  margin: 0 0 1.6rem; color: var(--ink); text-wrap: pretty; }
.endpaper__end { font-size: 1.22rem; line-height: 1.6; margin: 2.2rem 0 .6rem; color: var(--ink); max-width: 34rem; }

/* act 5: the one who tells the saga - her real photo as a print clipped into the book */
.act-author { display: grid; grid-template-columns: minmax(0, 36rem) minmax(0, 22rem); justify-content: center; gap: 0 5vw; align-items: start; }
.author__text { grid-column: 1; grid-row: 1; background: var(--grain), var(--paper); color: var(--ink); padding: 3.6rem 3.8rem 3rem;
  rotate: .5deg; box-shadow: -4px 18px 34px rgba(6,3,1,.6), 0 1px 2px rgba(6,3,1,.5); }
.author__text h2 { font-family: var(--sc-font-display); font-style: italic; font-weight: 500; font-size: clamp(2.2rem, 3.2vw, 3rem);
  line-height: 1; margin: 0 0 1.4rem; color: var(--ink); }
.author__text p { font-size: 1.15rem; line-height: 1.62; margin: 0 0 1rem; }
.author__q { margin: 1.4rem 0 1.6rem; padding: 0 0 0 1.3rem; border-left: 2px solid var(--red); }
.author__q p { font-family: var(--sc-font-display); font-style: italic; font-size: 1.5rem; line-height: 1.25; margin: 0 0 .7rem; }
.author__adult { margin-top: 1.6rem !important; padding-top: 1.1rem; border-top: 1px solid rgba(42,33,25,.2); font-size: 1.05rem !important; color: var(--ink-soft); }
.print { grid-column: 2; grid-row: 1; position: relative; margin: 8rem 0 0 -3vw; background: #F6F0E2; padding: .9rem .9rem 3rem; rotate: 3.5deg;
  box-shadow: -6px 16px 26px rgba(6,3,1,.6), 0 1px 2px rgba(6,3,1,.5); }
.print img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; filter: sepia(.12) saturate(.92); }
.print figcaption { position: absolute; left: 1rem; right: 1rem; bottom: .8rem; font-size: .95rem; font-style: italic; color: var(--ink-soft); }
/* a brass paper clip holding the print */
.print__clip { position: absolute; top: -1.6rem; left: 2.2rem; width: 1.1rem; height: 4.2rem; border: 2.5px solid #B89A5E; border-radius: .6rem;
  box-shadow: 1px 2px 2px rgba(0,0,0,.35); rotate: -4deg; }
.print__clip::after { content: ""; position: absolute; inset: .45rem .2rem .9rem; border: 2.5px solid #B89A5E; border-top: 0; border-radius: 0 0 .5rem .5rem; }


/* ---------- phone: LAST ---------- */
@media (max-width: 700px) {
  .act-endpaper, .act-author { padding: 10vh 4vw 9vh 4vw; }
  .endpaper { grid-template-columns: 1fr; gap: 1.2rem; margin: 0 12vw 0 0; padding: 2.2rem 1.5rem 2rem; }
  .flame { width: 4.5rem; }
  .endpaper__q { font-size: 1.45rem; }
  .endpaper__end { font-size: 1.05rem; }
  .act-author { grid-template-columns: 1fr; padding-right: 12vw; }
  .author__text { grid-row: 2; padding: 2.2rem 1.5rem 1.8rem; }
  .author__text p { font-size: 1.02rem; }
  .author__q p { font-size: 1.25rem; }
  .print { grid-column: 1; grid-row: 1; margin: 0 auto 1.6rem; width: 66%; z-index: 1; padding-bottom: 3.8rem; }
}