.about-page .scenery { height: 900px; }
.about-page .scenery img { object-position: center top; }
.about-page .scenery::after { background: linear-gradient(180deg, rgb(4 10 15 / 30%), rgb(8 18 25 / 75%) 45%, var(--night) 100%), radial-gradient(ellipse at 50% 35%, rgb(4 11 17 / 60%), transparent 80%); }
.about-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; max-width: 1040px; margin-inline: auto; padding-block: 24px; border-bottom: 1px solid var(--line); }
.about-back { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; color: #d4c5a9; }
.about-back:hover { color: var(--gold); }
.about-main { width: 100%; max-width: 1040px; margin-inline: auto; padding-bottom: 64px; }
.about-intro { max-width: 820px; padding-block: 74px 56px; }
.about-intro h1 { font-size: clamp(40px, 4.5vw, 66px); line-height: 1.12; }
.about-lead { max-width: 710px; margin: 24px 0 0; color: #c7cece; font-size: 16px; line-height: 1.9; text-wrap: pretty; }
.chapter { display: grid; grid-template-columns: 235px 1fr; gap: 64px; padding-block: 43px; border-top: 1px solid var(--line); }
.chapter header .eyebrow { font-size: 9px; letter-spacing: 1.8px; }
.chapter h2 { margin: 15px 0 0; color: #ead8b7; font-family: Georgia, "Times New Roman", serif; font-size: 28px; font-weight: 400; line-height: 1.3; }
.chapter-body > p { margin: 0 0 18px; color: #bec7c9; font-size: 14px; line-height: 1.95; text-wrap: pretty; }
.chapter-body > p:last-child { margin-bottom: 0; }
.play-loop { margin: 26px 0 0; padding: 0; list-style: none; counter-reset: step; }
.play-loop li { position: relative; padding: 0 0 22px 42px; counter-increment: step; }
.play-loop li:last-child { padding-bottom: 0; }
.play-loop li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 3px; color: #a98d5a; font-size: 10px; letter-spacing: 1px; }
.chapter h3 { margin: 0 0 7px; color: #e5d4b5; font-size: 15px; font-weight: 500; }
.play-loop p, .class-list p { margin: 0; color: #aebbc0; font-size: 13px; line-height: 1.85; }
.class-list { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 30px; margin-block: 28px 36px; }
.class-list article { border-left: 1px solid #76623f; padding-left: 17px; }
.class-list h3 { font-family: Georgia, "Times New Roman", serif; font-size: 21px; font-weight: 400; }
.kingdoms { display: flex; flex-wrap: wrap; gap: 24px; padding: 0; margin: 17px 0; list-style: none; }
.kingdoms li { display: flex; align-items: center; gap: 8px; color: #e0d5c3; font-family: Georgia, "Times New Roman", serif; font-size: 17px; }
.kingdoms li::before { content: ""; width: 5px; height: 12px; background: #c15454; }
.kingdoms li:nth-child(2)::before { background: #c7a352; }
.kingdoms li:nth-child(3)::before { background: #5c87b6; }
.about-outro { text-align: center; padding-top: 40px; border-top: 1px solid var(--line); }
.about-outro blockquote { max-width: 730px; margin: 0 auto 20px; color: #ead3a9; font-family: Georgia, "Times New Roman", serif; font-size: clamp(26px, 3vw, 35px); font-style: italic; line-height: 1.4; }
.about-outro p { max-width: 560px; margin: 0 auto 26px; color: #adb9be; font-size: 13px; line-height: 1.85; }
.about-return { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 45px; padding: 10px 22px; border: 1px solid #84704b; border-radius: 3px; color: #ead3a9; font-size: 12px; }
.about-return:hover { background: #18242b; border-color: var(--gold); }
@media (max-width: 800px) {
  .chapter { grid-template-columns: 180px 1fr; gap: 32px; }
  .about-intro { padding-top: 50px; }
}
@media (max-width: 600px) {
  .about-top { padding-block: 18px; gap: 16px; }
  .about-top .wordmark img { width: 110px; }
  .about-back { font-size: 10px; }
  .about-main { padding-bottom: 42px; }
  .about-intro { padding-block: 42px 32px; }
  .about-intro h1 { font-size: 39px; letter-spacing: -1px; }
  .about-lead { font-size: 14px; margin-top: 20px; line-height: 1.85; }
  .chapter { grid-template-columns: 1fr; gap: 22px; padding-block: 30px; }
  .chapter h2 { max-width: 340px; margin-top: 10px; font-size: 27px; }
  .chapter-body > p { font-size: 13px; line-height: 1.9; }
  .class-list { gap: 24px 20px; }
  .class-list p { font-size: 12px; }
  .kingdoms { gap: 20px; }
  .about-outro { padding-top: 30px; }
}
@media (max-width: 350px) {
  .class-list { grid-template-columns: 1fr; }
  .about-intro h1 { font-size: 35px; }
}