@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Golos+Text:wght@400;500;600;700&display=swap');
:root{color-scheme:light;--paper:#f8f7f1;--ink:#283b0a;--muted:#505641;--lime:#b8d062;--lilac:#e9e3f6;--purple:#5f5aa5;--line:#d9ddcd;--display:"Cormorant Garamond",Georgia,serif;--body:"Golos Text",Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--body)}[hidden]{display:none!important}a{color:inherit;text-decoration:none}button,input{font:inherit}button{color:inherit;cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #7161bb;outline-offset:5px}p,figure{margin:0}img{display:block;max-width:100%}.wrap{width:min(1136px,calc(100% - 96px));margin-inline:auto}.header{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:22px}.brand{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font-weight:700;letter-spacing:-.035em}.header nav{display:flex;gap:30px;font-size:14px}.header nav a:hover,.footer-inner>a:last-child:hover{text-decoration:underline;text-underline-offset:5px}.header-link{font-size:14px;font-weight:600;border:1px solid #a8af98;border-radius:40px;padding:9px 15px;white-space:nowrap}.header-link span{padding-left:8px}.skip{position:absolute;top:6px;left:6px;transform:translateY(-160%);z-index:5;background:var(--paper);padding:8px}.skip:focus{transform:none}
.hero{width:min(1480px,calc(100% - 56px));margin-inline:auto;min-height:620px;display:flex;align-items:flex-end;border-radius:25px;overflow:hidden;color:#fff;background:#253522;position:relative;isolation:isolate;background-image:linear-gradient(90deg,rgba(14,25,14,.78),rgba(14,25,14,.36) 54%,rgba(14,25,14,.02) 90%),linear-gradient(0deg,rgba(12,20,11,.64),transparent 55%),url('hero.jpg');background-size:cover;background-position:center}
.hero-inner{width:min(1136px,calc(100% - 90px));margin:0 auto;padding:82px 0 57px}.eyebrow{font-size:12px;letter-spacing:.17em;text-transform:uppercase;font-weight:700}.purple{color:var(--purple)}.dot{display:inline-block;vertical-align:2px;width:7px;height:7px;background:var(--lime);border-radius:50%;margin-right:9px}.hero h1{font:600 clamp(68px,10vw,155px)/.78 var(--display);letter-spacing:-.06em;margin:24px 0 37px}.hero-bottom{display:flex;justify-content:space-between;align-items:end;gap:24px}.hero-bottom p{font-size:18px;color:#f3f5eb;max-width:440px;line-height:1.45;margin-bottom:23px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;border-radius:30px;padding:12px 19px;font-size:14px;font-weight:700;min-height:47px;line-height:1.4}.button.lime{background:var(--lime);color:#25350d}.button.lime:hover{background:#d0e392}.button.outline{border:1px solid #8a9872}.button.outline:hover,.header-link:hover{background:#ecefdf}.button span{font-size:17px}.hero-secondary{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;white-space:nowrap}.hero-secondary span{border:1px solid #ddd;border-radius:50%;width:39px;height:39px;display:grid;place-items:center;font-size:12px}
.section{padding-block:81px 0;scroll-margin-top:20px}h2{font:600 clamp(45px,6.2vw,80px)/.9 var(--display);letter-spacing:-.05em;margin:12px 0 17px}h3{font-size:18px;margin:10px 0 4px}.split{display:grid;grid-template-columns:1.12fr 1fr;gap:36px;align-items:end}.intro-text{color:var(--muted);padding-bottom:7px;max-width:530px}.intro-text p+p{margin-top:12px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:27px}.steps article{border:1px solid var(--line);border-radius:17px;padding:23px 24px 25px}.step-icon{display:grid;place-items:center;width:39px;height:39px;border-radius:50%;background:var(--lilac);font-size:25px;color:var(--purple);line-height:1}.steps p,.library-head p:not(.eyebrow),figcaption{color:var(--muted)}
.route-card{display:grid;grid-template-columns:.85fr 1.15fr;background:var(--ink);color:#fff;border-radius:23px;overflow:hidden}.route-copy{padding:44px 40px}.route-copy .eyebrow{color:#d2e596}.route-copy p:not(.eyebrow){max-width:420px;margin-bottom:16px;color:#eff0e5}.route-copy .button{margin-top:7px}.route-art{position:relative;min-height:350px;background:#5a7042}.route-art img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}.route-art figcaption{position:absolute;bottom:14px;left:14px;color:#fff;background:#26341d;padding:4px 10px;border-radius:8px;font-size:12px}
.library-head{margin-bottom:22px}.library-head>div:last-child{justify-self:end;width:min(100%,320px)}label{display:block;font-size:13px;font-weight:700;margin-bottom:5px}input{width:100%;padding:11px 15px;color:var(--ink);border:1px solid #a0ab90;border-radius:11px;background:#fff}.composer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0;margin:0;list-style:none}.composer{display:flex;align-items:center;text-align:left;gap:12px;width:100%;height:100%;min-height:70px;background:#fcfbf7;border:1px solid var(--line);border-radius:13px;padding:12px 14px;font-weight:600}.composer:hover{background:#edf1df;border-color:#9eac7e}.initials{display:grid;place-items:center;flex:none;min-width:39px;height:39px;padding-inline:5px;background:var(--lilac);color:#51498f;border-radius:50%;font:700 18px/1 var(--display)}.card-arrow{margin-left:auto;color:#62684f}.empty{margin:12px 0}
.listening{background:var(--lilac);margin-top:81px}.listening .section{padding-block:54px 57px}.track-list{margin-top:28px;border-top:1px solid #c2b9da}.track{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid #c2b9da}.track h3{margin:0}.track p{font-size:14px;color:#4e4861}.play{border:0;background:#fff;border-radius:30px;min-height:42px;padding:7px 15px;font-size:13px;font-weight:700;white-space:nowrap}.play:hover{background:#f5f2ff;color:#473a86}.player{margin-top:19px;max-width:680px}.player p{font-weight:700;margin-bottom:8px}.player iframe{border:0;width:100%;aspect-ratio:16/9}.player audio{width:100%}.player a,.player button{font-size:14px;text-decoration:underline}.player button{background:none;border:0;padding:9px 0}
.authors { padding-bottom: 64px; }
.authors h2 { font-size: clamp(34px, 5vw, 60px); }
.authors p { color: var(--muted); }
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:88px;font-size:14px}.footer-inner p{color:#e7edd8}footer{background:#253609;color:#fff}dialog{color:var(--ink);background:var(--paper);width:min(550px,calc(100% - 32px));border:0;border-radius:22px;padding:0;max-height:90vh}dialog::backdrop{background:rgba(19,26,11,.66)}.profile-inner{position:relative;padding:33px}.profile-inner h2{font-size:clamp(36px,7vw,57px);padding-right:12px}.profile-inner p+p,.profile-inner p:not(.eyebrow){margin-bottom:12px}.close{position:absolute;right:15px;top:13px;width:38px;height:38px;font-size:26px;line-height:1;border:0;border-radius:50%;background:var(--lilac)}.profile-inner .play{background:var(--lilac)}
@media(max-width:840px){.wrap{width:calc(100% - 48px)}.hero{width:calc(100% - 30px);min-height:550px}.hero-inner{width:calc(100% - 55px)}.section{padding-top:58px}.listening{margin-top:58px}.composer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.route-copy{padding:30px}.authors { padding-bottom: 48px; }}
@media(max-width:620px){.wrap{width:calc(100% - 32px)}.header{min-height:0;padding:12px 0;flex-wrap:wrap;gap:9px 15px}.brand{font-size:14px}.brand img{width:30px;height:30px}.header nav{width:100%;order:3;justify-content:space-between;gap:8px;font-size:13px;padding:3px 10px}.header-link{font-size:12px;padding:6px 9px}.hero{width:calc(100% - 20px);min-height:480px;border-radius:17px;background-position:59% center}.hero-inner{width:calc(100% - 35px);padding:49px 0 30px}.hero h1{font-size:clamp(52px,13vw,82px);margin:19px 0 22px}.hero-bottom{display:block}.hero-bottom p{font-size:16px;max-width:280px;margin-bottom:17px}.hero-secondary{margin-top:14px}.hero-secondary span{width:29px;height:29px}.split,.steps,.route-card{grid-template-columns:1fr;gap:15px}.intro h2{margin-bottom:0}.steps{margin-top:15px}.steps article{padding:16px 17px}.route-copy{padding:26px}.route-art{min-height:235px}.library-head>div:last-child{justify-self:stretch;width:100%}.composer-grid{grid-template-columns:1fr}.footer-inner{align-items:flex-start;flex-direction:column;padding-block:17px;gap:8px}.footer-inner p{font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.hero h1{font-size:clamp(68px,9vw,135px)}.hero-caption{align-self:end;padding:4px 10px;border-radius:7px;font-size:12px;background:#25341e;color:#fff}.video-wrap{position:relative}.video-wrap .button{position:absolute;bottom:15px;left:15px;border:0}.track .play{display:inline-flex;align-items:center}.section[id]:target{scroll-margin-top:20px}@media(max-width:620px){.hero h1{font-size:clamp(51px,12vw,82px)}.hero-caption{display:inline-block;margin-top:13px}}

.composer-carousel { position: relative; margin-top: 24px; }
.carousel-controls { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }
.carousel-controls button { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); font-size: 22px; line-height: 1; }
.carousel-controls button:hover:not(:disabled) { background: var(--lilac); }
.carousel-controls button:disabled { opacity: .38; cursor: default; }
#composers.composer-grid {
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: clamp(216px, 24%, 280px);
  gap: 14px;
  margin: 0;
  padding: 5px 5px 14px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 5px;
  scrollbar-color: #8a927c var(--paper);
}
#composers li { min-width: 0; scroll-snap-align: start; }
#composers .composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(44px, auto) 1fr;
  align-content: start;
  align-items: start;
  gap: 8px 10px;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 9px 9px 14px;
  overflow: hidden;
  background: var(--paper);
  text-align: left;
}
#composers .composer:hover { background: var(--lilac); }
.composer-portrait, .composer-placeholder { grid-column: 1 / -1; width: 100%; aspect-ratio: 4 / 4.5; border-radius: 11px; }
.composer-portrait { display: block; object-fit: cover; object-position: center 25%; background: var(--lilac); }
.composer-placeholder { display: grid; place-content: center; background: var(--lilac); color: var(--purple); font-size: 48px; }
.composer-name { padding: 2px 5px 0; line-height: 1.25; }
#composers .card-arrow { margin: 2px 4px 0 0; }
.composer-work { grid-column: 1 / -1; padding: 0 5px; color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.35; }
.profile-portrait { margin-block: 14px; max-width: 220px; }
.profile-portrait img { width: 100%; max-height: 210px; object-fit: cover; object-position: center 25%; border-radius: 12px; }
.profile-portrait figcaption { margin-top: 4px; font-size: 12px; }
.profile-portrait a { text-decoration: underline; text-underline-offset: 2px; }
.profile-inner #player { margin-top: 20px; }
#media .external-player { min-height: 220px; }
@media (max-width: 620px) {
  #composers.composer-grid { grid-auto-columns: min(68vw, 254px); }
  .composer-carousel { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) { #composers { scroll-behavior: auto; } }