@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Libre+Baskerville:wght@400;700&display=swap');
:root{--ink:#173f31;--text:#292d2b;--muted:#6d746f;--paper:#fffdf8;--cream:#f7f1e7;--line:#e7dfd2;--sage:#e8f1dc;--sage2:#dce8cf;--gold:#bb8b4a;--coral:#c9675c;--shadow:0 8px 30px rgba(52,67,56,.08)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fbfaf6;color:var(--text);font-family:'DM Sans',Arial,sans-serif;line-height:1.65}.hero{height:300px;background:linear-gradient(90deg,rgba(255,253,247,.95) 0%,rgba(255,253,247,.72) 34%,rgba(255,255,255,.04) 68%),url('../../images/anne-of-green-gables/hero.webp') center/cover no-repeat;border-bottom:1px solid var(--line);position:relative}.brand-wrap{max-width:1200px;margin:auto;padding:58px 34px}.brand{font:700 54px/1 'Libre Baskerville',serif;color:var(--ink);text-decoration:none;letter-spacing:-2px}.brand.small{font-size:26px;letter-spacing:-1px}.leaf{display:inline-block;font-size:15px;margin-left:7px;color:#59855c;transform:rotate(-20deg)}.brand-wrap p{font-size:18px;margin-top:18px;color:#303a34}.shell{max-width:1210px;margin:-18px auto 40px;padding:0 20px;display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:22px;position:relative}.books{display:flex;flex-direction:column;gap:14px}.book-card{background:rgba(255,253,249,.97);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}.book-head{display:grid;grid-template-columns:94px minmax(0,1fr) auto;gap:20px;align-items:center;padding:18px 22px;cursor:pointer}.book-cover{width:94px;height:135px;object-fit:cover;border-radius:7px;box-shadow:0 4px 12px rgba(47,43,34,.15)}.book-title{font:700 27px/1.25 'Libre Baskerville',serif;color:var(--ink);margin:0}.author{color:var(--muted);margin:5px 0 7px}.book-desc{margin:0;max-width:650px;color:#3c443f}.count,.soon{display:inline-flex;align-items:center;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600;margin-top:9px}.count{background:var(--sage);color:#345c37}.soon{background:#fff0d9;color:#95611f}.chev{font-size:22px;color:var(--ink);transition:.2s}.book-card.open .chev{transform:rotate(180deg)}.chapter-list{max-height:0;overflow:hidden;transition:max-height .45s ease;border-top:0 solid var(--line)}.book-card.open .chapter-list{max-height:2400px;border-top-width:1px}.chapter-row{display:grid;grid-template-columns:110px minmax(0,1fr) 24px;gap:12px;align-items:center;padding:12px 20px;border-top:1px solid #eee8df;color:var(--text);text-decoration:none;background:#fffdf9}.chapter-row:first-child{border-top:0}.chapter-row:hover{background:#f3f7eb}.chapter-no{font-weight:600;color:#244b39}.arrow{font-size:22px;color:#6d7f73}.rail{display:flex;flex-direction:column;gap:14px}.rail-card{background:#fffdf8;border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow)}.rail-card h2,.rail-card h3{font-family:'Libre Baskerville',serif;color:var(--ink);margin:3px 0 12px}.rail-icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--sage);font-size:24px;color:var(--ink)}.steps p{font-size:14px;margin:16px 0}.note{font-family:'Libre Baskerville',serif;font-style:italic;color:#4c544f}.lesson-top{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 max(20px,calc((100vw - 1180px)/2));border-bottom:1px solid var(--line);background:#fffdf8;position:sticky;top:0;z-index:20}.allchapters{color:var(--ink);text-decoration:none;font-weight:600}.lesson-shell{max-width:1120px;margin:32px auto;padding:0 20px}.crumb{font-size:14px;color:#577261;margin-bottom:12px}.lesson-title{font:700 42px/1.2 'Libre Baskerville',serif;color:var(--ink);margin:0 0 24px}.chapter-num{display:inline-block;background:var(--sage);border-radius:999px;padding:5px 11px;font-size:13px;font-weight:600;margin-bottom:10px}.chapter-art{width:100%;aspect-ratio:16/8.3;object-fit:cover;border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow);margin-bottom:28px}.lesson-content{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}.lesson-section{background:#fffdf9;border:1px solid var(--line);border-radius:16px;padding:26px 28px}.lesson-section h2{font:700 23px 'Libre Baskerville',serif;color:var(--ink);margin:0 0 16px}.lesson-section h3{color:var(--ink);margin-top:18px}.dialogue{padding:11px 14px;border-left:3px solid #a6be89;background:#f7f9f2;border-radius:4px;margin:7px 0}.term-list{display:grid;gap:9px;padding:0;list-style:none}.term-list li{padding:10px 12px;background:#faf7f0;border-radius:10px}.term-list strong{color:#315d40}.practice{display:grid;gap:16px}.q{border:1px solid var(--line);border-radius:13px;padding:18px;background:#fff}.q p{margin-top:0;font-weight:600}.opts{display:grid;gap:9px}.opt{padding:11px 13px;border:1px solid #ded8ce;border-radius:10px;background:#fff;cursor:pointer;text-align:left;font:inherit}.opt:hover,.opt.selected{border-color:#7c9b72;background:#f0f6e8}.fill{width:100%;padding:12px;border:1px solid #d9d2c8;border-radius:9px;font:inherit}.check{margin-top:12px;background:var(--ink);color:#fff;border:0;border-radius:9px;padding:10px 17px;font-weight:600;cursor:pointer}.result{display:none;margin-top:10px;padding:10px 12px;border-radius:8px}.result.show{display:block}.result.ok{background:#edf6e7;color:#2e6235}.result.no{background:#fff0ed;color:#8c443c}.lesson-nav{display:flex;justify-content:space-between;gap:10px;margin:24px 0}.navbtn{display:block;padding:11px 16px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink);background:#fff}footer{text-align:center;padding:28px 20px 38px;color:#747972;font-size:12px;border-top:1px solid #eee8df;margin-top:35px}@media(max-width:850px){.hero{height:220px;background-position:58% center}.brand-wrap{padding:40px 22px}.brand{font-size:38px}.brand-wrap p{font-size:15px}.shell{grid-template-columns:1fr;margin-top:14px}.rail{display:none}.book-head{grid-template-columns:70px minmax(0,1fr) auto;padding:14px}.book-cover{width:70px;height:102px}.book-title{font-size:20px}.book-desc{font-size:13px}.chapter-row{grid-template-columns:90px minmax(0,1fr) 18px;padding:12px 14px;font-size:14px}.lesson-title{font-size:32px}.lesson-section{padding:20px}.chapter-art{aspect-ratio:4/3}}@media(max-width:520px){.hero{height:190px}.brand{font-size:33px}.book-head{grid-template-columns:58px 1fr auto;gap:12px}.book-cover{width:58px;height:84px}.book-title{font-size:18px}.author,.book-desc{display:none}.chapter-row{grid-template-columns:80px minmax(0,1fr) 16px;font-size:13px}.lesson-top{height:66px}.lesson-title{font-size:28px}.chapter-art{border-radius:12px}.lesson-section{border-radius:12px;padding:17px}.lesson-nav{font-size:13px}.shell{padding:0 12px}.lesson-shell{padding:0 12px}}
/* Final EnglishBook refinements */
.book-head{width:100%;border:0;background:transparent;text-align:left;font:inherit;color:inherit}.book-head:disabled{cursor:default;opacity:1}.book-head:focus-visible,.chapter-row:focus-visible,.opt:focus-visible,.check:focus-visible,.navbtn:focus-visible{outline:3px solid #9db38a;outline-offset:3px}.book-copy{display:block}.book-copy .book-title,.book-copy .author,.book-copy .book-desc{display:block}.dialogue{display:grid;grid-template-columns:max-content 1fr;gap:8px}.dialogue-note{font-size:14px;color:var(--muted);margin-top:-4px}.term-list li{display:flex;gap:4px;flex-wrap:wrap}.practice-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:15px}.practice-heading h2{margin:2px 0 0}.eyebrow{text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:700;color:#66805e}.question-count{font-size:12px;background:var(--sage);padding:5px 10px;border-radius:999px;color:#365b38}.q{position:relative;padding-left:58px}.q-number{position:absolute;left:18px;top:18px;width:27px;height:27px;border-radius:50%;background:var(--sage);color:#365b38;display:grid;place-items:center;font-weight:700;font-size:12px}.error-card{background:#fffdf9;border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:var(--shadow)}.error-card h2{font-family:'Libre Baskerville',serif;color:var(--ink);margin-top:0}
@media(max-width:520px){.q{padding-left:48px}.q-number{left:13px}.practice-heading{align-items:flex-start;flex-direction:column}.book-head{padding:14px}}

/* Anne signature hat above the quote card */
.note{overflow:visible;text-align:left;padding-top:18px}.anne-hat{display:block;width:108px;height:auto;margin:-2px auto 10px;filter:drop-shadow(0 4px 5px rgba(70,58,38,.10))}.note p{margin:0;font-family:'Libre Baskerville',serif;font-style:italic;color:#4c544f;line-height:1.65}@media(max-width:850px){.anne-hat{width:96px}}

.quiz-dialogue{background:#faf8f1;border:1px solid var(--line);border-radius:11px;padding:12px 14px;margin:10px 0 13px}.quiz-dialogue p{margin:5px 0;font-weight:400}.quiz-dialogue strong{color:var(--ink)}.order-help{font-size:13px;color:var(--muted);margin-bottom:9px}.order-tokens{display:flex;gap:8px;flex-wrap:wrap}.order-token,.order-chip,.order-reset{padding:9px 12px;border:1px solid #d8d1c6;border-radius:9px;background:#fff;font:inherit;cursor:pointer}.order-token:hover,.order-chip:hover{border-color:#7c9b72;background:#f0f6e8}.order-token:disabled{opacity:.4;cursor:default}.order-answer{display:flex;gap:8px;flex-wrap:wrap;min-height:50px;margin:10px 0;border:1px dashed #b9b0a3;border-radius:10px;padding:9px;background:#fbfaf6}.order-chip{background:#eef4e7;border-color:#b9c9aa}.order-reset{background:#fff;color:var(--ink);margin-top:0}.order-token:focus-visible,.order-chip:focus-visible,.order-reset:focus-visible{outline:3px solid #9db38a;outline-offset:2px}

/* Mobile layout safety — keep lesson pages compact and app-like */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.lesson-shell,
.lesson-content,
.lesson-section,
.practice,
.q,
.dialogue,
.quiz-dialogue,
.term-list,
.term-list li,
.opts,
.order-answer,
.lesson-nav,
.navbtn {
  min-width: 0;
  max-width: 100%;
}

.lesson-section p,
.lesson-section li,
.dialogue span,
.quiz-dialogue p,
.q p,
.result,
.navbtn {
  overflow-wrap: break-word;
  word-break: normal;
}

.lesson-section a {
  overflow-wrap: anywhere;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

.order-token,
.order-chip,
.order-reset,
.opt,
.check {
  max-width: 100%;
  white-space: normal;
}

@media (max-width: 520px) {
  /* Speaker names such as “Mrs. Rachel Lynde” must not create a wide grid column. */
  .dialogue {
    display: block;
    padding: 10px 12px;
  }

  .dialogue strong,
  .dialogue span {
    display: inline;
  }

  .dialogue strong {
    margin-right: 4px;
  }

  .lesson-content {
    gap: 14px;
  }

  .lesson-section {
    width: 100%;
  }

  .lesson-nav {
    align-items: stretch;
  }

  .navbtn {
    flex: 1 1 0;
    text-align: center;
  }
}

/* Story Summary read-aloud controls */
.story-audio{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:-10px 0 20px;
  padding:0 2px;
}

.story-audio-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:38px;
  padding:8px 13px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fffdf8;
  color:var(--ink);
  font:600 13px/1.2 inherit;
  cursor:pointer;
  box-shadow:0 2px 7px rgba(47,43,34,.04);
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}

.story-audio-btn:hover:not(:disabled){
  background:#f0f6e8;
  border-color:#9ab08b;
}

.story-audio-btn:active:not(:disabled){
  transform:translateY(1px);
}

.story-audio-btn:disabled{
  opacity:.45;
  cursor:default;
}

.story-audio-btn:focus-visible{
  outline:3px solid #9db38a;
  outline-offset:3px;
}

.story-listen{
  background:var(--sage);
  border-color:#b7c9a6;
  color:#315d40;
}

.story-audio-status{
  min-height:1em;
  margin-left:3px;
  font-size:12px;
  color:var(--muted);
}

.story-audio.audio-unsupported .story-audio-status{
  color:#8c443c;
}

@media(max-width:520px){
  .story-audio{
    gap:7px;
    margin:-8px 0 16px;
  }

  .story-audio-btn{
    padding:8px 11px;
    font-size:12px;
  }

  .story-audio-status{
    flex:1 0 100%;
    margin:0 2px;
  }
}

/* Read-aloud speed controls */
.story-speed-control{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:38px;
  padding:5px 6px 5px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fffdf8;
  max-width:100%;
}

.story-speed-title{
  flex:0 0 auto;
  margin-right:2px;
  color:var(--muted);
  font-size:12px;
  font-weight:650;
}

.story-speed-btn{
  flex:0 0 auto;
  min-width:48px;
  min-height:28px;
  padding:5px 8px;
  border:1px solid transparent;
  border-radius:999px;
  background:transparent;
  color:var(--ink);
  font:700 12px/1 inherit;
  cursor:pointer;
}

.story-speed-btn:hover{
  background:#f0f6e8;
}

.story-speed-btn.active{
  background:var(--sage);
  border-color:#b7c9a6;
  color:#315d40;
}

.story-speed-btn:focus-visible{
  outline:2px solid #9db38a;
  outline-offset:2px;
}

/* On phones the speed selector gets its own full-width row.
   This prevents it from being pushed off-screen beside the audio buttons. */
@media(max-width:600px){
  .story-audio{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
    width:100%;
  }

  .story-audio-btn{
    width:100%;
    min-width:0;
    padding:8px 6px;
  }

  .story-audio-btn span{
    white-space:normal;
  }

  .story-speed-control{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:auto repeat(3,minmax(0,1fr));
    align-items:center;
    width:100%;
    min-width:0;
    padding:6px 7px 6px 10px;
    border-radius:12px;
  }

  .story-speed-btn{
    width:100%;
    min-width:0;
    padding:7px 5px;
  }

  .story-audio-status{
    grid-column:1 / -1;
    width:100%;
    margin:0 2px;
  }
}