@font-face{font-family:Cait;src:url('assets/cait-handwriting.ttf')}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0;background:#141313;color:#f2eee3;font:16px/1.65 Arial,sans-serif}a{color:inherit;text-decoration:none}a:hover{color:#c6b2d7}a:focus-visible,summary:focus-visible{outline:2px solid #c6b2d7;outline-offset:6px}header{padding:26px 6vw;border-bottom:1px solid #ffffff24;display:flex;justify-content:space-between;align-items:center;gap:24px;font:12px/1.4 'Courier New',monospace}.brand{font:26px Cait,sans-serif}.page-intro{padding:90px 8vw 75px;position:relative;border-bottom:1px solid #ac9bc055;overflow:hidden}.eyebrow{font:11px/1.5 'Courier New',monospace;letter-spacing:2px;color:#b7a5c8}.page-intro h1{font:clamp(52px,7vw,110px)/1.05 Cait,sans-serif;font-weight:400;margin:26px 0}.page-intro h1 span{color:#ecb1b6}.page-intro>p:last-of-type{color:#beb7b1}.page-intro img{position:absolute;right:8vw;bottom:0;width:160px;max-height:85%;object-fit:contain}.song-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:6vw;padding:65px 6vw}nav{position:sticky;top:28px;align-self:start}nav a{display:block;font:16px/1.4 Georgia,serif;margin:0;padding:10px 0;border-bottom:1px solid #ffffff15}nav .eyebrow{margin-bottom:20px}.song{padding:0 0 60px;margin-bottom:60px;border-bottom:1px solid #ac9bc055;scroll-margin-top:30px}.song h2{font:clamp(28px,3.2vw,48px)/1.2 Cait,sans-serif;font-weight:400;margin:16px 0 26px;color:#eab3b7}.song iframe{width:100%;border:0;border-radius:10px;background:#1b1919;display:block}.song .video{aspect-ratio:16/9;max-width:760px}.song .audio{height:450px;max-width:760px}.playback-note{font-size:12px;color:#b6afa8;margin:0 0 12px}.external,.back-index{display:inline-block;font:11px/1.6 'Courier New',monospace;letter-spacing:.5px;border-bottom:1px solid #ac9bc0;padding:9px 0;margin:12px 24px 16px 0}.back-index{color:#c8bbd3}details{max-width:760px;margin-top:18px}summary{cursor:pointer;font:18px/1.6 Georgia,serif;padding:14px 0;border-top:1px solid #ffffff29;display:flex;justify-content:space-between;list-style:none}summary::-webkit-details-marker{display:none}summary span{color:#ac9bc0}.lyrics{white-space:pre-line;font:17px/1.95 Georgia,serif;color:#ded7d0;padding:18px 0 4px;max-width:640px}footer{display:flex;justify-content:space-between;gap:20px;padding:28px 6vw;border-top:1px solid #ffffff24;font:10px/1.6 'Courier New',monospace;color:#aaa29b}@media(max-width:800px){header{padding:20px 6vw}.page-intro{padding:55px 6vw 50px}.page-intro img{width:92px;right:3vw}.page-intro>p:last-of-type{max-width:70%}.song-layout{grid-template-columns:1fr;padding:35px 6vw;gap:42px}nav{position:static;display:flex;flex-wrap:wrap;gap:8px 18px}nav .eyebrow{width:100%;margin:0}nav a{font-size:13px;padding:5px 0}.song{padding-bottom:36px;margin-bottom:40px}.lyrics{font-size:16px}.song h2{font-size:32px}footer{flex-direction:column}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.photo-opening{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;padding:0 6vw;margin:38px 0 0;align-items:center}.photo-opening figure,.photo-interlude figure{margin:0;overflow:hidden}.photo-opening img,.photo-interlude img{width:100%;height:100%;display:block;object-fit:cover}.photo-opening figure:first-child{aspect-ratio:1.55}.photo-opening figure:last-child{width:72%;justify-self:center;aspect-ratio:4/5;transform:rotate(3deg)}.photo-interlude{margin:0 0 80px;display:grid;gap:24px;align-items:center}.photo-interlude.paired{grid-template-columns:1fr 1fr}.photo-interlude.paired figure:first-child{aspect-ratio:3/4}.photo-interlude.paired figure:last-child{aspect-ratio:3/4;margin-top:60px}.photo-interlude.solo{max-width:440px;margin-left:auto;margin-right:auto;transform:rotate(-2deg)}.photo-interlude.solo figure{aspect-ratio:4/5}.photo-interlude.solo img{object-position:50% 35%}@media(max-width:800px){.photo-opening{gap:10px}.photo-opening figure:last-child{width:90%}.photo-interlude{gap:14px;margin-bottom:45px}.photo-interlude.paired figure:last-child{margin-top:30px}.photo-interlude.solo{max-width:78%}}

/* Keep the opening focused on the title and bring the photographs closer. */
.page-intro{padding:32px 8vw 30px}
.page-intro h1{margin:0;font-size:clamp(48px,6vw,90px)}
.photo-opening{margin-top:24px}
@media(max-width:800px){.page-intro{padding:26px 6vw}.photo-opening{margin-top:18px}}

.song-play{display:flex;align-items:center;gap:12px;background:#ac9bc0;color:#141313;border:0;border-radius:30px;padding:13px 22px;font:inherit;font-size:16px;cursor:pointer;margin:20px 0}.song-play:hover{background:#c6b4db}.song-play:focus-visible,.listening-bar button:focus-visible{outline:2px solid #f2eee3;outline-offset:5px}.song-play + .external{display:inline-block;font-size:12px;margin:4px 20px 12px 0}.has-player{padding-bottom:110px}.listening-bar[hidden]{display:none}.listening-bar{position:fixed;bottom:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:16px;padding:18px max(24px,env(safe-area-inset-left));padding-bottom:max(18px,env(safe-area-inset-bottom));background:#211d25;border-top:1px solid #ac9bc0;color:#f2eee3;box-shadow:0 -8px 28px #0005}.now-playing{min-width:180px;display:flex;flex-direction:column;gap:5px}.player-caption{font-size:9px;letter-spacing:2px;color:#c6b4db}.now-playing strong{font-size:16px;font-weight:400}.listening-bar button{border:0;background:none;color:#f2eee3;cursor:pointer;font:inherit;white-space:nowrap}.listening-bar #player-toggle{width:44px;height:44px;flex-shrink:0;background:#ac9bc0;color:#141313;border-radius:50%;font-size:20px}.listening-bar input{flex:1;min-width:50px;accent-color:#ac9bc0;cursor:pointer}.listening-bar #elapsed,.listening-bar #duration{font-size:12px;font-variant-numeric:tabular-nums}.listening-bar #show-lyrics{font-size:13px}.listening-bar #playback-status:empty{display:none}.listening-bar #playback-status{position:absolute;bottom:100%;background:#211d25;padding:10px 20px;left:0;right:0;margin:0;font-size:13px}.song{scroll-margin-top:30px}@media(max-width:650px){.has-player{padding-bottom:150px}.listening-bar{gap:10px;flex-wrap:wrap;padding:12px 18px}.now-playing{min-width:0;flex:1;order:0}.listening-bar #player-toggle{order:1}.listening-bar #show-lyrics{order:2}.listening-bar #elapsed{order:3}.listening-bar input{order:4;flex-basis:60%}.listening-bar #duration{order:5}.now-playing strong{font-size:14px}}

.song-services{display:flex;align-items:center;flex-wrap:wrap;gap:12px 25px;margin:24px 0 30px}.song-services .external{display:inline-block;margin:0;padding-bottom:10px;font-size:18px;white-space:nowrap}.song-player .song-services a{border-color:#ac9bc0}@media(max-width:650px){.song-services{gap:12px 20px}.song-services .external{font-size:17px}}

/* A single-line title spans the content width, with the botanical home mark. */
.page-intro h1{font-size:6.2vw;white-space:nowrap;line-height:1.15;color:#ac9bc0}
header .brand{display:block;width:72px;height:72px;flex:0 0 72px;line-height:0}
header .brand img{display:block;width:100%;height:100%;object-fit:contain}
@media(max-width:800px){.page-intro h1{font-size:6.5vw}header .brand{width:60px;height:60px;flex-basis:60px}}

.page-intro h1 span{color:inherit}

/* Reveal a palette-matched doodle variant on hover or keyboard focus. */
.photo-opening .lyrics-art-hover{position:relative}
.photo-opening .lyrics-art-hover .hover-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease;pointer-events:none}
.photo-opening .lyrics-art-hover:hover .hover-art,.photo-opening .lyrics-art-hover:focus .hover-art{opacity:1}
.lyrics-art-hover:focus-visible{outline:2px solid #ac9bc0;outline-offset:5px}
@media(prefers-reduced-motion:reduce){.photo-opening .lyrics-art-hover .hover-art{transition:none}}

/* Small spaced lavender lettering framed by stem-free watercolor blossoms. */
.page-intro{display:flex;align-items:center;justify-content:space-between;gap:2.4vw;padding:28px 6vw}
.page-intro h1{flex:1;min-width:0;margin:0;text-align:center;font-size:4.2vw;letter-spacing:.18em;word-spacing:.12em;white-space:nowrap;line-height:1.35;color:#ac9bc0}
.page-intro .title-flower{position:static;display:block;width:clamp(38px,5.8vw,92px);height:auto;max-height:none;object-fit:contain;flex:0 0 auto}
.page-intro .title-flower-left{transform:rotate(-18deg)}
.page-intro .title-flower-right{transform:rotate(22deg)}
@media(max-width:800px){.page-intro{padding:22px 4vw;gap:2vw}.page-intro h1{font-size:4.1vw;letter-spacing:.13em}.page-intro .title-flower{width:6.5vw;min-width:24px}}

/* Full-width handwritten sheet under the existing song player. */
#all-that-matters>details{max-width:none}
.handwritten-lyrics{margin:20px 0 0;width:100%}
.handwritten-lyrics a{display:block;cursor:zoom-in}
.handwritten-lyrics img{display:block;width:100%;height:auto}
#all-that-matters .lyrics-transcript{margin-top:18px}

/* Keep song playback and streaming links together above the lyric sheet. */
#all-that-matters .song-control-row{display:flex;align-items:center;flex-wrap:wrap;gap:18px 26px;margin-bottom:24px}
#all-that-matters .song-control-row .song-services{margin:0;gap:12px 22px}
#all-that-matters .song-control-row .song-play{flex:0 0 auto}
#all-that-matters .handwritten-lyrics{margin-top:0}
@media(max-width:550px){#all-that-matters .song-control-row{gap:14px}#all-that-matters .song-control-row .song-services{gap:10px 14px}}

/* Match the song title to the purple pen in its handwritten sheet. */
#all-that-matters h2{color:#460e4d}

/* Songwriting notebook collage with translucent reading surfaces. */
body{background:#e8dfd3 url('assets/lyrics-notebook-originals.webp') repeat;background-size:1200px auto;color:#302735}
header{background:rgba(251,246,237,.88);border-color:#67536a33}
.page-intro{background:rgba(251,246,237,.88);border-color:#67536a33}
.page-intro h1{color:#79618d}
.song-layout{gap:4vw}
#song-index,.song{background:rgba(255,250,240,.92);border:1px solid #fdf7edcc;box-shadow:0 4px 22px #49354a12}
#song-index{padding:24px 20px}
#song-index a{border-color:#67536a24}
.eyebrow{color:#73567f}
.song{padding:24px clamp(18px,2.5vw,38px) 34px;margin-bottom:38px}
.song h2{color:#78466f}
#all-that-matters h2{color:#460e4d}
.lyrics{color:#302735}
summary{border-color:#67536a33}
a:hover{color:#77458a}
.back-index,.playback-note{color:#6a526f}
footer{background:rgba(251,246,237,.92);color:#594b5b;border-color:#67536a33}
.song-play:focus-visible{outline-color:#674275}
@media(max-width:800px){body{background-size:850px auto}#song-index{padding:18px}.song-layout{gap:28px}.song{padding:20px 16px 28px}}

#i-don-t-want-to-fall-in-love-again .song-control-row{display:flex;align-items:center;flex-wrap:wrap;gap:18px 26px;margin-bottom:24px}
#i-don-t-want-to-fall-in-love-again .song-control-row .song-services{margin:0;gap:12px 22px}
#i-don-t-want-to-fall-in-love-again .handwritten-lyrics{margin-top:0}
#i-don-t-want-to-fall-in-love-again h2{color:#460e4d}
.lyric-accessible-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:pre-line;border:0}
@media(max-width:550px){#i-don-t-want-to-fall-in-love-again .song-control-row{gap:14px}#i-don-t-want-to-fall-in-love-again .song-control-row .song-services{gap:10px 14px}}

/* Compact title band. */
.page-intro{padding-top:10px;padding-bottom:10px}
@media(max-width:800px){.page-intro{padding-top:8px;padding-bottom:8px}}

/* Frame the original woodland portrait in the existing 3:4 space, excluding its letterbox bars. */
.photo-interlude.paired .woodland-guitar-crop{position:relative;aspect-ratio:3/4}
.photo-interlude.paired .woodland-guitar-crop img{position:absolute;max-width:none;width:200.514%;height:132.262%;left:-47.987%;top:-16.067%;object-fit:fill}

/* Keep both musicians in view beside the red-curtain portrait. */
.photo-interlude.paired.curtain-studio-pair figure{aspect-ratio:4/5}
.photo-interlude.curtain-studio-pair figure:first-child{transform:rotate(-2deg)}
.photo-interlude.curtain-studio-pair figure:last-child img{object-position:20% 50%}

/* Shorter title and a tighter vertical band. */
.page-intro{padding-top:6px;padding-bottom:6px;min-height:0}
.page-intro h1{font-size:3.2vw;line-height:1.05}
.page-intro .title-flower{width:4vw;min-width:20px}
@media(max-width:800px){.page-intro{padding-top:6px;padding-bottom:6px}.page-intro h1{font-size:3.5vw;line-height:1.05}}

/* A wide band photograph beside a closer stage portrait. */
.photo-interlude.paired.warm-monochrome-pair{grid-template-columns:1.6fr 1fr}
.photo-interlude.paired.warm-monochrome-pair figure{position:relative}
.photo-interlude.paired.warm-monochrome-pair figure:first-child{aspect-ratio:7/5}
.photo-interlude.paired.warm-monochrome-pair figure:last-child{aspect-ratio:3/4;margin-top:30px}
.photo-interlude.warm-monochrome-pair img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-interlude.warm-monochrome-pair figure:first-child img{inset:auto;left:-39.53647%;top:-22.90389%;max-width:none;width:139.53647%;height:130.36128%;object-fit:fill}
.photo-interlude.warm-monochrome-pair figure:last-child img{object-position:50% 30%}
@media(max-width:650px){.photo-interlude.paired.warm-monochrome-pair{grid-template-columns:1fr}.photo-interlude.paired.warm-monochrome-pair figure:last-child{width:78%;justify-self:center;margin-top:8px}}

/* Let the handwritten backdrop show through the logo header. */
header{background:transparent}

/* Nothing's Enough: green handwriting and listening controls. */
#nothing-s-enough h2{color:#24533b}
#nothing-s-enough .song-control-row{display:flex;align-items:center;flex-wrap:wrap;gap:18px 26px;margin-bottom:24px}
#nothing-s-enough .song-control-row .song-services{margin:0;gap:12px 22px}
#nothing-s-enough .handwritten-lyrics{margin-top:0}
@media(max-width:550px){#nothing-s-enough .song-control-row{gap:14px}#nothing-s-enough .song-control-row .song-services{gap:10px 14px}}

/* Lucky One: red handwriting and listening controls. */
#lucky-one h2{color:#a33232}
#lucky-one .song-control-row{display:flex;align-items:center;flex-wrap:wrap;gap:18px 26px;margin-bottom:24px}
#lucky-one .song-control-row .song-services{margin:0;gap:12px 22px}
#lucky-one .handwritten-lyrics{margin-top:0}
@media(max-width:550px){#lucky-one .song-control-row{gap:14px}#lucky-one .song-control-row .song-services{gap:10px 14px}}

/* Certain People: blue handwriting and listening controls. */
#certain-people h2{color:#214d87}
#certain-people .song-control-row{display:flex;align-items:center;flex-wrap:wrap;gap:18px 26px;margin-bottom:24px}
#certain-people .song-control-row .song-services{margin:0;gap:12px 22px}
#certain-people .handwritten-lyrics{margin-top:0}
@media(max-width:550px){#certain-people .song-control-row{gap:14px}#certain-people .song-control-row .song-services{gap:10px 14px}}

/* Any Way: maroon portrait lyric sheet and listening controls. */
#any-way h2{color:#6b223e}
#any-way .song-control-row{display:flex;align-items:center;flex-wrap:wrap;gap:18px 26px;margin-bottom:24px}
#any-way .song-control-row .song-services{margin:0;gap:12px 22px}
#any-way .handwritten-lyrics{margin-top:0}
@media(max-width:550px){#any-way .song-control-row{gap:14px}#any-way .song-control-row .song-services{gap:10px 14px}}

/* Match the rendered handwriting height to Lucky One. */
#any-way .handwritten-lyrics{width:75.000%;max-width:100%;margin-left:0;margin-right:0}

/* Frame every original sheet with its own left gutter on all four sides.
   The source artwork stays intact; only blank paper outside the ink is reframed. */
.handwritten-lyrics a.lyric-sheet-frame{padding:var(--sheet-pad);background-repeat:no-repeat;background-position:left top;overflow:hidden}
.lyric-sheet-ink{display:block;position:relative;aspect-ratio:var(--sheet-ratio);overflow:hidden}
.handwritten-lyrics .lyric-sheet-ink img{position:absolute;max-width:none;width:var(--sheet-width);height:var(--sheet-height);left:var(--sheet-left);top:var(--sheet-top)}

/* Too Good for You: dark orange handwritten lyrics. */
#too-good-for-you h2{color:#ac3d0b}
#too-good-for-you .song-control-row{display:flex;align-items:center;flex-wrap:wrap;gap:18px 26px;margin-bottom:24px}
#too-good-for-you .song-control-row .song-services{margin:0;gap:12px 22px}
#too-good-for-you .handwritten-lyrics{margin-top:0;width:75%;max-width:100%}

/* Excuses: dark blue handwriting and listening controls. */
#excuses h2{color:#173559}
#excuses .song-control-row{display:flex;align-items:center;flex-wrap:wrap;gap:18px 26px;margin-bottom:24px}
#excuses .song-control-row .song-services{margin:0;gap:12px 22px}
#excuses .handwritten-lyrics{margin-top:0;width:100.000%;max-width:100%;margin-left:0;margin-right:0}
@media(max-width:550px){#excuses .song-control-row{gap:14px}#excuses .song-control-row .song-services{gap:10px 14px}}

/* One More Time: corrected forest-green handwritten sheet and equal margins. */
#one-more-time h2{color:#203d25}
#one-more-time .song-control-row{display:flex;align-items:center;flex-wrap:wrap;gap:18px 26px;margin-bottom:24px}
#one-more-time .song-control-row .song-services{margin:0;gap:12px 22px}
#one-more-time .handwritten-lyrics{margin-top:0;width:75%;max-width:100%}

/* Make the sidebar song finder easier to spot. */
#song-index > .eyebrow{font-size:20px;line-height:1.3;letter-spacing:.12em;font-weight:600}
@media(max-width:800px){#song-index > .eyebrow{font-size:18px}}

/* Match sidebar names to each song title and handwritten ink. */
#song-index a[href="#all-that-matters"]{color:#460e4d}
#song-index a[href="#i-don-t-want-to-fall-in-love-again"]{color:#460e4d}
#song-index a[href="#nothing-s-enough"]{color:#24533b}
#song-index a[href="#lucky-one"]{color:#a33232}
#song-index a[href="#certain-people"]{color:#214d87}
#song-index a[href="#any-way"]{color:#6b223e}
#song-index a[href="#too-good-for-you"]{color:#ac3d0b}
#song-index a[href="#excuses"]{color:#173559}
#song-index a[href="#one-more-time"]{color:#203d25}
#song-index a:hover,#song-index a:focus-visible{text-decoration:underline;text-underline-offset:4px}

/* Comfortable phone navigation and full-width lyric sheets. */
@media(max-width:800px){
  .song-layout{padding-left:4vw;padding-right:4vw}
  #song-index{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;padding:12px 16px}
  #song-index a{display:flex;align-items:center;min-height:44px;font-size:15px;line-height:1.4;padding:10px 0}
  .songs,.song,.song-player,.song-control-row{min-width:0}
  .song h2{font-size:clamp(26px,7vw,36px);overflow-wrap:break-word;margin-bottom:18px}
  .song .song-control-row{gap:10px 16px;margin-bottom:18px}
  .song-control-row .song-play{margin:8px 0}
  .song .song-control-row .song-services{gap:4px 16px}
  .song-services .external{font-size:15px;min-height:44px;padding:10px 0}
  #any-way .handwritten-lyrics,#too-good-for-you .handwritten-lyrics,#one-more-time .handwritten-lyrics{width:100%}
}
@media(max-width:650px){
  .listening-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px 12px;padding:12px 16px max(12px,env(safe-area-inset-bottom))}
  .listening-bar .now-playing{grid-column:1 / 3;grid-row:1}
  .listening-bar #player-toggle{grid-column:3;grid-row:1}
  .listening-bar #elapsed{grid-column:1;grid-row:2}
  .listening-bar input{grid-column:2;grid-row:2;width:100%;min-width:0;height:28px;margin:0}
  .listening-bar #duration{grid-column:3;grid-row:2;text-align:right}
  .listening-bar #show-lyrics{grid-column:1 / -1;grid-row:3;min-height:36px;text-align:center}
  .has-player{padding-bottom:190px}
}