.story-section {
  margin-top: 28px;
  padding: 48px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(145deg, #fffdf7 0%, #eef2e6 100%);
  box-shadow: var(--shadow);
}

.story-intro {
  display: grid;
  grid-template-columns: 0.8fr 1.5fr;
  column-gap: 40px;
  align-items: start;
}

.story-intro .eyebrow { grid-column: 1 / -1; }

.story-intro h2 {
  margin: 0;
  font: 700 clamp(34px, 4vw, 52px) / 1.08 Fraunces, serif;
  letter-spacing: -0.035em;
}

.story-intro > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
}

.story-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 38px;
}

.story-steps article {
  padding: 24px;
  border: 1px solid rgba(24, 53, 45, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.story-steps span {
  display: block;
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.story-steps h3,
.story-future h3 {
  margin: 14px 0 8px;
  font: 700 23px / 1.15 Fraunces, serif;
}

.story-steps p,
.story-future > p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.story-future {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 36px;
  align-items: center;
  margin-top: 18px;
  padding: 28px;
  border-radius: 14px;
  background: var(--ink);
  color: white;
}

.story-future .eyebrow { color: #bcd5c8; margin-bottom: 8px; }
.story-future h3 { margin: 0; }
.story-future > p { color: #d6e2dc; }

@media (max-width: 900px) {
  .story-intro,
  .story-future { grid-template-columns: 1fr; }
  .story-steps { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .story-section { padding: 28px 22px; }
}

.xp-economy { margin: 8px 0 14px; padding: 9px 11px; border-radius: 8px; background: var(--sage); color: var(--ink); font-size: 10px; line-height: 1.45; }

.complete-book-meta {
  margin: 0 0 10px;
  color: var(--green) !important;
  font-size: 10px !important;
  font-weight: 700;
}

.chapter-navigation {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin: 24px 0 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f4f1e7;
}

.chapter-navigation label span {
  display: block;
  margin-bottom: 6px;
  color: var(--green);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.chapter-navigation select {
  width: 100%;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  color: var(--ink);
  font: inherit;
}

.chapter-navigation button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

@media (max-width: 700px) {
  .chapter-navigation { grid-template-columns: 1fr 1fr; }
  .chapter-navigation label { grid-column: 1 / -1; grid-row: 1; }
}

html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; }

@media (max-width: 600px) {
  .welcome { min-width: 0; }
  .welcome h1, .welcome p, .page-intro h1, .page-intro p { overflow-wrap: anywhere; }
  .hero-actions, .mini-stats { flex-wrap: wrap; }
  .hero-actions { gap: 16px; }
  .companion-card { width: 100%; transform: none; }
  .chapter-navigation { grid-template-columns: 1fr; }
  .chapter-navigation label { grid-column: auto; grid-row: auto; }
  .chapter-navigation button { width: 100%; }
}