/* Source theme: 9th grade English "THEME 2 / CLASSROOM LIFE" palette, sampled from the card.
   Card colours: paper #fdf3ea, section band #fbdfc9, orange circle #ee8256, dark rust #8f1d10,
   card peach #fcecdc, ink #2b2927, teal accent #3d7a78.
   The control geometry, control model and navigation are not redesigned; only colour. */
:root{
  --orange:#ee8256;
  --rust:#8f1d10;
  --cream:#fdf3ea;
  --peach:#fbdfc9;
  --gray:#f4efe8;
  --ink:#2b2927;
  --accent:#3d7a78;
  --tint:#fdf1e7;
  --line:#e6cfbb;
}
body{background:#f4ece4}
.masthead{background:var(--cream);border-right:18px solid var(--orange)}
.brand{background:var(--orange)}
.hero-mark{left:186px;top:36px;width:140px;height:140px;border-radius:50%;object-fit:cover;opacity:1;z-index:2}
.subject strong{color:#e8663c;font-size:30px;letter-spacing:.02em;line-height:1.05}
.subject span{display:block;color:var(--rust);margin-top:4px;font-size:16px}
.grade{color:var(--rust)}
.grade .squares{color:var(--rust)}
.masthead:after{background:var(--rust);width:56px;height:22px}
.course-title{color:var(--ink);letter-spacing:.04em}
#sections button{background:#f7efe6;color:#6b5d52}
#sections button.active{background:var(--peach);border-bottom-color:var(--rust);color:#7a1c11}
.page{background:#fff}
.question-navigation{background:var(--cream);border-bottom-color:#e6cfbb}
.question-navigation button{color:#7c6656}
.question-navigation button[aria-current]{background:var(--peach);border-bottom-color:var(--rust);color:var(--rust)}
.start-button{background:var(--rust);border-color:var(--rust);border-bottom-color:#5d1209}
.start-button:hover{background:#a32718}
.scene-nav .page-arrow{background:var(--orange)}
.scene-nav .page-arrow:hover{background:#df6f42}
.flow-text small{color:#7c5b47}
.flow-number{border-color:#c98a63;color:var(--rust)}
.activity-flow li+li:before{background:#e0c3ab}
.activity-flow button{border-color:#e6cfbb;color:#463c34}
.activity-flow button[aria-current]{background:var(--peach);border-color:#c9764f}
.library-cards .card,.card{border-color:#e6cfbb}
#main .card .open-label{color:#8f1d10}
.feedback{background:#fbeee3;border-left-color:var(--orange)}
.feedback strong{color:#8f1d10}
@media(hover:hover){
  .start-button:hover{background:#a32718}
  .scene-nav .page-arrow:hover{background:#df6f42}
  .question-navigation button:hover{background:#fbeadd;color:var(--rust)}
}
@media(max-width:560px){
  .subject{right:8px;top:12px}
  .subject strong{font-size:17px;line-height:1.15;max-width:190px}
  .subject span{font-size:12px;margin-top:2px}
  .hero-mark{left:128px;top:58px;width:76px;height:76px}
  .brand img{width:84px;left:96px;top:112px}
  .grade{font-size:12px;right:8px;bottom:4px}
  .grade .squares i{width:8px;height:8px}
}
@media(max-width:430px){
  /* Long section names must stay on one line inside 360 px. */
  #sections button{font-size:7.5px;letter-spacing:0;padding:10px 2px;overflow-wrap:normal;word-break:normal}
}
@media(max-width:380px){
  .subject strong{font-size:15px;max-width:160px}
  .hero-mark{left:112px;width:68px;height:68px}
}