/* Jazzmusics v34 — inner-page design pass. Design only: no content, no markup changes.
   Brings the ~1,040 lesson/hub pages into the home page's editorial "record sleeve" language:
   warm paper, deep-green ink, gold accent, larger type, calmer rhythm. Loaded last. */

/* ---------- 1. Tokens: share the home palette on every inner page ---------- */
html[data-theme="light"] .lesson-page{
  --bg:#f4f1e7; --bg2:#efebde; --surface:#fbf9f2; --surface2:#f1eee2;
  --ink:#203831; --muted:#4f5c54; --faint:#5f6a63; --line:#d9dccf;
  --teal:#2a6250; --amber:#875a0d; --amber-soft:#a8741a; --coral:#b8452a; --root:#e9bb64;
  --btn:#8f600f; --btn2:#77500b;  /* white text on these = 5:1+ */
  background:var(--bg);
}
html[data-theme="dark"] .lesson-page,html:not([data-theme]) .lesson-page{
  --bg:#101b1a; --bg2:#142321; --surface:#18292a; --surface2:#1d3130;
  --ink:#f3f0dc; --muted:#b3c5bc; --faint:#9db0a7; --line:#2c413d;
  --btn:#8f600f; --btn2:#a8741a;
  --teal:#8ce0c0; --amber:#e9bb64; --amber-soft:#c99a45; --root:#f4c56a;
  background:var(--bg);
}
html[data-theme="dark"] .lesson-page::before{opacity:.03}
.lesson-page .wrap{max-width:1180px}

/* ---------- 2. Type: readable sizes, balanced headlines ---------- */
.lesson-page{font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.lesson-page h1,.lesson-page h2,.lesson-page h3{text-wrap:balance}
.lesson-page p{text-wrap:pretty}
html[data-theme="light"] .lesson-page h1,html[data-theme="light"] .lesson-page h2,html[data-theme="light"] .lesson-page h3,html[data-theme="light"] .lesson-page .brand{color:var(--ink)}
.lesson-page .phead h1{font-weight:500;letter-spacing:-.035em}
.lesson-page .phead h1 .it{color:var(--teal)}
.lesson-page section>h2,.lesson-page .section-heading h2{max-width:30ch;font-weight:500}
.lesson-page h2 .it{color:var(--amber)}
.lesson-page .phead .intro{font-size:clamp(17px,1.5vw,19px);line-height:1.7;max-width:68ch;color:var(--muted)}
.lesson-page .phead .intro strong{color:var(--ink)}
.lesson-page .sec-lede,.lesson-page .prose,.lesson-page .prose p{font-size:16px;line-height:1.7;max-width:70ch}
.lesson-page .tnote{font-size:12.5px;line-height:1.6;max-width:90ch}

/* eyebrows + kicker: a short rule makes the section starts scannable */
.lesson-page .eyebrow,.lesson-page .kicker{display:flex;align-items:center;gap:10px;font-size:11.5px;letter-spacing:.24em;color:var(--teal)}
.lesson-page .kicker{color:var(--amber)}
.lesson-page .eyebrow::before,.lesson-page .kicker::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7;flex:none}

/* ---------- 3. Header block ---------- */
.lesson-page .crumb{padding-top:22px;font-size:12px}
.lesson-page .phead{position:relative;padding:34px 0 26px}
.lesson-page .page-actions{gap:10px;margin:24px 0 6px}
.lesson-page .studio-button{min-height:44px;padding:10px 16px;border-radius:999px;font-size:13.5px;background:var(--surface);transition:border-color .18s,transform .18s,box-shadow .18s}
.lesson-page .studio-button:hover{border-color:var(--teal);transform:translateY(-1px);box-shadow:0 6px 18px -12px rgba(0,0,0,.45)}
.lesson-page a.studio-button[href^="#"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.lesson-page a.studio-button[href^="#"]:hover{background:var(--teal);border-color:var(--teal)}
.lesson-page .studio-button[aria-pressed="true"]{border-color:var(--teal);color:var(--teal);background:color-mix(in srgb,var(--teal) 10%,var(--surface))}

/* ---------- 4. "On this page": sticky pill rail, no clipped labels ---------- */
.lesson-page .lesson-nav{position:sticky!important;top:0;z-index:40;padding:10px 0!important;margin:6px 0 34px!important;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 48px),transparent)}
.lesson-page .lesson-nav::-webkit-scrollbar{display:none}
.lesson-page .lesson-nav>span{color:var(--faint);padding-right:6px}
.lesson-page .lesson-nav a{flex:none;max-width:none!important;overflow:visible!important;text-overflow:clip!important;min-height:36px;display:inline-flex;align-items:center;padding:7px 14px!important;border-radius:999px!important;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:12.5px;text-decoration:none;transition:color .15s,border-color .15s,background .15s}
.lesson-page .lesson-nav a:hover,.lesson-page .lesson-nav a:focus-visible{color:var(--ink);border-color:var(--teal)}
.lesson-page .lesson-nav a:last-child{margin-right:48px}
@media(max-width:820px){.lesson-page .lesson-nav{top:58px}}

/* ---------- 5. Section rhythm ---------- */
.lesson-page section{padding:52px 0;border-top:1px solid var(--line)}
.lesson-page .wrap>section:first-of-type,.lesson-page .lesson-nav+section{border-top:0;padding-top:20px}
.lesson-page .section-heading{align-items:flex-end}
.lesson-page .section-heading>span,.lesson-page .section-heading>a{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--teal)}

/* ---------- 6. Cards: one surface language ---------- */
.lesson-page .panel,.lesson-page .tablewrap,.lesson-page .exercise,.lesson-page .lesson-columns article,.lesson-page .faq details,.lesson-page .hub,.lesson-page .rcard,.lesson-page .lcard,.lesson-page .tcard,.lesson-page .bar,.lesson-page .vcard,.lesson-page .station,.lesson-page .toc,.lesson-page .rel-card,.lesson-page .instrument-workbench,.lesson-page .now,.lesson-page .earpanel{
  background:var(--surface)!important;border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 14px 34px -28px rgba(32,56,49,.45)}
html[data-theme="dark"] .lesson-page .panel,html[data-theme="dark"] .lesson-page .tablewrap,html[data-theme="dark"] .lesson-page .exercise,html[data-theme="dark"] .lesson-page .lesson-columns article,html[data-theme="dark"] .lesson-page .faq details,html[data-theme="dark"] .lesson-page .hub,html[data-theme="dark"] .lesson-page .tcard,html[data-theme="dark"] .lesson-page .bar,html[data-theme="dark"] .lesson-page .vcard,html[data-theme="dark"] .lesson-page .station{box-shadow:0 18px 40px -30px #000}
.lesson-page .insts{background:var(--bg2)!important;box-shadow:none}
.lesson-page .hub,.lesson-page .rcard,.lesson-page .lcard,.lesson-page .station,.lesson-page .exercise{transition:transform .2s cubic-bezier(.2,.7,.2,1),border-color .2s,box-shadow .2s}
.lesson-page a.hub:hover,.lesson-page .rcard:hover,.lesson-page .lcard:hover{transform:translateY(-3px);border-color:var(--teal);box-shadow:0 22px 44px -30px rgba(32,56,49,.6)}
.lesson-page .hub h3{font-weight:500;letter-spacing:-.01em}
.lesson-page .hub .go{color:var(--teal)}
.lesson-page .tag.live{background:color-mix(in srgb,var(--teal) 12%,transparent);color:var(--teal);border-color:color-mix(in srgb,var(--teal) 40%,transparent)}

/* practice steps */
.lesson-page .exercise{padding:22px 22px 18px}
.lesson-page .exercise-num{font-family:var(--serif);font-style:italic;font-size:30px;line-height:1;color:var(--amber);letter-spacing:0}
.lesson-page .exercise h3{font-size:19px;margin:10px 0 8px}
.lesson-page .exercise p{font-size:15px;line-height:1.65;color:var(--muted)}
.lesson-page .exercise-check{min-height:44px;display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);font-size:13.5px;cursor:pointer}
.lesson-page .exercise-check input{width:20px;height:20px;accent-color:var(--teal);cursor:pointer}
.lesson-page .instrument-note,.lesson-page .comparison-note{border-left:3px solid var(--amber);background:color-mix(in srgb,var(--amber) 8%,transparent);border-radius:0 12px 12px 0;padding:16px 20px;font-size:15px;line-height:1.65}
.lesson-page .lesson-columns article{padding:26px}
.lesson-page .lesson-columns article h3{font-family:var(--serif);font-weight:500;font-size:22px;margin-bottom:10px}
.lesson-page .deep-lesson p{font-size:16px;line-height:1.72}
.lesson-page .lesson-tag{color:var(--amber)}

/* ---------- 7. Trainer: calmer chrome, clearer primary action ---------- */
.lesson-page .trainer{padding:26px;border-radius:20px}
.lesson-page .toggle{border-radius:999px;background:var(--bg2);border-color:var(--line);padding:3px}
.lesson-page .toggle button{border-radius:999px;min-height:38px;padding:8px 16px;transition:background .15s,color .15s}
.lesson-page .toggle button.on{background:var(--ink);color:var(--bg)}
.lesson-page .ibtn.on,.lesson-page .ibtn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.lesson-page .noteb{border-radius:14px;min-width:56px;min-height:52px;background:var(--surface);transition:transform .12s,border-color .15s}
.lesson-page .noteb:hover{transform:translateY(-2px);border-color:var(--amber)}
.lesson-page .noteb:active{transform:scale(.96)}
.lesson-page .noteb.root{border-color:var(--root);box-shadow:0 0 0 3px color-mix(in srgb,var(--root) 25%,transparent)}
.lesson-page .play{border-radius:999px;box-shadow:0 12px 26px -12px color-mix(in srgb,var(--btn) 80%,transparent);transition:transform .15s,box-shadow .15s,background .15s}
.lesson-page .play:hover{transform:translateY(-2px)}
.lesson-page .play:active{transform:scale(.98)}
.lesson-page .tbar{border-radius:14px;background:var(--bg2)}
.lesson-page .tcard .sym{font-weight:500}
.lesson-page .tcard.focus{border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 22%,transparent)}
.lesson-page .bar .bc{font-weight:500}
.lesson-page .sndsel{border-radius:999px;min-height:36px}
.lesson-page input[type=range]{accent-color:var(--teal);height:24px}

/* ---------- 8. Tables ---------- */
.lesson-page .tablewrap{overflow:auto}
.lesson-page table{font-size:15px}
.lesson-page th{position:sticky;top:0;background:var(--surface2);color:var(--faint);font-size:11px;letter-spacing:.16em;padding:14px 18px}
.lesson-page td{padding:14px 18px;font-size:14.5px;color:var(--muted)}
.lesson-page td.k{color:var(--ink);font-family:var(--serif);font-size:17px;font-weight:500}
.lesson-page tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--bg2) 55%,transparent)}
.lesson-page tbody tr:hover td{background:color-mix(in srgb,var(--amber) 9%,transparent)}
.lesson-page td a{font-weight:600;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--amber) 40%,transparent)}
.lesson-page td.thumb img.th{border-radius:8px}

/* ---------- 9. Figures: framed like a printed plate, never oversized ---------- */
.lesson-page .fig{max-width:860px;margin:26px 0 8px;border-radius:16px;padding:14px 14px 0;background:#1c1924;border:1px solid var(--line);box-shadow:0 24px 50px -34px rgba(0,0,0,.6)}
.lesson-page .fig img{border-radius:8px}
.lesson-page .fig.fig-sq{max-width:400px}
.lesson-page .fig figcaption{margin:14px -14px 0;padding:12px 18px;font-size:12.5px;line-height:1.55;background:var(--surface);color:var(--muted)}
.lesson-page .hub .thumb{border-radius:10px}

/* ---------- 10. Key / sibling chips: real touch targets ---------- */
.lesson-page .sib{gap:8px}
.lesson-page .sib a{min-height:44px;min-width:48px;display:inline-flex;align-items:center;justify-content:center;padding:9px 15px;border-radius:999px;background:var(--surface);font-size:13.5px;transition:transform .15s,border-color .15s,color .15s}
.lesson-page .sib a:hover{transform:translateY(-2px);border-color:var(--teal);color:var(--teal)}
.lesson-page .sib a.cur{background:var(--ink)!important;border-color:var(--ink)!important;color:var(--bg)!important;box-shadow:none}
.lesson-page .kcell{border-radius:14px;background:var(--surface);min-height:56px}
.lesson-page .kcell:hover{background:var(--ink)!important;border-color:var(--ink)!important;color:var(--bg)!important;box-shadow:none}

/* ---------- 11. FAQ ---------- */
.lesson-page .faq{max-width:820px}
.lesson-page .faq details{padding:2px 22px;margin-bottom:10px;transition:border-color .15s}
.lesson-page .faq details[open]{border-color:var(--teal)}
.lesson-page .faq summary{font-size:18px;font-weight:500;padding:18px 0;min-height:44px}
.lesson-page .faq summary::after{color:var(--teal);transition:transform .2s}
.lesson-page .faq details[open] summary::after{transform:rotate(180deg)}
.lesson-page .faq p{font-size:15.5px;line-height:1.7;padding-bottom:20px}

/* ---------- 12. Radio CTA + footer: a confident close ---------- */
.lesson-page .radiocta{border:0;border-radius:20px;padding:26px 28px;background:linear-gradient(120deg,#243e34,#1a2e28);color:#f4f1e7;box-shadow:0 26px 50px -34px rgba(0,0,0,.7)}
.lesson-page .radiocta p{color:#c9d3c8;font-size:15px;max-width:64ch}
.lesson-page .radiocta p b{color:#f4f1e7;font-size:21px;font-weight:500}
.lesson-page .radiocta .btn2{min-height:46px;display:inline-flex;align-items:center;padding:11px 20px;border-radius:999px;border:0;background:#e9bb64;color:#1c2f28;font-weight:700;transition:transform .15s,background .15s}
.lesson-page .radiocta .btn2:hover{transform:translateY(-2px);background:#f2c978;color:#1c2f28}
.lesson-page footer{margin-top:40px;padding:54px 0 60px;border-top:1px solid var(--line)}
.lesson-page .footcol a{min-height:32px;display:flex;align-items:center;font-size:14.5px}
.lesson-page .footcol .fh{color:var(--teal)}
.lesson-page .foot-note{font-size:11.5px}

/* ---------- 13. Navigation ---------- */
@media(min-width:821px){.lesson-page nav:not(.lesson-nav){padding:18px 0 10px}}
.lesson-page .nav-links a{font-size:13.5px}
.lesson-page .nav-links a.cur{color:var(--amber)}
.lesson-page .nav-cta{min-height:40px;display:inline-flex;align-items:center;background:var(--surface)}
.lesson-page .theme-btn{width:40px;height:40px}

@media(max-width:820px){
  html[data-theme] .lesson-page nav:not(.lesson-nav){background:color-mix(in srgb,var(--bg) 90%,transparent);border-bottom-color:var(--line)}
  html[data-theme] .lesson-page .tabbar{background:color-mix(in srgb,var(--bg) 94%,transparent);border-top-color:var(--line)}
  .lesson-page .tabbar a{min-height:48px;color:var(--muted)}
  .lesson-page .tabbar a.cur{color:var(--amber)}
  .lesson-page .nav-cta{display:none}
}
/* guides already get the sticky pill rail: drop the duplicate outline box, keep the tools card clear of the rail */
.lesson-page .article .toc{display:none}
.lesson-page .article .aside{top:76px}
/* ---------- 14. Guides ---------- */
.lesson-page .prose h2{font-weight:500;letter-spacing:-.02em}
.lesson-page .prose a{color:var(--amber);border-bottom-color:color-mix(in srgb,var(--amber) 35%,transparent)}
.lesson-page .prose .ex{background:var(--surface);border-radius:14px;border-left:3px solid var(--teal)}
.lesson-page .lbtn,.lesson-page .footer-cta a{min-height:44px;display:inline-flex;align-items:center;border-radius:999px}

/* ---------- 15. Focus, motion, small screens ---------- */
.lesson-page :focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:8px}
@media(max-width:820px){
  .lesson-page{font-size:16px}
  .lesson-page section{padding:36px 0}
  .lesson-page .phead{padding:22px 0 16px}
  .lesson-page .phead h1{font-size:clamp(31px,8.6vw,42px);line-height:1.08}
  .lesson-page .phead .intro{font-size:16.5px}
  .lesson-page .trainer{padding:14px;border-radius:18px}
  .lesson-page .exercise,.lesson-page .lesson-columns article{padding:18px}
  .lesson-page .fig{padding:8px 8px 0;border-radius:14px}
  .lesson-page .fig figcaption{margin:8px -8px 0;padding:10px 12px}
  .lesson-page .radiocta{padding:22px 20px;border-radius:18px}
  .lesson-page .radiocta .btn2{width:100%;justify-content:center}
  .lesson-page td,.lesson-page th{padding:12px 12px}
  .lesson-page .faq summary{font-size:16.5px}
  .lesson-page .page-actions .studio-button{flex:1 1 auto;justify-content:center;text-align:center}
}
@media(prefers-reduced-motion:reduce){.lesson-page *{transition:none!important;animation:none!important}.lesson-page .reveal{opacity:1!important;transform:none!important}}
@media print{.lesson-page nav,.lesson-page .lesson-nav,.lesson-page .tabbar,.lesson-page .radiocta,.lesson-page .page-actions,.lesson-page .playrow,.lesson-page .tbar{display:none!important}.lesson-page{background:#fff;color:#000}}

/* ---------- Home: text on dark panels must stay light in the light theme ----------
   theme.css sets a global light-theme h3 colour that out-ranks the panel's inherited cream. */
html[data-theme] .home-ritual h3,html[data-theme] .home-ritual h2{color:#f4f1e7!important}
html[data-theme] .home-ritual li p,html[data-theme] .home-ritual>div>p:not(.eyebrow){color:#d3ddd2}
html[data-theme] .home-ritual li>span{color:#eac276}

/* ---------- Contrast: footer small print and the "New" badge (every page) ---------- */
footer .blurb,footer .foot-note,footer .fh,footer .footcol h4{color:var(--muted)!important}
.newtag{background:#b13f26!important;color:#fff!important}
html[data-theme] .lesson-page th{color:var(--faint)}
.lesson-page .ibtn.on .kbd,.lesson-page .ibtn[aria-pressed="true"] .kbd{color:inherit;border-color:currentColor;opacity:.85}