:root{--paper:#f7f6ef;--ink:#253e33;--muted:#697568;--line:#d9ddcf;--green:#244a3b;--olive:#77834e}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;font-size:14px}a{color:inherit;text-decoration:none;touch-action:manipulation}a:focus-visible{outline:3px solid #ad853b;outline-offset:6px}h1,h2,p{margin:0}em{font-weight:400}header,main,footer{max-width:1440px;margin:auto}.site-header{min-height:100px;padding:18px 5%;display:flex;align-items:center;justify-content:space-between;gap:25px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;white-space:nowrap}.brand-symbol{font-size:46px;line-height:1;font-family:Georgia,serif}.brand>span:last-child{font-family:'Libre Caslon Display',Georgia,serif;font-size:28px;letter-spacing:-.6px}.brand em{color:var(--olive)}nav{display:flex;align-items:center;gap:20px;font-size:11px}nav>a{padding:10px 0}nav>a:hover{color:var(--olive);text-decoration:underline;text-underline-offset:5px}nav>span{color:#a4ad95;font-size:12px}.header-note{font-size:8px;letter-spacing:1.5px;color:var(--muted)}.welcome{position:relative;text-align:center;padding:57px 20px 37px;overflow:hidden}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:500}.welcome>.eyebrow{display:flex;align-items:center;justify-content:center;gap:14px}.welcome>.eyebrow>span{display:block;height:1px;width:23px;background:#a1ae8b}h1{font-family:'Libre Caslon Display',Georgia,serif;font-size:clamp(66px,7vw,100px);line-height:1.01;letter-spacing:-2.4px;font-weight:400;margin:23px 0 22px;position:relative;z-index:1}h1 em{color:var(--olive);position:relative}h1 em:after{content:'';height:6px;position:absolute;bottom:0;left:0;right:0;border-bottom:1px solid #a0ae79;transform:rotate(-2deg)}.welcome>p{font-size:14px;line-height:1.9;color:var(--muted);position:relative;z-index:1}.choose-link{display:inline-flex;flex-direction:column;align-items:center;gap:12px;margin-top:28px;font-size:8px;letter-spacing:1.7px;color:var(--muted)}.choose-link>span{font-size:19px;color:var(--ink);letter-spacing:0}.welcome-staff{position:absolute;width:210px;top:140px;opacity:.35;transform:rotate(-12deg);pointer-events:none}.welcome-staff.left{left:-85px}.welcome-staff.right{right:-85px;top:170px;transform:rotate(12deg)}.welcome-staff i{display:block;border-top:1px solid #c7cfb8;margin:11px 0}.welcome-staff b{position:absolute;top:-20px;left:90px;font-size:90px;font-weight:400;color:#c6ceb8}.welcome-staff.right b{left:20px;top:-5px;font-size:65px}.paths{padding:0 5%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}.path-card{border:1px solid var(--line);border-radius:5px;overflow:hidden;background:#fbfaf5;min-width:0;transition:box-shadow .25s,border-color .25s}.path-card:hover{box-shadow:0 10px 30px #213d3010;border-color:#b4c0a3}.path-art{display:block;height:305px;position:relative;overflow:hidden}.art-label{position:absolute;top:23px;left:27px;right:27px;display:flex;justify-content:space-between;align-items:center;z-index:3;font-size:8px;letter-spacing:1.6px}.art-label>span:last-child{font-size:22px;letter-spacing:0}.collection-art{background:#e7e5d8}.collection-art:after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,#827d6310,transparent 50%,#f7f5ea55);pointer-events:none}.score-sheet{position:absolute;width:225px;height:290px;background:#fffffa;box-shadow:0 8px 24px #4b4d3730;border:1px solid #e0decf;transition:transform .4s}.sheet-front{left:50%;top:61px;transform:translateX(-22%) rotate(11deg);overflow:hidden}.sheet-front img{width:100%;height:auto;display:block;filter:sepia(.09);opacity:.9}.sheet-back{left:50%;top:76px;transform:translateX(-95%) rotate(-12deg);padding:25px 17px}.sheet-back>span{display:block;font-family:Georgia,serif;letter-spacing:2px;font-size:11px;text-align:center;color:#9b9985;margin-bottom:30px}.paper-lines{height:32px;margin:24px 0;background:repeating-linear-gradient(to bottom,transparent 0,transparent 5px,#d1d2c5 5px,#d1d2c5 6px);opacity:.75}.sheet-caption{position:absolute;top:178px;left:15px;right:15px;background:#fffffacf;font-size:6px;letter-spacing:1.3px;text-align:center;line-height:1.8;padding:7px 2px;color:#73785d}.path-art:hover .sheet-front{transform:translateX(-22%) rotate(8deg) translateY(-5px)}.path-art:hover .sheet-back{transform:translateX(-95%) rotate(-15deg)}.piano-fragment{position:absolute;bottom:-32px;left:-25px;width:350px;height:75px;transform:rotate(14deg);display:flex;box-shadow:0 -4px 15px #5b614028;z-index:2}.piano-fragment i{height:100%;flex:1;background:#fffff8;border:1px solid #bdbfb1;position:relative}.piano-fragment i:nth-child(7n+1):after,.piano-fragment i:nth-child(7n+2):after,.piano-fragment i:nth-child(7n+4):after,.piano-fragment i:nth-child(7n+5):after,.piano-fragment i:nth-child(7n+6):after{content:'';position:absolute;top:0;right:-6px;width:12px;height:44px;background:#2d4034;z-index:1;border-radius:0 0 2px 2px}.art-corner{position:absolute;bottom:20px;right:22px;writing-mode:vertical-rl;font-size:7px;letter-spacing:1.5px;color:#7e866e;z-index:3}.classroom-art{background:var(--green);color:#e2e9c9}.orbit{position:absolute;left:50%;top:25px;border:1px solid #9caf8a36;border-radius:50%;width:280px;height:280px;transform:translateX(-50%)}.orbit-two{width:365px;height:365px;top:-17px}.chord-art{position:absolute;top:69px;left:0;width:100%;height:165px;transform:rotate(-6deg);transition:transform .4s}.path-art:hover .chord-art{transform:rotate(-3deg) translateY(-3px)}.chord-caption{position:absolute;top:189px;left:38px}.chord-caption>span{font-family:'Libre Caslon Display',Georgia,serif;font-size:43px;line-height:1}.chord-caption i{font-size:27px;color:#c2cda9;font-style:normal}.chord-caption small{display:block;margin-top:9px;font-size:6px;letter-spacing:1.4px}.classroom-caption{position:absolute;bottom:21px;left:28px;font-size:9px;color:#d4ddbd;display:flex;align-items:center;gap:8px}.classroom-caption>i{width:5px;height:5px;background:#dce89f;border-radius:50%}.path-copy{padding:29px 30px 0}.path-kicker{font-size:8px;letter-spacing:1.6px;color:var(--muted);font-weight:500}.path-copy h2{font-family:'Libre Caslon Display',Georgia,serif;font-size:43px;line-height:1.15;letter-spacing:-1px;font-weight:400;margin:15px 0}.path-copy h2.counterpoint-wordmark{font-family:'DM Sans',Arial,sans-serif;font-size:39px;font-weight:500;letter-spacing:-1.8px}.counterpoint-wordmark span{color:var(--olive)}.path-copy>p{font-size:12px;line-height:1.9;color:var(--muted);min-height:69px;max-width:460px}.path-tags{padding:0;list-style:none;display:flex;gap:8px 15px;flex-wrap:wrap;margin:20px 0 24px}.path-tags li{font-size:8px;color:#68765b;display:flex;align-items:center;gap:6px}.path-tags li:before{content:'';height:3px;width:3px;border-radius:50%;background:#9ca984}.path-action{padding:18px 0;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);font-size:12px;font-weight:500;gap:10px}.action-arrow{display:grid;place-items:center;height:34px;width:34px;border-radius:50%;border:1px solid #c5ceba;font-size:20px;transition:background .2s,color .2s,transform .2s}.path-action:hover .action-arrow{background:var(--green);color:#fff;border-color:var(--green);transform:translate(2px,-2px)}.path-action:hover>span:first-child{text-decoration:underline;text-underline-offset:4px}.connection{display:flex;align-items:center;gap:28px;margin:45px 5% 42px;padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.connection-mark{font-family:Georgia,serif;font-size:66px;line-height:1;color:#7f8d5c}.connection .eyebrow{font-size:8px;letter-spacing:1.5px;color:var(--muted)}.connection p{font-family:'Libre Caslon Display',Georgia,serif;font-size:29px;line-height:1.2;margin-top:11px;letter-spacing:-.3px}.connection p em{color:var(--olive)}.connection-note{margin-left:auto;color:var(--muted);font-size:11px;line-height:1.9;padding-left:25px}footer{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:0 5% 30px}.footer-brand{font-family:'Libre Caslon Display',Georgia,serif;font-size:23px}.footer-brand span{display:block;font-family:'DM Sans',Arial,sans-serif;font-size:6px;letter-spacing:1.4px;color:var(--muted);margin-top:7px}footer>p{font-size:11px;color:var(--muted)}footer>span{font-size:9px;color:var(--muted)}.skip-link{position:absolute;top:-70px;left:15px;z-index:10;padding:12px 18px;background:var(--green);color:white}.skip-link:focus{top:10px}@media(min-width:1440px){.welcome-staff.left{left:5px}.welcome-staff.right{right:5px}.path-art{height:325px}.chord-art{height:180px}.chord-caption{top:204px}}@media(max-width:1100px){.header-note{display:none}.path-copy{padding:25px 24px 0}.path-copy h2{font-size:38px}.path-copy h2.counterpoint-wordmark{font-size:36px}.path-copy>p{min-height:92px}.paths{gap:24px}.path-art{height:285px}.chord-caption{left:28px;top:181px}.chord-art{top:63px;height:154px}.sheet-front{width:205px}.sheet-back{width:205px}.art-label{left:24px;right:24px}.connection-note{font-size:10px}}@media(max-width:760px){.site-header{padding:17px 5%;min-height:85px;gap:12px;flex-wrap:wrap}.brand{gap:8px}.brand-symbol{font-size:38px}.brand>span:last-child{font-size:25px}.site-header nav{font-size:10px;gap:12px;width:100%;justify-content:center;border-top:1px solid var(--line);padding-top:8px;margin-top:3px}.site-header .brand{margin:auto}.welcome{padding:38px 5% 32px}.welcome>.eyebrow{font-size:7px;letter-spacing:1.5px;gap:10px}.welcome>.eyebrow>span{width:12px}h1{font-size:clamp(57px,10.7vw,80px);letter-spacing:-1.8px;margin:22px 0}.welcome>p{font-size:12px;line-height:1.9}.welcome-staff{display:none}.choose-link{font-size:7px;margin-top:23px;gap:9px}.paths{grid-template-columns:1fr;gap:26px;max-width:590px;margin:auto}.path-art{height:285px}.path-copy{padding:25px 24px 0}.path-copy h2{font-size:40px}.path-copy h2.counterpoint-wordmark{font-size:36px}.path-copy>p{font-size:12px;min-height:0;max-width:none}.path-tags{margin:20px 0}.path-kicker{font-size:7px;letter-spacing:1.3px}.path-tags li{font-size:8px}.art-label{font-size:7px}.connection{margin-top:35px;gap:17px;padding:25px 0;flex-wrap:wrap}.connection-mark{font-size:55px}.connection p{font-size:27px}.connection .eyebrow{font-size:7px}.connection-note{margin:0;padding-left:0;flex-basis:100%;font-size:11px}footer{flex-wrap:wrap;gap:20px;padding-bottom:25px}.footer-brand{font-size:22px;flex-basis:100%}footer>p{font-size:10px}footer>span{font-size:8px;margin-left:auto}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}