:root{--ink:#263e3a;--paper:#f7f3e9;--muted:#67736c;--line:#dddcd0;--teal:#36796f;--coral:#c9654b;--plum:#6c4d70;--ochre:#bd8b2f;--sage:#768968}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.55}button,input,select{font:inherit}button,a,select{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #bd8b2f;outline-offset:4px}header,main,footer{max-width:1320px;margin:auto}header{padding:30px 54px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{position:relative;display:flex;align-items:center;gap:9px;font-size:25px;font-family:Georgia,serif;font-weight:bold;letter-spacing:-1px}.brandmark{font-size:35px;color:var(--coral)}.brand-sub{position:absolute;font:8px Arial;letter-spacing:3px;bottom:-5px;left:44px}nav{display:flex;gap:32px;align-items:center;font-size:13px}nav button{border:1px solid var(--line);border-radius:22px;padding:9px 15px;background:transparent}nav button span{display:inline-grid;place-items:center;background:#e5e9dd;border-radius:50%;width:22px;height:22px;margin-left:7px}.hero{padding:65px 54px 60px;display:grid;grid-template-columns:1.08fr 1fr;gap:35px;align-items:center}.eyebrow{font-size:10px;font-weight:bold;letter-spacing:2px;color:var(--teal);margin:0 0 20px}h1,h2,h3,p{margin-top:0}h1{font:normal clamp(44px,5.7vw,76px)/1.05 Georgia,serif;letter-spacing:-3px;margin-bottom:24px}h1 em,h2 em{font-weight:normal;color:var(--coral)}.intro{color:#5b6b61;font-size:17px;line-height:1.7;margin-bottom:29px}.primary{display:inline-flex;align-items:center;gap:35px;background:var(--ink);color:white;padding:14px 21px;border-radius:5px;font-size:13px}.primary span{font-size:23px}.preview-note{font-size:10px;color:var(--muted);margin-top:20px;display:flex;gap:8px;align-items:center}.preview-note i{width:6px;height:6px;background:var(--ochre);border-radius:50%}.hero-art{height:390px;position:relative;isolation:isolate}.record{position:absolute;border-radius:7px;box-shadow:8px 18px 30px #253b3220}.record-back{background:var(--plum);color:#efe3cb;width:225px;height:275px;right:2%;top:10px;transform:rotate(13deg);padding:25px;font-family:Georgia;font-size:32px;line-height:1.1}.record-back:after{content:'';position:absolute;right:0;bottom:0;width:160px;height:120px;background:repeating-radial-gradient(ellipse at bottom left,transparent 0 15px,#dac9ba66 16px 17px,transparent 18px 29px);border-radius:100% 0 7px 0}.record-back small{font:8px Arial;letter-spacing:2px;display:block;margin-top:15px}.record-front{width:270px;height:290px;background:#c96b52;top:48px;left:2%;transform:rotate(-9deg);overflow:hidden;display:grid;place-items:center}.record-rings{position:absolute;width:255px;height:255px;border-radius:50%;background:repeating-radial-gradient(circle,#303f38 0 4px,#3b4940 5px 6px);transform:translate(18px,30px)}.record-label{position:relative;background:#eed6a0;border-radius:50%;width:146px;height:146px;display:flex;align-items:center;justify-content:center;flex-direction:column;transform:translate(18px,30px);z-index:2}.record-label strong{font:30px Georgia}.record-label span{font:16px Georgia}.record-label small{font:7px Arial;letter-spacing:2px;margin-bottom:8px}.mini-cover{position:absolute;width:151px;height:169px;background:#dab24d;color:#344c42;bottom:0;right:10%;border:8px solid #efe7d1;box-shadow:6px 9px 20px #253b3220;transform:rotate(7deg);text-align:center;padding:4px}.mini-cover>span{font-size:65px;line-height:1.1;display:block}.mini-cover strong{font:25px Georgia;display:block}.mini-cover small{font:6px Arial;letter-spacing:2px}.art-caption{position:absolute;bottom:-28px;left:12px;font:italic 13px Georgia;color:var(--muted)}.featured{padding:24px 54px 56px}.section-label{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.8px;margin-bottom:18px}.section-label span+span{letter-spacing:0;font:italic 14px Georgia;color:var(--muted)}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.feature{border:0;border-radius:8px;padding:24px;position:relative;text-align:left;min-height:200px;overflow:hidden;background:var(--surface);color:var(--ink)}.feature:hover{transform:translateY(-3px)}.feature small{font-size:9px;letter-spacing:1.6px;font-weight:bold}.feature h3{font:28px/1.15 Georgia;max-width:200px;margin:22px 0 8px}.feature p{font-size:12px;max-width:220px;margin-bottom:0}.feature .arrow{position:absolute;right:22px;top:18px;font-size:25px}.feature:after{content:'';position:absolute;width:110px;height:110px;right:-30px;bottom:-30px;border:1px solid currentColor;border-radius:50%;box-shadow:0 0 0 13px var(--surface),0 0 0 14px currentColor;opacity:.15}.collection{padding:45px 54px 65px;border-top:1px solid var(--line);scroll-margin-top:20px}.collection-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:25px}.collection-head .eyebrow{margin-bottom:9px}h2{font:normal 39px/1.16 Georgia;letter-spacing:-1px;margin:0}.collection-head>p{font-size:13px;color:var(--muted);margin-bottom:3px}.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:25px}.chips button{border:1px solid #d7dbcf;background:transparent;padding:8px 14px;border-radius:22px;font-size:12px}.chips button.active{background:var(--ink);color:#fff;border-color:var(--ink)}.toolbar{display:flex;gap:10px;align-items:center}.search{display:flex;align-items:center;gap:10px;border-bottom:1px solid #aab6a5;flex:1;padding:8px 2px}.search>span{font-size:24px}.search input{border:0;outline:none;background:transparent;min-width:0;width:100%;font-size:13px}.toolbar select,.toolbar button{border:1px solid var(--line);background:transparent;border-radius:4px;padding:10px;font-size:12px}.toolbar button[aria-pressed=true]{background:#e4e9dc}.results-line{font-size:11px;color:var(--muted);display:flex;justify-content:space-between;margin:20px 0}.results-line button{border:0;background:none;text-decoration:underline;color:var(--muted);font-size:11px}.song-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:29px 22px}.song-card{position:relative;min-width:0}.cover{width:100%;aspect-ratio:1.16;border:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;text-align:left;border-radius:5px;background:var(--surface);color:var(--tone);padding:19px;overflow:hidden;position:relative}.cover small{font-size:8px;letter-spacing:2px;font-weight:bold}.cover strong{font:28px/1.05 Georgia;letter-spacing:-.6px;position:relative;z-index:1;max-width:85%}.cover .motif{position:absolute;right:-30px;top:22px;width:170px;height:170px;border:1px solid currentColor;border-radius:50%;opacity:.13;box-shadow:0 0 0 18px var(--surface),0 0 0 19px currentColor,0 0 0 36px var(--surface),0 0 0 37px currentColor}.song-card:nth-child(3n) .motif{border-radius:100% 0 100% 0;transform:rotate(25deg)}.song-card:nth-child(4n) .motif{border-radius:0;transform:rotate(45deg)}.cover:hover{filter:brightness(.97)}.save{position:absolute;top:9px;right:9px;z-index:2;border:0;background:#ffffffce;border-radius:50%;width:31px;height:31px;font-size:20px;display:grid;place-items:center}.save[aria-pressed=true]{color:#ac4c40}.song-info{padding-top:12px}.song-info .tag{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--teal)}.song-info h3{font:18px/1.25 Georgia;margin:7px 0}.song-info p{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:10px}.song-info .open{border:0;background:transparent;padding:0;font-size:11px;text-decoration:underline;text-underline-offset:4px}.language-tag{font:8px Arial;position:relative;z-index:1;letter-spacing:1px}.empty{grid-column:1/-1;text-align:center;padding:55px 20px;border:1px dashed var(--line);border-radius:8px}.audio-note{margin-top:42px;padding:19px 22px;background:#eceee2;border-radius:6px;display:flex;gap:17px;align-items:center;color:#536456}.audio-note>span{font-size:32px}.audio-note p{font-size:12px;margin:0}.audio-note strong{font-weight:normal;color:var(--ink)}.about{background:#e7eadf;padding:57px 54px;display:grid;grid-template-columns:1fr 1.1fr;gap:50px}.about p{font-size:15px;color:#506357}.about .eyebrow{font-size:10px}.about .about-small{font-family:Georgia;font-style:italic;font-size:19px;color:var(--ink)}footer{padding:28px 54px;display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:11px;color:var(--muted)}footer .brand{font-size:20px}dialog{border:0;padding:28px 34px;width:min(850px,94vw);max-height:91vh;border-radius:12px;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#1c302dbb;backdrop-filter:blur(4px)}.dialog-top{display:flex;justify-content:space-between;align-items:center;position:sticky;top:-28px;padding-top:8px;background:var(--paper);z-index:4}.dialog-top .eyebrow{margin:0}.close{border:1px solid var(--line);width:38px;height:38px;border-radius:50%;font-size:25px;background:transparent}.detail-heading{padding:24px 0}.detail-heading h2{font-size:43px;margin:8px 0 15px}.detail-heading>p{color:var(--muted);font-size:15px}.detail-tags{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--teal)}.detail-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:35px}.quote{font:italic 23px/1.4 Georgia;color:var(--tone);padding:24px;background:var(--surface);border-radius:7px;margin-bottom:20px}.use h3,.lyrics-header h3{font:23px Georgia;margin:0 0 10px}.use p{font-size:13px}.audio-box{padding:18px;border:1px solid var(--line);border-radius:6px;margin:20px 0}.audio-box p{font-size:12px;margin:0 0 10px}.file-button,.detail-save,.download{display:inline-block;font-size:11px;border:1px solid #adb9a9;background:transparent;padding:9px 12px;border-radius:4px;cursor:pointer}.audio-box small{display:block;color:var(--muted);font-size:10px;margin-top:8px}audio{width:100%;margin-top:10px}.lyrics-header{display:flex;justify-content:space-between;gap:12px;align-items:center}.lyrics-header select{max-width:150px;background:transparent;border:1px solid var(--line);padding:7px;font-size:11px}.lyrics{white-space:pre-wrap;font:15px/1.8 Georgia;margin:20px 0}.lyric-source{font-size:10px;color:var(--muted)}.detail-save{margin-right:5px}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.skip{position:absolute;top:-100px}.skip:focus{top:10px;left:10px;z-index:100;background:white;padding:10px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;padding:12px 20px;border-radius:5px;font-size:12px;opacity:0;pointer-events:none;z-index:20}#toast.show{opacity:1}.teal{--surface:#dce7dc;--tone:#346b61}.coral{--surface:#edd0bf;--tone:#8d493b}.plum{--surface:#e0d6e2;--tone:#644464}.ochre{--surface:#efdfa7;--tone:#70541f}.sage{--surface:#dce1c8;--tone:#586d45}
@media(min-width:1400px){body{padding-top:12px}}@media(max-width:1000px){header,.hero,.featured,.collection,.about,footer{padding-left:30px;padding-right:30px}.hero-art{transform:scale(.88);transform-origin:center right}.song-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hero{gap:0}.hero h1{font-size:58px}.cover strong{font-size:27px}.toolbar{flex-wrap:wrap}.search{flex-basis:100%}}@media(max-width:700px){header{padding:20px}.brand{font-size:22px}nav{gap:16px}nav a:nth-child(2){display:none}nav button{font-size:11px;padding:6px 9px}.hero{padding:38px 22px 30px;grid-template-columns:1fr}.hero h1{font-size:57px;letter-spacing:-2px}.hero-art{height:335px;max-width:420px;width:100%;margin:20px auto 10px;transform:scale(.85);transform-origin:center}.featured{padding:20px 22px 35px}.feature-grid{grid-template-columns:1fr}.feature{min-height:130px;padding:20px}.feature h3{margin:12px 0 6px;max-width:90%}.feature p{max-width:85%}.section-label span+span{display:none}.collection{padding:35px 22px}.collection-head{display:block}.collection-head>p{display:none}h2{font-size:32px}.chips{gap:6px}.chips button{font-size:11px;padding:7px 11px}.toolbar{gap:7px}.toolbar select,.toolbar button{font-size:10px;padding:8px}.song-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px}.cover{padding:13px;aspect-ratio:.94}.cover strong{font-size:23px}.cover small{font-size:6px}.song-info h3{font-size:17px}.song-info p{font-size:11px}.about{padding:36px 22px;grid-template-columns:1fr;gap:25px}footer{padding:25px 22px;flex-wrap:wrap}footer>span{order:3;flex-basis:100%}dialog{padding:20px}.detail-layout{grid-template-columns:1fr;gap:25px}.detail-heading h2{font-size:35px}.dialog-top{top:-20px}.lyrics-header{border-top:1px solid var(--line);padding-top:20px}.preview-note{font-size:9px}.audio-note{align-items:flex-start}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Existing artwork stays intact, including titles and portrait compositions. */
.cover{aspect-ratio:1}.cover.has-art{padding:0;background:#e9e4d8;align-items:center;justify-content:center}.cover.has-art img{width:100%;height:100%;object-fit:contain;display:block}.detail-art{margin:0 0 22px;text-align:center}.detail-art img{width:100%;max-height:380px;object-fit:contain;display:block;border-radius:5px}.detail-art figcaption{font-size:10px;color:var(--muted);margin-top:7px}.feature-art{padding-right:130px;min-height:215px}.feature-art h3{font-size:23px}.feature-image{position:absolute;right:12px;bottom:16px;width:105px;height:150px;object-fit:contain;border-radius:3px}.feature-art .arrow{right:18px;top:10px}.feature-art:after{display:none}.real-art .record,.real-art .mini-cover{border:0;padding:0;overflow:hidden;display:block;background:#eae5d6}.real-art img{width:100%;height:100%;object-fit:contain;display:block}.real-art .record-back{width:235px;height:235px;top:28px}.real-art .record-back:after{display:none}.real-art .record-front{width:260px;height:260px;left:2%;top:48px}.real-art .mini-cover{width:165px;height:165px;bottom:0;right:7%;border:6px solid var(--paper)}
@media(max-width:700px){.feature-art{min-height:168px;padding-right:135px}.feature-image{height:132px;width:110px;bottom:18px}.real-art .record-front{top:0}.real-art .record-back{top:5px}.cover{aspect-ratio:1}}
/* A deliberate three-cover arrangement, preserving each complete cover. */
.hero-art.real-art{display:grid;grid-template-columns:1.22fr 1fr;grid-template-rows:auto auto auto;gap:18px;align-items:center;height:auto;width:100%;max-width:520px;margin:0 auto;transform:none;isolation:isolate}
.hero-art.real-art .record,.hero-art.real-art .mini-cover{position:relative;inset:auto;transform:none;width:100%;height:auto;aspect-ratio:1;border:5px solid #fffdf7;border-radius:8px;padding:0;box-shadow:0 8px 22px #253b3215;overflow:hidden;transition:box-shadow .2s ease}
.hero-art.real-art .record:hover,.hero-art.real-art .mini-cover:hover{box-shadow:0 12px 28px #253b322b}
.hero-art.real-art .record-front{grid-column:1;grid-row:1 / 3;align-self:center}
.hero-art.real-art .record-back{grid-column:2;grid-row:1}
.hero-art.real-art .mini-cover{grid-column:2;grid-row:2}
.hero-art.real-art img{width:100%;height:100%;aspect-ratio:1;object-fit:contain}
.hero-art.real-art .art-caption{position:static;grid-column:1 / -1;grid-row:3;text-align:center;font-size:13px;margin-top:2px}
@media(max-width:1000px) and (min-width:701px){.hero-art.real-art{gap:12px}.hero-art.real-art .record,.hero-art.real-art .mini-cover{border-width:4px}.hero-art.real-art .art-caption{font-size:11px}}
@media(max-width:700px){.hero-art.real-art{max-width:430px;margin:24px auto 6px;gap:14px}.hero-art.real-art .record,.hero-art.real-art .mini-cover{border-width:4px}}
/* One continuous illustrated opening. */
.illustrated-hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:530px;padding:44px 54px 48px;overflow:hidden;gap:0}
.illustrated-hero .hero-copy{position:relative;z-index:2;width:48%;max-width:570px}
.illustrated-hero h1{font-size:clamp(44px,5.5vw,73px);line-height:1.08;letter-spacing:-2.6px}
.illustrated-hero .intro{max-width:440px;font-size:16px}
.hero-landscape{position:absolute;z-index:0;right:36px;top:0;bottom:0;width:80%;margin:0;pointer-events:none;mask-image:linear-gradient(to right,transparent 0%,#000 12%,#000 98.5%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 12%,#000 98.5%,transparent 100%)}
.hero-landscape img{display:block;width:100%;height:100%;object-fit:contain;object-position:right center;mix-blend-mode:multiply}
.illustrated-hero .hero-copy:before{display:none}
.illustrated-hero .preview-note{max-width:350px;line-height:1.5}
@media(max-width:1000px) and (min-width:701px){.illustrated-hero{padding:40px 30px;min-height:490px}.illustrated-hero .hero-copy{width:53%}.illustrated-hero h1{font-size:52px}.illustrated-hero .intro{font-size:14px}.hero-landscape{width:80%;right:20px}}
@media(max-width:700px){.illustrated-hero{display:flex;flex-direction:column;align-items:stretch;padding:38px 22px 16px;min-height:0;overflow:hidden}.illustrated-hero .hero-copy{width:100%;max-width:none}.illustrated-hero h1{font-size:clamp(43px,10.5vw,62px);letter-spacing:-1.8px}.illustrated-hero .intro{font-size:16px;max-width:100%}.illustrated-hero .hero-copy:before{display:none}.hero-landscape{position:relative;inset:auto;width:calc(100% + 44px);margin:8px -22px 0;aspect-ratio:3 / 2;mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 92%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 92%,transparent)}.hero-landscape img{object-fit:contain}.illustrated-hero .preview-note{margin-bottom:0}}

.recording-language{display:block;font-size:.8rem;font-weight:700;color:#286b65;margin:8px 0}.related-versions{display:grid;gap:8px;margin:16px 0 24px}.related-versions h3{font-size:1rem;margin:0 0 4px}.related-versions button{border:1px solid #bccdc3;background:#f6f5ed;color:#244a40;border-radius:10px;padding:12px;text-align:left;cursor:pointer;min-height:44px}

.card-audio{display:block;width:100%;max-width:100%;margin:14px 0}
/* Sing-along projection */
#projection{max-width:none;max-height:none;width:100vw;height:100dvh;margin:0;padding:0;border:0;border-radius:0;background:#103e35;color:#fff9e9;overflow:hidden}#projection::backdrop{background:#103e35}.projection-shell{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:clamp(16px,2.5vw,36px);gap:20px}.projection-shell header{display:flex;justify-content:space-between;align-items:center;gap:20px}.projection-shell h2{margin:3px 0;font-size:clamp(24px,3vw,40px);color:inherit}.projection-shell small{letter-spacing:.12em;color:#dcca9c}.projection-actions,.projection-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.projection-shell button,.projection-shell summary{background:#f8edcf;color:#143e34;border:1px solid #d8c590;border-radius:9px;padding:9px 14px;cursor:pointer;font:inherit}.projection-shell button:focus-visible,.projection-shell input:focus-visible,#projectionLyrics:focus-visible{outline:3px solid #eec466;outline-offset:3px}.projection-body{min-height:0;display:grid;grid-template-columns:minmax(180px,.8fr) minmax(0,1.4fr);gap:clamp(24px,4vw,70px);align-items:center}.projection-body aside{min-height:0;max-height:100%;text-align:center}.projection-body aside img{display:block;max-width:100%;max-height:55dvh;aspect-ratio:1;object-fit:contain;margin:auto;border-radius:16px;box-shadow:0 15px 40px #0003}.projection-body aside p{color:#dcca9c;margin:10px 0;font-size:14px}#projectionLyrics{--lyric-size:40px;height:100%;overflow:auto;position:relative;overscroll-behavior:contain;padding:15vh 20px 25vh;scrollbar-color:#bca977 #244d43}.projection-line{font-size:var(--lyric-size);line-height:1.5;font-weight:500;margin:0 0 28px;white-space:pre-wrap;color:#ede9db}.projection-line.current{color:#ffe19b;text-shadow:0 0 24px #ffe19b22}.projection-shell footer{min-width:0}.projection-shell audio{width:100%;height:40px;margin-bottom:12px}.projection-controls label{display:flex;align-items:center;gap:7px}.projection-controls input[type=range]{width:100px}.projection-controls details{position:relative;margin-left:auto}.projection-controls details[open]{position:absolute;bottom:90px;right:25px;z-index:2;background:#f8edcf;color:#143e34;padding:15px;max-width:min(440px,90vw);border-radius:12px;box-shadow:0 8px 30px #0005}.projection-controls details label{display:block;margin:12px 0}.projection-controls details input{display:block;max-width:100%}.projection-controls details p{font-size:14px}#projectionStatus{font-size:13px;color:#e0d7be;margin:10px 0 0}.song-info [data-display]{margin-top:8px}@media(max-width:650px){.projection-shell{gap:12px;padding:14px}.projection-body{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:8px}.projection-body aside{display:flex;gap:12px;align-items:center}.projection-body aside img{width:70px;height:70px;margin:0;border-radius:8px}.projection-body aside p{font-size:12px}.projection-shell h2{font-size:23px}.projection-actions{gap:5px}.projection-actions button{padding:7px;font-size:12px}#projectionLyrics{padding:8vh 6px 20vh;--lyric-size:32px}.projection-controls{gap:8px;font-size:12px}.projection-controls button{padding:7px}.projection-controls details{margin-left:0}.projection-controls input[type=range]{width:70px}}

#projection .projection-shell header{width:100%;max-width:none;margin:0;padding:0;border:0;text-align:left}#projection .projection-shell footer{display:block;width:100%;max-width:none;margin:0;padding:0;border:0;color:#fff9e9}body:has(#projection[open]){overflow:hidden}
.song-info [data-display]{display:block;margin-top:12px}