/* Lilita One by Juan Montoreano. Self-hosted; licence: fonts/OFL.txt. */
@font-face {
  font-family: 'Lilita One';
  src: url('fonts/LilitaOne-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* The logo's lively lettering inspires the titles; navigation keeps its font. */
main :is(h1,h2,h3,h4,h5,h6),
main .milly-game :is(h1,h2,h3,h4,h5,h6) {
  font-family: 'Lilita One', ui-rounded, 'Trebuchet MS', sans-serif;
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: .005em;
  line-height: 1.16;
  color: #7f1ea7;
}
main :is(h1,h2,h3,h4,h5,h6) {
  --heading-stroke: max(1px, .025em);
  --heading-halo: .04em;
  --heading-drop: .065em;
  overflow-wrap: break-word;
}
main h1 { line-height: 1.14; }
main h3 { --heading-stroke: .025em; --heading-halo: .04em; --heading-drop: .055em; }

/* Whole words preserve normal reading order, selection and line wrapping. */
main .heading-word {
  display: inline;
  color: var(--heading-fill, #7f1ea7);
  -webkit-text-stroke: var(--heading-stroke) #051849;
  paint-order: stroke fill;
  text-shadow:
    calc(-1 * var(--heading-halo)) calc(-1 * var(--heading-halo)) 0 #fff,
    0 calc(-1 * var(--heading-halo)) 0 #fff,
    var(--heading-halo) calc(-1 * var(--heading-halo)) 0 #fff,
    calc(-1 * var(--heading-halo)) 0 0 #fff,
    var(--heading-halo) 0 0 #fff,
    calc(-1 * var(--heading-halo)) var(--heading-halo) 0 #fff,
    0 var(--heading-halo) 0 #fff,
    var(--heading-halo) var(--heading-halo) 0 #fff,
    var(--heading-drop) calc(var(--heading-drop) * 1.2) 0 #051849;
}
main .heading-word[data-colour="0"] { --heading-fill: #fa036e; }
main .heading-word[data-colour="1"] { --heading-fill: #7f1ea7; }
main .heading-word[data-colour="2"] { --heading-fill: #02b5bb; }
main .heading-word[data-colour="3"] { --heading-fill: #fc6804; }
main .heading-word[data-colour="4"] { --heading-fill: #037ff2; }
main .heading-word[data-colour="5"] { --heading-fill: #9dcd02; }
main .heading-word[data-colour="6"] { --heading-fill: #fdd202; }
main[data-page-family="characters"] .page-head .heading-word[data-colour="1"],
main[data-page-family="activities"] .page-head .heading-word[data-colour="1"],
main #music .heading-word[data-colour="1"],
main .activity-promo .heading-word[data-colour="1"] { --heading-fill: #fdd202; }
main .book-card h3 { font-size: 1.4rem; }
main .character-card h3 { font-size: 1.5rem; }
main .purchase-box h3 { font-size: 1.25rem; }

/* Smaller labels use deeper brand shades so their letter shapes stay clear. */
main h3 .heading-word { -webkit-text-stroke: 0; text-shadow: none; }
main h3 .heading-word[data-colour="0"] { --heading-fill: #b6004b; }
main h3 .heading-word[data-colour="1"] { --heading-fill: #7f1ea7; }
main h3 .heading-word[data-colour="2"] { --heading-fill: #006a70; }
main h3 .heading-word[data-colour="3"] { --heading-fill: #a83b00; }
main h3 .heading-word[data-colour="4"] { --heading-fill: #0757a7; }
main h3 .heading-word[data-colour="5"] { --heading-fill: #486500; }
main h3 .heading-word[data-colour="6"] { --heading-fill: #735900; }
main :is(.character-card,.route-card,.purchase-box) h3 .heading-word { color: #051849; }

/* Game-generated headings use the same face with a clear, solid ink colour. */
main .milly-game :is(h1,h2,h3,h4,h5,h6) { color: #7f1ea7; }
main .milly-game .mg-question { line-height: 1.25; }

@media (max-width: 620px) {
  main .page-head h1 { font-size: clamp(2.2rem, 9vw, 2.75rem); }
  main .hero-bottom h1 { font-size: clamp(2.45rem, 9.5vw, 3rem); }
  main .book-card h3 { font-size: 1.4rem; }
  main .character-card h3 { font-size: 1.5rem; }
}
@media (forced-colors: active) {
  main .heading-word { color: CanvasText; -webkit-text-stroke: 0; text-shadow: none; }
}
@media print {
  main :is(h1,h2,h3,h4,h5,h6), main .heading-word { color: #000 !important; -webkit-text-stroke: 0; text-shadow: none; }
}