:root{--paper:#f1e7d5;--ink:#29231d;--red:#a33f1f;--muted:#706257;--line:#6245353a}
body,.reader-header{background:#302014}.cover{background:#562f23}.cover h1{font-size:76px;line-height:.89;letter-spacing:-.025em}.cover .cover-cn{color:#e4bd67}.cover-art{height:42%;background:transparent}.cover-art:after{background:linear-gradient(#562f23,transparent 40%)}
.sound-system-art{position:absolute;inset:5% 8% -20%;border-top:1px solid #d2b26d80;display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:16px;align-items:center;transform:rotate(-9deg)}
.sound-system-art i{display:block;aspect-ratio:1;border:2px solid #d9cda66b;border-radius:50%;box-shadow:inset 0 0 0 20px #173526,inset 0 0 0 21px #ceb56b99,inset 0 0 0 38px #562f23,inset 0 0 0 39px #ceb56b66;background:#e3ba61}
.sound-system-art i:nth-child(2){transform:translateY(45px)}.end{background:#302014}.end .kicker{color:#e0bd70}
.lab-link{display:block;width:100%;text-align:left;border:1px solid var(--line);background:#d8b67c33;padding:10px 12px}.lab-link strong{display:block;font-size:13px;margin-top:6px}.pattern-mini{display:block}.pattern-mini-row{display:grid;grid-template-columns:24px repeat(16,minmax(0,1fr));gap:2px;margin:3px 0;align-items:center;font-size:9px}.pattern-mini-row i{height:7px;background:#bfc7b6}.pattern-mini-row i.on{background:#a33f1f}.pattern-mini-row[data-kind=snare] i.on{background:#946f32}.pattern-mini-row .bar{border-left:1px solid #78836e}
.relation-cards{display:grid;gap:8px;margin:12px 0}.relation-cards a{position:relative;display:grid;grid-template-columns:80px 1fr;gap:12px;padding:10px 10px 10px 36px;text-decoration:none;border:1px solid var(--line);align-items:center}.relation-cards a:before{content:'';position:absolute;left:12px;top:50%;height:10px;width:10px;border:2px solid var(--red);border-radius:50%;transform:translateY(-50%);box-shadow:4px -4px 0 -1px var(--paper),5px -5px 0 -1px var(--red)}.relation-cards b{font-size:15px}.relation-cards span{font-size:13px;line-height:1.5}.relation-cards a:hover{background:#ccd5c5}
.chapter-rhythm .page-body p{margin-bottom:12px}.inline-media video{width:var(--excerpt-player-width,100%);max-width:100%;margin:auto}.inline-media.guide-video video{width:100%}.inline-media .media-play{grid-column:1/-1;min-height:42px;text-align:center;background:#203e2e;color:#f1e7d5}
.cover .page-body .cover-deck{font-size:26px}.end-brand{padding:0}.chapter-sources .source-list{line-height:1.5!important}
@media(max-width:760px){.cover h1{font-size:69px}.cover h1 .cover-cn{font-size:23px}.cover .page-body .cover-deck{font-size:24px}.relation-cards a{grid-template-columns:76px 1fr;padding:9px 8px 9px 30px}.relation-cards a:before{left:9px}.relation-cards span{font-size:12.5px}}
@media(max-height:740px){.cover h1{font-size:61px}.cover .page-body .cover-deck{font-size:22px}.lab-link{padding:6px 8px}.pattern-mini-row{margin:2px 0}.pattern-mini-row i{height:6px}.relation-cards{gap:6px;margin:8px 0}.relation-cards a{padding-top:7px;padding-bottom:7px}}
@media(max-width:360px) and (max-height:640px){.cover h1{font-size:53px}.cover h1 .cover-cn{font-size:19px}.cover .page-body .cover-deck{font-size:20px}.relation-cards a{grid-template-columns:68px 1fr;gap:7px}.relation-cards b{font-size:13px}.relation-cards span{font-size:12px}.lab-link strong{font-size:12px;margin-top:3px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}.sound-system-art{transform:none}}
.cover h1{line-height:1.1;padding-bottom:10px}
.chapter-notebook #notes{height:150px}
@media(max-width:760px) and (max-height:600px){
 .chapter-contents #contents{margin:6px 0}.chapter-contents #contents button{padding:5px 0}
 .chapter-quiz .quiz-card{padding:4px 0}.chapter-quiz .quiz-card h3{margin-bottom:3px;line-height:1.3}
 .chapter-quiz .quiz-feedback{min-height:88px;line-height:1.4;padding-top:5px}
 .chapter-quiz .quiz-options button{padding:4px 6px}
 .chapter-hands #midi-info{font-size:12px;line-height:1.35}
 .chapter-relations .relation-cards span{line-height:1.35}
}
@media(max-height:740px){
 .chapter-contents #contents{margin:8px 0}.chapter-contents #contents button{padding:6px 0}
 .chapter-hands .pads button{padding:9px 3px}.chapter-hands .pads{margin:8px 0}
 .chapter-hands #midi-info,.chapter-hands #practice-status{margin:3px 0;line-height:1.4}
 .chapter-notebook #notes{height:100px;margin:6px 0}.chapter-notebook .note-status{min-height:34px;margin:6px 0!important}
 .chapter-sources .source-list{font-size:12.5px!important;line-height:1.4!important}.chapter-sources .source-list li{margin-bottom:3px}
 .chapter-quiz .quiz-options button{min-height:36px}
 .chapter-drums .page-body .drum-status{min-height:30px;margin:4px 0}
}

/* Window geometry, not a phone-only breakpoint: retain readable complete topics. */
@media(min-width:761px) and (max-height:620px){
 .reader-header{height:36px}.reader-nav{height:40px}#book-stage{padding:0}
 .page>header{padding-top:9px}.page-body{bottom:27px}.page>footer{height:22px}
 .cover h1{font-size:70px;line-height:1.16;margin-top:7px}.cover h1 .cover-cn{font-size:19px;margin-top:3px}
 .cover .page-body .cover-deck{font-size:22px;margin-bottom:9px}
 .cover .page-body p{font-size:15px;line-height:1.5;max-width:90%}
 .chapter-playlist>header{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
 .chapter-playlist h1{order:-1;margin:0!important}.chapter-playlist .kicker{border:0;padding:0;max-width:35%}
 .page-body .playlist-tracks li{min-height:28px}.track-platforms a{height:28px}
 .page-body .quiz-feedback{min-height:82px}
 .end-brand{display:grid;grid-template-columns:48px 1fr;gap:0 12px;align-items:center;margin-top:10px}
 .end-brand .brand-logo{grid-row:1/4;margin:0;width:48px;height:48px}.end-brand strong,.end-brand span{line-height:1.4;margin:0}
}

@media(min-width:761px) and (max-height:620px){
 .chapter-drums .tempo-control{width:auto;flex:1;min-width:170px}
 .chapter-playlist .playlist-tracks{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
 .chapter-playlist .playlist-tracks li{min-height:40px;padding:3px 0}
 .chapter-playlist .track-copy strong{font-size:14px}.chapter-playlist .track-copy>span{font-size:11px}
}

@media(min-width:761px) and (max-height:680px){
 .chapter-playlist .playlist-tracks{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
 .chapter-playlist .playlist-tracks li{min-height:40px;padding:3px 0}
}
@media(min-width:761px) and (max-height:620px){
 .chapter-quiz #quiz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
 .chapter-quiz .quiz-feedback{grid-column:1/-1;min-height:100px}
 .chapter-quiz .quiz-card{padding:6px 0}.chapter-quiz .quiz-options{gap:6px}
}

@media(min-width:761px) and (max-height:620px){
 .page:not(.cover)>header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-top:8px}
 .page:not(.cover) h1{order:-1;margin:0;font-size:22px;line-height:1.2}
 .page:not(.cover) .kicker{border:0;padding:0;max-width:24%;font-size:9px;text-align:right;flex-shrink:0}
 #notes{height:100px}.note-status{min-height:30px}
}

@media(min-width:761px) and (max-height:620px){.chapter-contents #contents{grid-template-columns:1fr 1fr;column-gap:24px}}

.layout-recovery #load-status{position:fixed;inset:0;z-index:200;background:#1b1d19;overflow:auto;justify-content:flex-start;padding:20px;gap:10px;font-size:14px;line-height:1.5}.layout-recovery #load-status p{margin:8px 0}.layout-recovery #load-status button{flex-shrink:0}

.layout-recovery #load-status{position:fixed;inset:0;z-index:200;background:#1b1d19;overflow:auto;justify-content:flex-start;padding:20px;gap:10px;font-size:14px;line-height:1.5}.layout-recovery #load-status p{margin:8px 0}.layout-recovery #load-status button{flex-shrink:0}

/* Editorial images use measured spare height, with attribution outside the picture. */
.chapter-art.editorial-photo{display:flex;flex-direction:column;gap:5px;pointer-events:auto}
.chapter-art.editorial-photo[hidden]{display:none}
.chapter-art.editorial-photo img{min-height:0;flex:1;object-fit:cover;mix-blend-mode:normal}
.chapter-art.editorial-photo figcaption{display:flex;justify-content:space-between;gap:8px;font:9px/1.25 Arial,sans-serif;color:var(--muted);flex:none}
.chapter-art.editorial-photo figcaption a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.band-preview{display:block;margin:3px 0 12px;pointer-events:none}
.band-preview-heading{display:flex;justify-content:space-between;font:10px/1.3 Arial,sans-serif;letter-spacing:.05em;margin-bottom:12px}
.band-preview-heading>span{width:72%;text-align:center}
.band-preview-row{display:grid;grid-template-columns:28px repeat(16,minmax(0,1fr));gap:3px;align-items:center;margin:7px 0}
.band-preview-row b{font:10px/1 Arial,sans-serif;color:var(--muted)}
.band-preview-row i{height:clamp(13px,2.4vh,22px);background:#cdbd9c60;border-left:1px solid transparent}
.band-preview-row i.bar{border-left-color:#94a089}.band-preview-row i.on{background:#a33f1f;opacity:calc(.45 + var(--strength)*.55)}
.band-preview-row[data-lane=ss] i.on,.band-preview-row[data-lane=right] i.on{background:#98733b}
.band-preview-row[data-lane=guitar] i.on{background:#a34c36}
.chapter-rhythm .lab-link{padding:18px 16px;margin-top:16px}
.drum-row .cell.is-open:after{content:'';display:block;border:1px solid currentColor;border-radius:50%;width:5px;height:5px;margin:auto;background:transparent}
@media(max-height:740px){.band-preview-row{margin:4px 0;gap:2px}.band-preview-row i{height:12px}.band-preview-heading{margin-bottom:6px}.chapter-rhythm .lab-link{padding:12px 10px;margin-top:10px}}
@media(max-width:360px) and (max-height:640px){.chapter-rhythm .lab-link{padding:9px 8px}.band-preview-row i{height:10px}.band-preview-row{margin:4px 0}.chapter-art.editorial-photo figcaption{font-size:8px;gap:5px}}

.band-preview-heading{display:block;white-space:nowrap;margin-bottom:4px}
.band-preview-beats{display:grid;grid-template-columns:28px repeat(16,minmax(0,1fr));gap:3px;font:9px/1.2 Arial,sans-serif}
.band-preview-beats b{grid-column:span 4;font-weight:400}
@media(min-width:761px){.chapter-rhythm .lab-link{min-height:clamp(208px,calc(100dvh - 380px),360px);display:flex;flex-direction:column}.chapter-rhythm .band-preview{flex:1;display:flex;flex-direction:column;margin-bottom:10px}.chapter-rhythm .band-preview-row{flex:1;min-height:0}.chapter-rhythm .band-preview-row i{height:100%;max-height:28px;min-height:12px}}
@media(max-width:760px) and (max-height:740px){.band-preview-beats{gap:2px}.band-preview-row{margin:3px 0}}

.chapter-roots .editorial-photo img{object-position:center 30%}

@media(min-width:761px) and (max-height:560px){.chapter-rhythm .lab-link{padding-top:6px;padding-bottom:6px}.chapter-rhythm .band-preview-row{margin-top:2px;margin-bottom:2px}}

/* Fit the preview to the actual leaf after its heading and prose, including narrow spreads. */
@media(min-width:761px){.chapter-rhythm .page-body{display:flex;flex-direction:column}.chapter-rhythm .page-body>p{flex-shrink:0}.chapter-rhythm .lab-link{flex:1;min-height:208px;margin-bottom:0}}

/* Funk identity: interlocking bars, not inherited reggae speaker stacks. */
.cover h1{font-size:clamp(42px,5.9vw,72px);line-height:1.02;letter-spacing:-.015em}
.cover h1 .cover-cn{font-size:22px;line-height:1.25;margin-top:12px}
.funk-cover-art{position:absolute;inset:15% -10% -10% 5%;display:grid;grid-template-columns:repeat(8,1fr);gap:9px;transform:rotate(-14deg);opacity:.75;align-items:end}
.funk-cover-art i{background:#d58a41;border-radius:30px 30px 0 0;height:var(--h);border:1px solid #edc38c55}.funk-cover-art i:nth-child(3n){background:#b65130}.funk-cover-art i:nth-child(3n + 1){background:#e8c478}
.cover-art:after{background:linear-gradient(#562f23,transparent 75%)}
@media(max-width:760px){.cover h1{font-size:54px}.cover h1 .cover-cn{font-size:20px}}
@media(max-height:650px){.cover h1{font-size:47px}.cover h1 .cover-cn{font-size:18px}.cover .page-body .cover-deck{font-size:20px}}
@media(min-width:761px) and (max-height:620px){.cover h1{font-size:52px}}
.drum-row .cell.on[data-velocity="40"]{opacity:.5}.drum-row .cell.on[data-velocity="52"]{opacity:.55}
/* Five-part workshop: preserve 44px touch controls while fitting shorter leaves. */
.chapter-band.compact .ensemble{gap:2px;--ensemble-green:#8d3e24}
.chapter-band.compact .ensemble-parts{gap:2px}
.chapter-band.compact .ensemble-part{min-height:44px;grid-template-columns:64px minmax(0,1fr) 44px;gap:5px}
.chapter-band.compact .ensemble .ensemble-toggle{min-height:44px;padding:2px 3px}
.chapter-band.compact .ensemble-toggle strong{font-size:12px}
.chapter-band.compact .ensemble-lane{height:12px}.chapter-band.compact .ensemble-graph{gap:1px}
.chapter-band.compact .ensemble-steps,.chapter-band.compact .ensemble-step{height:10px}
.chapter-band.compact .ensemble-notes{font-size:10px;line-height:1.2}
.chapter-band.compact .ensemble-controls{gap:4px}.chapter-band.compact .ensemble .ensemble-play{min-width:78px}
.chapter-band.compact .ensemble-chords{grid-template-columns:repeat(2,44px);gap:2px}
.chapter-band.compact .ensemble-meta{font-size:11px}
@media(max-height:620px) and (max-width:760px){
 .page:not(.cover)>header{padding-top:12px}.page:not(.cover) h1{font-size:24px;margin-top:8px;line-height:1.2}
 .chapter-rhythm .lab-link{padding:6px 8px;margin-top:6px}.chapter-rhythm .band-preview-row{margin:2px 0}.chapter-rhythm .band-preview-row i{height:8px}.chapter-rhythm .band-preview{margin-bottom:5px}
 .chapter-contents #contents{gap:0}.chapter-contents #contents button{padding:3px 0;min-height:36px}
 .chapter-hands .page-body>p:last-child{margin-top:4px;line-height:1.5}
 .chapter-notebook #notes{height:70px}.chapter-notebook .note-status{margin:3px 0!important;min-height:30px}
 .chapter-quiz .quiz-feedback{min-height:80px}
}
@media(max-height:600px) and (max-width:360px){
 .chapter-rhythm .page-body>p{margin-bottom:5px;line-height:1.6}.chapter-rhythm .lab-link{margin-top:3px}
 .chapter-quiz .quiz-feedback{font-size:12px;line-height:1.35;min-height:76px}.chapter-quiz .quiz-feedback .text-link{font-size:12px}
 .chapter-quiz .quiz-card h3{font-size:13px}.chapter-quiz .quiz-options button{min-height:34px}
}
@media(max-height:620px) and (max-width:760px){.chapter-notebook #notes{height:90px;font-size:14px;line-height:1.4}}
.track-copy{overflow-wrap:anywhere}
@media(max-height:600px) and (max-width:360px){
 .chapter-pfunk .inline-media{margin-bottom:8px}
 .chapter-playlist .page-body .playlist-note{margin-top:0}
}
@media(max-height:600px) and (max-width:360px){.chapter-playlist .playlist-note{display:none}}

@media(min-width:761px) and (max-height:560px){.chapter-rhythm .lab-link{min-height:180px}}