/* 八上十九篇共用的纸本画卷样式；篇目题图在各自页面类中指定。 */
.grade-eight-20 .hero { background-image: url("grade8-20-yewang.jpg"); }
.grade-eight-21 .hero { background-image: url("grade8-21-huanghelou.jpg"); }
.grade-eight-22 .hero { background-image: url("grade8-22-saishang.jpg"); }
.grade-eight-23 .hero { background-image: url("grade8-23-jingmen.jpg"); }
.grade-eight-24 .hero { background-image: url("grade8-24-qiantang.jpg"); }
.grade-eight-25 .hero { background-image: url("grade8-25-yinjiu.jpg"); }
.grade-eight-26 .hero { background-image: url("grade8-26-chunwang.jpg"); }
.grade-eight-27 .hero { background-image: url("grade8-27-yanmen.jpg"); }
.grade-eight-28 .hero { background-image: url("grade8-28-chibi.jpg"); }
.grade-eight-29 .hero { background-image: url("grade8-29-yujiaao.jpg"); }
.grade-eight-30 .hero { background-image: url("grade8-30-sanxia.jpg"); }
.grade-eight-31 .hero { background-image: url("grade8-31-xiezhongshu.jpg"); }
.grade-eight-32 .hero { background-image: url("grade8-32-chengtian.jpg"); }
.grade-eight-33 .hero { background-image: url("grade8-33-zhuyuansi.jpg"); }
.grade-eight-34 .hero { background-image: url("grade8-34-dedao.jpg"); }
.grade-eight-35 .hero { background-image: url("grade8-35-fugui.jpg"); }
.grade-eight-36 .hero { background-image: url("grade8-36-youhuan.jpg"); }
.grade-eight-37 .hero { background-image: url("grade8-37-yugong.jpg"); }
.grade-eight-38 .hero { background-image: url("grade8-38-xiliu.jpg"); }

.grade-eight-page .hero { position: relative; }
.grade-eight-page .hero-content { position: relative; z-index: 1; width: min(59%, 735px); }
.grade-eight-page .hero-lead { max-width: 510px; }
.grade-eight-page .hero h1 {
  font-size: clamp(49px,5.8vw,80px);
  line-height: 1.24;
  letter-spacing: .035em;
}
.grade-eight-page .reading-sheet {
  overflow: hidden;
  border: 1px solid #b9ae9b;
  border-radius: 0;
  background: #fbf8f0;
  box-shadow: 0 14px 30px rgba(43,38,28,.07);
}
.grade-eight-page .reading-unit {
  display: grid;
  grid-template-columns: minmax(0,1.72fr) minmax(350px,1fr);
  min-height: 105px;
  border-top: 1px solid #c9c0b2;
}
.grade-eight-page .reading-unit:first-child { border-top: 0; }
.grade-eight-page .reading-unit .original-cell {
  min-height: 105px;
  padding: 22px 65px 28px 26px;
}
.grade-eight-page .title-unit .original-cell {
  min-height: 116px;
  background: #f2ecdf;
}
.grade-eight-page .verse {
  color: #263336;
  font-size: clamp(24px,2.5vw,32px);
  line-height: 1.83;
}
.grade-eight-page .prose-text {
  color: #263336;
  font-size: clamp(21px,2vw,26px);
  line-height: 2.08;
}
.grade-eight-page .title-unit .verse,
.grade-eight-page .title-unit .prose-text {
  font: 800 clamp(27px,2.9vw,38px)/1.45 "Noto Serif SC", "Songti SC", serif;
  text-align: center;
}
.grade-eight-page .translation-cell {
  min-width: 0;
  padding: 22px 26px;
  border-left: 1px solid #c4b9a6;
  background: #f7f1e4;
}
.grade-eight-page .translation-cell p {
  color: #34403c;
  font: 600 18px/1.8 "Noto Serif SC", "Songti SC", serif;
}
.grade-eight-page .translate-toggle {
  right: 15px;
  bottom: 15px;
  width: 34px;
  height: 34px;
  border: 1px solid #9e4435;
  border-radius: 0;
  background: #a94737;
  color: #fff9ed;
  font-size: 14px;
}
.grade-eight-page .translate-toggle[aria-pressed="true"] { background: #6e2f29; color: #fff; }
.grade-eight-page .small-button {
  min-height: 37px;
  padding: 7px 13px;
  border: 1px solid #a99b87;
  border-radius: 0;
  background: #faf7ef;
  color: #292c2a;
  font: 700 13px "Noto Serif SC", "Songti SC", serif;
}
.grade-eight-page .small-button.primary { border-color: #a94737; background: #a94737; color: #fff9ed; }
.grade-eight-page .marker.culture { border-color: #8e3e32; color: #8e3e32; }
.grade-eight-page .marker.key::before { background: #a94737; border-color: #8e3e32; }

@media (max-width: 900px) {
  .grade-eight-page .reading-unit { display: block; }
  .grade-eight-page .translation-cell { border-left: 0; border-top: 1px solid #c4b9a6; }
  .grade-eight-page .translation-cell[data-visible="false"] { display: none; }
  .grade-eight-page .translation-cell p { font-size: 17px; }
}

@media (max-width: 700px) {
  .grade-eight-page .hero { min-height: 485px; background-position: 68% top; }
  .grade-eight-page .hero-content { width: 100%; padding-top: 245px; }
  .grade-eight-page .hero h1 { font-size: clamp(35px,9vw,48px); line-height: 1.2; }
  .grade-eight-page .hero-lead { font-size: 13px; }
  .grade-eight-page .reading-unit .original-cell { min-height: 94px; padding: 19px 48px 25px 12px; }
  .grade-eight-page .title-unit .original-cell { min-height: 101px; }
  .grade-eight-page .verse { font-size: 24px; line-height: 1.78; }
  .grade-eight-page .prose-text { font-size: 19px; line-height: 2.17; }
  .grade-eight-page .title-unit .verse,
  .grade-eight-page .title-unit .prose-text { font-size: 29px; }
  .grade-eight-page .translation-cell { padding: 17px 19px; }
  .grade-eight-page .translate-toggle { right: 10px; bottom: 13px; width: 32px; height: 32px; }
}

@media (max-width: 360px) {
  .grade-eight-page .hero-content { padding-top: 225px; }
  .grade-eight-page .verse { font-size: 22px; }
  .grade-eight-page .prose-text { font-size: 18px; }
  .grade-eight-page .title-unit .verse,
  .grade-eight-page .title-unit .prose-text { font-size: 26px; }
}