/* music-home.css - the home of music.brainlag.space (includes/music/home.php). On top of the brainlag.space homepage's
   own rules (bl-home.css, inlined by the page): Bruno in Noodle's place, the music tiles, the grade cards, the plan line,
   How it works, the trainers and tools, Good to know and the pink end band. Brand tokens only; square full-width bands,
   rounded cards; nothing narrower than 320 px scrolls sideways; every target 44 px or more. */
.mh .mu-crumb{display:none}

/* the hero: Bruno stands where Noodle stands on brainlag.space */
.mh-bruno{position:absolute;inset-inline-start:22%;width:56%;height:auto;bottom:3%}
@media (max-width:760px){.mh-bruno{inset-inline-start:25%;width:50%;bottom:0}}
.mh .hm-hero h1{font-size:clamp(38px,5.6vw,72px)}
.mh-ft-beam{color:var(--music-ink)}
.mh-ft-sharp{background:#15365a;color:#ff9cc9}
.mh-ft-metro{background:var(--study-tint);color:var(--study-ink)}
/* the hero's picture (music/hero-score.php): the engraved phrase across the art, its staff turning into a waveform,
   the notes lighting in turn; Bruno reading beside it, still */
.mh .hm-hero .hm-ctas.mh-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.mh .mh-find{font-weight:650}
.mh .mh-hero{overflow:hidden;overflow:clip}
.mh-art{aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.mh-score{display:block;width:112%;max-width:none;margin-inline:-12% 0;height:auto;color:var(--ink);direction:ltr}
.mh-score .mh-hl{fill:none;stroke:currentColor;stroke-width:1.4;opacity:.7}
.mh-score .mh-hw{fill:none;stroke:var(--music,#d6337a);stroke-width:2.2;stroke-linecap:round;opacity:.85}
.mh-score .mh-hb,.mh-score .mh-hs-slur{fill:currentColor}
.mh-hn{transition:color .2s}
@media (prefers-reduced-motion:no-preference){
  .mh-hn{animation:mh-play 7.2s linear infinite}
  .mh-hn:nth-of-type(2){animation-delay:.5s}.mh-hn:nth-of-type(3){animation-delay:.75s}.mh-hn:nth-of-type(4){animation-delay:1s}
  .mh-hn:nth-of-type(5){animation-delay:1.5s}.mh-hn:nth-of-type(6){animation-delay:2s}.mh-hn:nth-of-type(7){animation-delay:2.5s}
  .mh-hn:nth-of-type(8){animation-delay:2.75s}.mh-hn:nth-of-type(9){animation-delay:3s}
}
:root[data-motion=off] .mh-hn{animation:none}
@keyframes mh-play{0%,7%{color:var(--music,#d6337a)}9%,100%{color:inherit}}
.mh-bruno-r{display:block;width:240px;height:auto;margin-top:-8px;align-self:flex-end;margin-inline-end:4%}
@media (max-width:760px){.mh-score{width:100%;margin-inline:0}.mh-bruno-r{width:170px;margin:0 auto}}

/* Choose your path (owner, 12 Oct): four big pictures, 2 by 2 on a phone, 4 across from 1024 px; three stand in one row */
.mh-path{padding-top:44px}
.mh-pcards{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:1024px){.mh-pcards{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}}
.mh-pcards[data-n="3"]{grid-template-columns:1fr}
@media (min-width:640px){.mh-pcards[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mh-pcard{display:flex;flex-direction:column;height:100%;border-radius:20px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow);color:var(--ink);text-decoration:none;transition:transform .15s}
.mh-pcard:hover{transform:translateY(-3px)}.mh-pcard:active{transform:scale(.98)}.mh-pcard:focus-visible{outline:3px solid var(--study);outline-offset:3px}
.mh-pcard-art{display:grid;place-items:center;height:116px;color:#fff;background:#b8326f}
.mh-pcard-art svg{width:56px;height:56px}
.mh-pcard[data-tone="blue"] .mh-pcard-art{background:#2a62b8}
.mh-pcard[data-tone="navy"] .mh-pcard-art{background:#15365a}
.mh-pcard[data-tone="teal"] .mh-pcard-art{background:#0b7c86}
:root[data-theme="dark"] .mh-pcard[data-tone="pink"] .mh-pcard-art{background:#a3245f}
:root[data-theme="dark"] .mh-pcard[data-tone="navy"] .mh-pcard-art{background:#244d7c}
.mh-pcard-tx{display:block;padding:14px 16px 16px}
.mh-pcard-tx b{display:block;font:700 18px/1.2 var(--f-display)}
.mh-pcard-tx small{display:block;margin-top:4px;font:500 15px/1.35 var(--f-body);color:var(--ink-2)}
@media (max-width:420px){.mh-pcard-art{height:92px}.mh-pcard-tx{padding:12px 12px 14px}.mh-pcard-tx b{font-size:17px}}

/* Advanced: the editorial band (ink, one accent, generous space, the heading face at a lighter weight; no chips) */
.mh-adv{background:#0e1f36;color:#e8eef7;padding:72px 0 76px}
:root[data-theme="dark"] .mh-adv{background:#081426}
.mh-adv-h{margin:0;font:600 clamp(32px,4.4vw,52px)/1.08 var(--f-display);letter-spacing:-.01em;color:#fff}
.mh-adv-sub{margin:12px 0 0;max-width:40ch;font:400 18px/1.5 var(--f-body);color:#b9c7da}
.mh-adv-cards{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:20px;align-items:stretch}
.mh-adv-cards>li{display:flex}.mh-adv-cards .mh-adv-card{flex:1}
@media (min-width:640px){.mh-adv-cards[data-n="2"],.mh-adv-cards[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.mh-adv-cards[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1180px){.mh-adv-cards[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mh-adv-card{display:flex;flex-direction:column;height:100%;border-radius:14px;overflow:hidden;background:#13294a;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.08);transition:border-color .2s,transform .2s}
.mh-adv-card:hover{border-color:rgba(255,255,255,.28);transform:translateY(-2px)}.mh-adv-card:focus-visible{outline:3px solid #f07ab5;outline-offset:3px}
.mh-adv-cov{display:block;background:#0a1830}
.mh-cover{display:block;width:100%;height:auto;aspect-ratio:16/9}
.mh-cover .l{fill:none;stroke:#9fb6d4;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.mh-cover .n{fill:#cfdcef}
.mh-cover .a{fill:none;stroke:#f07ab5;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mh-cover .f{fill:#3b5a85}.mh-cover .a-f{fill:#f07ab5}
.mh-adv-tx{flex:1;display:flex;flex-direction:column;gap:4px;padding:18px 20px 20px}
.mh-adv-tx small{font:600 13px/1.3 var(--f-body);letter-spacing:.04em;text-transform:uppercase;color:#8fa6c4}
.mh-adv-tx b{font:600 21px/1.2 var(--f-display);color:#fff}
.mh-adv-meta{margin-top:6px;font:400 15px/1.4 var(--f-body);color:#c9d5e6}
.mh-adv-lvl{margin-top:auto;padding-top:10px;font:600 14px/1.4 var(--f-body);color:#e8eef7}
.mh-adv-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;margin-top:36px;padding:0 22px;border-radius:999px;background:#fff;color:#0e1f36;font:700 16px/1 var(--f-body);text-decoration:none}
.mh-adv-btn:hover{background:#fde8f1}.mh-adv-btn:focus-visible{outline:3px solid #f07ab5;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.mh-adv-card{transition:none}.mh-adv-card:hover{transform:none}}
@media (prefers-reduced-motion:reduce){.mh-pcard{transition:none}.mh-pcard:hover{transform:none}}

/* the grades: the homepage's course cards (.hm-crs-it), a grade number on the art, the units, lessons and access,
   and Start or Continue with this browser's progress on one row (filled without moving anything) */
@media (min-width:1024px){.mh-crs{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}
.mh-num{position:absolute;z-index:2;inset-inline-start:14px;top:14px;display:flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 10px;
  border-radius:12px;background:var(--music-ink);color:#fff;font:700 24px/1 var(--f-display);box-shadow:none}
:root[data-theme="dark"] .mh-num{background:var(--music);color:#2a0f22}
.mh-g .hm-crs-tx small.mh-acc{color:var(--ink);font-weight:600}
.mh-ft{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-top:auto;padding:0 18px;min-height:44px}
.mh-go{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:10px;background:var(--surface);color:var(--music-ink);font:700 16px/1 var(--f-body);
  box-shadow:none;white-space:nowrap}
.mh-g:hover .mh-go{background:var(--music-ink);color:#fff}
:root[data-theme="dark"] .mh-g:hover .mh-go{color:#2a0f22}
.mh-pg{font-size:14.5px;font-weight:700;color:var(--music-ink);white-space:nowrap}
.mh-plan{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:20px 0 0;font-size:16.5px;line-height:1.5;color:var(--ink-2)}
.mh-plan span{text-wrap:pretty}
.mh-plan .hm-link{white-space:nowrap;display:inline-flex;align-items:center;min-height:44px}
.mh-grades .hm-lvl{background:var(--surface)}
.mh-grades .hm-head .hm-link{display:inline-flex;align-items:center;min-height:44px}
.mh-grades .hm-level-go .hm-b{min-height:48px;padding:0 20px}

/* how it works: three steps on the blue band */
.mh-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.mh-steps li{display:flex;flex-direction:column;gap:8px;padding:24px;border-radius:18px;background:var(--surface)}
.mh-steps b{font:600 20px/1.2 var(--f-display);color:var(--ink)}
.mh-steps span:not(.mh-step-ic){color:var(--ink-2);font-size:16px;line-height:1.5;text-wrap:pretty}
.mh-step-ic{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:var(--music-tint);color:var(--music-ink);margin-bottom:4px}
@media (max-width:760px){.mh-steps{grid-template-columns:1fr;gap:12px}.mh-steps li{padding:18px 20px}}

/* trainers and tools: compact cards, the homepage's tool tints */
.mh-sub{margin:-8px 0 22px;color:var(--ink-2);font-size:17px}
.mh-tools{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.mh-tool{--c:var(--blue);--ci:var(--blue-ink);--ct:var(--blue-tint);display:flex;align-items:center;gap:14px;height:100%;min-height:76px;padding:14px 18px;border-radius:18px;
  background:var(--ct);color:var(--ink);text-decoration:none;transition:box-shadow var(--m-t2,.3s) var(--m-ease,ease),transform var(--m-t2,.3s) var(--m-ease,ease)}
.mh-tool[data-tone="pink"]{--c:var(--music);--ci:var(--music-ink);--ct:var(--music-tint)}
.mh-tool[data-tone="teal"]{--c:var(--study);--ci:var(--study-ink);--ct:var(--study-tint)}
.mh-tool[data-tone="violet"]{--c:var(--play);--ci:var(--play-ink);--ct:var(--play-tint)}
.mh-tool[data-tone="gold"]{--c:var(--gold);--ci:var(--gold-ink);--ct:var(--gold-tint)}
.mh-tool:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.mh-tool-ic{flex:none;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:var(--surface);color:var(--ci)}
.mh-tool-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.mh-tool-tx b{font:600 18px/1.2 var(--f-display)}
.mh-tool-tx small{font-size:14.5px;line-height:1.4;color:var(--ink-2);text-wrap:pretty}

/* good to know: a quiet row of links and the credits */
.mh-know{padding:clamp(40px,5vw,64px) 0}
.mh-h3{font-size:22px;margin:0 0 10px}
.mh-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 28px}
.mh-links li{display:flex;align-items:center;flex-wrap:wrap;gap:0 6px}
.mh-links a{white-space:nowrap}
.mh-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--study-ink);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.mh .mu-legal{margin:24px 0 0;color:var(--ink-3);font-size:13.5px;max-width:80ch;line-height:1.5}
.mh .mu-legal + .mu-legal{margin-top:8px}
.mh .mu-legal a{color:var(--ink-3)}

/* the end: the homepage's final band, in the music pink */
.mh-end{background:var(--music);color:#2a0f22;--ring:#2a0f22}
.mh-end h2{color:#2a0f22}
.mh-end a:focus-visible{outline-color:#2a0f22}

@media (prefers-reduced-motion:reduce){.mh-tool,.mh-tool:hover{transition:none;transform:none}}
html[data-motion="off"] .mh-tool:hover{transform:none}
@media (max-width:640px){
  .mh-tools{grid-template-columns:1fr;gap:12px}.mh-plan{font-size:15.5px}
  /* Find my grade: the grades two or three to a row, not a stack of full-width buttons */
  .mh .mh-grades .hm-level-go{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;width:100%}
  .mh .mh-grades .hm-level-go .hm-b{width:auto;padding:0 12px}
  /* the end band's button full width, as the hero's, so a long label keeps to one line */
  .mh-end .hm-b{width:100%}
}
@media (max-width:360px){.mh .hm-hero .hm-b,.mh-end .hm-b{padding:0 14px;font-size:16px}}

/* legibility on phones (owner, 12 Oct): body text 16 px or more in every part of the page, the small print included */
@media (max-width:640px){
  .mh main :is(.hm-lede,.hm-inside li,.hm-crs-tx small,.mh-pg,.mh-plan,.hm-lvl p,.mh-steps span,.mh-sub,.mh-tool-tx small,.mu-legal,.hm-link){font-size:16px}
  .mh main .bl-en{font-size:16px!important}
  .mh main .mh-go{font-size:16px}
}

/* the Ear Training page (includes/music/ear.php): the trainers as cards, the levels and where it lives side by side,
   the plans that include it as plain cards with their price */
.mh-ear-hero h1{font-size:clamp(36px,5vw,64px)}
.mh-ear-tr{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.mh-ear-tr li{display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:18px;background:var(--surface)}
.mh-ear-pic{display:block;width:100%;height:auto;border-radius:12px;background:var(--sunk)}
.mh-ear-row{display:flex;align-items:center;gap:14px}
.mh-ear-row .mh-tool-ic{background:var(--music-tint);color:var(--music-ink)}
.mh-ear-row b{display:block;font:600 19px/1.2 var(--f-display)}
.mh-ear-row small{display:block;margin-top:2px;font-size:15px;line-height:1.4;color:var(--ink-2)}
.mh-ear-tr .hm-link{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px}
.mh-ear-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 56px}
.mh-ear-p{font-size:18px;line-height:1.55;color:var(--ink-2);margin:0 0 12px;max-width:46ch}
.mh-ear-pl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.mh-ear-pl li{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border-radius:18px;background:var(--paper)}
.mh-ear-pl li.is-main{background:var(--music-tint)}
.mh-ear-pl b{font:600 20px/1.2 var(--f-display)}
.mh-ear-pr{font-weight:700;color:var(--ink)}
.mh-ear-pl small{font-size:15.5px;line-height:1.45;color:var(--ink-2)}
.mh-ear-go{margin:24px 0 0}
@media (max-width:760px){.mh-ear-two{grid-template-columns:1fr}}
@media (max-width:640px){.mh-ear-p,.mh-ear-row small,.mh-ear-pl small{font-size:16px}}

/* disclosures (details.mh-sec; assets/music/mh-details.js): a 44 px summary with its label and a chevron, rounded cards on
   one band; the body is the page's own content, in the DOM for search */
.mh-secs .wrap{display:flex;flex-direction:column;gap:12px}
.mh-sec{border-radius:18px;background:var(--surface);scroll-margin-top:96px}
.mh-sec > summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:10px 20px;cursor:pointer;list-style:none;border-radius:18px}
.mh-sec > summary::-webkit-details-marker{display:none}
.mh-sec > summary h2{margin:0;font:600 clamp(19px,2.2vw,24px)/1.25 var(--f-display);color:var(--ink)}
.mh-sec > summary:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px}
.mh-sec-ch{flex:none;color:var(--ink-2);transition:transform .2s cubic-bezier(.22,1,.36,1)}
.mh-sec[open] > summary .mh-sec-ch{transform:rotate(180deg)}
.mh-sec-b{padding:4px 20px 22px}
.mh-sec .mh-ear-tr li{background:var(--paper)}
.mh-sec .mh-ear-pl li{background:var(--paper)}
.mh-sec .mh-ear-pl li.is-main{background:var(--music-tint)}
@media (prefers-reduced-motion:reduce){.mh-sec-ch{transition:none}}

/* the Ear Training cards: the whole card opens the trainer (its title link stretched over it), a small Free level chip,
   and Hear it, which plays an example (assets/music/mh-hear.js) and sits above the card's link */
.mh-ear-tr .mh-ear-card{position:relative;transition:box-shadow var(--m-t2,.3s) var(--m-ease,ease),transform var(--m-t2,.3s) var(--m-ease,ease)}
.mh-ear-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.mh-ear-a{color:inherit;text-decoration:none}
.mh-ear-a::after{content:"";position:absolute;inset:0;border-radius:18px}
.mh-ear-a:focus-visible{outline:none}.mh-ear-card:has(.mh-ear-a:focus-visible){outline:3px solid var(--study-ink);outline-offset:2px}
.mh-ear-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.mh-chip{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:8px;background:var(--study-tint);color:var(--study-ink);font:700 13.5px/1 var(--f-body)}
.mh-hear{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:0;border-radius:12px;background:var(--music-tint);color:var(--music-ink);font:700 15px/1 var(--f-body);cursor:pointer}
.mh-hear:hover{background:color-mix(in srgb,var(--music-tint),var(--music) 18%)}
.mh-hear:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px}
.mh-hear.is-playing svg path + path{animation:mhHear .6s ease-in-out infinite alternate}
@keyframes mhHear{from{opacity:.35}to{opacity:1}}
.mh-ear-sub{margin:10px 0 0;font:600 clamp(18px,2vw,22px)/1.3 var(--f-display);color:var(--music-ink)}
.mh-faq-q{margin:0 0 6px;font:600 18px/1.3 var(--f-display)}
@media (prefers-reduced-motion:reduce){.mh-ear-card,.mh-ear-card:hover{transition:none;transform:none}.mh-hear.is-playing svg path + path{animation:none}}
@media (max-width:640px){.mh-chip{font-size:14px}.mh-hear{font-size:16px}}
/* the Ear Training page: the hero runs into its sections at the site's section spacing, not two bands' padding */
.mh .mh-ear-hero{padding-bottom:clamp(40px,5vw,64px)}
.mh .mh-secs{padding-top:clamp(32px,4vw,56px)}

/* University-level courses (includes/music/university.php): the cap, the groups and their course cards, and the
   "Why not a degree?" disclosure that the course pages share (includes/music/uni-courses.php mu_uni_why) */
.mh-uni-hero{padding:48px 0 32px}.mh-uni-hero h1{margin:14px 0 8px;font:700 clamp(32px,5vw,52px)/1.08 var(--f-display);color:var(--ink)}
.mh-uni-cap{display:grid;place-items:center;width:72px;height:72px;border-radius:18px;background:#b8326f}
:root[data-theme="dark"] .mh-uni-cap{background:#a3245f}
.mh-uni{padding:24px 0 56px}
.mh-uni-h{margin:28px 0 12px;font:700 22px/1.2 var(--f-display);color:var(--ink)}.mh-uni-h:first-child{margin-top:0}
.mh-uni-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.mh-uni-list a{display:flex;align-items:center;gap:14px;min-height:72px;padding:12px 16px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow);color:var(--ink);text-decoration:none;transition:transform .15s}
.mh-uni-list a:hover{transform:translateY(-2px)}.mh-uni-list a:focus-visible{outline:3px solid var(--study);outline-offset:2px}
.mh-uni-list b{font:650 17px/1.25 var(--f-body)}
.mh-uni-ic{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--music-tint);color:var(--music-ink)}
.mh-uni-ic svg{width:26px;height:26px}
.mu-why{margin:28px 0 0;border-radius:16px;background:var(--surface);box-shadow:var(--shadow)}
.mu-why summary{display:flex;align-items:center;min-height:56px;padding:0 18px;cursor:pointer;font:650 18px/1.25 var(--f-display);color:var(--ink)}
.mu-why-b{padding:0 18px 16px}.mu-why-b p{margin:0 0 10px;font-size:16px;line-height:1.55;color:var(--ink-2)}
.mu-why-v,.mu-why-n{color:var(--ink-3)!important;font-size:15px!important}
@media (prefers-reduced-motion:reduce){.mh-uni-list a{transition:none}.mh-uni-list a:hover{transform:none}}

/* phone text: 16 px at least (home-ui.cjs) */
@media (max-width:760px){.mh-pcard-tx small,.mh-adv-meta,.mh-adv-lvl,.mh-adv-tx small{font-size:16px}.mh-adv-tx small{letter-spacing:.02em}}