/* 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}}
/* the slur over the second bar takes the played colour with its notes (owner, 12 Oct): its middle drawn in the music
   pink from the first note (2.0 s) to the last (3.0 s), held while that note sounds, gone with it; the loop restarts
   it. Reduced motion: the final state, the notes and the slur in ink. */
.mh-score .mh-hs-slurp{fill:none;stroke:#fff;stroke-width:14;stroke-linecap:butt;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.mh-score .mh-hs-slurc{fill:var(--music,#d6337a)}
@media (prefers-reduced-motion:no-preference){.mh-score .mh-hs-slurp{animation:mh-slur 7.2s linear infinite}}
:root[data-motion=off] .mh-score .mh-hs-slurp{animation:none}
@keyframes mh-slur{0%,27.7%{stroke-dashoffset:1;opacity:0}27.8%{stroke-dashoffset:1;opacity:1}41.7%{stroke-dashoffset:0;opacity:1}48.6%{stroke-dashoffset:0;opacity:1}50.7%,100%{stroke-dashoffset:0;opacity:0}}
/* Bruno sits right under the end of the staff, listening (coordinator, 12 Oct): about 20 px below its lowest ink, his
   drawn right edge on the staff's right end (his drawing is padded inside its box: 47 px on the right, 50 px above) */
.mh-bruno-r{display:block;width:240px;height:auto;margin-top:-64px;align-self:flex-end;margin-inline-end:-44px}
.mh-bruno-r svg{display:block;width:100%;height:auto;aspect-ratio:244/252}
/* Bruno's paw taps on the hero score's beats (owner, 12 Oct): the score lights its notes on a 0.5 s grid in a 7.2 s loop
   (mh-play above), 14.4 beats, so a free 0.5 s pulse (friend-listen.css) would drift off the beat after one loop; this
   shares the loop: a tap on each beat while the melody plays (0 to 3 s), still for the rest. Reduced motion and
   data-motion=off: friend-listen.css stops it. */
.mh-bruno-r.fl-listen .fr-armR{animation:mh-paw 7.2s linear infinite}
@keyframes mh-paw{0.0%{transform:translateY(0)}1.25%{transform:translateY(1.6px)}3.06%{transform:translateY(0)}6.94%{transform:translateY(0)}8.19%{transform:translateY(1.6px)}10.0%{transform:translateY(0)}13.89%{transform:translateY(0)}15.14%{transform:translateY(1.6px)}16.94%{transform:translateY(0)}20.83%{transform:translateY(0)}22.08%{transform:translateY(1.6px)}23.89%{transform:translateY(0)}27.78%{transform:translateY(0)}29.03%{transform:translateY(1.6px)}30.83%{transform:translateY(0)}34.72%{transform:translateY(0)}35.97%{transform:translateY(1.6px)}37.78%{transform:translateY(0)}41.67%{transform:translateY(0)}42.92%{transform:translateY(1.6px)}44.72%{transform:translateY(0)}100%{transform:translateY(0)}}
@media (max-width:760px){.mh-score{width:100%;margin-inline:0}.mh-bruno-r{width:170px;margin:-32px auto -14px}}
/* phones (Batch D, 14 Oct): Choose your path comes first, so the picture shrinks to one short row, the phrase with
   Bruno at its end, about a third of its old height; the desktop picture is unchanged */
@media (max-width:760px){
  .mh .mh-hero .mh-art{flex-direction:row;align-items:flex-end;justify-content:center;max-width:420px;margin:18px auto 0}
  .mh .mh-hero .mh-score{flex:1 1 0;min-width:0;width:auto}
  .mh .mh-hero .mh-bruno-r{flex:none;width:92px;margin:0 -14px -10px -20px;align-self:flex-end}
}
/* the band under the hero ends just below Bruno (coordinator, 12 Oct: 130 px of dead space at 1440): the shared hero's
   bottom padding grows with the width; here it stops at 48 px, less Bruno's own padding under his feet */
.hm .hm-band.mh-hero{padding-bottom:clamp(32px,3vw,48px)}
@media (min-width:761px){.mh-bruno-r{margin-bottom:-12px}}

/* 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}
.hm .hm-band.mh-path{padding-bottom:clamp(40px,4vw,56px)}   /* the section rhythm, not the shared band's larger bottom (coordinator, 12 Oct) */
.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:block;height:116px;overflow:hidden;background:var(--pt-tint)}
.mh-pcard-art svg.pt{display:block;width:100%;height:100%}
/* ---- pt-palette: the path tiles' scenes (brand/mascot/path-tiles.cjs; owner and coordinator, 12 Oct: illustrated
   scenes, not glyph icons). Each drawing reads these per tone and theme: tint, deep (the floor and depth), base, shade
   (the cel shade), hi (a lighter base), line (the outline), note (a note on the backdrop), gold. Paper is paper in both
   themes (owner, 12 Oct: "Pages stay white"): paper, paper2 (its shade), pnote (notation on it), pline, key. */
.mh-pcard{--pt-line:#15365a;--pt-note:#15365a;--pt-paper:#fff;--pt-paper2:#e6ecf5;--pt-pnote:#15365a;--pt-pline:#c3cfdf;--pt-key:#f6f8fc;--pt-gold:#ffc83d;--pt-goldsh:#e0a514;
  --pt-tint:#fde8f1;--pt-deep:#f7cfe1;--pt-base:#e0559a;--pt-shade:#b8326f;--pt-hi:#f6a6cb}
.mh-pcard[data-tone="blue"]{--pt-tint:#e3f0fc;--pt-deep:#c9e1f7;--pt-base:#3a7bd5;--pt-shade:#2a5fa8;--pt-hi:#9ccaf5}
.mh-pcard[data-tone="navy"]{--pt-tint:#e6ebf3;--pt-deep:#ccd6e6;--pt-base:#3f6aa3;--pt-shade:#22477a;--pt-hi:#a9c1e2}
.mh-pcard[data-tone="teal"]{--pt-tint:#dcf3f2;--pt-deep:#bde6e4;--pt-base:#0d9aa7;--pt-shade:#08707a;--pt-hi:#7fd6dd}
/* the pink card dark: orchid as --music-tint and --pink-tint (19 Oct 2026: #3a1a33 was the plum the owner flagged) */
:root[data-theme="dark"] .mh-pcard{--pt-line:#08121f;--pt-note:#eaf2fb;
  --pt-tint:#3a1650;--pt-deep:#2b1040;--pt-base:#f07ab5;--pt-shade:#c24f8c;--pt-hi:#f8b3d4}
:root[data-theme="dark"] .mh-pcard[data-tone="blue"]{--pt-tint:#13304f;--pt-deep:#0e2640;--pt-base:#5aaff0;--pt-shade:#3d86c6;--pt-hi:#a5d2f7}
:root[data-theme="dark"] .mh-pcard[data-tone="navy"]{--pt-tint:#152338;--pt-deep:#0e1829;--pt-base:#5b86c0;--pt-shade:#3a6399;--pt-hi:#a3bde0}
:root[data-theme="dark"] .mh-pcard[data-tone="teal"]{--pt-tint:#0f3438;--pt-deep:#0b2a2d;--pt-base:#12acb9;--pt-shade:#0b7c86;--pt-hi:#6fd8e0}
:root[data-theme="dark"] .mh-pcard .pt-grain{opacity:.5}
/* hover only: the metronome's arm swings, the speaker's arcs pulse; nothing with reduced motion or data-motion=off */
.mh-pcard .pt-arm{transform:rotate(-14deg)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .mh-pcard:hover .pt-arm{animation:pt-swing 1s cubic-bezier(.45,0,.55,1) infinite alternate}
  .mh-pcard:hover .pt-arc{animation:pt-pulse .9s ease-in-out infinite alternate}.mh-pcard:hover .pt-arc2{animation-delay:.3s}}
@keyframes pt-swing{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
@keyframes pt-pulse{from{opacity:1}to{opacity:.35}}
:root[data-motion=off] .mh-pcard .pt-arm,:root[data-motion=off] .mh-pcard .pt-arc{animation:none!important}
/* ---- end pt-palette */
.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)}
/* the product a card or band belongs to, Music Theory or Advanced Music (owner, 12 Oct 2026) */
.mh-grp{display:block;margin:0 0 4px;font:700 13px/1.3 var(--f-body);font-style:normal;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* one line, so every card's title sits on one baseline (the Tools card keeps the line empty) */
.mh-grp-h{margin:0 0 2px;font-size:14px;color:var(--music-ink,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-soon{margin:20px 0 0;font:400 16px/1.4 var(--f-body);color:#8fa6c4}
.mh-adv-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;margin-top:36px;padding:0 22px;border-radius:12px;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) */
.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-g .hm-crs-tx small.mh-acc.is-free{color:var(--free)}   /* a free grade says so in the free colour (owner, 13 Oct) */
.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-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-more-h{margin:36px 0 16px}   /* More tools: the UCAS page and the composer tools, cards like the papers above */
.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}
  /* 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,.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;color:var(--ink-3);font:600 14.5px/1.2 var(--f-body)}   /* plain muted text, not a pill (first-visit pass, 14 Oct); --ink-3 on --paper is 5.3:1 light, 8.9:1 dark */
.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)}
/* first-visit pass, 14 Oct: the plans are one quiet link at the end; on a phone Bruno keeps about 85% of his size and
   the art box around him is tightened (less air above and below, the two tiles close beside him), so the first trainer
   card starts on the first screen */
.mh-ear-end{margin:8px 0 0;padding:0 4px;font-size:16.5px}
.mh-ear-end .hm-link{display:inline-flex;align-items:center;min-height:44px;padding-block:0;margin-block:0}
@media (max-width:760px){
  .mh .mh-ear-hero{padding-bottom:16px}
  .mh-ear-hero .hm-hero-in{gap:12px}
  .mh-ear-hero .hm-art{aspect-ratio:auto;height:172px;max-width:320px}
  .mh-ear-hero .mh-bruno{width:152px;inset-inline-start:calc(50% - 76px);bottom:0}
  .mh-ear-hero .hm-ft{width:56px}
  .mh-ear-hero .hm-ft1{inset-inline-start:calc(50% - 136px);top:10%}
  .mh-ear-hero .hm-ft4{inset-inline-end:calc(50% - 136px);top:46%}
}

/* 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-list li{display:flex}.mh-uni-list li > a{flex:1}   /* a row of cards one height */
.mh-uni-t{display:grid;gap:4px;min-width:0}.mh-uni-l{font:400 15px/1.4 var(--f-body);color:var(--ink-2)}   /* a course's one line (mu_uni_pitch) */
.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}
.mu-why-s a{color:inherit;text-decoration:underline;text-underline-offset:2px}   /* the fee sources, small links */
@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}}

/* Show all (assets/music/mh-more.js): one quiet button under a list it shortened; the page's 12 px button corner, no pill */
.mh-more-btn{display:inline-flex;align-items:center;min-height:48px;margin-top:18px;padding:0 22px;border:2px solid var(--rule-2);border-radius:12px;background:var(--surface);color:var(--ink);font:650 16px/1 var(--f-body);cursor:pointer}
.mh-more-btn:hover{border-color:var(--ink-3)}.mh-more-btn:focus-visible{outline:3px solid var(--study);outline-offset:2px}

/* Find where to start (owner, 12 Oct): the chooser, What do you want to do? Four options, two across, each the path's
   own scene with what it is for under it (includes/music/home.php #mhPick, music-home.js). */
.mh-pick{width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:24px;background:var(--surface,var(--paper));color:var(--ink);box-shadow:0 24px 70px rgba(8,20,36,.3);overflow:auto}
.mh-pick::backdrop{background:rgba(8,20,36,.5)}
.mh-pick-in{padding:20px 20px 22px}
.mh-pick-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
.mh-pick-hd h2{margin:0;font:700 clamp(22px,1.2vw + 17px,28px)/1.15 var(--f-display)}
.mh-pick-x{display:grid;place-items:center;flex:none;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--ink-2);cursor:pointer}
.mh-pick-x:hover{background:var(--sunk);color:var(--ink)}
.mh-pick-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mh-pick-o{box-shadow:none;border:2px solid var(--rule)}
.mh-pick-o:hover{border-color:var(--rule-2)}
#mh-h-path,#muTh,#mh-level{scroll-margin-top:84px}   /* clear of the sticky header when Browse or the chooser scrolls there */
.mh-pick-t{display:block;padding:12px 14px 14px;font:700 16.5px/1.3 var(--f-display)}
@media (max-width:420px){.mh-pick-in{padding:16px 14px 16px}.mh-pick-l{gap:10px}.mh-pick-t{padding:10px 12px 12px;font-size:15.5px}}
/* the hero's grade numbers (home.php .mh-gq): one tap into a grade's first lesson; four to a row on a phone, all in one
   row from 600 px; the Music Theory tint (music-nav.php --mt-*), light and dark; 48 px targets, no border, no lip */
.mh .mh-gq{margin:22px 0 0;max-width:440px}
.mh .mh-gq-h{margin:0;font:650 14px/1.3 var(--f-body);color:var(--ink-2)}
.mh .mh-gq-hd{display:flex;align-items:center;justify-content:space-between;gap:4px 16px;flex-wrap:wrap;margin:0 0 4px}
.mh .mh-gq .mh-gq-all{display:inline-flex;align-items:center;min-height:44px;padding-block:0;margin-block:0;font-size:15px}
.mh .mh-gq ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.mh .mh-gq-n{display:grid;place-items:center;min-height:48px;border-radius:12px;background:var(--mt-soft,#fde8f1);color:var(--mt-ink,#b8326f);
  font:800 20px/1 var(--f-display);text-decoration:none;transition:transform .18s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){.mh .mh-gq-n{transition:none}.mh .mh-gq-n:active{transform:none}}
.mh .mh-gq-n:hover{background:var(--mt-accent,#b8326f);color:var(--mt-on,#fff)}
.mh .mh-gq-n:active{transform:scale(.95)}
.mh .mh-gq-n:focus-visible{outline:3px solid var(--mt-accent,#b8326f);outline-offset:2px}
@media (min-width:600px){.mh .mh-gq ul{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media (forced-colors:active){.mh .mh-gq-n{border:2px solid LinkText}}