/* Milly McJinx: official logo palette. Navigation keeps its original styling. */
main {
  --ink: #051849;
  --muted: #34415e;
  --pink: #7f1ea7;
  --cyan: #051849;
  --purple: #7f1ea7;
  --yellow: #fdd202;
  --brand-pink: #fa036e;
  --brand-turquoise: #02b5bb;
  --brand-purple: #7f1ea7;
  --brand-lime: #9dcd02;
  --brand-yellow: #fdd202;
  --brand-orange: #fc6804;
  --brand-blue: #037ff2;
  --brand-navy: #051849;
  --line: #051849;
  color: var(--ink);
  background: #fff;
}

main .eyebrow { color: var(--ink); }
main h1 em, main h2 em { color: var(--brand-purple); }
main .button {
  border: 2px solid var(--ink);
  background: var(--brand-purple);
  color: #fff;
  box-shadow: 3px 4px 0 var(--ink);
  transition: transform .15s, box-shadow .15s;
}
main .button.pink { background: var(--brand-purple); border-color: var(--ink); }
main .button.secondary { background: #fff; color: var(--ink); }
main .button.yellow { background: var(--brand-yellow); color: var(--ink); border-color: var(--ink); }
main .button:hover { transform: translate(-1px,-3px); box-shadow: 4px 7px 0 var(--ink); }
main .button:active { transform: translate(2px,2px); box-shadow: 1px 2px 0 var(--ink); }
main .button:disabled { background: #e6e8ed; color: #536075; box-shadow: none; border-color: #adb5c4; transform: none; }
main :is(a,button,input,select,textarea,summary):focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 5px;
  box-shadow: 0 0 0 5px #fff;
}
main .pill { color: #fff; background: var(--brand-purple); border: 1px solid var(--ink); }
main .text-link { white-space: normal; }

/* A bright welcome, framed like a page from Milly's notebook. */
main .hero {
  width: 100%;
  padding: 28px max(24px, calc((100% - 1200px) / 2)) 36px;
  background-color: var(--brand-turquoise);
  background-image: radial-gradient(circle, #ffffff65 2px, transparent 2.5px);
  background-size: 28px 28px;
}
main .hero-art { border: 3px solid var(--ink); border-radius: 28px; background: #fff; box-shadow: 7px 7px 0 var(--ink); }
main .hero-bottom {
  margin-top: 28px;
  padding: 34px 36px;
  border: 3px solid var(--ink);
  border-radius: 26px;
  background: var(--brand-yellow);
  box-shadow: 7px 7px 0 var(--ink);
  align-items: center;
}
main .hero-bottom p { color: var(--ink); }
main .hero-bottom .eyebrow { font-size: .74rem; }
main .hero-bottom .quiet { font-size: .9rem; }
main .ticker { background: var(--brand-purple); color: #fff; border-block: 3px solid var(--ink); }
main .ticker span::before { color: var(--brand-yellow); }

/* Full colour bands replace the earlier pastel washes. */
main .soft { background-color: var(--brand-turquoise); border-block: 3px solid var(--ink); }
main .soft .section-head p { color: var(--ink); }
main .pink-wash {
  background-color: var(--brand-yellow);
  background-image: radial-gradient(circle at 100% 100%, #fc6804 0 100px, transparent 101px);
  border-block: 3px solid var(--ink);
}
main .lavender { background: var(--brand-lime); border-block: 3px solid var(--ink); }
main .paper-lines { background-color: #fff; background-image: repeating-linear-gradient(transparent,transparent 31px,#02b5bb35 32px); }
main .section-head .eyebrow { color: var(--ink); }
main .feature-book { background: var(--brand-yellow); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--brand-pink); }
main .feature-cover { background: var(--brand-turquoise); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
main .feature-book .tape { background: var(--brand-pink); border: 2px solid var(--ink); height: 26px; }
main .feature-book p { color: var(--ink); }
main .route-card { border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); transition: transform .15s; }
main .route-card:hover { transform: translateY(-4px); }
main .route-card:nth-child(3n+1) { background: var(--brand-yellow); }
main .route-card:nth-child(3n+2) { background: var(--brand-turquoise); }
main .route-card:nth-child(3n) { background: var(--brand-lime); }
main .route-card p { color: var(--ink); }
main .route-card .route-number { color: #fff; background: var(--ink); border-radius: 8px; padding: 5px 10px; }
main .route-card .arrow { border-bottom: 2px solid var(--ink); padding-bottom: 3px; }

/* Keep the original artwork clean; bring the colour into its frame. */
main .character-card { display: flex; flex-direction: column; border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
main .character-art { flex-shrink: 0; background: #fff; border-top: 10px solid var(--brand-pink); }
main .character-card:nth-child(4n+2) .character-art { border-color: var(--brand-purple); }
main .character-card:nth-child(4n+3) .character-art { border-color: var(--brand-blue); }
main .character-card:nth-child(4n) .character-art { border-color: var(--brand-orange); }
main .character-card .card-copy { flex: 1; border-top: 3px solid var(--ink); background: var(--brand-yellow); }
main .character-card:nth-child(4n+2) .card-copy { background: var(--brand-turquoise); }
main .character-card:nth-child(4n+3) .card-copy { background: var(--brand-lime); }
main .character-card:nth-child(4n) .card-copy { background: var(--brand-orange); }
main .character-card .card-copy p { color: var(--ink); }
main .character-portrait { border: 3px solid var(--ink); border-top: 12px solid var(--brand-pink); box-shadow: 8px 8px 0 var(--brand-turquoise); }
main .fun-fact { background: var(--brand-yellow); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--brand-orange); }

/* Every page gets a sunny opening, with confetti kept away from the copy. */
main .page-head {
  width: 100%;
  margin: 0 0 42px;
  padding: 48px max(24px, calc((100% - 1200px) / 2));
  background-color: var(--brand-yellow);
  background-image: radial-gradient(circle at 96% 20%, var(--brand-pink) 0 13px, transparent 14px), radial-gradient(circle at 91% 75%, var(--brand-turquoise) 0 28px, transparent 29px), radial-gradient(circle at 99% 95%, var(--brand-orange) 0 72px, transparent 73px);
  border-bottom: 3px solid var(--ink);
}
main .page-head p { color: var(--ink); }
main .page-head h1 { max-width: 1080px; }
main .breadcrumb { margin-block: 0; padding-block: 18px; color: var(--ink); }
main .catalog-toolbar { background: var(--brand-turquoise); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
main .catalog-toolbar :is(input,select) { border-color: var(--ink); }
main .alphabet button { border-color: var(--ink); box-shadow: 1px 2px 0 var(--ink); }
main .alphabet button.active { background: var(--brand-purple); color: #fff; }
main .result-count { color: var(--ink); font-weight: 700; }
main .book-card { border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
main .cover-link { background: var(--brand-turquoise); border-bottom: 3px solid var(--ink); }
main .book-card:nth-child(4n+2) .cover-link { background: var(--brand-yellow); }
main .book-card:nth-child(4n+3) .cover-link { background: var(--brand-lime); }
main .book-card:nth-child(4n) .cover-link { background: var(--brand-orange); }
main .book-number { color: var(--brand-purple); }
main .tags span { color: var(--ink); background: var(--brand-yellow); }
main .detail-cover { background: var(--brand-turquoise); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--brand-pink); }
main .purchase-box { background: var(--brand-yellow); border: 2px solid var(--ink); }
main .purchase-box p { color: var(--ink); }

/* Inviting game choices; the boards and all game controls retain their own styles. */
main .game-card { border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); border-top: 12px solid var(--brand-pink); }
main .game-card:nth-child(4n+2) { border-top-color: var(--brand-blue); }
main .game-card:nth-child(4n+3) { border-top-color: var(--brand-orange); }
main .game-card:nth-child(4n) { border-top-color: var(--brand-purple); }
main .game-card .game-icon { background: var(--brand-yellow); color: var(--ink); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transform: rotate(-5deg); }
main .game-card:nth-child(2n) .game-icon { background: var(--brand-lime); transform: rotate(5deg); }
main .game-card .button { background: var(--brand-purple); color: #fff; }
main .game-area { border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--brand-turquoise); }
main .ss-stage { width: 100%; }
main .mg-sock-card { width: 100%; }
main .activity-card { border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
main .activity-card img { background: var(--brand-yellow); border-bottom: 3px solid var(--ink); }
main .activity-card:nth-child(3n+2) img { background: var(--brand-turquoise); }
main .activity-card:nth-child(3n) img { background: var(--brand-lime); }
main .activity-preview { background: var(--brand-turquoise); border: 3px solid var(--ink); box-shadow: 7px 7px 0 var(--brand-pink); }
main .activity-promo { background: var(--brand-purple); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--brand-yellow); }
main .activity-promo p { color: #fff; }
main .activity-promo .eyebrow { color: var(--brand-yellow); }
main #music { background: var(--brand-purple); color: #fff; }
main #music .eyebrow { color: var(--brand-yellow); }
main #music .text-link { border-color: #fff; }
main #music .button { background: var(--brand-yellow); color: var(--ink); }
main .video-card { border: 3px solid var(--ink); color: var(--ink); box-shadow: 7px 7px 0 var(--brand-yellow); }
main .video-load { background: var(--brand-yellow); color: var(--ink); }
main .video-stage { background: var(--brand-turquoise); }
main .music-copy { min-width: 0; }
main .adult-note, main .newsletter-draft, main .news-feature, main .empty-panel, main .contact-form {
  background: #fff;
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--brand-turquoise);
}
main .newsletter-draft { box-shadow: 6px 6px 0 var(--brand-purple); }
main .note { background: #fff; border: 2px solid var(--ink); border-left: 10px solid var(--brand-purple); }
main .reading-text { color: var(--ink); padding-bottom: 64px; }
main .reading-text p { color: #34415e; }
.site-footer {
  background: #051849;
  border-top: 10px solid transparent;
  border-image: linear-gradient(90deg,#fa036e 0 14.285%,#fc6804 14.285% 28.57%,#fdd202 28.57% 42.855%,#9dcd02 42.855% 57.14%,#02b5bb 57.14% 71.425%,#037ff2 71.425% 85.71%,#7f1ea7 85.71%) 1;
}

@media (max-width: 850px) {
  main .hero-bottom { padding: 28px; gap: 28px; }
  main .music-feature { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 620px) {
  main .hero { padding: 18px 16px 30px; background-size: 24px 24px; }
  main .hero-art { border-radius: 18px; box-shadow: 4px 4px 0 var(--ink); }
  main .hero-bottom { margin-top: 22px; padding: 24px 20px; border-radius: 20px; box-shadow: 4px 4px 0 var(--ink); }
  main .hero-bottom h1 { font-size: clamp(2.6rem,10vw,3rem); }
  main .hero-bottom .eyebrow { font-size: .65rem; line-height: 1.6; }
  main .actions .button { flex: 1 1 220px; min-width: 0; }
  main .video-stage { min-height: 0; }
  main .page-head { padding: 34px 16px; margin-bottom: 32px; background-image: none; }
  main .page-head h1 { overflow-wrap: break-word; }
  main .page-head p { font-size: 1.05rem; }
  main .feature-book, main .activity-promo { box-shadow: 5px 5px 0 var(--brand-pink); }
  main .character-card, main .book-card, main .activity-card { box-shadow: 4px 4px 0 var(--ink); }
  main .game-area { box-shadow: 5px 5px 0 var(--brand-turquoise); }
  main .feature-cover { transform: rotate(-2deg); }
  main .video-card { box-shadow: 4px 4px 0 var(--brand-yellow); }
  main .pink-wash { background-image: none; }
}
@media (prefers-reduced-motion: reduce) {
  main .button, main .route-card { transition: none; }
  main .button:hover, main .button:active, main .route-card:hover { transform: none; }
}
@media (max-width: 400px) {
  main .mg-jigsaw-layout { grid-template-columns: minmax(0,1fr); }
  main .mg-reference { max-width: 130px; margin-inline: auto; }
}
@media print {
  main, main .hero, main .hero-bottom, main .page-head, main .soft, main .pink-wash, main .lavender { background: #fff; color: #000; }
  main #music, main .activity-promo { background: #fff; color: #000; }
  main #music .eyebrow, main .activity-promo p, main .activity-promo .eyebrow { color: #000 !important; }
  main #music .text-link { border-color: #000; }
  main .page-head { padding: 20px 24px; }
  main :is(.feature-book,.route-card,.character-card,.book-card,.game-card,.game-area,.activity-card,.activity-preview,.adult-note,.newsletter-draft) { box-shadow: none; }
}

/* Carry the same world through every catalogue, detail and information page. */
main[data-page-family]:not([data-page-family="home"]) {
  background-color: var(--page-field, var(--brand-turquoise));
  background-image: radial-gradient(circle, #ffffff65 1.5px, transparent 2px);
  background-size: 32px 32px;
  padding-bottom: 1px;
}
main[data-page-family="characters"],
main[data-page-family="play"],
main[data-page-family="news"] { --page-field: var(--brand-yellow); }
main[data-page-family="activities"],
main[data-page-family="error"] { --page-field: var(--brand-lime); }
main[data-page-family="information"] { --page-field: var(--brand-purple); }
main[data-page-family="books"][data-page-layout="detail"] { --page-field: var(--brand-yellow); }
main[data-page-family="characters"][data-page-layout="detail"] { --page-field: var(--brand-lime); }
main[data-page-family="activities"][data-page-layout="detail"] { --page-field: var(--brand-turquoise); }
main[data-page-family]:not([data-page-family="home"]) > .breadcrumb {
  width: 100%;
  padding-inline: max(24px, calc((100% - 1200px) / 2));
  background: #fff;
  border-bottom: 2px solid var(--ink);
}
main[data-page-family="characters"] .page-head,
main[data-page-family="activities"] .page-head {
  background-color: var(--brand-purple);
  background-image: none;
  color: #fff;
}
main[data-page-family="characters"] .page-head :is(p,h1),
main[data-page-family="activities"] .page-head :is(p,h1) { color: #fff; }
main[data-page-family="characters"] .page-head :is(.eyebrow,em),
main[data-page-family="activities"] .page-head :is(.eyebrow,em) { color: var(--brand-yellow); }
main[data-page-family="play"] .page-head,
main[data-page-family="news"] .page-head { background-color: var(--brand-turquoise); }
main[data-page-family]:not([data-page-family="home"]) .section-head p,
main[data-page-family]:not([data-page-family="home"]) .section-head .eyebrow { color: var(--ink); }

/* White story panels sit on the coloured canvas, like pages in a scrapbook. */
main[data-page-layout="detail"] > .split > .detail-copy {
  min-width: 0;
  padding: 32px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 26px;
  box-shadow: 7px 7px 0 var(--brand-pink);
}
main[data-page-layout="detail"] .detail-copy h1 { overflow-wrap: break-word; }
main[data-page-family="books"][data-page-layout="detail"] .detail-cover {
  border-width: 3px;
  box-shadow: 8px 8px 0 var(--ink);
}
main[data-page-family="characters"][data-page-layout="detail"] .character-portrait {
  width: 100%;
  box-shadow: 8px 8px 0 var(--brand-purple);
}
main[data-page-family="activities"][data-page-layout="detail"] .activity-preview {
  background: var(--brand-yellow);
  box-shadow: 8px 8px 0 var(--ink);
}
main[data-page-family="books"] .meta-grid { gap: 18px; flex-wrap: wrap; }
main[data-page-family="books"] .soft { background-color: var(--brand-turquoise); }
main[data-page-family="characters"] .soft { background-color: var(--brand-turquoise); }
main[data-page-family="activities"] .activity-card .card-copy { background: #fff; }
main[data-page-family="play"] .soft,
main[data-page-family="grownups"] .soft,
main[data-page-family="songs"] .soft { background-color: var(--brand-lime); }
main[data-page-family="books"] .series-nav { border-top: 2px solid var(--ink); }
main[data-page-family="books"] .series-nav a {
  background: #fff;
  padding: 12px 16px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--ink);
}

/* Information pages retain a calm reading surface within the vivid setting. */
main[data-page-family] .reading-text {
  background: #fff;
  border: 3px solid var(--ink);
  border-top: 12px solid var(--brand-yellow);
  border-radius: 24px;
  padding: 32px;
  padding-top: 32px !important;
  margin-bottom: 64px;
  box-shadow: 8px 8px 0 var(--ink);
}
main[data-page-family] .reading-text > h2:first-child,
main[data-page-family] .reading-text .adult-note > h2:first-child { margin-top: 0; }
main[data-page-family="information"] .reading-text .adult-note {
  background: var(--brand-yellow);
  box-shadow: 4px 4px 0 var(--brand-turquoise);
}
main[data-page-family="songs"] .music-feature {
  padding: 32px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 26px;
  box-shadow: 8px 8px 0 var(--brand-purple);
}
main[data-page-family="songs"] .music-feature > * { min-width: 0; }
main[data-page-family="news"] .news-feature {
  border-top: 12px solid var(--brand-pink);
  box-shadow: 8px 8px 0 var(--ink);
}
main[data-page-family="grownups"] .adult-note:nth-child(3n+1) { border-top: 12px solid var(--brand-pink); }
main[data-page-family="grownups"] .adult-note:nth-child(3n+2) { border-top: 12px solid var(--brand-blue); }
main[data-page-family="grownups"] .adult-note:nth-child(3n) { border-top: 12px solid var(--brand-purple); }
main[data-page-family="error"] > .section { padding-bottom: 76px; }

@media (max-width: 850px) and (min-width: 621px) {
  main[data-page-layout="detail"] > .split { grid-template-columns: minmax(0,1fr); }
  main[data-page-layout="detail"] > .split > :is(.detail-cover,.character-portrait,.activity-preview) { max-width: 480px; width: 100%; margin-inline: auto; }
}
@media (max-width: 620px) {
  main[data-page-family]:not([data-page-family="home"]) > .breadcrumb { padding-inline: 16px; }
  main[data-page-layout="detail"] > .split > .detail-copy { padding: 22px; border-radius: 20px; box-shadow: 5px 5px 0 var(--brand-pink); }
  main[data-page-layout="detail"] .detail-copy h1 { font-size: clamp(2rem,8vw,2.6rem); }
  main[data-page-family] .reading-text { padding: 22px; padding-top: 22px !important; margin-bottom: 48px; box-shadow: 5px 5px 0 var(--ink); }
  main[data-page-family="songs"] .music-feature { padding: 20px; box-shadow: 5px 5px 0 var(--brand-purple); }
  main[data-page-family="books"] .series-nav a { padding: 10px; }
}
@media print {
  main[data-page-family]:not([data-page-family="home"]),
  main[data-page-family] .page-head { background: #fff; color: #000; }
  main[data-page-family] .page-head :is(p,h1,.eyebrow,em) { color: #000; }
  main[data-page-family] :is(.reading-text,.detail-copy,.music-feature,.news-feature,.series-nav a) { box-shadow: none; }
  main[data-page-family] .reading-text { padding: 20px; padding-top: 20px !important; }
}