/* ═══════════════════════════════════════════════════════════════════════
   M-U-S-I-C — site chrome (theme-core owned).
   Nav (SiteNav port), footer (SiteFooter port), designed 404, generic
   page container, member gate card. Design-system utilities (hv-*, u-grow,
   lnk-light, skip-link…) live in assets/css/main.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── SiteNav ─────────────────────────────────────────────────────────── */

.music-nav {
  /* Consumed by the open-menu max-height below. */
  --music-nav-h: 64px;
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 248, 239, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #e8ecf2;
  box-shadow: none;
  transition: box-shadow 0.3s ease;
}

.music-nav.is-scrolled {
  box-shadow: 0 4px 18px rgba(17, 24, 39, 0.07);
}

.music-nav__inner {
  /* The containing block for the panels. Anchoring them to the bar rather than
     to their own trigger is what keeps them on screen — see .music-panel. */
  position: relative;
  max-width: 1140px;
  margin: 0 auto;
  padding: 12px clamp(16px, 4vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.music-nav__brand {
  display: flex;
  min-width: 0;
}

.music-nav__logo,
.music-nav__brand .custom-logo-link {
  display: flex;
}

.music-nav__logo img,
.music-nav__brand .custom-logo {
  /* Was clamp(30px, 4.5vw, 36px) — a small mark beside a 44px burger, which on
     a phone did not read as the thing that owns the page. Up 53% at the floor
     and 67% at the ceiling. The open-menu cap is measured rather than assumed,
     so a taller bar cannot push the menu off screen. */
  height: clamp(46px, 6.5vw, 60px);
  width: auto;
  display: block;
}

.music-nav__menu {
  display: flex;
  align-items: center;
  gap: 2px;
}

.music-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}

.music-nav__list a {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 10px;
  border-radius: 8px;
  color: #111827;
}

/* Hover and keyboard focus on the top level. Every item behaved identically to
   plain text under the cursor — only the panel rows responded — so there was no
   feedback at all on Programs, Learn, Pricing, About or Log in. */
.music-nav__list a.music-nav__link:hover,
.music-nav__list a.music-nav__link:focus-visible,
.music-nav__disclosure:hover,
.music-nav__disclosure:focus-visible,
.music-nav__pair:hover > .music-nav__link {
  color: #d7374f;
  background: #f3efe6;
}

.music-nav__list a.music-nav__link,
.music-nav__disclosure {
  transition: color 120ms ease, background-color 120ms ease;
}

/* Label and chevron are two controls that have to read as one item: the pair
   shares a rounded background and the seam between them disappears. */
.music-nav__pair {
  display: inline-flex;
  align-items: stretch;
  border-radius: 8px;
}

.music-nav__pair > .music-nav__link {
  padding-right: 4px;
  border-radius: 8px 0 0 8px;
}

.music-nav__pair > .music-nav__disclosure {
  /* A 7px chevron with 4px either side is a 20px target, under the 24px
     WCAG 2.2 minimum — splitting the trigger in two is what shrank it.
     The box is widened rather than the glyph. */
  min-width: 30px;
  justify-content: center;
  padding-inline: 6px;
  border-radius: 0 8px 8px 0;
}

.music-nav__pair:hover > .music-nav__disclosure,
.music-nav__item.is-open > .music-nav__pair > .music-nav__disclosure,
.music-nav__item.is-open > .music-nav__pair > .music-nav__link {
  color: #d7374f;
  background: #f3efe6;
}

@media (prefers-reduced-motion: reduce) {
  .music-nav__list > li > a,
  .music-nav__disclosure { transition: none; }
}

.music-nav__list .current-menu-item > a,
.music-nav__list .current-menu-ancestor > a,
.music-nav__list a[aria-current="page"],
.music-nav__item.is-current > .music-nav__pair > .music-nav__link {
  color: #d7374f;
}

/* Inside a panel the marker has to be more than colour — the row is already
   coloured type on a light card, so the current page gets a rule beside it. */
.music-panel a[aria-current="page"] {
  background: #f3efe6;
  box-shadow: inset 2px 0 0 #d7374f;
}

.music-nav__enroll {
  display: inline-block;
  background: #2447c6;
  color: #ffffff;
  padding: 11px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  margin-left: 10px;
}

.music-nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1.5px solid #cdd4df;
  border-radius: 8px;
  background: #ffffff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex: none;
  color: #111827;
}

.music-nav__toggle-close {
  display: none;
}

.music-nav.is-open .music-nav__toggle-open {
  display: none;
}

.music-nav.is-open .music-nav__toggle-close {
  display: inline;
}

@media (max-width: 960px) {
  .music-nav__inner {
    flex-wrap: wrap;
  }

  .music-nav__toggle {
    display: inline-flex;
  }

  .music-nav__menu {
    display: none;
    flex: 1 0 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid #e8ecf2;
    margin-top: 12px;
    padding: 8px 0 8px;
  }

  .music-nav.is-open .music-nav__menu {
    display: flex;
    /* The menu opens in normal flow at a fixed ~436px. On a phone in landscape
       that is taller than the screen, which pushed LOG IN and Enroll below the
       fold with no way to scroll to them. Cap it to what is actually left
       under the bar and let the menu itself scroll. */
    max-height: calc(100dvh - var(--music-nav-h, 64px) - 12px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Short viewports — almost always a phone held sideways. A single column of
     nine rows cannot fit in ~360px, so the list goes two-up and the whole menu
     lands on screen without scrolling. */
  @media (max-height: 560px) {
    .music-nav__menu {
      margin-top: 8px;
      padding: 4px 0;
    }

    .music-nav__list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 8px;
    }

    .music-nav__list a,
    .music-nav__enroll {
      padding-top: 9px;
      padding-bottom: 9px;
    }

    /* The enrol button is the point of the menu — it spans, and stays last. */
    .music-nav__enroll {
      margin-top: 6px;
      text-align: center;
    }
  }

  .music-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .music-nav__list li {
    display: block;
  }

  .music-nav__list a {
    display: block;
    padding: 14px 4px;
    border-bottom: 1px solid #e8ecf2;
    border-radius: 8px;
  }

  .music-nav__enroll {
    margin: 14px 0 0;
    padding: 13px 20px;
    font-size: 15px;
    text-align: center;
  }
}

/* ── SiteFooter ──────────────────────────────────────────────────────── */

.music-footer {
  background: #111827;
}

.music-footer__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 56px) clamp(16px, 4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ── Footer head: brand + the direct line, side by side ─────────────────── */
.music-footer__head {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(210px, 0.9fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
}

.music-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

.music-footer__contact {
  border-left: 1px solid #243047;
  padding-left: clamp(16px, 2vw, 26px);
}

.music-footer__contact-label {
  margin: 0 0 6px;
  color: #8b97aa;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.music-footer__mail {
  display: inline-block;
  color: #ffffff;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: clamp(16px, 1.7vw, 19px);
  font-weight: 600;
  letter-spacing: -0.015em;
  padding: 4px 0;
}

.music-footer__mail:hover,
.music-footer__mail:focus-visible {
  color: #b9a2f0;
}

.music-footer__contact-note {
  margin: 6px 0 0;
  color: #8b97aa;
  font-size: 12.5px;
  line-height: 1.5;
  max-width: 30ch;
}

/* ── The site index: five columns that reflow rather than break ─────────── */
.music-footer__index {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #243047;
  padding-top: clamp(24px, 3vw, 34px);
}

/* Three columns to a row, two rows. Six across crowded every heading and
   wrapped half the labels onto two lines. */
.music-footer__row {
  --music-foot-gap: clamp(26px, 3.4vw, 52px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--music-foot-gap);
}

.music-footer__col {
  position: relative;
  min-width: 0;
}

/* Vertical rules to answer the horizontal one — drawn in the gutter, fading at
   both ends so they read as rules rather than borders. */
.music-footer__col + .music-footer__col::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: calc(var(--music-foot-gap) / -2);
  width: 1px;
  background: linear-gradient(180deg, transparent, #2f3d57 16%, #2f3d57 84%, transparent);
}

/* The rule between the rows. It is drawn as a gradient rather than a plain
   border so it fades out at both ends instead of stopping dead — the same
   hairline the summit card uses along its top edge, quieted down. */
.music-footer__row--second {
  position: relative;
  margin-top: clamp(28px, 3.4vw, 44px);
  padding-top: clamp(28px, 3.4vw, 44px);
}

.music-footer__row--second::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #2f3d57 12%, #2f3d57 88%, transparent);
}

@media (max-width: 860px) {
  .music-footer__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Two up: only the right-hand column of each pair carries a rule. */
  .music-footer__col + .music-footer__col::before { display: none; }
  .music-footer__col:nth-child(even)::before { display: block; }
}

@media (max-width: 460px) {
  .music-footer__row { grid-template-columns: minmax(0, 1fr); }
  .music-footer__col::before { display: none !important; }
}

/* THE HUB'S FOOTER — two columns, and they are not the same weight.
   The three-column grid above is sized for the course footer, which fills all
   three. The hub has two: the courses, and the handful of things that belong
   to the network. Inheriting the course grid left a third of the width empty
   on the right and squeezed both real columns into the other two thirds.

   2fr / 1fr because the columns are not peers. The left one is why anybody is
   on the hub — it lists what there is to buy, each entry carrying a name and a
   line of detail. The right one is Contact and Log in.

   EVERY BREAKPOINT IS RESTATED HERE ON PURPOSE. These selectors have the same
   specificity as the base ones, (0,1,0), and a media query adds none — so the
   only thing separating them is source order, and this block wins simply by
   being later in the file. That means the base rules above no longer reach the
   hub at ANY width: without the stacking rule restated below, the hub footer
   would still be two columns on a phone. */
.music-footer__row--hub {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

@media (max-width: 460px) {
  .music-footer__row--hub { grid-template-columns: minmax(0, 1fr); }
}

.music-footer__col-title {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.3;
  text-transform: uppercase;
}

.music-footer__col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  /* The price is pushed to the right of the row so the figures line up in a
     column. Across a full-width column that left a 140–225px canyon between a
     label and its own price. Capping the list halves the gap and keeps the
     alignment — the numbers still form a column, just a closer one. */
  max-width: min(100%, 15.5rem);
}

.music-footer__col-list a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  /* space-between pushed a wrapped label into the middle of the row — "The
     Master Mind" read as centred. The price is pushed right instead, so the
     label always starts on the left edge however it wraps. */
  /* 24px minimum target, per WCAG 2.2 — this is a menu, not prose. */
  padding: 6px 8px 6px 0;
  color: #cdd4df;
  font-size: 13.5px;
  line-height: 1.45;
  border-radius: 4px;
}

.music-footer__col-list a:hover,
.music-footer__col-list a:focus-visible {
  color: #ffffff;
}

/* The price sits right, quietly, so the ladder reads as a ladder. */
.music-footer__meta {
  margin-left: auto;
  padding-left: 10px;
  text-align: right;
  color: #78849a;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.music-footer__col-list a:hover .music-footer__meta {
  color: #b9a2f0;
}

/* The summit of the ladder, marked the way the pricing page marks it. */
.music-footer__summit {
  color: #ffffff !important;
  font-weight: 600;
}

.music-footer__summit::before {
  content: "";
  width: 3px;
  align-self: stretch;
  margin-right: 7px;
  border-radius: 2px;
  background: linear-gradient(#b9a2f0, #d7374f);
}

.music-footer__logo {
  display: inline-flex;
  align-self: flex-start;
}

.music-footer__logo img {
  /* Was 34px. Moved up with the header mark so the brand reads at the same
     weight at both ends of the page. */
  height: clamp(46px, 5vw, 54px);
  width: auto;
  display: block;
}

.music-footer__about {
  margin: 0;
  color: #8b97aa;
  font-size: 14px;
  line-height: 1.6;
  max-width: 640px;
}

@media (max-width: 720px) {
  .music-footer__head {
    grid-template-columns: 1fr;
  }

  .music-footer__contact {
    border-left: 0;
    border-top: 1px solid #243047;
    padding-left: 0;
    padding-top: 18px;
  }
}

.music-footer__bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #2f3d57 12%, #2f3d57 88%, transparent);
}

.music-footer__bottom {
  position: relative;
  margin-top: clamp(10px, 2vw, 18px);
  padding-top: clamp(24px, 3vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  flex-wrap: wrap;
}

.music-footer__tagline {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}

.music-footer__nav {
  font-size: 13.5px;
}

.music-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
}

.music-footer__list a {
  color: #cdd4df;
  /* The footer row is a menu, not prose, so WCAG 2.2 target-size applies:
     the text is 16px tall, which is under the 24px minimum. Padding gives it
     a real hit area; the negative inline margin keeps the row looking the
     same width it always did. */
  display: inline-block;
  padding: 5px 6px;
  margin-inline: -6px;
}

.music-footer__legal {
  margin: 0;
  color: #8b97aa;
  font-size: 12.5px;
}

/* ── Designed 404 ─────────────────────────────────────────────────────
   Two sources render into this shell: the hardcoded fallback in 404.php
   (divs) and the blocks of the optional "404" Page (paragraphs/headings).
   The margin resets below make both land identically.
   ────────────────────────────────────────────────────────────────────── */

.music-notfound__inner {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(72px, 11vw, 140px) clamp(16px, 4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 52vh;
}

.music-notfound__eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #d7374f;
}

.music-notfound__title {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 5.5vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 640px;
  text-wrap: pretty;
}

.music-notfound__copy {
  font-size: 17px;
  line-height: 1.55;
  color: #516078;
  margin: 0;
  max-width: 540px;
  text-wrap: pretty;
}

.music-notfound__actions {
  display: flex;
  gap: 14px 26px;
  flex-wrap: wrap;
  align-items: center;
  margin: 6px 0 0;
}

.music-notfound__home {
  display: inline-block;
  background: #ff5a5f;
  color: #ffffff;
  padding: 15px 28px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
}

.music-notfound__link {
  color: #00789e;
  font-weight: 600;
  font-size: 15px;
}

/* ── Generic page container (page.php / index.php) ───────────────────── */

.music-page__inner {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 84px) clamp(16px, 4vw, 32px);
}

.music-page__title {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  text-wrap: pretty;
}

.music-page__content {
  font-size: 16px;
  line-height: 1.65;
  color: #111827;
}

.music-page__content img {
  max-width: 100%;
  height: auto;
}

.music-page__entry + .music-page__entry {
  margin-top: 36px;
  border-top: 1px solid #e8ecf2;
  padding-top: 36px;
}

.music-page__entry-title {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 3.2vw, 28px);
  letter-spacing: -0.015em;
  margin: 0 0 10px;
}

.music-page__entry-title a {
  color: #111827;
}

.music-page__excerpt {
  font-size: 15.5px;
  line-height: 1.6;
  color: #516078;
}

.music-page__pages {
  margin-top: 24px;
  font-weight: 600;
}

/* ── Member gate (AC Member Studio, logged out) ──────────────────────── */

.music-member-gate {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 7vw, 80px) clamp(16px, 4vw, 32px);
}

.music-member-gate__card {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}

.music-member-gate__title {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 4.5vw, 38px);
  margin: 0;
}

.music-member-gate__copy {
  color: #516078;
  font-size: 16px;
  margin: 0;
}

.music-member-gate__login {
  display: inline-block;
  background: #2447c6;
  color: #ffffff;
  padding: 14px 26px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Header panels — Programs and Learn

   Two panels, not five: only these have enough behind them to justify one.
   Click and keyboard are the contract; hover is layered on in the JS. The
   markup is a real <button> with aria-expanded, so the panel is reachable
   without a pointer.
   ───────────────────────────────────────────────────────────────────────── */
.music-nav__item {
  position: static;
  display: flex;
  align-items: center;
}

.music-nav__disclosure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  /* A <button> does not inherit the link treatment, so it is restated here —
     otherwise "Programs" sits in sentence case beside "PRICING". The box has to
     match too: without the link padding the trigger is only as tall as its text,
     which is a ~16px target in a row of 40px ones. */
  color: #111827;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 10px;
  border-radius: 8px;
}

.music-nav__chev {
  width: 7px;
  height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 140ms ease;
  opacity: 0.6;
}

.music-nav__item.is-open .music-nav__chev {
  transform: rotate(225deg) translateY(-1px);
  opacity: 1;
}

.music-panel {
  position: absolute;
  top: calc(100% + 10px);
  /* Centred on its trigger, an 880px panel hangs off the right of the screen as
     soon as the viewport narrows — 1229px into a 1180px window, measured. The
     nav is right-aligned, so the trigger keeps moving right while the panel
     keeps its width. Anchored to the bar instead, which is capped at 1140px and
     centred, it cannot overflow at any width. The offset is the house gutter
     rather than 0, because `right: 0` resolves to the bar's padding box and
     would sit flush against the screen edge on narrower windows; this lands it
     level with the Enroll button instead. */
  right: clamp(16px, 4vw, 32px);
  left: auto;
  z-index: 60;
  width: max-content;
  max-width: min(94vw, 880px);
  border: 1px solid #e8ecf2;
  border-radius: 18px;
  background: #fffdf9;
  box-shadow: 0 26px 60px rgba(17, 24, 39, 0.16);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
}

.music-nav__item.is-open .music-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* The panels sit inside .music-nav__list, whose links are small, bold, tracked-out
   caps. That is right for five top-level labels and wrong for a sentence — a
   blurb set in caps reads as shouting. Reset it once here, at the top of the
   block, so the label classes further down can opt back in on their own. */
.music-panel a {
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.music-panel__inner {
  display: grid;
  gap: clamp(18px, 2.4vw, 34px);
  padding: clamp(20px, 2.4vw, 28px);
}

.music-panel__inner--programs { grid-template-columns: minmax(0, 1.35fr) minmax(230px, 0.85fr); }
.music-panel__inner--learn { grid-template-columns: minmax(0, 1.5fr) minmax(210px, 0.8fr); }

.music-panel__eyebrow {
  margin: 0 0 12px;
  color: #6b7280;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.music-panel__ladder,
.music-panel__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.music-panel__grid { grid-template-columns: 1fr 1fr; gap: 2px 12px; }

.music-panel__ladder a,
.music-panel__grid a {
  display: block;
  padding: 9px 10px;
  border-radius: 10px;
  text-decoration: none;
}

.music-panel__ladder a:hover,
.music-panel__ladder a:focus-visible,
.music-panel__grid a:hover,
.music-panel__grid a:focus-visible {
  background: #f3efe6;
}

/* The ladder reads as a ladder: name and price on one line, promise under it. */
.music-panel__rung {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.music-panel__name {
  display: block;
  color: #111827;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.012em;
}

.music-panel__price {
  color: #6d4bb5;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.music-panel__blurb {
  display: block;
  margin-top: 2px;
  color: #4b5563;
  font-size: 12.5px;
  line-height: 1.45;
}

.music-panel__meta {
  display: block;
  margin-top: 3px;
  color: #8b939e;
  font-size: 11.5px;
}

/* The Watch list — the two featured videos, wherever they appear. Kind, title,
   who, runtime, in that order, behind a play glyph so the row reads as
   something you press rather than another link. */
.music-panel__watch {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.music-panel__watch a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  text-decoration: none;
}

.music-panel__watch a:hover,
.music-panel__watch a:focus-visible { background: #f3efe6; }

.music-panel__watch-play {
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border-radius: 50%;
  background: #d7374f;
  position: relative;
}

.music-panel__watch-play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  translate: -50% -50%;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #fff;
}

.music-panel__watch-text { min-width: 0; }

.music-panel__watch-kind {
  display: block;
  color: #6d4bb5;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Aside: the image, then the summit or the thesis. */
.music-panel__aside {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-left: 1px solid #e8ecf2;
  padding-left: clamp(16px, 2vw, 26px);
}

.music-panel__figure {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  /* Reserved so the panel cannot reflow when the photo arrives. */
  aspect-ratio: 16 / 9;
  background: #f3efe6;
}

.music-panel__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 320ms ease;
}

.music-panel__summit,
.music-panel__promo {
  display: block;
  text-decoration: none;
  border-radius: 14px;
}

.music-panel__summit:hover .music-panel__figure img,
.music-panel__promo:hover .music-panel__figure img {
  transform: scale(1.04);
}

.music-panel__summit-eyebrow {
  display: block;
  margin-top: 10px;
  color: #6d4bb5;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.music-panel__summit-name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  color: #111827;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.music-panel__summit-blurb {
  display: block;
  margin-top: 4px;
  color: #4b5563;
  font-size: 12.5px;
  line-height: 1.45;
}

.music-panel__promo-line {
  display: block;
  margin-top: 10px;
  color: #111827;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.music-panel__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  border-top: 1px solid #e8ecf2;
  padding-top: 10px;
}

.music-panel__links a {
  color: #2440c4;
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 0;
}

@media (prefers-reduced-motion: reduce) {
  .music-panel { transition: none; transform: none; }
  .music-panel__figure img { transition: none; }
  .music-nav__chev { transition: none; }
}

/* ── In the mobile disclosure the panels are groups, not menus ──────────── */
@media (max-width: 960px) {
  .music-nav__item { display: block; }

  .music-nav__disclosure {
    width: 100%;
    justify-content: space-between;
  }

  .music-panel {
    position: static;
    translate: none;
    width: auto;
    max-width: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .music-panel__inner,
  .music-panel__inner--programs,
  .music-panel__inner--learn {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 2px 0 10px;
  }

  .music-panel__aside {
    border-left: 0;
    border-top: 1px solid #e8ecf2;
    padding-left: 0;
    padding-top: 12px;
  }

  /* The chevron is the affordance here: these are accordions, and a row that
     expands has to look like one. */
  .music-nav__chev { opacity: 0.85; }

  /* On a phone the label and the chevron are two separate taps: the label goes
     to the page, the chevron opens the group. Both keep a 44px-tall target. */
  .music-nav__pair {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #e8ecf2;
  }

  .music-nav__pair > .music-nav__link {
    flex: 1 1 auto;
    border-bottom: 0;
    border-radius: 8px 0 0 8px;
  }

  .music-nav__pair > .music-nav__disclosure {
    flex: none;
    width: 52px;
    justify-content: center;
    border-radius: 0 8px 8px 0;
  }

  .music-panel__eyebrow { margin-bottom: 6px; }

  /* An open group is indented under its own label so the nesting is visible
     rather than reading as one long flat list. */
  .music-nav__item--has-panel.is-open .music-panel__inner {
    border-left: 2px solid #e8ecf2;
    padding-left: 12px;
  }
}

/* Short landscape: the two-column list from the menu-overflow fix still has to
   hold, so the panels collapse to their links and the imagery steps aside. */
@media (max-height: 560px) {
  .music-panel__figure,
  .music-panel__meta,
  .music-panel__blurb,
  .music-panel__summit-blurb { display: none; }

  .music-panel__grid { grid-template-columns: 1fr 1fr; }
  .music-panel__ladder a,
  .music-panel__grid a { padding: 6px 8px; }
}

/* ─── Interim wordmark ────────────────────────────────────────────────────────
   Standing in for the logo until the M-U-S-I-C.ai SVG exists. Inter is the only
   face here that carries a true Black — it is a variable font declared
   100..900, where Space Grotesk stops at 700 — so the weight does the work a
   drawn mark would normally do.

   Sized by font-size rather than height, to sit at the same optical weight as
   the 46-60px image it replaces. Replace these four call sites with <img> when
   the artwork lands; the classes are self-contained and delete cleanly. */
.music-wordmark {
  font-family: "Inter", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(21px, 2.9vw, 27px);
  letter-spacing: -0.045em;
  line-height: 1;
  white-space: nowrap;
  color: #111827;
  display: inline-block;
}

.music-wordmark__tld {
  font-size: 0.62em;
  letter-spacing: -0.02em;
  opacity: 0.55;
  margin-left: 0.06em;
}

/* The footer band is dark, so the mark reverses out of it. */
.music-wordmark--reversed { color: #FFFFFF; }

/* The login card gives the mark a square-ish slot rather than a bar. */
.music-wordmark--stack {
  font-size: 20px;
  letter-spacing: -0.05em;
}