.school-daze {
  --chapter-sage: #d9e5e2;
  --chapter-sky: #dbe8ef;
  --chapter-sand: #f4ecd7;
}

.school-daze .series-mark { text-decoration: none; }

.school-daze .hero {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.4) 25%, transparent 25%) 0 0 / 28px 28px,
    var(--chapter-sage);
  box-shadow: 10px 10px 0 var(--blue);
}

.school-daze .hero::after { content: "02"; }

.school-daze .hero-art {
  background: var(--chapter-sand);
  border-radius: 45% 55% 48% 52%;
}

.whirlwind-art picture,
.whirlwind-art img { width: 100%; }

.school-daze .reader-note {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 2rem;
}

.school-daze .reader-note p { margin: 0; }

.school-daze .part-one { background: #f3f5f4; }
.school-daze .part-two { background: var(--chapter-sky); }
.school-daze .part-three { background: var(--chapter-sand); }
.school-daze .part-four { background: #e3e8eb; }
.school-daze .part-five { background: #e7eee9; }

.chapter-actions {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.chapter-button {
  width: fit-content;
  padding: 0.8rem 1rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 4px 4px 0 var(--ink);
  color: var(--ink);
  font-weight: 900;
  line-height: 1.2;
  text-decoration: none;
}

.chapter-button.muted { background: var(--panel); }

.chapter-button:hover,
.chapter-button:focus-visible { background: #fff; }

@media (max-width: 820px) {
  .school-daze .reader-note { grid-template-columns: 1fr; }
}