/* ===========================================================
   Brooks Musicals — shared navigation
   Age-first menu: parents pick their child's age and the
   course wall answers instantly. One menu, all 23 pages.
   =========================================================== */

:root{
  --bm-ink:#151510;--bm-paper:#fffaf0;--bm-cream:#f4f0e5;
  --bm-crimson:#c1272d;--bm-lime:#8cc63f;--bm-purple:#662d91;--bm-tint:#dccbec}

.bm-nav{font-family:'Space Grotesk',system-ui,sans-serif}
.bm-plain-nav{
  position:sticky;top:10px;z-index:9200;
  width:min(1320px,calc(100vw - 32px));min-height:52px;margin:10px auto 0;
  padding:5px 6px 5px 18px;box-sizing:border-box;
  display:flex;align-items:center;gap:12px;border:1px solid rgba(21,21,16,.2);
  border-radius:999px;background:rgba(255,250,240,.94);color:var(--bm-ink);
  box-shadow:0 12px 30px -18px rgba(21,21,16,.42);backdrop-filter:blur(14px) saturate(1.2)
}
.bm-plain-brand{margin-right:auto;min-width:0;color:inherit;text-decoration:none;font:700 16px/1 'Space Grotesk',sans-serif;letter-spacing:-.04em;white-space:nowrap}
.bm-plain-brand span{color:var(--bm-crimson)}
.bm-plain-nav .bm-actions{margin-left:0}
/* each world's own link row and toggle are replaced by ours */
.bm-nav .world-links,.bm-nav .world-nav__links,.bm-nav .nav-links,
.bm-nav .world-menu,.bm-nav .menu-toggle{display:none !important}

/* ---------- nav actions: one capsule, two jobs ---------- */
.bm-actions{
  margin-left:auto;flex:none;align-self:center;display:flex;align-items:center;gap:6px;
  padding:4px;border-radius:999px;background:color-mix(in oklab,currentColor 7%,transparent);
  backdrop-filter:saturate(1.4) blur(6px)}

.bm-open{
  display:inline-flex;align-items:center;gap:9px;flex:none;
  height:40px;box-sizing:border-box;padding:0 16px;
  font:600 13.5px/1 'Space Grotesk',sans-serif;letter-spacing:-.005em;
  color:currentColor;background:transparent;cursor:pointer;
  border:0;border-radius:999px;white-space:nowrap;
  transition:background .18s ease,color .18s ease}
.bm-open:hover{background:color-mix(in oklab,currentColor 12%,transparent)}
.bm-open[aria-expanded=true]{background:currentColor}
.bm-open[aria-expanded=true] span{color:var(--bm-paper)}

.bm-open-bars{display:grid;gap:4px;width:14px;flex:none}
.bm-open-bars i{display:block;height:1.5px;width:14px;background:currentColor;border-radius:2px;
  transition:width .22s ease,transform .22s ease}
.bm-open-bars i:nth-child(2){width:9px;margin-left:auto}
.bm-open:hover .bm-open-bars i:nth-child(2){width:14px}

.bm-cta{
  flex:none;display:inline-flex;align-items:center;gap:8px;
  height:40px;box-sizing:border-box;padding:0 8px 0 18px;white-space:nowrap;
  font:600 13.5px/1 'Space Grotesk',sans-serif;letter-spacing:-.005em;text-decoration:none;
  border-radius:999px;background:var(--bm-ink);color:var(--bm-paper);border:0;
  transition:background .18s ease,color .18s ease}
.bm-cta em{font-style:normal;font-size:13px;line-height:1;display:grid;place-items:center;
  width:26px;height:26px;border-radius:50%;flex:none;
  background:var(--bm-lime);color:var(--bm-ink);
  transition:transform .22s cubic-bezier(.22,1,.36,1),background .18s ease}
.bm-cta:hover{background:var(--bm-crimson);color:#fff}
.bm-cta:hover em{transform:translateX(2px);background:#fff;color:var(--bm-crimson)}
@media(max-width:560px){.bm-cta{padding:0 6px 0 14px}.bm-cta span{display:none}.bm-cta em{background:var(--bm-lime)}}
@media(max-width:420px){.bm-open span{display:none}.bm-open{padding:0 13px}}
@media(max-width:600px){.bm-plain-nav{top:6px;width:calc(100vw - 16px);min-height:48px;margin-top:6px;padding-left:14px}.bm-plain-brand{font-size:14px}}

/* ---------- overlay ---------- */
.bm-overlay{
  position:fixed;inset:0;z-index:9500;background:var(--bm-paper);color:var(--bm-ink);
  display:flex;flex-direction:column;overflow:hidden;
  opacity:0;visibility:hidden;transition:opacity .26s ease,visibility .26s}
.bm-overlay[data-open="true"]{opacity:1;visibility:visible}

.bm-bar{
  flex:none;display:flex;align-items:center;gap:18px;
  padding:18px clamp(18px,4vw,44px);border-bottom:1.5px solid var(--bm-ink)}
.bm-home{text-decoration:none;color:inherit;border-radius:8px;transition:opacity .18s}
.bm-home:hover{opacity:.6}
.bm-bar strong{font:400 clamp(19px,2vw,26px)/1 'Instrument Serif',Georgia,serif;letter-spacing:-.01em}
.bm-bar strong span{color:var(--bm-crimson)}
.bm-close{
  margin-left:auto;width:46px;height:46px;flex:none;cursor:pointer;
  border:1.5px solid var(--bm-ink);border-radius:50%;background:none;color:var(--bm-ink);
  font-size:17px;line-height:1;transition:background .2s,color .2s,transform .2s}
.bm-close:hover{background:var(--bm-ink);color:var(--bm-paper);transform:rotate(90deg)}

.bm-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:clamp(20px,3vw,34px) clamp(18px,4vw,44px) 40px}
.bm-inner{max-width:1240px;margin:0 auto}

/* ---------- age filter ---------- */
.bm-ages{margin-bottom:clamp(22px,3vw,32px)}
.bm-ages-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;margin-bottom:14px}
.bm-ages-head h2{margin:0;font:400 clamp(24px,3vw,38px)/1.05 'Instrument Serif',Georgia,serif;letter-spacing:-.02em}
.bm-ages-head p{margin:0;font:400 13.5px/1.5 'Space Grotesk',sans-serif;color:rgba(21,21,16,.62);max-width:44ch}
.bm-chips{display:flex;flex-wrap:wrap;gap:8px}
.bm-chip{
  font:500 14px/1 'DM Mono',ui-monospace,monospace;letter-spacing:.04em;cursor:pointer;
  min-width:46px;min-height:44px;padding:0 14px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(21,21,16,.24);border-radius:12px;
  background:var(--bm-cream);color:var(--bm-ink);
  transition:background .16s,border-color .16s,transform .16s,color .16s}
.bm-chip:hover{border-color:var(--bm-ink);transform:translateY(-2px)}
.bm-chip[aria-pressed="true"]{background:var(--bm-lime);border-color:var(--bm-ink);font-weight:700}
.bm-chip[data-any]{min-width:auto;font-family:'Space Grotesk',sans-serif;font-size:13.5px;letter-spacing:0}

/* ---------- course wall ---------- */
.bm-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:12px}
.bm-tile{
  position:relative;display:flex;flex-direction:column;gap:8px;
  min-height:132px;padding:15px 16px 14px;text-decoration:none;
  border:1.5px solid var(--bm-ink);border-radius:15px;
  background:var(--bm-cream);color:var(--bm-ink);overflow:hidden;
  transition:transform .2s,box-shadow .2s,opacity .22s,filter .22s}
.bm-tile:hover{transform:translateY(-3px);box-shadow:5px 6px 0 var(--bm-ink)}
.bm-mono{
  width:38px;height:38px;flex:none;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font:700 14px/1 'Space Grotesk',sans-serif;letter-spacing:.02em;color:#fff}
.bm-tile b{font:700 clamp(16px,1.5vw,18.5px)/1.15 'Space Grotesk',sans-serif;letter-spacing:-.01em}
.bm-tile s{text-decoration:none;font:400 12.5px/1.45 'Space Grotesk',sans-serif;color:rgba(21,21,16,.6);margin-top:-3px}
.bm-tile u{
  text-decoration:none;margin-top:auto;align-self:flex-start;
  font:500 10px/1 'DM Mono',ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 9px;border-radius:999px;background:var(--bm-lime);color:var(--bm-ink)}
.bm-tile[data-later] u{background:var(--bm-tint);color:var(--bm-purple)}
.bm-tile[data-later]{opacity:.5}
.bm-tile[data-later]:hover{opacity:.85}
.bm-tile[aria-current]{background:var(--bm-paper);box-shadow:inset 0 0 0 2px var(--bm-crimson)}
.bm-tile[data-hub]{background:var(--bm-paper)}
.bm-tile[data-hub] b{font-size:clamp(17px,1.6vw,20px)}

.bm-group{margin:0 0 12px;display:flex;align-items:baseline;gap:11px}
.bm-group h3{margin:0;font:500 10.5px/1 'DM Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--bm-crimson)}
.bm-group hr{flex:1;height:0;border:0;border-top:1px solid rgba(21,21,16,.16)}
.bm-section{margin-top:clamp(22px,2.6vw,30px)}
.bm-section:first-of-type{margin-top:0}

/* ---------- practical row ---------- */
.bm-foot{
  margin-top:clamp(26px,3vw,38px);padding-top:20px;border-top:1.5px solid var(--bm-ink);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:10px}
.bm-foot a{
  display:flex;flex-direction:column;gap:3px;padding:13px 15px;min-height:44px;
  text-decoration:none;border-radius:12px;background:var(--bm-cream);color:var(--bm-ink);
  border:1.5px solid transparent;transition:border-color .18s,background .18s,transform .18s}
.bm-foot a:hover{border-color:var(--bm-ink);transform:translateY(-2px)}
.bm-foot a b{font:700 15px/1.2 'Space Grotesk',sans-serif}
.bm-foot a s{text-decoration:none;font:400 12px/1.4 'Space Grotesk',sans-serif;color:rgba(21,21,16,.58)}
.bm-foot a[data-cta]{background:var(--bm-crimson);color:#fff}
.bm-foot a[data-cta] s{color:rgba(255,255,255,.76)}
.bm-foot a[data-cta]:hover{background:var(--bm-lime);color:var(--bm-ink)}
.bm-foot a[data-cta]:hover s{color:rgba(21,21,16,.66)}

.bm-follow{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex:0 1 auto;min-width:0;margin-left:auto;color:inherit;font:500 10px/1 'DM Mono',ui-monospace,monospace;letter-spacing:.04em}
.bm-follow + .bm-actions{margin-left:8px}
.bm-follow-label,.bm-socials .bm-follow-label,.bm-social-links .bm-follow-label{margin-right:7px;text-transform:uppercase;letter-spacing:.14em;opacity:.58;white-space:nowrap}
.bm-follow a,.bm-socials a,.bm-social-links a{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:30px;min-height:30px;color:inherit;text-decoration:none;border-radius:999px;transition:background .18s,color .18s,transform .18s}
.bm-follow a{padding:0 5px}
.bm-follow a:hover,.bm-follow a:focus-visible{background:color-mix(in oklab,currentColor 12%,transparent);transform:translateY(-2px)}
.bm-social-icon{display:grid;place-items:center;width:18px;height:18px;flex:none;font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.08em}
.bm-social-icon svg{display:block;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bm-social-icon .bm-social-fill{fill:currentColor;stroke:none}.bm-social-icon .bm-social-solid{fill:currentColor;stroke:none}
.bm-social-letter{font-size:15px;line-height:1}.bm-social-letter--fb{font-family:Arial,sans-serif;font-size:18px}.bm-social-letter--in{font-size:12px;letter-spacing:-.1em}
.bm-social-name{white-space:nowrap}
.bm-socials{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:18px;padding:16px 0 0;border-top:1px solid rgba(21,21,16,.16);font:500 11px/1 'DM Mono',ui-monospace,monospace;letter-spacing:.05em}.bm-socials .bm-follow-label{margin-right:auto}.bm-socials a{padding:5px 0;border-radius:7px}.bm-socials a:hover,.bm-socials a:focus-visible,.bm-social-links a:hover,.bm-social-links a:focus-visible{color:var(--bm-crimson);text-decoration:underline;text-underline-offset:4px}.bm-socials .bm-social-icon{display:grid}
.bm-social-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;width:100%}.bm-social-links .bm-follow-label{margin-right:auto}.bm-social-links a{padding:6px 0}.bm-social-links a:hover,.bm-social-links a:focus-visible{color:#a3da56;text-decoration:underline;text-underline-offset:4px}
.bm-social-dock{display:flex;flex-wrap:wrap;align-items:center;padding:24px clamp(20px,5vw,78px);border-top:1px solid rgba(255,255,255,.2);background:#151510;color:#fffaf0;font:500 11px/1.35 'DM Mono',ui-monospace,monospace;letter-spacing:.05em}
.bm-legal{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:12px;font:500 10px/1 'DM Mono',ui-monospace,monospace;letter-spacing:.05em}.bm-legal span{margin-right:auto;text-transform:uppercase;letter-spacing:.14em;opacity:.58}.bm-legal a{color:inherit;text-decoration:none;padding:8px 0}.bm-legal a:hover,.bm-legal a:focus-visible{color:var(--bm-crimson);text-decoration:underline;text-underline-offset:4px}
.bm-nav,.bm-nav > *, .bm-nav .nav-inner,.bm-nav .world-inner{min-width:0}.bm-nav .brand,.bm-nav .world-brand{flex:0 1 auto;min-width:0}.bm-nav .brand img{max-width:100%}.bm-nav .nav-wave{flex:1 1 auto;min-width:0}

@media(max-width:520px){
  .bm-wall{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
  .bm-tile{min-height:118px}
  .bm-socials .bm-follow-label{width:100%;margin-right:0}
  .bm-legal span{width:100%;margin-right:0}
  .bm-social-dock{padding-block:20px}.bm-social-links{gap:6px 14px}.bm-social-links .bm-follow-label{width:100%;margin-right:0}
}
@media(max-width:1180px){.bm-follow-label{display:none}.bm-follow .bm-social-name{display:none}.bm-follow a{width:30px;padding:0}}
@media(max-width:760px){.bm-follow{gap:2px}.bm-follow a{width:27px;min-width:27px;min-height:27px}.bm-follow .bm-social-icon{width:16px;height:16px}.bm-follow .bm-social-icon svg{width:16px;height:16px}.bm-follow .bm-social-letter{font-size:13px}.bm-follow .bm-social-letter--fb{font-size:16px}.bm-follow .bm-social-letter--in{font-size:11px}}
/* ---------- floating page jumper ---------- */
/* pointer-events:none on the wrapper: the closed panel is only visibility:hidden, so it still occupies layout and left the wrapper a ~324x476 fixed hit area over the lower-left of every page, swallowing clicks on anything beneath it. The button and the open panel opt back in. */
.bm-jump{position:fixed;left:16px;bottom:16px;z-index:9400;pointer-events:none;
  font-family:'Space Grotesk',system-ui,sans-serif;display:flex;flex-direction:column;
  align-items:flex-start;gap:10px}
.bm-jump-btn{pointer-events:auto;display:inline-flex;align-items:center;gap:11px;height:48px;padding:0 8px 0 16px;
  border:0;border-radius:999px;cursor:pointer;
  background:rgba(21,21,16,.92);color:#fdfbf6;
  backdrop-filter:blur(10px) saturate(1.4);
  box-shadow:0 10px 30px -12px rgba(21,21,16,.6),inset 0 1px 0 rgba(253,251,246,.14);
  transition:transform .2s cubic-bezier(.22,1,.36,1),background .2s}
.bm-jump-btn:hover{transform:translateY(-2px)}
.bm-jump-dot{width:8px;height:8px;border-radius:50%;background:var(--bm-lime);flex:none;
  box-shadow:0 0 0 4px rgba(140,198,63,.22)}
.bm-jump-txt{display:grid;text-align:left;gap:2px;line-height:1}
.bm-jump-txt s{text-decoration:none;font:500 8.5px/1 'DM Mono',ui-monospace,monospace;
  letter-spacing:.18em;text-transform:uppercase;opacity:.5}
.bm-jump-txt b{font-weight:600;font-size:13.5px;letter-spacing:-.005em;white-space:nowrap;
  max-width:180px;overflow:hidden;text-overflow:ellipsis}
.bm-jump-chev{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(253,251,246,.12);transition:transform .28s cubic-bezier(.22,1,.36,1),background .2s}
.bm-jump-chev::before{content:'';width:6px;height:6px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(-135deg) translate(-1px,-1px)}
.bm-jump[data-open=true] .bm-jump-chev{transform:rotate(180deg);background:var(--bm-lime);color:var(--bm-ink)}

.bm-jump-panel{width:min(324px,calc(100vw - 32px));
  background:var(--bm-paper);color:var(--bm-ink);border-radius:22px;
  border:1px solid rgba(21,21,16,.1);
  box-shadow:0 30px 70px -30px rgba(21,21,16,.5),0 2px 8px rgba(21,21,16,.08);
  opacity:0;transform:translateY(12px) scale(.97);transform-origin:12px 100%;
  pointer-events:none;visibility:hidden;
  transition:opacity .22s ease,transform .28s cubic-bezier(.22,1,.36,1),visibility .28s}
.bm-jump[data-open=true] .bm-jump-panel{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.bm-jump-scroll{max-height:min(60vh,460px);overflow:auto;padding:10px;
  scrollbar-width:thin;overscroll-behavior:contain}
.bm-jump-group + .bm-jump-group{margin-top:4px;padding-top:8px;border-top:1px solid rgba(21,21,16,.08)}
.bm-jump-group h4{margin:0;padding:8px 12px 6px;
  font:500 9px/1 'DM Mono',ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;opacity:.42}
.bm-jump-group > div{display:grid;gap:1px}
.bm-jump-group a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--bm-ink);
  font-size:14px;font-weight:500;transition:background .15s,color .15s}
.bm-jump-group a i{width:5px;height:5px;border-radius:50%;background:transparent;flex:none;transition:background .15s}
.bm-jump-group a:hover{background:var(--bm-ink);color:var(--bm-paper)}
.bm-jump-group a:hover i{background:var(--bm-lime)}
.bm-jump-group a[data-current]{background:rgba(140,198,63,.2);font-weight:600}
.bm-jump-group a[data-current] i{background:var(--bm-lime)}
@media(max-width:560px){.bm-jump-txt s{display:none}.bm-jump-btn{height:44px}}
@media(prefers-reduced-motion:reduce){.bm-jump-panel,.bm-jump-btn,.bm-jump-chev{transition:none}}

@media(prefers-reduced-motion:reduce){
  .bm-overlay,.bm-tile,.bm-chip,.bm-open,.bm-close,.bm-foot a{transition:none}
}

/* ===========================================================
   Responsive header contract
   The legacy worlds all provide a different nav shell. Once the shared
   menu is mounted, these rules give every shell the same safe flex behaviour
   at tablet and phone widths: the brand may shorten, actions stay tappable,
   and social links move to the overlay/footer instead of forcing a scroll.
   =========================================================== */
.bm-nav,
.bm-nav .nav-inner,
.bm-nav .world-inner{
  box-sizing:border-box;
  min-width:0;
  max-width:calc(100vw - 32px);
}
.bm-nav .nav-inner{
  width:100%;
}
.bm-nav > .world-nav__brand,
.bm-nav > .world-mark,
.bm-nav > .world-brand,
.bm-nav > .brand,
.bm-nav .nav-inner > .brand{
  min-width:0;
  flex:1 1 auto;
  max-width:clamp(150px,28vw,360px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.bm-nav .bm-follow{flex:0 0 auto;min-width:0}
.bm-nav .bm-actions{flex:0 1 auto;min-width:0;max-width:100%;overflow:hidden}
.bm-nav .bm-open,.bm-nav .bm-cta{min-width:0;max-width:100%;overflow:hidden}

@media(max-width:900px){
  /* The symbols remain available in the full menu and footer; keeping them
     in the top bar at this width is what caused the squeeze/overlap. */
  .bm-nav .bm-follow{display:none !important}
  .bm-nav > .world-nav__brand,
  .bm-nav > .world-mark,
  .bm-nav > .world-brand,
  .bm-nav > .brand,
  .bm-nav .nav-inner > .brand{max-width:40vw}
}

@media(max-width:600px){
  .bm-nav{
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
    left:8px !important;
    right:8px !important;
    transform:none !important;
    gap:8px !important;
    padding:6px 7px 6px 11px !important;
  }
  .bm-nav .nav-inner{gap:8px !important}
  .bm-nav > .world-nav__brand,
  .bm-nav > .world-mark,
  .bm-nav > .world-brand,
  .bm-nav > .brand,
  .bm-nav .nav-inner > .brand{
    max-width:38vw;
    font-size:clamp(12px,3.7vw,16px);
  }
  .bm-nav .bm-actions{gap:3px;padding:3px}
  .bm-nav .bm-open{height:38px;padding-inline:12px}
  .bm-nav .bm-cta{height:38px;padding-left:13px}
}

@media(max-width:420px){
  .bm-nav{min-height:50px !important;border-radius:22px !important}
  .bm-nav .bm-open{padding-inline:11px}
  .bm-nav .bm-cta{padding-inline:6px 7px}
  /* Keep the two-line menu icon; only remove its optional text label. */
  .bm-nav .bm-open > .bm-open-bars{display:grid}
  .bm-nav .bm-open > span:last-child{display:none}
  .bm-nav > .world-nav__brand,
  .bm-nav > .world-mark,
  .bm-nav > .world-brand,
  .bm-nav > .brand,
  .bm-nav .nav-inner > .brand{max-width:36vw}
}

/* Keep the shared navigation contained at intermediate widths too. Labels
   shorten before an action can ever escape the home bar. */
@media(max-width:760px){
  .bm-nav{overflow:hidden!important}
  .bm-nav > .world-nav__brand,.bm-nav > .world-mark,.bm-nav > .world-brand,
  .bm-nav > .brand,.bm-nav .nav-inner > .brand{max-width:31vw!important}
  .bm-nav .bm-open{padding-inline:10px;gap:6px}
  .bm-nav .bm-cta{padding-left:10px}
  .bm-nav .bm-cta span{display:none}
}

/* ===== Global audit fixes — visibility, overlaps, cut-offs ===== */
html{scroll-padding-top:84px}
html:not(.js) [data-reveal],html:not(.js) .reveal,html:not(.js) .vw-reveal{opacity:1 !important;transform:none !important}
.js [data-reveal].is-visible,.js [data-reveal].is-seen{opacity:1 !important;transform:none !important}

/* Home hero: allow wrapping before it overflows (keeps original fonts) */
@media(max-width:1180px){ .hero h1 > span,.hero h1 > em{white-space:normal !important} }

/* Piano hero grid — prevent 500px min from overflowing */
.piano-hero{grid-template-columns:minmax(280px,.68fr) minmax(360px,1.32fr) !important}
@media(max-width:980px){ .piano-hero{grid-template-columns:1fr !important} }

/* Guitar hero bleed */
.guitar-hero .fret-lane{width:calc(100% + 32px) !important; left:-16px !important}
.guitar-hero .fretboard{left:0 !important; right:0 !important; inset:18px 0 !important}

/* Ukulele pocket */
.uke-pocket{width:min(820px,92vw) !important; max-width:100% !important}
@media(max-width:600px){ .uke-pocket{left:0 !important; width:100% !important; transform:none !important} .uke-head{right:0 !important} }

/* Wind tunnel */
.breath-tunnel{margin:0 !important; width:100% !important}
.tunnel-core{top:6% !important}

/* Drums: keep scroll on mobile, fix tap targets */
@media(max-width:600px){ .drum-grid{grid-template-columns:38px repeat(16,minmax(0,1fr)) !important; gap:2px !important} .drum-step{height:36px !important; min-height:36px !important} }

/* Enquiry legend + seg */
fieldset legend{white-space:normal !important; max-width:calc(100% - 12px) !important; overflow-wrap:anywhere !important}
.seg{flex-wrap:wrap !important}

/* Decide / Online anchors already handled via html scroll-padding; also explicit */
#finder,#planner,#plan-builder,#campus-map{scroll-margin-top:84px !important}

/* Online portal */
.portal-stack .browser-window.schedule{right:0 !important}
@media(max-width:980px){ .online-title span{transform:none !important} }

/* Tuner */
.tuner .seg{flex-wrap:wrap !important}

/* Arrival protocol 03 overlap */
.arrival-protocol header{position:relative}
.arrival-protocol header span{position:relative; z-index:1}
.arrival-protocol header p{position:relative; z-index:2}

/* Ledger etc: ensure no horizontal scroll */
body{overflow-x:clip}
.campus-map,.room-compass,.arrival-protocol,.location-ledger,.remote-station{max-width:100%; overflow-x:clip}

/* Home course console: make details accessible via focus as well as hover */
.channel:focus-visible{flex:3.8; outline:2px solid var(--violet); outline-offset:2px}
@media(pointer:coarse){ .channel .channel-details{opacity:1; transform:none} .channel .channel-name,.channel .channel-symbol{opacity:0} }

/* Home hero stage overlap at 760-1050 */
@media(max-width:1050px) and (min-width:761px){
  .hero-stage{inset:auto 0 0 38% !important; height:60% !important; max-width:520px}
  .hero-copy{padding-right:32px !important}
  .hero-actions{position:relative; z-index:7}
}

/* Shared navigation v2 — one deliberate layout at every width. The old bar
   tried to retain social labels after the available space had disappeared,
   which squeezed the Brooks mark and cut off the Courses control. */
.bm-nav{
  width:min(1320px,calc(100vw - 48px)) !important;
  max-width:min(1320px,calc(100vw - 48px)) !important;
  gap:20px !important;
  overflow:visible !important;
}
.bm-nav > .world-nav__brand,.bm-nav > .world-mark,.bm-nav > .world-brand,
.bm-nav > .brand,.bm-nav .nav-inner > .brand{
  flex:0 1 260px;
  max-width:260px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.bm-nav .bm-follow{flex:1 1 auto;justify-content:center;overflow:hidden}
.bm-nav .bm-actions{margin-left:0;flex:0 0 auto;max-width:none;overflow:visible}
.bm-nav .bm-open,.bm-nav .bm-cta{max-width:none;overflow:visible}

/* Home has a real `.site-nav` wrapper, unlike the other world headers. Its
   original positioning is relative, so give the resized shared shell explicit
   auto margins instead of leaving the calculated width parked at the left. */
.site-nav.bm-nav{
  margin-left:auto !important;margin-right:auto !important;
  left:auto !important;right:auto !important;transform:none !important;
}
.site-nav.bm-nav .nav-inner{width:100% !important;margin-inline:auto}

@media(max-width:1280px){
  .bm-nav{width:calc(100vw - 32px) !important;max-width:calc(100vw - 32px) !important;gap:14px !important}
  .bm-nav .bm-follow-label,.bm-nav .bm-follow .bm-social-name{display:none !important}
  .bm-nav .bm-follow a{width:30px;padding:0}
}
@media(max-width:1040px){
  .bm-nav .bm-follow{display:none !important}
  .bm-nav > .world-nav__brand,.bm-nav > .world-mark,.bm-nav > .world-brand,
  .bm-nav > .brand,.bm-nav .nav-inner > .brand{flex:1 1 auto;max-width:none}
}
@media(max-width:680px){
  .bm-nav{width:calc(100vw - 16px) !important;max-width:calc(100vw - 16px) !important;left:8px !important;right:8px !important;transform:none !important;gap:7px !important}
  /* `.site-nav` is relative rather than fixed. Applying the fixed-header
     left/right inset to it shifts the whole homepage bar right on phones. */
  .site-nav.bm-nav{left:0 !important;right:auto !important;margin-left:auto !important;margin-right:auto !important}
  .site-nav.bm-nav .nav-inner{justify-content:space-between !important}
  .site-nav.bm-nav .bm-actions{margin-left:auto !important}
  .bm-nav .bm-actions{gap:3px;padding:3px}
  .bm-nav .bm-open{height:38px;padding-inline:11px;gap:6px}
  .bm-nav .bm-cta{height:38px;padding-left:12px}
}
@media(max-width:460px){
  .bm-nav > .world-nav__brand,.bm-nav > .world-mark,.bm-nav > .world-brand,
  .bm-nav > .brand,.bm-nav .nav-inner > .brand{font-size:13px;max-width:42vw}
  .bm-nav .bm-cta span{display:none}
}
@media(max-width:380px){
  .bm-nav .bm-open > span:last-child{display:none}
}

/* Never let a decorative content module create a sideways page extension. */
@media(max-width:600px){
  .music-lesson-cutaway{min-width:0;overflow:hidden}
  .music-lesson-cutaway .cutaway-dial{width:min(100%,330px);max-width:100%;min-width:0}
}

/* Breadcrumb labels are useful for search engines but must never force a
   hidden one-line trail wider than a phone viewport. */
[aria-label="Breadcrumb"]{max-width:100%;overflow:hidden}
[aria-label="Breadcrumb"] ol{max-width:100%;white-space:normal;display:flex;flex-wrap:wrap;min-width:0}
[aria-label="Breadcrumb"] li{min-width:0;white-space:normal;overflow-wrap:anywhere;word-break:break-word}