/* Soft surfaces with saturated xylophone accents. Layout remains in style.css. */
:root {
  --red: #ff414b;
  --orange: #ff9500;
  --yellow: #ffd000;
  --green: #42cf58;
  --blue: #00a4ee;
  --purple: #8836f2;
  --action: #7624df;
  --soft-red: #fff0f0;
  --soft-orange: #fff3e2;
  --soft-yellow: #fff8d8;
  --soft-green: #eef9ed;
  --soft-blue: #eef7ff;
  --soft-purple: #f4edff;
  --cream: #fff;
  --pale-blue: #fff;
  --pale-pink: #fff;
  --ink: #211c36;
  --muted: #555267;
  --rainbow: linear-gradient(90deg, var(--red) 0% 16.666%, var(--orange) 16.666% 33.333%, var(--yellow) 33.333% 50%, var(--green) 50% 66.666%, var(--blue) 66.666% 83.333%, var(--purple) 83.333% 100%);
}

/* A repeating brand signature at every section boundary. */
main > .section-space { position: relative; }
main > .section-space::before { content: ""; position: absolute; inset: 0 0 auto; height: 9px; background: var(--rainbow); pointer-events: none; }
.site-header { background: #fffffff5; border-bottom: 3px solid var(--purple); }
#main-nav a:nth-child(1) { --nav-color: var(--red); }
#main-nav a:nth-child(2) { --nav-color: var(--orange); }
#main-nav a:nth-child(3) { --nav-color: var(--green); }
#main-nav a:nth-child(4) { --nav-color: var(--blue); }
#main-nav a:nth-child(5) { --nav-color: var(--purple); }
#main-nav a:not(.nav-cta):hover,#main-nav a:not(.nav-cta)[aria-current] { box-shadow: inset 0 -3px var(--nav-color); color: var(--ink); }
#main-nav .nav-cta { background: var(--action); border-color: var(--action); color: #fff; }
.primary { box-shadow: 0 4px 0 #4f149f; }
.primary:hover { background: #641bc3; box-shadow: 0 6px 0 #4f149f; }
.underline-yellow { background-image: linear-gradient(transparent 76%, var(--yellow) 76%, var(--yellow) 94%, transparent 94%); }

/* The same supplied logo appears beside all ten section labels. */
.section-kicker { gap: 14px; color: var(--ink); }
.section-kicker > .section-logo { display: block; position: relative; flex-shrink: 0; width: 70px; height: 52px; border: 0; border-radius: 12px; overflow: hidden; background: #fff; }
.section-logo img { position: absolute; left: -5px; top: -13px; width: 78px; height: 78px; max-width: none; }
.section-kicker > .kicker-copy { display: flex; align-items: center; gap: 10px; width: auto; height: auto; min-width: 0; border: 0; border-radius: 0; font-size: inherit; letter-spacing: inherit; }
.kicker-number { display: inline-grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: var(--yellow); color: var(--ink); font-size: 10px; letter-spacing: 0; }

/* Hero and introduction */
.hero-visual::after { background: linear-gradient(90deg, #fff 0%, #fffffffa 18%, #ffffffe8 31%, #ffffffb3 42%, #ffffff3b 55%, #ffffff00 67%); }
.hero-tag { background: var(--yellow); border-color: var(--yellow); }
.hero-tag > span { background: #18762b; }
.hero-overline { color: #c01e32; }
.melody-title { background: linear-gradient(transparent 87%, var(--yellow) 87%); }
.title-spark { color: #c16800; }
.hero-sticker { background: var(--soft-yellow); border-color: #fff; box-shadow: 5px 5px 0 var(--purple); }
.hero-sticker .icon { color: var(--action); }
.scroll-cue span { background: var(--yellow); border-color: var(--yellow); }
.story-photo figcaption { background: var(--soft-yellow); box-shadow: 5px 5px 0 var(--red); }
.story-photo .icon { color: var(--ink); }
.quote-line { border-left-width: 6px; }
.philosophy { border-block: 2px solid var(--blue); gap: 14px; }
.philosophy span { padding: 7px 15px; border-radius: 8px; color: var(--ink) !important; }
.philosophy span:nth-of-type(1) { background: var(--red); }
.philosophy span:nth-of-type(2) { background: var(--yellow); }
.philosophy span:nth-of-type(3) { background: var(--green); }
.philosophy span:nth-of-type(4) { background: var(--blue); }
.philosophy span:nth-of-type(5) { background: var(--purple); color: #fff !important; }
.philosophy b { color: var(--ink); }

/* Use a dark variant for small text on white, and a separate ink for solid color. */
.coral { --tint: var(--soft-red); --accent-ink: #ba1429; --on-accent: #21182e; }
.orange { --tint: var(--soft-orange); --accent-ink: #915000; --on-accent: var(--ink); }
.gold { --tint: var(--soft-yellow); --accent-ink: #795500; --on-accent: var(--ink); }
.green { --tint: var(--soft-green); --accent-ink: #18752b; --on-accent: var(--ink); }
.blue { --tint: var(--soft-blue); --accent-ink: #065caf; --on-accent: #11243a; }
.violet { --tint: var(--soft-purple); --accent-ink: #7024c7; --on-accent: #fff; }
.feature-card { background: var(--tint); border: 0; border-top: 6px solid var(--accent); color: var(--ink); box-shadow: 0 5px 0 #211c3609; }
.feature-card p,.feature-card small { color: var(--muted); }
.feature-top > span { color: var(--accent-ink); }
.feature-top .icon { background: #fff; color: var(--accent-ink); }
.feature-word { background: #fff; color: var(--accent-ink); border-radius: 7px; }

/* A light blue field lets the six colored borders and badges stand out. */
.learning { background: var(--soft-blue); }
.learning .heading-row > p,.learning > .container > .fine-print { color: var(--muted); }
.learning-card { border-top-width: 9px; box-shadow: 0 6px 0 #0740720c; }
.learning-top { color: var(--accent-ink); }
.area-number { background: var(--accent); color: var(--on-accent); border-radius: 10px; }
.solfege-glyph i { color: var(--ink); }
.learning-card details { border-top: 2px solid var(--accent); }
.learning-card summary { color: var(--ink); }
.learning-photos figure { border-bottom: 6px solid var(--yellow); }
.learning-photos figure:nth-child(2) { border-color: var(--green); }

/* Bright stepping stones from the story to the ensemble. */
.step-dot { background: var(--accent); color: var(--on-accent); box-shadow: 3px 3px 0 #211c3617; }
.flow-steps li:not(:last-child)::after { border-color: var(--blue); }
.story-example { background: var(--soft-yellow); }
.example-title { border-color: #836500; }
.example-title .mini-label,.example-title > p,.example-content > p:first-child { color: var(--ink); }
.example-content dt { background: var(--red); color: var(--ink); }
.example-content dl > div:nth-child(2) dt { background: var(--green); }
.example-spark { color: #b48a00; }

/* Lavender background, with saturated age numbers and card borders. */
.ages { background: var(--soft-purple); }
.ages .heading-row h2,.ages .section-kicker { color: var(--ink); }
.ages .heading-row > p,.ages > .container > .fine-print { color: var(--muted); }
.ages .underline-yellow { color: var(--action); }
.age-three { --age-ink: #18752b; --age-tint: var(--soft-green); }
.age-four { --age-ink: #065caf; --age-tint: var(--soft-blue); }
.age-five { --age-ink: var(--action); --age-tint: var(--soft-purple); }
.age-card { border-bottom-width: 8px; box-shadow: 0 7px 0 #34116f0c; }
.age-top { background: var(--age-tint); color: var(--age-ink); border-radius: 14px; padding: 18px 14px; gap: 7px; }
.age-stage { background: #fff; color: var(--age-ink); }
.age-card ul { border-top: 2px solid var(--age-color); }
.age-progress i { height: 7px; }

/* The ensemble remains photo-led, with clear blue and yellow accents. */
.ensemble-main { border: 3px solid var(--blue); }
.ensemble-photo figcaption { background: var(--soft-yellow); color: var(--ink); }
.ensemble-types > div { border-top: 2px solid var(--blue); }
.ensemble-types > div:nth-child(2) { border-color: var(--green); }
.ensemble-types > div:nth-child(3) { border-color: var(--purple); }
.performance-notice { background: var(--soft-yellow); color: var(--ink); border-left: 6px solid var(--red); }
.ensemble-ending { margin-top: 40px; padding: 28px 24px; border-radius: 20px; background: var(--soft-purple); color: var(--ink); }
.ensemble-ending strong { color: var(--action); }
.ensemble-ending span { color: var(--muted); }
.instrument-visual figure { background: var(--soft-green); border: 3px solid var(--green); }
.instrument-visual figcaption { color: var(--ink); font-weight: 600; }
.instrument-list > div { border-bottom-width: 2px; border-bottom-color: var(--red); }
.instrument-list > div:nth-child(2) { border-color: var(--yellow); }
.instrument-list > div:nth-child(3) { border-color: var(--blue); }
.instrument-list > div:nth-child(4) { border-color: var(--purple); }
.instrument-dot { width: 14px; height: 14px; }

/* Gallery color bars and a yellow invitation. */
.gallery-card { --gallery-accent: var(--red); }
.gallery-card:nth-child(4n+2) { --gallery-accent: var(--yellow); }
.gallery-card:nth-child(4n+3) { --gallery-accent: var(--green); }
.gallery-card:nth-child(4n+4) { --gallery-accent: var(--blue); }
.gallery-image { border-bottom: 7px solid var(--gallery-accent); }
.gallery-expand { background: var(--gallery-accent); color: var(--ink); }
.ai-notice { border-top: 2px solid var(--purple); color: var(--muted); }
.adoption { background: var(--soft-yellow); }
.adoption-copy > p:not(.section-kicker) { color: var(--ink); }
.program-ticket { background: #fff; box-shadow: 10px 12px 0 var(--blue); }
.ticket-label,.program-ticket dt { color: var(--muted); }
.program-ticket dl { border-top: 2px dashed var(--purple); }
.ticket-rainbow i { height: 12px; }

/* A white inquiry surface with a blue frame and yellow offset. */
.inquiry-note { border: 2px solid var(--orange); border-left-width: 7px; background: #fff; }
.inquiry-note p { color: var(--muted); }
.status-dot { background: #af5600; }
.contact-illustration .icon { color: var(--red); }
.contact-illustration .icon:nth-of-type(2) { color: #18752b; }
.inquiry-form { border: 3px solid var(--blue); box-shadow: 8px 8px 0 var(--yellow); }
.field input,.field textarea { background: #fff; border-color: #b5aec5; }
.privacy-area { border-top: 2px solid var(--green); }
.inquiry-submit:disabled { background: #ebe9ef; color: #655b73; box-shadow: none; }
.footer-color-line { height: 10px; }
.site-footer { background: #fff; }
.footer-bottom { border-color: var(--purple); }
.lightbox-close,.lightbox-controls button { background: var(--yellow); color: var(--ink); }

@media (max-width: 900px) {
  #main-nav { background: #fff; border-bottom: 4px solid var(--purple); }
  .menu-toggle { border: 2px solid var(--purple); }
  .age-top { padding: 16px 10px; }
  .age-stage { font-size: 9px; padding-inline: 6px; }
}
@media (max-width: 600px) {
  main > .section-space::before { height: 7px; }
  .section-kicker { gap: 10px; }
  .section-kicker > .section-logo { width: 54px; height: 40px; border-radius: 9px; }
  .section-logo img { width: 61px; height: 61px; left: -4px; top: -11px; }
  .section-kicker > .kicker-copy { gap: 7px; line-height: 1.7; }
  .kicker-number { width: 24px; height: 24px; font-size: 9px; }
  .philosophy { gap: 10px; }
  .philosophy span { padding: 6px 10px; }
  .age-top { padding: 18px 14px; }
  .age-stage { font-size: 10px; }
  .ensemble-ending { margin-top: 28px; padding: 24px 20px; }
  .inquiry-form { box-shadow: 5px 5px 0 var(--yellow); }
}
@media print {
  .ages { background: #fff; }
  .ages .heading-row h2,.ages .heading-row > p,.ages > .container > .fine-print,.ages .section-kicker { color: #211c36; }
}