@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Newsreader:opsz,wght@6..72,500;6..72,600&display=swap";:root{color:#282722;font-synthesis:none;text-rendering:optimizelegibility;--paper:#fbfaf5;--ink:#282722;--muted:#77736a;--line:#dcd8cd;--accent:#a64e2e;--accent-soft:#ead8cc;background:#f2f0e9;font-family:DM Sans,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{min-width:320px;min-height:100vh;margin:0}button,a{font:inherit;color:inherit}.app-shell{flex-direction:column;min-height:100vh;display:flex}.site-header{border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:20;background:#fbfaf5f0;align-items:center;min-height:76px;padding:0 4vw;display:flex;position:sticky;top:0}.brand{letter-spacing:-.02em;cursor:pointer;background:0 0;border:0;align-items:center;gap:12px;padding:0;font-weight:600;display:inline-flex}.brand-mark{background:var(--ink);width:32px;height:32px;color:var(--paper);border-radius:50%;place-items:center;font-family:Newsreader,serif;font-size:20px;display:grid}.primary-nav{align-items:center;gap:26px;margin-left:44px;display:flex}.primary-nav button{color:var(--muted);cursor:pointer;background:0 0;border:0;border-bottom:2px solid #0000;padding:27px 0 25px;font-size:12px;font-weight:600}.primary-nav button:hover,.primary-nav button.active{color:var(--ink);border-bottom-color:var(--accent)}.header-progress{color:var(--muted);letter-spacing:.08em;align-items:center;gap:12px;margin-left:auto;font-size:11px;font-weight:600;display:flex}.progress-track{background:var(--line);width:100px;height:2px;overflow:hidden}.progress-track span{background:var(--accent);height:100%;transition:width .25s;display:block}.menu-button{cursor:pointer;background:0 0;border:0;margin-left:auto;padding:8px;display:none}.menu-icon{width:24px;height:18px;display:block;position:relative}.line{background:currentColor;width:24px;height:1px;transition:transform .18s,top .18s;position:absolute;left:0}.line-top{top:5px}.line-bottom{top:13px}.line-top.open{top:9px;transform:rotate(45deg)}.line-bottom.open{top:9px;transform:rotate(-45deg)}.mobile-nav{display:none}.page-layout{flex:1;grid-template-columns:190px minmax(480px,760px) 190px;justify-content:center;align-items:start;gap:clamp(38px,5vw,80px);width:min(1480px,100%);margin:0 auto;padding:70px 4vw 100px;display:grid}.eyebrow{color:var(--accent);letter-spacing:.16em;text-transform:uppercase;margin:0;font-size:11px;font-weight:600}.chapter-sidebar,.article-outline{position:sticky;top:112px}.chapter-sidebar nav{margin-top:22px;display:grid}.chapter-link{text-align:left;border:0;border-bottom:1px solid var(--line);color:var(--muted);cursor:pointer;background:0 0;grid-template-columns:26px 1fr;gap:8px;padding:13px 0;font-size:13px;display:grid}.chapter-link span:first-child{letter-spacing:.08em;padding-top:3px;font-size:10px}.chapter-link:hover,.chapter-link.active{color:var(--ink)}.chapter-link.active{font-weight:600}.chapter-link.active span:first-child{color:var(--accent)}.article-outline ol{color:var(--muted);counter-reset:outline;gap:13px;margin:22px 0 0;padding:0;font-size:12px;line-height:1.45;list-style:none;display:grid}.article-outline li{counter-increment:outline;grid-template-columns:18px 1fr;gap:6px;display:grid}.article-outline li:before{content:counter(outline);color:#aaa59a;padding-top:3px;font-size:9px}.article{min-width:0;animation:.28s both article-in}@keyframes article-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.article-meta{color:var(--muted);justify-content:space-between;align-items:center;font-size:11px;display:flex}.article-header h1{letter-spacing:-.045em;max-width:720px;margin:19px 0 22px;font-family:Newsreader,serif;font-size:clamp(48px,6.5vw,82px);font-weight:500;line-height:.98}.dek{color:#5f5b53;max-width:650px;margin:0;font-family:Newsreader,serif;font-size:clamp(21px,2.2vw,28px);line-height:1.35}.outcome-card{border-left:3px solid var(--accent);background:var(--accent-soft);grid-template-columns:130px 1fr;align-items:baseline;gap:24px;margin:42px 0 0;padding:20px 24px;display:grid}.outcome-card span{color:var(--accent);letter-spacing:.12em;text-transform:uppercase;font-size:10px;font-weight:600}.outcome-card p{margin:0;font-size:14px;line-height:1.55}.lesson-page{border:1px solid var(--line);background:#fff;margin:52px 0 0;box-shadow:0 18px 50px #453d310f}.lesson-page-toolbar{border-bottom:1px solid var(--line);background:var(--paper);justify-content:space-between;align-items:center;gap:20px;min-height:72px;padding:14px 18px;display:flex}.lesson-page-toolbar span{color:var(--accent);letter-spacing:.12em;text-transform:uppercase;font-size:10px;font-weight:600}.lesson-page-toolbar p{color:var(--muted);margin:4px 0 0;font-size:12px}.lesson-page-toolbar button{border:1px solid var(--ink);cursor:pointer;background:0 0;padding:10px 12px;font-size:11px;font-weight:600}.lesson-page-toolbar button:hover{background:var(--ink);color:var(--paper)}.lesson-page-image{cursor:zoom-in;background:#fff;border:0;width:100%;padding:0;display:block}.lesson-page-image img{width:100%;height:auto;display:block}.lesson-page figcaption{border-top:1px solid var(--line);color:var(--muted);background:var(--paper);padding:12px 18px;font-size:10px}.article-body{margin-top:68px}.article-body>section{margin-top:64px}.article-body>section:first-child{margin-top:0}.article-body h2{letter-spacing:-.025em;margin:0 0 24px;font-family:Newsreader,serif;font-size:clamp(30px,3vw,40px);font-weight:600;line-height:1.08}.article-body p{margin:0 0 20px;font-size:16px;line-height:1.78}.concept-list{border-top:1px solid var(--line);margin:0;padding:0;list-style:none}.concept-list li{border-bottom:1px solid var(--line);padding:16px 10px 16px 30px;font-size:15px;line-height:1.55;position:relative}.concept-list li:before{content:"";border:1.5px solid var(--accent);border-radius:50%;width:7px;height:7px;position:absolute;top:23px;left:4px}.practice-section{background:var(--ink);color:var(--paper);padding:clamp(28px,4vw,46px)}.practice-section .eyebrow{color:#dca68f}.practice-section h2{margin-top:14px}.practice-section ol{counter-reset:practice;margin:28px 0 0;padding:0;list-style:none}.practice-section li{counter-increment:practice;border-top:1px solid #4b4942;grid-template-columns:30px 1fr;gap:16px;padding:14px 0;font-size:14px;line-height:1.5;display:grid}.practice-section li:before{content:"0" counter(practice);color:#dca68f;padding-top:4px;font-size:10px}.section-heading{justify-content:space-between;align-items:end;gap:24px;margin-bottom:26px;display:flex}.section-heading h2{margin:12px 0 0}.section-heading>p{color:var(--muted);margin:0;font-size:12px}.song-grid{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);grid-template-columns:repeat(3,1fr);display:grid}.song-card{border-right:1px solid var(--line);min-width:0;padding:26px 20px 28px;position:relative}.song-card:last-child{border-right:0}.song-number{color:var(--accent);font-size:10px;font-weight:600}.song-card .song-focus{min-height:32px;color:var(--accent);letter-spacing:.1em;text-transform:uppercase;margin:32px 0 10px;font-size:10px;font-weight:600;line-height:1.4}.song-card h3{letter-spacing:-.02em;margin:0;font-family:Newsreader,serif;font-size:26px;line-height:1}.song-card .artist{color:var(--muted);margin:8px 0 22px;font-size:12px}.song-card>p:last-child{color:#5f5b53;margin:0;font-size:13px;line-height:1.55}.sources-section{border-top:1px solid var(--line);padding-top:34px}.sources-section h2{margin-bottom:12px;font-size:28px}.sources-section>p{color:var(--muted);font-size:13px;line-height:1.6}.sources-section ul{margin:24px 0 0;padding:0;list-style:none}.sources-section li{border-top:1px solid var(--line)}.sources-section a{color:var(--ink);justify-content:space-between;padding:13px 2px;font-size:13px;text-decoration:none;display:flex}.sources-section a:hover{color:var(--accent)}.article-footer{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);grid-template-columns:1fr 1fr;margin-top:78px;display:grid}.article-footer button{text-align:left;cursor:pointer;background:0 0;border:0;padding:24px 4px;font-family:Newsreader,serif;font-size:20px}.article-footer button.next{text-align:right;border-left:1px solid var(--line)}.article-footer button span{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-bottom:5px;font-family:DM Sans,sans-serif;font-size:9px;display:block}.article-footer button:disabled{opacity:.35;cursor:default}.site-footer{border-top:1px solid var(--line);color:var(--muted);justify-content:space-between;padding:28px 4vw;font-size:12px;display:flex}.fullscreen-viewer{z-index:100;color:var(--paper);background:#171714;grid-template-rows:68px minmax(0,1fr);display:grid;position:fixed;inset:0}.fullscreen-toolbar{border-bottom:1px solid #3b3933;justify-content:space-between;align-items:center;gap:20px;padding:0 24px;display:flex}.fullscreen-toolbar div{align-items:baseline;gap:12px;display:flex}.fullscreen-toolbar div span{color:#dca68f;letter-spacing:.12em;text-transform:uppercase;font-size:10px;font-weight:600}.fullscreen-toolbar strong{font-family:Newsreader,serif;font-size:20px;font-weight:500}.fullscreen-toolbar button{color:var(--paper);cursor:pointer;background:0 0;border:1px solid #5a574e;padding:9px 12px}.fullscreen-toolbar button span{margin-left:8px;font-size:18px;line-height:0}.fullscreen-toolbar button:hover{border-color:var(--paper)}.fullscreen-canvas{place-items:center;min-height:0;padding:18px;display:grid;overflow:auto}.fullscreen-canvas img{object-fit:contain;background:#fff;width:auto;max-width:100%;height:auto;max-height:100%;display:block;box-shadow:0 12px 46px #00000059}.song-byline{color:var(--muted);margin:-10px 0 28px;font-family:Newsreader,serif;font-size:22px}.song-byline a{-webkit-text-decoration-color:var(--accent);text-decoration-color:var(--accent);text-underline-offset:4px}.song-facts{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);grid-template-columns:repeat(2,1fr);margin-top:42px;display:grid}.song-facts div{border-bottom:1px solid var(--line);gap:5px;padding:18px 20px;display:grid}.song-facts div:nth-child(odd){border-right:1px solid var(--line)}.song-facts div:nth-last-child(-n+2){border-bottom:0}.song-facts span{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;font-size:9px;font-weight:600}.song-facts strong{font-family:Newsreader,serif;font-size:20px;font-weight:600}.chord-grid{border:1px solid var(--ink);grid-template-columns:repeat(4,1fr);margin-top:30px;display:grid}.chord-card{text-align:center;border-right:1px solid var(--line);padding:20px 10px 17px}.chord-card:last-child{border-right:0}.chord-card h3{margin:0 0 5px;font-family:Newsreader,serif;font-size:28px}.chord-card svg{width:100%;max-width:150px}.chord-card svg line{stroke:#8b877d;stroke-width:1.5px}.chord-card svg .nut{stroke:var(--ink);stroke-width:4px}.chord-card svg circle{fill:var(--accent)}.chord-card svg text{fill:var(--ink);text-anchor:middle;font:18px DM Sans}.chord-card p{grid-template-columns:1fr;gap:2px;margin:3px 0 0;font-size:11px;line-height:1.3;display:grid}.chord-card p span{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-size:8px}.technique-note{background:var(--accent-soft);grid-template-columns:150px 1fr;gap:24px;margin-top:22px;padding:22px 24px;display:grid}.technique-note strong{color:var(--accent);letter-spacing:.08em;text-transform:uppercase;font-size:11px}.technique-note p{margin:0;font-size:14px;line-height:1.6}.strum-card{background:var(--ink);color:var(--paper);grid-template-columns:70px 1fr;align-items:center;gap:12px 20px;margin-bottom:24px;padding:24px;display:grid}.strum-card span{color:#dca68f;letter-spacing:.12em;text-transform:uppercase;font-size:9px;font-weight:600}.strum-card strong{letter-spacing:.08em;font-size:20px}.song-breakdown{border-top:1px solid var(--ink)}.breakdown-row{border-bottom:1px solid var(--line);grid-template-columns:190px 1fr;gap:36px;padding:28px 0;display:grid}.breakdown-title span{color:var(--accent);font-size:10px}.breakdown-title h3{margin:10px 0 5px;font-family:Newsreader,serif;font-size:27px}.breakdown-title p{color:var(--muted);font-size:11px;line-height:1.4}.breakdown-row>div:last-child>p{color:#5f5b53;margin:18px 0 0;font-size:14px;line-height:1.65}.progression{border:1px solid var(--ink);grid-template-columns:repeat(4,1fr);display:grid}.progression strong{text-align:center;border-right:1px solid var(--line);padding:13px 8px;font-family:Newsreader,serif;font-size:19px}.progression strong:last-child{border-right:0}@media (width<=1100px){.page-layout{grid-template-columns:170px minmax(0,720px)}.article-outline{display:none}}@media (width<=760px){.site-header{min-height:66px;padding:0 20px}.header-progress,.primary-nav{display:none}.menu-button{display:block}.mobile-nav{z-index:19;background:var(--paper);border-bottom:1px solid var(--line);padding:10px 20px 20px;display:none;position:fixed;top:66px;left:0;right:0;box-shadow:0 20px 40px #28272214}.mobile-nav.open{display:grid}.mobile-nav button{text-align:left;border:0;border-bottom:1px solid var(--line);background:0 0;grid-template-columns:30px 1fr;padding:13px 0;font-size:14px;display:grid}.mobile-nav button span{color:var(--muted);padding-top:3px;font-size:10px}.mobile-nav button.active{color:var(--accent);font-weight:600}.page-layout{padding:44px 20px 70px;display:block}.chapter-sidebar{display:none}.article-header h1{font-size:clamp(44px,14vw,68px)}.outcome-card{grid-template-columns:1fr;gap:8px}.article-body{margin-top:52px}.lesson-page-toolbar{align-items:flex-start}.lesson-page-toolbar p{display:none}.lesson-page-toolbar button{white-space:nowrap}.fullscreen-toolbar{padding:0 16px}.fullscreen-toolbar strong{display:none}.fullscreen-canvas{padding:8px}.song-grid{grid-template-columns:1fr}.song-card{border-right:0;border-bottom:1px solid var(--line)}.song-card:last-child{border-bottom:0}.song-card .song-focus{min-height:0;margin-top:20px}.section-heading{display:block}.section-heading>p{margin-top:8px}.site-footer{flex-direction:column;gap:14px;padding:24px 20px}.song-facts,.chord-grid{grid-template-columns:1fr 1fr}.chord-card:nth-child(2){border-right:0}.chord-card:nth-child(-n+2){border-bottom:1px solid var(--line)}.technique-note,.breakdown-row{grid-template-columns:1fr;gap:12px}.strum-card{grid-template-columns:1fr}.breakdown-row{padding:24px 0}.breakdown-title p{margin-bottom:0}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}
