/* One continuous landscape beneath the artist, stories, and music. */
body{background:#071726;isolation:isolate;--landscape-x:50%}
body::before{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;background:url('/assets/koolau-waterfalls-stairway.png') var(--landscape-x) center/cover no-repeat}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#03142512,transparent 18%,#03142514 40%,#03142514 60%,transparent 82%,#03142512)}
.masthead{background:#041220e8;border-bottom-color:#d4b37040;backdrop-filter:blur(12px)}
main{position:relative;isolation:isolate;width:84%;max-width:1440px;margin:0 auto}
main::before{content:"";position:absolute;inset:360px -32px -35px;z-index:-1;pointer-events:none;background:linear-gradient(90deg,transparent,#041426e8 5%,#041426ed 50%,#041426e8 95%,transparent);mask-image:linear-gradient(transparent,#000 120px)}
.hero{height:430px;min-height:430px;padding:25px 0;background:none;border:0;overflow:hidden}
.hero::before{display:none}
.hero-shade{background:none}
.hero-artist{position:absolute;left:35%;bottom:0;width:45%;height:98%;object-fit:contain;object-position:center bottom;z-index:-1;filter:drop-shadow(0 10px 12px #0005)}
.hero-copy{width:39%;position:relative;z-index:1;text-shadow:0 2px 12px #000}
.hero h1{font-size:clamp(3.5rem,5.55vw,6.2rem);line-height:.86;text-shadow:none}
.hero .eyebrow{white-space:normal;margin:14px 0 8px;font-size:.76rem;line-height:1.6;letter-spacing:.15em}
.hero-quote{font-size:clamp(1.25rem,1.55vw,1.65rem);line-height:1.2}
.hero .actions{flex-wrap:wrap;margin-top:20px;gap:12px}
.hero .button{font-size:1rem;min-height:44px;padding:8px 16px}
.hero-manifesto{display:block;position:absolute;left:auto;right:0;width:18%;font-size:1rem;letter-spacing:.18em}
.hero-manifesto .small{font-size:.88rem}
.featured-stories,.featured-stories .price-feature,.featured-stories .source-pair,.featured-stories .evidence-feature,.music-section,.official-music-videos,.album-detail,.price-story,.about,.archive,.connect{background:none}
.featured-stories{grid-template-columns:34% 27% 39%;border-block:1px solid #c4aa6d40}
.featured-stories .price-feature{border-right:0}
.featured-stories .source-pair{border-inline:0}
.section{padding:65px 4%;border-bottom-color:#c4aa6d33}
.music-section{padding:38px 3% 45px}
.album-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 22px}
.album h3,.album.album-series h3{font-size:1rem;line-height:1.22}
.album p{font-size:.875rem}
.price-story{border-color:#c4aa6d33;padding:65px 4%;gap:50px;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
.price-story-copy{font-size:1.05rem;line-height:1.9}
.price-story-copy a,.story-prose a{color:#f1d295;text-decoration:underline;text-underline-offset:4px}
.price-story-companion{position:sticky;top:30px}
.story-byline{color:#c9bfa9;font-family:Georgia,serif;font-style:italic;margin:0 0 26px}
.price-story .lyrics{background:#05100da8}
.about{gap:48px}
footer{background:#041220d9;border-top:1px solid #c4aa6d33}
.story-header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 5%;background:#041220d9;border-bottom:1px solid #c4aa6d40}
.story-page{max-width:1060px;padding:55px 5% 70px}
.story-page::before{inset:0 -24px -20px;mask-image:none}
.story-intro{display:grid;grid-template-columns:1.4fr 1fr;gap:45px;align-items:center;margin-bottom:45px}
.story-intro h1{font-size:clamp(2.8rem,4vw,4.1rem);line-height:1.04;margin:15px 0 25px;color:var(--soft)}
.story-intro h1 em{color:var(--gold)}
.story-intro img{border:1px solid #c4aa6d55}
.story-prose{max-width:730px;margin:auto;font-size:1.1rem;line-height:1.9}
.story-prose p{margin-bottom:26px}
.story-listen,.story-sources{border-top:1px solid #c4aa6d33;margin-top:38px;padding-top:30px}
.story-listen .actions{margin-top:22px}
.story-sources h2{margin-bottom:22px}
.story-source-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px}
.story-source-grid figure{margin:0}
.story-source-grid img{width:100%;height:420px;object-fit:contain;background:#030a0780}
.story-source-grid figcaption{font-size:.875rem;color:#c9bfa9;line-height:1.5;margin-top:8px}
.story-page>.button{margin-top:30px}
@media(max-width:1200px){main{width:88%}.hero{height:420px;min-height:420px}.hero h1{font-size:5.7vw}.hero-manifesto{font-size:.85rem;width:17%}.hero-manifesto .small{font-size:.78rem}.featured-stories{grid-template-columns:1fr 1fr}.featured-stories .evidence-feature{grid-column:1/-1;padding:25px 4%;border-top:1px solid #c4aa6d33}.evidence-media{max-width:530px}.source-thumbnails{grid-template-columns:1fr 1fr}.price-story{gap:28px}}
@media(max-width:900px){main{width:90%}.hero-copy{align-self:center;width:50%}.hero h1{font-size:7vw}.hero-artist{left:43%;width:60%;height:90%}.hero-manifesto{display:none}.hero .eyebrow{font-size:.7rem}.hero .actions{flex-direction:column;align-items:center}.hero .button{width:175px}.album-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 16px}.about{grid-template-columns:1fr;gap:28px}.about-portrait{max-width:470px;height:500px;margin:auto;width:100%}.price-story{grid-template-columns:1fr}.price-story-companion{position:static;max-width:550px;margin:auto}.price-story-art{max-width:330px;margin:auto}.story-intro{gap:25px}.story-prose{font-size:1.05rem}}
@media(max-width:600px){body::before{background-size:cover;background-position:38% center}body::after{background:#03142612}main{width:94%}main::before{inset:500px -10px -25px;background:linear-gradient(90deg,transparent,#041426ed 5%,#041426f2 95%,transparent)}.masthead{padding-inline:5%}.hero{height:625px;min-height:625px;padding:32px 3% 0;align-items:start}.hero-copy{width:100%;align-self:start}.hero h1{font-size:clamp(3.15rem,14.5vw,4.6rem)}.hero .eyebrow{font-size:.65rem;line-height:1.5;letter-spacing:.09em;margin:15px 0 8px}.hero-quote{font-size:1.35rem}.hero .actions{flex-direction:row;flex-wrap:nowrap;justify-content:center;gap:10px;margin-top:16px}.hero .button{width:auto;font-size:.91rem;padding:8px 13px}.hero-artist{height:340px;width:100%;left:0;bottom:-3px}.featured-stories{display:block}.featured-stories .source-pair{padding:15px 5% 25px}.featured-stories .evidence-feature{display:block;padding:24px 5%}.evidence-media{margin-top:25px}.section,.price-story{padding:42px 6%}.music-section{padding:30px 6%}.album-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}.album p{font-size:.875rem}.price-story-copy{font-size:1rem;line-height:1.85}.hero::after{content:"";position:absolute;bottom:0;left:0;right:0;height:32px;background:linear-gradient(transparent,#04142699);pointer-events:none}.story-header{align-items:flex-start;flex-direction:column;padding:22px 6%}.story-page{padding:35px 6% 55px}.story-page::before{inset:0 -8px -15px}.story-intro{grid-template-columns:1fr;gap:24px}.story-intro img{max-width:250px}.story-intro h1{font-size:2.9rem}.story-prose{font-size:1rem;line-height:1.85}.story-source-grid{grid-template-columns:1fr}.story-source-grid img{height:auto;max-height:620px}}

/* Approved signature: retain both custom flourishes at every screen size. */
.hero .signature-heading{background:none;color:var(--gold);filter:none;font-size:inherit;line-height:1;letter-spacing:normal;text-transform:none;margin:0}
.hero .artist-signature{display:block;width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 2px 5px #0008)}
@media(min-width:901px){.hero-copy{width:46%}}
@media(max-width:600px){.hero .signature-heading{margin:0 -2%}.hero .artist-signature{width:100%}}

/* The canvas follows the exact cover crop of the still landscape. */
/* Keep the animated bay and right-cliff mist in portrait crops. */
@media(max-width:900px){body{--landscape-x:75%}}
@media(max-width:600px){body{--landscape-x:88%}body::before{background-position:var(--landscape-x) center}}
.waterfall-motion{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
.waterfall-toggle{flex:none;border:1px solid #d4b37070;border-radius:3px;background:#041426c9;color:#f5dfab;min-height:44px;padding:8px 12px;font:500 .8rem/1.2 Inter,sans-serif;cursor:pointer;white-space:nowrap}
.waterfall-toggle[hidden]{display:none}
.waterfall-toggle:hover{background:#17364c}
.waterfall-toggle:focus-visible{outline:2px solid #ffe5a2;outline-offset:4px}
.hero-shade{background:linear-gradient(90deg,#03142655,transparent 53%,#03142630);pointer-events:none}
.hero-manifesto{text-shadow:0 2px 5px #00101c,0 0 18px #00101c}
@media(max-width:1100px){.masthead .waterfall-toggle{margin-right:auto}.masthead .menu{margin-left:0}}
@media(max-width:600px){.waterfall-toggle{font-size:.73rem;padding:8px 10px}.hero-shade{background:linear-gradient(#03142655,transparent 65%)}}

/* Story access stays beside its recording; the homepage begins with the catalog. */
.album-story-link{display:block;width:fit-content;max-width:100%;margin:8px auto 0;padding:8px 2px;color:var(--gold);font-size:.82rem;line-height:1.4;text-decoration:underline;text-underline-offset:4px}
/* Share card rows so titles and optional stories never stagger playback buttons. */
.album-grid>.album{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;justify-items:center;align-items:start}
.album-grid>.album>.album-cover{grid-row:1}
.album-grid>.album>h3{grid-row:2}
.album-grid>.album>.release-date{grid-row:3}
.album-grid>.album>.button{grid-row:4;margin-top:0}
.album-grid>.album>.album-story-link{grid-row:5}
#modal-story-link{margin-top:16px;min-height:44px}
#modal-story-link[hidden]{display:none}
.price-story-page .story-page{--gold:#e7a16d;--soft:#f3d4ae}
.price-story-page .story-intro h1{font-family:Anton,Impact,sans-serif;text-transform:uppercase;font-size:clamp(3rem,5.7vw,5.4rem);color:#f3d4ae;text-shadow:2px 3px 0 #512e19;letter-spacing:.015em}
.price-story-page .story-intro>img{width:100%;height:auto}
.story-intro .price-story-deck{margin:18px 0;font-size:1.4rem}
.story-intro .actions{gap:10px;flex-wrap:wrap;margin-top:16px}
.story-intro .button{font-size:.9rem;padding:10px 13px;min-height:44px}
.story-recording>p{font-size:.8rem;color:var(--soft);margin-bottom:8px}
.story-recording audio{display:block;width:100%;max-width:440px}
.story-media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:26px 0}
.story-media-grid figure{margin:0;min-width:0}
.story-media-grid img,.story-media-grid video{display:block;width:100%;height:320px;object-fit:contain;background:#03101a;border:1px solid var(--line)}
.story-media-grid figcaption{font:400 .82rem/1.5 Inter,sans-serif;color:var(--muted);margin-top:10px;text-align:left}
.story-lyrics{margin-top:40px;padding-top:25px;border-top:1px solid var(--line)}
.story-lyrics .lyrics{background:#051321c9}
@media(max-width:800px){.story-media-grid{grid-template-columns:1fr}.story-media-grid figure{width:100%;max-width:460px;margin:auto}.story-media-grid img,.story-media-grid video{height:380px}.story-intro{grid-template-columns:1fr}.story-intro>img{width:100%;max-width:300px}.story-intro .story-recording{max-width:440px}}
@media(max-width:600px){.album-story-link{font-size:.78rem}.story-media-grid img,.story-media-grid video{height:330px}}

/* The official YouTube recording remains playable inside the release dialog. */
.full-song-embed{margin:16px 0;width:100%;aspect-ratio:16/9;min-height:200px;background:#020708;border:1px solid var(--line)}
.full-song-embed iframe{display:block;width:100%;height:100%;min-height:200px;border:0}
.modal-platforms[hidden]{display:none}
@media(max-width:600px){.full-song-embed{min-height:200px}.full-song-embed iframe{min-height:200px}}

/* Keep the collection subtitle on one fitted line beneath the album name. */
.album h3:has(.release-title-subtitle),.modal-body h2:has(.release-title-subtitle){container-type:inline-size;width:100%}
.release-title-subtitle{font-size:min(1rem,5.2cqi);line-height:1.4;white-space:nowrap;font-weight:500}
.modal-body .release-title-subtitle{font-size:min(1.25rem,5.2cqi)}

/* Fit the joined release title within the album player. */
#modal-title.modal-title-joined{container-type:inline-size;width:100%}
#modal-title.modal-title-joined .release-title-line{font-size:min(1em,8cqi)}


/* Scores lift from the rack, sweep behind the composer, and recede into the ocean. */
.hero:has(.hero-composer){height:480px;min-height:480px;isolation:isolate}
.hero .hero-composer{left:42%;bottom:0;width:43%;height:96%;z-index:1;object-position:center bottom;filter:drop-shadow(0 12px 14px #00101c66);animation:none;will-change:auto}
.hero:has(.hero-composer) .hero-copy,.hero:has(.hero-composer) .hero-manifesto{z-index:3}
.hero-manuscripts{position:absolute;left:42%;bottom:0;width:43%;height:96%;pointer-events:none;overflow:visible}
.manuscript{position:absolute;left:73%;top:25%;width:clamp(95px,11vw,160px);height:auto;opacity:0;transform-origin:50% 70%;filter:drop-shadow(2px 4px 4px #00101c44);animation:manuscript-cascade var(--duration,12s) linear infinite;animation-delay:var(--delay,0s);animation-play-state:paused;will-change:transform,opacity;--spread:0%;--turn:-8deg}
.manuscript-1{--delay:0s;--duration:12s;--spread:-7%;--turn:-12deg}
.manuscript-2{--delay:-1.7s;--duration:13s;--spread:9%;--turn:8deg}
.manuscript-3{--delay:-3.4s;--duration:12.5s;--spread:-14%;--turn:-18deg}
.manuscript-4{--delay:-5.1s;--duration:14s;--spread:18%;--turn:14deg}
.manuscript-5{--delay:-6.8s;--duration:11.5s;--spread:3%;--turn:-5deg}
.manuscript-6{--delay:-8.5s;--duration:13.5s;--spread:-22%;--turn:22deg}
.manuscript-7{--delay:-10.2s;--duration:12.8s;--spread:25%;--turn:-15deg}
.manuscript-8{--delay:-11.9s;--duration:14.5s;--spread:-3%;--turn:6deg}
@keyframes manuscript-cascade{
  0%{left:73%;top:25%;opacity:0;z-index:2;transform:translate(-50%,-50%) rotate(var(--turn)) rotateY(0deg) scale(.5)}
  5%{opacity:.95}
  15%{left:64%;top:3%;opacity:.95;z-index:2;transform:translate(-50%,-50%) rotate(calc(var(--turn) - 20deg)) rotateY(18deg) scale(.82)}
  16%{z-index:0}
  32%{left:38%;top:-3%;opacity:.9;z-index:0;transform:translate(-50%,-50%) rotate(calc(var(--turn) + 24deg)) rotateY(-28deg) scale(.72)}
  49%{left:8%;top:20%;opacity:.86;transform:translate(-50%,-50%) rotate(calc(var(--turn) - 32deg)) rotateY(35deg) scale(.58)}
  65%{left:calc(-18% + var(--spread));top:46%;opacity:.8;transform:translate(-50%,-50%) rotate(calc(var(--turn) + 55deg)) rotateY(-35deg) scale(.4)}
  81%{left:calc(-29% + var(--spread));top:69%;opacity:.6;transform:translate(-50%,-50%) rotate(calc(var(--turn) + 115deg)) rotateY(38deg) scale(.23)}
  94%{left:calc(-35% + var(--spread));top:84%;opacity:.22;transform:translate(-50%,-50%) rotate(calc(var(--turn) + 160deg)) rotateY(-25deg) scale(.12)}
  100%{left:calc(-38% + var(--spread));top:90%;opacity:0;z-index:0;transform:translate(-50%,-50%) rotate(calc(var(--turn) + 190deg)) scale(.06)}
}
body[data-site-motion="playing"] .manuscript{animation-play-state:running}
body[data-site-motion="paused"] .manuscript{animation-play-state:paused}
@media(max-width:900px){
 .hero:has(.hero-composer){height:460px;min-height:460px}
 .hero .hero-composer{left:48%;width:53%;height:94%}
 .hero:has(.hero-composer) .hero-copy{width:47%}
}
@media(max-width:600px){
 .hero:has(.hero-composer){height:690px;min-height:690px;padding-top:26px}
 .hero:has(.hero-composer) .hero-copy{width:100%}
 .hero .hero-composer{left:0;bottom:0;width:100%;height:390px;object-position:center bottom}
 .manuscript{width:110px}
}
@media(prefers-reduced-motion:reduce){
 body:not([data-site-motion="playing"]) .manuscript{animation:none;opacity:0;will-change:auto}
}

.hero .hero-piano-video{pointer-events:none}
/* Confine residual matte noise to the original clean cutout silhouette. */
.hero .hero-piano-video{
  -webkit-mask-image:url('/assets/michael-upright-piano-left-handed-20261015.png');
  mask-image:url('/assets/michael-upright-piano-left-handed-20261015.png');
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center bottom;mask-position:center bottom;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}