.story-page{
  max-width:920px;
  margin:0 auto;
}

.story-hero{
  padding:54px 0 34px;
  text-align:center;
}

.story-kicker{
  color:var(--accent);
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.story-hero h1{
  margin:12px 0 6px;
  font-size:clamp(2.5rem,7vw,5rem);
  line-height:1.05;
}

.story-subtitle{
  margin:0;
  color:var(--muted);
  font-size:1.2rem;
}

.story-facts{
  margin:26px auto 0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:9px;
}

.story-facts span{
  padding:7px 11px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel);
  color:#dce7f2;
  font-size:.84rem;
}

.accessibility-panel,
.summary-panel,
.character-panel,
.culture-panel,
.lesson-panel,
.vocabulary-panel,
.quiz-panel,
.faq-panel{
  margin:26px 0;
  padding:24px;
  border:1px solid var(--line);
  border-radius:17px;
  background:linear-gradient(145deg,var(--panel),var(--panel2));
}

.accessibility-panel{
  border-left:4px solid var(--accent);
}

.accessibility-panel h2,
.summary-panel h2,
.character-panel h2,
.culture-panel h2,
.lesson-panel h2,
.vocabulary-panel h2,
.quiz-panel h2,
.faq-panel h2{
  margin-top:0;
}

.chapter-nav{
  position:sticky;
  top:70px;
  z-index:10;
  margin:28px 0;
  padding:11px;
  display:flex;
  gap:8px;
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(7,17,31,.96);
}

.chapter-nav a{
  flex:0 0 auto;
  padding:7px 10px;
  border-radius:9px;
  text-decoration:none;
  color:var(--muted);
  font-size:.82rem;
}

.chapter-nav a:hover,
.chapter-nav a:focus{
  color:var(--text);
  background:var(--panel2);
}

.story-chapter{
  margin:56px 0;
  scroll-margin-top:140px;
}

.chapter-label{
  color:var(--accent);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.story-chapter h2{
  margin:7px 0 24px;
  font-size:clamp(1.7rem,4vw,2.55rem);
  line-height:1.25;
}

.story-text p{
  margin:0 0 1.35em;
  font-size:1.08rem;
  line-height:1.95;
  color:#e2eaf3;
}

.visual-summary{
  margin-top:26px;
  padding:19px 21px;
  border-left:3px solid var(--accent2);
  border-radius:0 13px 13px 0;
  background:#091625;
}

.visual-summary h3{
  margin:0 0 9px;
  color:var(--accent2);
  font-size:1rem;
}

.visual-summary ul{
  margin:0;
  padding-left:20px;
  color:var(--muted);
}

.character-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.character-card{
  padding:16px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#091625;
}

.character-card h3{
  margin:0 0 5px;
}

.character-card p{
  margin:4px 0;
  color:var(--muted);
}

.info-list{
  padding-left:21px;
}

.info-list li{
  margin:8px 0;
}

.vocabulary-table{
  width:100%;
  border-collapse:collapse;
}

.vocabulary-table th,
.vocabulary-table td{
  padding:10px;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
}

.question{
  margin:18px 0;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
}

.question:last-child{
  border-bottom:0;
}

.related-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.related-links a{
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  text-decoration:none;
  color:var(--accent);
}

@media(max-width:680px){
  .story-text p{
    font-size:1rem;
    line-height:1.85;
  }

  .character-grid{
    grid-template-columns:1fr;
  }

  .accessibility-panel,
  .summary-panel,
  .character-panel,
  .culture-panel,
  .lesson-panel,
  .vocabulary-panel,
  .quiz-panel,
  .faq-panel{
    padding:18px;
  }
}