/* NEVAЯ print — storyline background layer system */
.sheet.story-piece {
  position: relative;
  overflow: hidden;
}

.story-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* v2 — Stitch-world hero art per act (was SVG gradient placeholders) */
.story-piece--00 .story-bg { background-image: url('/print-kit/art/hero-00-box.png'); background-position: 78% center; }
.story-piece--01 .story-bg { background-image: url('/print-kit/art/bg-01-wall.svg'); } /* wall = separate 8x10 Hero+Scan-Dock template */
.story-piece--02 .story-bg { background-image: url('/print-kit/art/hero-02-tent.png'); }
.story-piece--03 .story-bg { background-image: url('/print-kit/art/hero-03-rules.png'); }
.story-piece--04 .story-bg { background-image: url('/print-kit/art/hero-04-host.png'); }
.story-piece--05 .story-bg { background-image: url('/print-kit/art/hero-05-staff.png'); }
.story-piece--06 .story-bg { background-image: url('/print-kit/art/hero-06-contact.png'); }

/* v2 legibility: frame is transparent; the scrim below is the panel (art band on top → solid parchment for body text). */
.story-piece .frame {
  position: relative;
  z-index: 1;
  background: transparent;
}

.story-piece--05 .frame.inner {
  background: transparent;
}

/* Art-band → solid-panel: top ~9% pure art (header sits on it), fades to ~solid parchment for all body copy. */
.story-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(245, 240, 224, 0) 0%,
    rgba(245, 240, 224, 0) 9%,
    rgba(245, 240, 224, 0.94) 24%,
    rgba(245, 240, 224, 0.975) 100%
  );
}
/* small landscape card — go solid sooner so the short body stays crisp */
.story-piece--06 .story-scrim {
  background: linear-gradient(180deg,
    rgba(245,240,224,0) 0%, rgba(245,240,224,0.90) 30%, rgba(245,240,224,0.965) 100%);
}
/* staff = dark card keeps its ink scrim */
.story-piece--05 .story-scrim {
  background: linear-gradient(135deg, rgba(12,9,5,0.15) 0%, rgba(58,42,26,0.55) 100%);
}

/* grow to fill the (flex-column) .inner so ol{flex:1}/margin-top:auto anchor footers → no bottom-clip */
.story-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.story-piece--06 .story-content { justify-content: space-between; }
/* rules: center the content block on the SHEET (fixed 8.5in height) so it's balanced + footer shows */
.sheet.story-piece--03 { display: flex; flex-direction: column; justify-content: center; }
.story-piece--03 .frame.inner { height: auto; }
/* headers ride the top art band — keep them legible */
.story-content h1,
.story-content .eyebrow,
.story-content .lead,
.story-content header { text-shadow: 0 1px 3px rgba(245, 240, 224, 0.85); }

.story-chapter {
  position: absolute;
  z-index: 3;
  font-size: 6.5pt;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
  font-weight: 700;
}

/* legible on any art: small parchment chip (staff keeps its dark-card gold, excluded) */
.story-piece:not(.story-piece--05) .story-chapter {
  background: rgba(245, 240, 224, 0.85);
  padding: 0.03in 0.09in;
  border-radius: 3px;
  color: #8a6a1e;
}
.story-chapter { text-shadow: none; }
.story-chapter--tl { top: 0.2in; left: 0.22in; }
.story-chapter--tr { top: 0.2in; right: 0.22in; text-align: right; }
.story-chapter--bl { bottom: 0.16in; left: 0.22in; }
.story-chapter--br { bottom: 0.16in; right: 0.22in; text-align: right; }

.story-whisper {
  font-style: italic;
  font-size: 0.92em;
  color: var(--ink-light);
}

.story-kicker {
  display: block;
  font-size: 7.5pt;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.04in;
}