/* Navy outlines keep colorful lettering crisp, including Thai marks. */
:root { --title-outline: #082567; }
:is(.intro h1, .grade-banner h1, .unit-banner h1, .reading-heading h1,
    .section-title h2, .grade-card h3, .step h3, .activity h2,
    .assessment h3, .result h1, .menu-illustrated .subject-info p) {
  font-family: Mali, Sarabun, sans-serif;
  font-weight: 700;
  line-height: 1.65;
  padding-block: .1em;
  overflow: visible;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.playful-text {
  --outline-width: max(2.2px, .085em);
  color: #132956;
  -webkit-text-stroke: var(--outline-width) var(--title-outline);
  paint-order: stroke fill;
}
.playful-text .color-word {
  display: inline-block;
  max-width: 100%;
  color: var(--word-color);
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: var(--outline-width) var(--title-outline);
  paint-order: stroke fill;
  text-shadow: none;
  filter: drop-shadow(0 2px 0 #fff);
}
.intro h1 .color-word { color: var(--word-color); }
:is(.grade-banner .eyebrow, .grade-banner p, .intro .eyebrow, .brand small).playful-text {
  font-family: Mali, Sarabun, sans-serif;
  font-weight: 700;
  --outline-width: max(2.2px, .09em);
  letter-spacing: normal;
  line-height: 1.8;
}
.grade-banner .eyebrow { font-size: 1rem; }
.grade-banner p.playful-text { font-size: 1.13rem; }
.topbar .brand-name, .topbar nav a.playful-text {
  font-family: Mali, Sarabun, sans-serif;
  font-weight: 700;
  --outline-width: max(2.2px, .09em);
  letter-spacing: normal;
  line-height: 1.8;
}
.brand-name { display: block; font-size: 1.02rem; white-space: nowrap; }
.topbar nav a.playful-text { font-size: 1rem; white-space: nowrap; }
.topbar .brand { min-width: 0; }
:is(.intro h1, .grade-banner h1, .unit-banner h1, .reading-heading h1,
    .section-title h2, .grade-card h3, .step h3, .activity h2, .assessment h3) {
  width: fit-content;
  max-width: 100%;
}
.menu-illustrated .subject-info p {
  display: block;
  --outline-width: max(2.2px, .09em);
  font-size: 1.3rem;
  line-height: 1.85;
  min-height: 3.7em;
  margin: 0 0 12px;
  padding: .14em 0;
}
.grade-number {
  -webkit-text-stroke: max(1.5px, .05em) var(--title-outline);
  paint-order: stroke fill;
  text-shadow: 0 2px 0 white;
}
.unit-banner > div, .intro > div, .grade-card > div, .reading-heading h1 { min-width: 0; }
@media (max-width: 600px) {
  .menu-illustrated .subject-info p { font-size: 1.22rem; min-height: 0; }
  .grade-card h3 { font-size: 1.03rem; }
  .brand-name { font-size: .9rem; }
  .topbar nav a.playful-text { font-size: .92rem; }
}
@media (max-width: 370px) {
  .topbar { flex-wrap: wrap; gap: 12px; }
  .topbar nav { flex-direction: row; flex-wrap: wrap; gap: 16px; }
}
@media (forced-colors: active), print {
  .playful-text, .playful-text .color-word, .intro h1 .color-word {
    color: CanvasText;
    -webkit-text-fill-color: currentColor;
    -webkit-text-stroke: 0;
    text-shadow: none;
    filter: none;
  }
  .grade-number { -webkit-text-stroke: 0; text-shadow: none; }
}