@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@400;500&display=swap');
:root{--ink:#213e38;--muted:#566a61;--paper:#f3f1e9;--sage:#e1e8df;--line:#ccd6ca;--accent:#375d4f}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px 'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #a65d44;outline-offset:5px}.skip{position:absolute;left:10px;top:-100px;background:var(--paper);padding:15px;z-index:20}.skip:focus{top:5px}header{min-height:105px;padding:20px 5%;display:flex;align-items:center;gap:35px;border-bottom:1px solid var(--line)}.brand{font-size:19px;letter-spacing:2px;font-weight:700;line-height:1.1;display:flex;gap:13px;align-items:center}.brand img{width:53px;height:53px}.brand small{font-size:11px;letter-spacing:3px}nav{margin:auto;display:flex;gap:35px;font-size:14px}nav a:hover,footer a:hover{text-decoration:underline}.edition,.eyebrow{text-transform:uppercase;letter-spacing:2.5px;font-size:11px;font-weight:600}.edition{border:1px solid var(--line);padding:9px 12px;border-radius:30px}.hero{background:var(--sage);padding:65px 7% 70px;display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}.eyebrow{display:block;margin:0 0 22px}.hero h1,h1,h2{font-family:'Playfair Display',Georgia,serif;font-weight:400}.hero h1{font-size:clamp(42px,5.2vw,76px);line-height:1.08;margin:0 0 22px;letter-spacing:-2px}.hero h1 em{font-weight:400;color:#627858}.hero p{max-width:450px;font-size:17px;line-height:1.8;color:var(--muted)}.button{display:inline-flex;background:var(--accent);color:#fff;padding:15px 24px;border-radius:4px;border:0;cursor:pointer;gap:35px;align-items:center}.button:hover{background:#254436}.hero .button{margin-top:15px}.hero-art{position:relative;padding:15px 20px 24px;display:grid;grid-template-columns:1fr 1fr;gap:15px;max-width:560px}.hero-art img{width:100%;border-radius:4px;box-shadow:0 8px 20px #23392e15}.hero-art a:nth-child(2){transform:translateY(25px)}.hero-art a:nth-child(3){transform:translateX(35px)}.hero-art a:nth-child(4){transform:translate(35px,25px)}.hero-art a{transition:transform .2s}.hero-art a:hover{transform:translateY(-4px)}.hero-note{font-size:11px;letter-spacing:1px;margin:45px 0 0;text-transform:uppercase}.stats{display:flex;gap:65px;padding:22px 7%;border-bottom:1px solid var(--line);align-items:center}.stats strong{font:32px Georgia,serif;margin-right:10px}.stats span{font-size:12px;color:var(--muted)}.section{padding:60px 7%}.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:28px}.section-head h2{font-size:38px;margin:0}.section-head a{font-size:14px;border-bottom:1px solid}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px}.card{min-width:0}.cover{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:#d7dfd1;border-radius:4px;overflow:hidden;position:relative}.cover img{width:100%;height:100%;object-fit:cover;transition:transform .35s}.card a:hover .cover img{transform:scale(1.035)}.cover .placeholder{font:60px Georgia,serif;color:#657c66}.card h3{font-weight:500;font-size:16px;line-height:1.4;margin:14px 0 4px}.card p{font-size:13px;color:var(--muted);margin:0}.card .style{display:block;font-size:10px;letter-spacing:1px;text-transform:uppercase;margin-top:8px;color:#6a715f}.intro{padding:55px 7% 30px;background:var(--sage)}.intro h1{font-size:52px;line-height:1.1;margin:0 0 16px;letter-spacing:-1px}.intro p{color:var(--muted);max-width:650px;line-height:1.7}.filters{display:grid;grid-template-columns:2fr 1fr 1fr;gap:15px;margin-bottom:25px}.filters label{font-size:11px;letter-spacing:1px;text-transform:uppercase}.filters input,.filters select{width:100%;padding:13px 12px;margin-top:7px;background:transparent;color:var(--ink);border:1px solid #aebaad;border-radius:3px;min-height:48px}.result-line{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:25px;font-size:13px;color:var(--muted)}.quiet-button{background:none;border:0;color:var(--ink);text-decoration:underline;cursor:pointer;padding:10px}.pagination{display:flex;justify-content:center;align-items:center;gap:25px;margin-top:45px}.pagination button{background:none;border:1px solid var(--line);padding:10px 20px;cursor:pointer;color:var(--ink)}button:disabled{opacity:.35;cursor:default}.artist-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.artist-tile{display:flex;align-items:center;gap:17px;padding:18px;background:#e8ebe1;border-radius:4px}.artist-tile img,.artist-tile .initials{width:65px;height:65px;object-fit:cover;border-radius:50%}.initials{display:flex;align-items:center;justify-content:center;background:#d6dfd0;font:24px Georgia}.artist-tile h3{font-size:15px;font-weight:500;margin:0 0 6px}.artist-tile p{font-size:12px;color:var(--muted);margin:0}.artist-tile:hover{background:#dce4d6}.breadcrumb{display:block;font-size:13px;margin-bottom:30px}.song{display:grid;grid-template-columns:minmax(240px,420px) 1fr;gap:60px;align-items:center}.song h1{font-size:52px;line-height:1.12;margin:0 0 20px}.song .artist-link{font-size:21px;border-bottom:1px solid}.song .meta{display:flex;gap:24px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin:25px 0}.listening{border-top:1px solid var(--line);margin-top:25px;padding-top:20px}.listening p{line-height:1.7;color:var(--muted);font-size:14px}.listening audio{width:100%;margin-top:12px}.empty{text-align:center;padding:60px 20px;color:var(--muted)}.browse-note{margin-top:45px;padding:28px;background:var(--sage);font-size:14px;line-height:1.7}footer{padding:40px 7%;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:15px;color:var(--muted);font-size:13px}footer .brand{font-size:14px;color:var(--ink);letter-spacing:1px}footer p{margin:0}footer small{grid-column:1/-1;margin-top:20px;font-size:11px}.loading{padding:80px 7%}.error{padding:50px 7%}body:has(.song) .section{padding-top:35px}@media(min-width:1500px){main,header,footer{max-width:1600px;margin:auto}}@media(max-width:900px){.edition{display:none}.hero{gap:30px;padding:45px 6%}.hero h1{font-size:52px}.hero-art{padding:0 30px 20px 0;gap:8px}.cards{grid-template-columns:repeat(3,minmax(0,1fr))}.artist-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.song{gap:30px}.song h1{font-size:40px}}@media(max-width:600px){header{min-height:85px;padding:16px 5%;gap:12px;flex-wrap:wrap}.brand{font-size:15px}.brand img{width:40px;height:40px}.brand small{font-size:9px;letter-spacing:2px}nav{gap:18px;margin:5px 0 0 auto;font-size:12px}nav a:last-child{display:none}.hero{grid-template-columns:1fr;padding:40px 6%}.hero h1{font-size:50px}.hero p{font-size:15px}.hero-art{max-width:370px;margin:0 auto;gap:12px}.hero-note{margin-top:22px}.stats{gap:25px;padding:20px 6%;flex-wrap:wrap}.stats strong{font-size:25px}.stats span{font-size:11px}.section{padding:40px 6%}.section-head h2{font-size:30px}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 15px}.card h3{font-size:14px}.card p{font-size:12px}.intro{padding:40px 6% 24px}.intro h1{font-size:40px}.filters{grid-template-columns:1fr 1fr}.filters label:first-child{grid-column:1/-1}.filters input,.filters select{font-size:14px}.artist-grid{grid-template-columns:1fr}.song{grid-template-columns:1fr;gap:30px}.song>.cover{max-width:360px;width:100%;margin:auto}.song h1{font-size:39px}.pagination{gap:15px}footer{grid-template-columns:1fr;padding:35px 6%}.hero-art a:nth-child(3){transform:translateX(15px)}.hero-art a:nth-child(4){transform:translate(15px,25px)}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
