/* Focused proposal. Production stays unchanged until review. */
:root{--reading-size:17px;--caption-size:13px}
h1,h2,h3{letter-spacing:-.045em}body{line-height:1.75}.eyebrow{font-size:var(--caption-size);letter-spacing:.1em}.story-copy p,.instrument-copy>p:last-child,.instrument-end,.section-heading>p:last-child,.community-flow p,.ways article p{font-size:var(--reading-size)}
.hero{background:var(--page);height:850px;min-height:740px;isolation:isolate;padding-top:95px}.navigation{background:var(--page)}.hero-label{max-width:240px;line-height:1.7}.scene-index{position:absolute;right:6%;top:30px;font-size:13px;letter-spacing:.12em}.hero h1{font-size:clamp(80px,11vw,164px);width:90%;margin-top:55px;line-height:.94}.hero h1>span:nth-child(2){margin-left:5%}.hero h1 em{color:var(--accent);margin-left:13%}.hero-media{width:49%;height:76%;right:-5%;top:12%;border-radius:50% 0 0 50%;overflow:hidden;transform:translateY(var(--hero-drift,0px));box-shadow:none;z-index:-1}.hero-media img{object-position:55% 45%;filter:saturate(.7)}.hero-media figcaption{left:25%;font-size:13px;bottom:28px}.hero h1{text-shadow:0 2px 20px #f6f1e825}.hero-orbit{left:35%;top:3%;height:720px;width:720px;border-color:#285a6040;z-index:-2}.hero-bottom{border-top:1px solid var(--line);padding-top:20px}.scroll-hint{background:transparent;font-size:14px}.hero-bottom p{font-size:14px}.hero h1 em{width:max-content;background:var(--page);padding-right:15px}
.instrument{height:165vh}.instrument-stage{min-height:100svh;grid-template-columns:1fr 1fr;align-content:center;gap:36px;padding:55px 7%;background:radial-gradient(ellipse at 80% 40%,#24484b,transparent 65%)}.instrument h2{font-size:clamp(45px,5.8vw,80px)}.pan-wrap{min-height:0;display:flex;flex-direction:column;gap:45px;padding:35px 0 0}.pan{width:min(33vw,440px);flex-shrink:0}.pan-caption{position:static;display:block;text-align:center;font-size:13px;letter-spacing:.08em;line-height:1.6;padding:18px 8px 0;border-top:1px solid var(--night-line);width:100%;color:var(--night-text)}.instrument-end{margin:15px auto 0;max-width:64ch;padding-top:24px;border-top:1px solid var(--night-line)}
.social{position:relative;overflow:hidden;background:var(--page);color:var(--ink);padding:95px 7% 50px;grid-template-columns:1.1fr 1fr;gap:50px}.social:before{content:'';position:absolute;width:700px;height:700px;right:-180px;top:0;border:1px solid var(--line);border-radius:50%;pointer-events:none}.social h2{font-size:clamp(45px,6vw,84px);line-height:1.04;position:relative}.social h2 em{color:var(--accent)}.social-copy{position:relative;z-index:1}.social-copy>p:not(.eyebrow){color:var(--muted);font-size:17px;max-width:36ch}.social .social-cta,.social summary{color:var(--accent)}.social-portraits{display:grid;grid-template-columns:1fr 1fr;gap:18px;position:relative;align-items:start;transform:translateY(var(--people-drift,0px))}.social-portraits figure:nth-child(2){margin-top:100px}.social-portraits img{width:100%;height:330px;object-fit:cover;border-radius:120px 120px 0 0;filter:saturate(.65)}.social-portraits figcaption{font-size:13px;line-height:1.5;margin-top:15px}.social details{position:relative;border-color:var(--line)}.social details .embed-note{color:var(--muted)}.social details summary{font-size:15px}.social+footer{background:#e8dfcf}.social-portraits figure{min-width:0}
@media(max-width:800px){.hero h1{font-size:12vw}.hero-media{right:-12%;width:58%}.social{gap:28px}.social-portraits{gap:12px}.social-portraits img{height:280px}.instrument-stage{gap:24px}.pan-wrap{gap:35px}.pan-caption{font-size:12px}}
@media(max-width:600px){.hero{height:820px;min-height:0;padding-top:60px}.scene-index{top:15px;font-size:12px}.hero-label{font-size:12px;max-width:190px}.hero h1{font-size:15vw;margin-top:32px;width:100%}.hero h1>span:nth-child(2){margin-left:0}.hero h1 em{margin-left:0}.hero-media{width:72%;height:390px;top:300px;right:-4%;border-radius:180px 0 0 180px;transform:none}.hero-media figcaption{font-size:12px;left:24%;bottom:24px}.hero-bottom{bottom:24px;left:7%;right:7%;gap:15px}.hero-bottom p{font-size:12px}.hero-orbit{width:520px;height:520px;top:240px;left:3%}.scroll-hint{font-size:12px}.instrument{height:auto}.instrument-stage{display:flex;flex-direction:column;padding:60px 7%;position:relative;min-height:0}.instrument-copy{align-self:stretch}.instrument h2{font-size:50px}.pan-wrap{width:100%;padding:20px 0 0;gap:40px}.pan{width:70vw;max-width:340px}.pan-caption{font-size:12px;max-width:100%;padding-top:22px}.instrument-end{font-size:17px;margin-top:10px}.social{grid-template-columns:1fr;padding:65px 7% 35px}.social h2{font-size:48px}.social-portraits{max-width:460px;width:100%;margin:10px auto;transform:none}.social-portraits img{height:300px}.social-portraits figure:nth-child(2){margin-top:65px}.social-portraits figcaption{font-size:13px}.social-copy>p:not(.eyebrow){font-size:17px}.social:before{top:270px}.social details{margin-top:20px}}
@media(prefers-reduced-motion:reduce){.social-portraits{transform:none!important}}.motion-off .social-portraits{transform:none!important}
@media(max-height:750px) and (min-width:601px){.instrument{height:auto}.instrument-stage{position:relative}.pan{width:min(30vw,350px)}}
/* Reserve space for the complete transformed bounding box, not just the circle. */
.pan-wrap{gap:105px}.hero-media img{object-position:55% 20%}
@media(max-width:600px){.pan-wrap{gap:100px}}

/* Revised direction: blue opening and media-led storytelling. */
.navigation{background:var(--brand);padding:24px 6%}.brand{font-size:13px;letter-spacing:.12em}.brand img{width:50px;height:50px}.hero{background:var(--brand);height:900px;padding-top:35px}.hero-label{font-family:var(--heading-font);font-size:clamp(22px,2.3vw,32px);line-height:1.25;letter-spacing:-.02em;max-width:420px}.hero h1{margin-top:40px;font-size:clamp(78px,10vw,150px);width:72%}.hero h1 em{background:transparent;color:var(--page)}.hero-media{width:32%;height:68%;right:6%;top:10%;border-radius:0;transform:rotate(5deg) translateY(var(--hero-drift,0px));z-index:-1;box-shadow:16px 20px 0 #20363818}.hero-media img{object-position:50% 35%}.hero-media figcaption{left:24px;bottom:26px;font-family:var(--heading-font);font-size:24px;letter-spacing:-.02em;line-height:1.2}.hero-media figcaption span{font-size:18px}.hero-orbit{left:-12%;top:0;border-color:#20363840}.hero-bottom{border-color:#20363855;bottom:30px;align-items:center}.hero-bottom p{font-family:var(--heading-font);font-size:clamp(20px,2.2vw,30px);line-height:1.3;letter-spacing:-.02em}.round-link{width:96px;height:96px;font-size:17px}.scroll-hint{font-size:16px;max-width:none}.eyebrow{font-size:15px;letter-spacing:.08em}.story-title{position:static}.story-portrait{margin-top:42px;max-width:370px}.story-portrait img{aspect-ratio:4/5;width:100%;height:auto;object-fit:cover}.story-portrait figcaption,.film-strip figcaption,.social-portraits figcaption{font-size:17px;line-height:1.4;margin-top:16px}.film-strip{background:#e8dfcf;padding:70px 7% 100px;display:grid;grid-template-columns:.9fr 1fr .8fr;gap:40px;align-items:center}.film-intro h2{font-size:clamp(55px,6vw,90px);margin-top:28px}.film-intro em{color:var(--accent)}.film-strip figure img{width:100%;height:480px;object-fit:cover}.film-strip figure:last-child{margin-top:140px}.film-strip figure:last-child img{height:370px}.pan-caption{font-size:15px;letter-spacing:.04em}.social-portraits img{height:390px}.snapshots figcaption{font-size:15px}.scene-index{display:none}
@media(max-width:800px){.hero h1{font-size:11vw}.hero-media{width:37%;right:3%;top:17%;height:60%}.film-strip{gap:24px;grid-template-columns:1fr 1fr}.film-intro{grid-column:1/-1}.film-intro h2 br{display:none}.film-intro h2{font-size:65px}.film-strip figure:last-child{margin-top:90px}.hero-bottom{gap:24px}}
@media(max-width:600px){.navigation{padding:20px 7%}.brand{font-size:12px}.hero{height:960px;padding:20px 7%}.hero-label{font-size:23px;max-width:260px}.hero h1{font-size:16vw;width:100%;margin-top:28px}.hero-media{width:60%;height:380px;right:9%;top:340px;border-radius:0;transform:rotate(5deg)}.hero-media figcaption{font-size:20px;left:16px;bottom:18px}.hero-media figcaption span{font-size:16px}.hero-bottom{flex-wrap:wrap;align-items:center;bottom:28px;gap:20px}.hero-bottom p{font-size:22px;flex:1}.round-link{width:80px;height:80px;font-size:15px}.scroll-hint{font-size:15px;margin-left:0;max-width:none;flex-basis:100%}.hero-orbit{top:40px;left:-45%}.eyebrow{font-size:14px}.story-portrait{max-width:100%;margin-top:30px}.story-portrait img{max-height:420px;object-position:center}.film-strip{padding:55px 7% 70px;gap:18px;align-items:start}.film-intro h2{font-size:54px;line-height:1.05}.film-strip figure img{height:310px}.film-strip figure:last-child img{height:270px}.film-strip figure:last-child{margin-top:65px}.film-strip figcaption,.story-portrait figcaption,.social-portraits figcaption{font-size:16px}.social-portraits img{height:300px}.pan-caption{font-size:14px}}
@media(prefers-reduced-motion:reduce){.hero-media{transform:none!important}}
.hero .hero-label{font-size:clamp(23px,2.3vw,32px);letter-spacing:-.02em;line-height:1.25}
.film-strip>*{min-width:0}.film-strip{overflow:hidden}
@media(max-width:800px){.film-strip{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* Community balance and caption-free photography. */
.community h2{margin-bottom:64px;max-width:100%}.community-flow{grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr);gap:clamp(35px,6vw,85px);align-items:start}.community-flow p{max-width:none;font-size:18px;line-height:1.75;margin-bottom:24px}.snapshots{gap:22px;align-items:flex-start}.snapshots figure{padding:8px}.snapshots figure:nth-child(2){margin-top:45px}.social-portraits figure{margin-bottom:0}.film-strip figure{margin-bottom:0}
@media(max-width:800px){.community-flow{grid-template-columns:1fr;gap:45px}.snapshots{justify-content:flex-start;flex-wrap:nowrap}.snapshots figure{width:180px}.snapshots figure:nth-child(2){margin-top:25px}.community-flow p{max-width:65ch}.community h2{margin-bottom:40px}}
@media(max-width:520px){.community-flow{gap:40px}.community-flow p{font-size:17px}.snapshots figure{width:44%}.community h2{margin-bottom:32px}}

/* A reading passage: the sculpture stays while the facts move past it. */
.instrument{height:auto;display:block;padding:70px 7%;align-items:start;background:radial-gradient(ellipse at 15% 40%,#24484b,var(--night) 70%)}.instrument-visual{position:sticky;top:40px}.instrument h2{font-size:clamp(36px,4vw,62px);line-height:1.08;margin:22px 0 0}.instrument .pan-wrap{padding-top:55px;gap:85px}.instrument .pan{width:min(27vw,350px)}.instrument .pan-caption{font-size:18px;letter-spacing:0;border:0;padding:0;color:var(--night-text)}.reading-track{height:2px;background:#557369;margin-top:24px}.reading-track span{display:block;height:100%;background:var(--brand);transform-origin:left;transform:scaleX(var(--reading-progress,0))}.handpan-fact{min-height:65vh;display:flex;flex-direction:column;justify-content:center;padding:65px 0;border-bottom:1px solid var(--night-line)}.handpan-fact:last-child{border:0}.fact-label{font-size:13px;letter-spacing:.13em;color:var(--brand);margin-bottom:24px}.handpan-fact h3{font-size:clamp(30px,3vw,44px);letter-spacing:-.03em;line-height:1.13;margin-bottom:28px}.handpan-fact>p:not(.fact-label){font-size:18px;line-height:1.8;color:var(--night-text);margin-bottom:20px;max-width:42ch}.handpan-listen{font-size:18px;color:var(--brand);padding:12px 0}.handpan-sources{margin-top:26px;font-size:14px;color:var(--night-text)}.handpan-sources summary{cursor:pointer;padding:10px 0}.handpan-sources a{display:block;margin:14px 0;color:var(--brand)}.music .section-heading>p:last-child{font-size:clamp(22px,2.4vw,30px);line-height:1.45;max-width:30ch;flex:1.1;margin-bottom:0;color:var(--ink);letter-spacing:-.015em}.ways article{grid-template-columns:1fr 1fr}.ways article>div{grid-column:auto}
@media(max-width:800px){.instrument{gap:6%;padding:60px 6%}.instrument h2{font-size:36px}.instrument .pan{width:30vw}.instrument .pan-wrap{gap:65px}.handpan-fact>p:not(.fact-label){font-size:17px}.handpan-fact h3{font-size:32px}.music .section-heading{flex-wrap:wrap}.music .section-heading>p:last-child{flex-basis:100%;max-width:40ch}}
@media(max-width:600px),(max-height:650px){.instrument{display:block;padding:55px 7%}.instrument-visual{position:relative;top:auto}.instrument h2{font-size:42px}.instrument .pan{width:65vw;max-width:300px}.instrument .pan-wrap{padding-top:55px;gap:75px}.instrument .pan-caption{font-size:18px}.reading-track{display:none}.handpan-fact{min-height:0;padding:45px 0}.handpan-fact h3{font-size:34px}.handpan-fact>p:not(.fact-label){font-size:18px;max-width:none}.music .section-heading>p:last-child{font-size:24px;line-height:1.45}.ways article{grid-template-columns:1fr}.ways article>div{grid-column:1}}
@media(prefers-reduced-motion:reduce){.instrument-visual{position:relative;top:auto}.handpan-fact{min-height:0}.reading-track{display:none}}

/* Personal introduction: generous space and a shared reading alignment. */
.story{padding:120px 8% 135px;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:10%;align-items:start}.story h2{font-size:clamp(44px,5.2vw,74px);line-height:1.06;margin:30px 0 45px;letter-spacing:-.045em}.story-portrait{margin:0;max-width:390px}.story-portrait img{aspect-ratio:1/1.1;max-height:none}.story-copy{padding-top:65px}.story-copy p{font-size:19px;line-height:1.85;max-width:48ch;margin-bottom:32px;color:var(--ink)}.story-copy .lead{font-size:clamp(24px,2.35vw,32px);line-height:1.5;letter-spacing:-.02em;margin-bottom:40px}.story-copy p:last-child{margin-bottom:0}.hero-bottom{justify-content:flex-start}
@media(max-width:800px){.story{padding:85px 7%;gap:7%}.story h2{font-size:44px}.story-copy{padding-top:58px}.story-copy p{font-size:18px;line-height:1.8}.story-copy .lead{font-size:24px}}
@media(max-width:600px){.story{display:flex;flex-direction:column;padding:70px 7% 85px;gap:40px}.story-title{width:100%}.story h2{font-size:46px;margin:25px 0 35px}.story-portrait{max-width:100%}.story-portrait img{aspect-ratio:1.1;object-position:50% 35%}.story-copy{padding-top:0;margin-top:0}.story-copy p{font-size:18px;line-height:1.85;margin-bottom:28px}.story-copy .lead{font-size:25px;line-height:1.5;margin-bottom:32px}}

/* Four listening moments, one readable personal introduction. */
.story-copy p{font-size:clamp(21px,2.15vw,28px);line-height:1.65;letter-spacing:-.015em;max-width:42ch;margin:0}.records{row-gap:65px;align-items:start}.record:nth-child(even){margin-top:110px}.record:nth-child(3){margin-top:-30px}.record:nth-child(3)>a{--record-angle:-3deg}.record:nth-child(4)>a{--record-angle:4deg}.record:nth-child(4) img{object-position:50% 43%}.record figcaption{display:block}.record figcaption a{margin-top:12px}.snapshots{display:block}.snapshots figure{width:100%;max-width:370px;padding:0;background:none;box-shadow:none;transform:rotate(-4deg)}.snapshots img{width:100%;height:auto}.social-portraits figure:first-child img{object-position:45% center}
@media(max-width:600px){.story-copy p{font-size:22px;line-height:1.7}.record:nth-child(even){margin-top:20px;margin-left:8%}.record:nth-child(3){margin-top:20px}.records{row-gap:35px}.snapshots figure{width:100%;max-width:340px}}

/* Optional visual guide, integrated into the instrument passage. */
.inside-guide{grid-column:1/-1;width:100%;border-top:1px solid var(--night-line);border-bottom:1px solid var(--night-line);margin-top:35px;color:var(--night-text)}.inside-guide>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:25px;padding:28px 0;font:clamp(26px,3vw,40px)/1.2 var(--heading-font);letter-spacing:-.03em}.inside-guide>summary::-webkit-details-marker{display:none}.inside-guide summary small{display:block;font:13px/1.5 var(--body-font);letter-spacing:.1em;color:var(--brand);margin-bottom:12px}.inside-guide summary .icon{width:28px;height:28px}.inside-guide[open]>summary .icon{transform:rotate(45deg)}.guide-content{padding:30px 0 50px;animation:guide-enter .35s ease-out}.guide-intro{display:grid;grid-template-columns:1fr 1fr;gap:8%;margin-bottom:40px}.guide-intro h3{font-size:clamp(35px,4vw,54px);line-height:1.1;color:var(--brand)}.guide-content p{font-size:18px;line-height:1.75;margin-bottom:18px;max-width:55ch}.guide-row{display:grid;grid-template-columns:1.1fr 1fr;gap:8%;align-items:center;padding:35px 0}.guide-row img{width:100%;height:auto;filter:drop-shadow(0 12px 14px #0003)}.guide-content h4{font:30px/1.2 var(--heading-font);letter-spacing:-.03em;margin:0 0 20px;color:var(--page)}.guide-content strong{font-weight:400;color:var(--brand)}.guide-content .illustration-note{font-size:13px;color:#bbccc7;max-width:80ch;margin:20px 0 40px}.guide-bottom{display:grid;grid-template-columns:1fr 1fr;gap:8%;padding-top:40px;border-top:1px solid var(--night-line)}@keyframes guide-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@media(max-width:650px){.guide-intro,.guide-row,.guide-bottom{grid-template-columns:1fr;gap:25px}.guide-row{padding:25px 0}.guide-content p{font-size:17px}.guide-content h4{font-size:27px}.inside-guide>summary{font-size:28px}.guide-intro h3{font-size:36px}}@media(prefers-reduced-motion:reduce){.guide-content{animation:none}}

.instrument{display:block}.instrument-overview{display:grid;grid-template-columns:1fr 1fr;gap:7%;align-items:start}.inside-guide{position:relative}.inside-guide[open]{scroll-margin-top:24px}@media(max-width:600px),(max-height:650px){.instrument-overview{display:block}}

/* Restore the original scroll section; the guide lives outside document flow. */
.instrument{display:block}.guide-open{display:flex;align-items:center;justify-content:space-between;width:100%;gap:15px;padding:14px 0;border:0;border-bottom:1px solid var(--night-line);color:var(--brand);background:none;font:16px/1.5 var(--body-font);text-align:left}.guide-open span{font-size:24px}#handpan-dialog{width:min(1100px,94vw);max-height:90svh;padding:0 5%;border:1px solid var(--night-line);background:var(--night);color:var(--night-text);overscroll-behavior:contain}#handpan-dialog::backdrop{background:#071719d9}.guide-dialog-bar{position:sticky;top:0;background:var(--night);z-index:2;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;border-bottom:1px solid var(--night-line)}.guide-dialog-bar h2{font-size:28px;line-height:1.15}.guide-close{padding:10px 14px;min-height:44px;background:transparent;border:1px solid var(--night-line);color:var(--page);font-size:16px}.guide-close span{margin-left:8px;font-size:22px}#handpan-dialog .guide-content{animation:none}@media(max-width:600px),(max-height:650px){.instrument{display:block}#handpan-dialog{padding:0 6%;width:96vw}.guide-dialog-bar h2{font-size:23px}}

/* Original scrolling scene followed by a self-contained shell study. */
.instrument{display:block}.instrument-overview{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7%;align-items:start}.instrument-visual{position:sticky;top:32px}
.instrument .pan-wrap{padding-top:32px;gap:24px}.instrument .pan{width:min(25vw,300px)}.instrument .pan-caption{font-size:16px}
.handpan-explorer{padding-top:40px;text-align:center}
.trial-art{position:relative;height:340px;max-width:620px;margin:auto;transition:height 1s cubic-bezier(.22,1,.36,1)}
.trial-art img{position:absolute;left:50%;top:50%;width:100%;height:auto;filter:drop-shadow(0 20px 20px #0005);transition:transform 1s cubic-bezier(.22,1,.36,1),opacity .8s}
.trial-upper{z-index:2;transform:translate(-50%,-50%)}.trial-lower{opacity:0;transform:translate(-50%,-40%)}
.handpan-explorer.is-open .trial-art{height:680px}.handpan-explorer.is-open .trial-upper{transform:translate(-50%,-105%)}.handpan-explorer.is-open .trial-lower{opacity:1;transform:translate(-50%,5%)}
.explorer-toggle{position:relative;display:block;margin:20px auto 0;padding:15px 30px;min-height:50px;border:1px solid #a8d9de80;border-radius:100px;background:var(--brand);color:#16393d;font:600 16px/1.3 Arial,sans-serif;cursor:pointer}.explorer-toggle:hover{background:#a1d2d7}.explorer-toggle:focus-visible{outline:3px solid white;outline-offset:5px}
.explorer-reveal{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .8s,visibility 0s .8s}.trial-reading{overflow:hidden;min-height:0;opacity:0;display:grid;grid-template-columns:1fr 1fr;gap:0 7%;text-align:left;transition:opacity .4s}.handpan-explorer.is-open .explorer-reveal{grid-template-rows:1fr;visibility:visible;transition-delay:0s}.handpan-explorer.is-open .trial-reading{opacity:1;transition-delay:.3s}.trial-reading article{padding-top:40px}.trial-reading h3{font-size:30px;margin-bottom:16px}.trial-reading p{font-size:18px;line-height:1.7;color:var(--night-text)}.trial-reading .trial-note{grid-column:1/-1;font-size:12px;opacity:.7;margin-top:24px;text-align:center}
@media(max-width:600px),(max-height:650px){.instrument-overview{display:block}.instrument-visual{position:relative;top:auto}}
@media(max-width:600px){.instrument .pan{width:65vw;max-width:300px}.trial-art{height:220px}.handpan-explorer.is-open .trial-art{height:390px}.trial-reading{grid-template-columns:1fr}.handpan-explorer{padding-top:20px}}
@media(prefers-reduced-motion:reduce){.instrument-visual{position:relative;top:auto}.handpan-explorer *{transition:none!important}}
/* A quieter reading rhythm, with more room for the story. */
.instrument-overview{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:8%}.instrument-visual{top:12vh}.instrument h2{font-size:clamp(34px,3.6vw,52px)}.instrument .pan{width:min(24vw,310px);transition:transform .65s ease-out}.instrument .pan-wrap{padding-top:60px}.handpan-fact{min-height:85svh;border:0;padding:70px 0}.handpan-fact h3{font-size:clamp(32px,3.3vw,46px);max-width:22ch}.handpan-fact>p:not(.fact-label){font-size:clamp(19px,1.65vw,23px);line-height:1.75;max-width:48ch}.fact-label{font-size:14px}
.handpan-explorer{position:relative;background:#d5eaec;color:var(--ink);padding:75px 8% 85px;border-radius:50% 50% 0 0 / 38px 38px 0 0;margin-top:-36px}.handpan-explorer>h2{font-size:clamp(38px,5vw,64px);margin-bottom:30px}.handpan-explorer .trial-reading p{color:var(--ink)}.scale-story{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:20px 7%;margin-top:25px}.scale-story h3{grid-column:1/-1;margin:0}.explorer-toggle{background:var(--ink);color:var(--page);border:0}.explorer-toggle:hover{background:#315c61}.explorer-toggle:focus-visible{outline-color:var(--ink)}
.hero-bottom,.ways article,.footer-base{border:0}.ways article{position:relative}.ways article:before{content:'';position:absolute;top:0;left:0;right:0;height:22px;border-top:1px solid #20363840;border-radius:50%}.scroll-meter{display:none}
@media(max-width:700px),(max-height:650px){.instrument-overview{display:block}.instrument-visual{position:relative;top:auto}.instrument .pan{width:min(65vw,310px)}.handpan-fact{min-height:0;padding:42px 0}.handpan-fact>p:not(.fact-label){font-size:19px;max-width:none}.instrument .pan-wrap{padding-top:35px;padding-bottom:25px}.handpan-explorer{padding:60px 7%;border-radius:50% 50% 0 0 / 22px 22px 0 0;margin-top:-20px}.scale-story{display:block}.scale-story p{margin-top:18px}}
@media(prefers-reduced-motion:reduce){.instrument-visual{position:relative;top:auto}.handpan-fact{min-height:0}.instrument .pan{transition:none}}
/* Alignment and spacing review from the annotated screen. */
main p:not(.eyebrow):not(.fact-label){font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300;letter-spacing:0}
.instrument .pan-wrap{align-items:flex-start;justify-content:flex-start;padding-top:42px}.instrument .pan{transform-origin:center}
.handpan-fact{min-height:60svh;padding:38px 0;justify-content:center}.handpan-fact h3{margin-bottom:22px}.handpan-fact>p:not(.fact-label){line-height:1.65;margin-bottom:16px}.handpan-fact>p:last-child{margin-bottom:0}.fact-label{margin-bottom:20px}
/* Asymmetric, tangent-smooth curves avoid the pinched ends of an ellipse. */
.handpan-explorer{border-radius:0;margin-top:0;padding-top:65px}.handpan-explorer:before{content:'';position:absolute;left:0;right:0;top:-59px;height:60px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='%23d5eaec' d='M0 40 C360 40 640 0 940 8 C1160 14 1300 42 1440 42 L1440 60 L0 60Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;pointer-events:none}
.ways article:before{border:0;border-radius:0;height:25px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 25' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%2320363855' stroke-width='1' vector-effect='non-scaling-stroke' d='M0 16 C300 16 480 2 720 6 S1020 21 1200 16'/%3E%3C/svg%3E") center/100% 100% no-repeat}
@media(max-width:700px),(max-height:650px){.handpan-fact{min-height:0;padding:30px 0}.instrument .pan-wrap{padding-top:30px}.handpan-explorer:before{height:32px;top:-31px}.handpan-explorer{margin-top:0;padding-top:45px}}
/* Wider reading, with shorter pauses between passages. */
.instrument-overview{grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);gap:6%}.handpan-fact{min-height:53svh;padding:30px 0}.handpan-fact>p:not(.fact-label){max-width:54ch;line-height:1.6}.handpan-fact h3{margin-bottom:18px}
/* Keep the explanation physically between the separated shells. */
.handpan-explorer{padding-top:45px;padding-bottom:45px}.handpan-explorer>h2{font-size:clamp(36px,4vw,54px);margin-bottom:16px}.trial-art{max-width:1100px}.trial-art img{width:min(100%,620px)}.handpan-explorer.is-open .trial-art{height:490px}.handpan-explorer.is-open .trial-upper{width:310px;top:0;transform:translate(-50%,0)}.handpan-explorer.is-open .trial-lower{width:310px;top:100%;transform:translate(-50%,-100%)}.trial-art img{transition:transform 1s cubic-bezier(.22,1,.36,1),top 1s,width 1s,opacity .8s}
.explorer-reveal{position:absolute;top:50%;left:0;width:100%;transform:translateY(-50%)}.trial-reading{grid-template-columns:1fr 1fr 1.2fr;gap:5%;align-items:start}.trial-reading article{padding:0;margin:0}.trial-reading h3{font-size:24px;margin-bottom:12px}.trial-reading p{font-size:16px;line-height:1.55}.scale-story{grid-column:auto;display:block}.scale-story p+p{margin-top:10px}.explorer-toggle{margin-top:12px}
@media(max-width:700px){.instrument-overview{display:block}.handpan-fact{min-height:0;padding:26px 0}.handpan-explorer.is-open .trial-art{height:900px}.trial-reading{grid-template-columns:1fr;gap:22px}.trial-reading article{max-width:42ch;margin:auto;width:100%}.trial-reading h3{font-size:25px}.trial-reading p{font-size:17px}.handpan-explorer.is-open .trial-art img{width:min(100%,310px)}}
/* Shared 60px wave profile, scaled down on small screens. */
main>.story,main>.instrument,main>.handpan-explorer,main>.music,main>.live,main>.community,main>.ways,main>footer{--curve-depth:60px;position:relative;margin-top:calc(-1 * var(--curve-depth));mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 40 C360 40 640 0 940 8 C1160 14 1300 42 1440 42 L1440 60 L0 60Z'/%3E%3C/svg%3E"),linear-gradient(#fff,#fff);mask-size:100% var(--curve-depth),100% calc(100% - var(--curve-depth) + 1px);mask-position:top,bottom;mask-repeat:no-repeat}
main>.story,main>.ways{background:var(--page)}.handpan-explorer:before{display:none}.handpan-explorer{padding-top:85px}.instrument{padding-top:100px}.live,.community{padding-top:100px}
@media(max-width:700px){main>.story,main>.instrument,main>.handpan-explorer,main>.music,main>.live,main>.community,main>.ways,main>footer{--curve-depth:32px}.handpan-explorer{padding-top:65px}}
@media(min-width:701px){.handpan-explorer.is-open{padding-top:55px;padding-bottom:35px}.handpan-explorer.is-open .trial-art{height:470px}.handpan-explorer.is-open .trial-art img{width:260px}}
/* Leave clearance for the following section's overlapping wave. */
.handpan-explorer,.handpan-explorer.is-open{padding-bottom:95px}
/* Compact passages; the motion follows the actual reading length. */
.handpan-fact{min-height:0;padding:22px 0 32px;justify-content:flex-start}.handpan-fact:first-child{padding-top:20px}.handpan-fact h3{margin-bottom:16px}.fact-label{margin-bottom:14px}.handpan-fact>p:not(.fact-label){margin-bottom:12px}.instrument-overview{padding-bottom:85px}
/* Preserve the image scale throughout the separation. */
.handpan-explorer .trial-art{--shell-width:min(100%,620px);max-width:1100px}.handpan-explorer .trial-art img,.handpan-explorer.is-open .trial-art img{width:var(--shell-width)}.handpan-explorer.is-open .trial-art{height:900px}.trial-art img{transition:transform 1s cubic-bezier(.22,1,.36,1),top 1s cubic-bezier(.22,1,.36,1),opacity .8s}.trial-reading{align-items:start}.trial-reading p{margin:0}.trial-reading article{height:auto}
@media(max-width:700px){.handpan-fact{padding:20px 0 28px}.instrument-overview{padding-bottom:35px}.handpan-explorer.is-open .trial-art{height:1000px}}
@media(min-width:701px){.trial-reading{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Let the shell artwork's own shading read without rectangular filter edges. */
.handpan-explorer .trial-art img{filter:none}.handpan-explorer.is-open .trial-art{height:960px}.handpan-explorer .explorer-toggle{margin-top:42px}.instrument .pan{transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
@media(max-width:700px){.handpan-explorer.is-open .trial-art{height:1060px}}
@media(prefers-reduced-motion:reduce){.instrument .pan{transition:none}}
/* Balance the biography against the complete heading-and-portrait column. */
.story-copy{align-self:center;padding-top:0}.story-copy p{max-width:46ch;line-height:1.7}
@media(max-width:600px){.story-copy{align-self:stretch}}
/* The shells themselves are the controls; the central note invites a touch. */
.shell-hit{position:absolute;left:50%;top:50%;width:var(--shell-width);aspect-ratio:2;border:0;padding:0;background:transparent;cursor:pointer;transform:translate(-50%,-50%);transition:top 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1),opacity .8s;border-radius:50%;-webkit-tap-highlight-color:transparent}
.shell-upper{z-index:2}.shell-lower{opacity:0;pointer-events:none;transform:translate(-50%,-40%)}
.handpan-explorer .shell-hit img,.handpan-explorer.is-open .shell-hit img{position:static;width:100%;height:auto;transform:none;pointer-events:none}
.handpan-explorer.is-open .shell-upper{top:0;transform:translate(-50%,0)}.handpan-explorer.is-open .shell-lower{top:100%;transform:translate(-50%,-100%);opacity:1;pointer-events:auto}
.shell-hit:focus-visible{outline:2px solid #315c61;outline-offset:8px}.shell-hit:hover img{filter:brightness(1.06)}
.note-cue{position:absolute;left:50%;top:26%;width:54px;height:32px;border:2px solid #d5eaecb3;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 8px #6eb7be25;pointer-events:none;transition:box-shadow .35s,border-color .35s,transform .35s}
.shell-upper:hover .note-cue,.shell-upper:focus-visible .note-cue{box-shadow:0 0 0 15px #6eb7be35,0 0 25px #d5eaec90;border-color:#fff;transform:translate(-50%,-50%) scale(1.12)}
.is-open .note-cue{opacity:0}.shell-hit:active{filter:brightness(1.1)}
@media(max-width:700px){.note-cue{width:34px;height:22px}}
@media(prefers-reduced-motion:reduce){.shell-hit,.note-cue{transition:none}}
.note-cue{top:20%}
/* A slower, shared envelope keeps shell movement and content in step. */
.handpan-explorer{--shell-duration:1800ms;--shell-ease:cubic-bezier(.45,0,.2,1)}
.handpan-explorer .trial-art{transition:height var(--shell-duration) var(--shell-ease)}
.handpan-explorer .shell-hit{transition:top var(--shell-duration) var(--shell-ease),transform var(--shell-duration) var(--shell-ease),opacity 1200ms ease;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='12' fill='%23d5eaec' fill-opacity='.35' stroke='%23203638' stroke-width='1.5'/%3E%3Ccircle cx='18' cy='18' r='3' fill='%23203638'/%3E%3C/svg%3E") 18 18,pointer}
.handpan-explorer .explorer-reveal{transition:grid-template-rows var(--shell-duration) var(--shell-ease),visibility 0s var(--shell-duration)}
.handpan-explorer.is-open .explorer-reveal{transition-delay:0s}
.handpan-explorer .trial-reading{transition:opacity 650ms ease;transition-delay:0s}
.handpan-explorer.is-open .trial-reading{transition-delay:850ms}
.handpan-explorer .note-cue{transition:box-shadow 600ms ease,transform 600ms ease,border-color 600ms ease,opacity 500ms ease}
@media(prefers-reduced-motion:reduce){.handpan-explorer *{transition:none!important}}
/* Approved complete instrument crossfades into the matching exploded upper shell. */
.handpan-explorer .shell-upper .trial-upper{opacity:0;transition:opacity 800ms ease}
.handpan-explorer .shell-upper .shell-closed-photo{position:absolute;inset:0;width:100%;height:auto;transform:none;opacity:1;transition:opacity 800ms ease;pointer-events:none}
.handpan-explorer.is-open .shell-upper .trial-upper{opacity:1}
.handpan-explorer.is-open .shell-upper .shell-closed-photo{opacity:0}
@media(prefers-reduced-motion:reduce){.handpan-explorer .shell-upper img{transition:none}}
/* Stable top shell: one expansion axis, no percentage-position drift or page jump. */
.handpan-explorer,.handpan-explorer.is-open{padding-top:85px;overflow-anchor:none;--shell-duration:2000ms;--shell-ease:cubic-bezier(.42,0,.22,1)}
.handpan-explorer .shell-upper,.handpan-explorer.is-open .shell-upper{top:15px;bottom:auto;transform:translateX(-50%)}
.handpan-explorer .shell-lower,.handpan-explorer.is-open .shell-lower{top:auto;bottom:15px;transform:translateX(-50%)}
.handpan-explorer .shell-hit{transition:opacity 700ms ease 1100ms}
.handpan-explorer.is-open .shell-lower{transition:opacity 850ms ease 150ms}
.handpan-explorer .shell-upper .shell-closed-photo{transition:opacity 650ms ease 1300ms}
.handpan-explorer.is-open .shell-upper .shell-closed-photo{transition:opacity 700ms ease 0s}
.handpan-explorer .shell-upper .trial-upper{opacity:1;transition:none}
.handpan-explorer .trial-reading{transition:opacity 350ms ease 0s}
.handpan-explorer.is-open .trial-reading{transition:opacity 650ms ease 1050ms}
@media(max-width:700px){.handpan-explorer,.handpan-explorer.is-open{padding-top:65px}}
@media(prefers-reduced-motion:reduce){.handpan-explorer *{transition:none!important}}
.handpan-explorer .shell-upper .shell-closed-photo,.handpan-explorer.is-open .shell-upper .shell-closed-photo{position:absolute;inset:0;display:block;width:100%;height:auto;transform:none}
.shell-hit{height:auto;max-height:none}.handpan-explorer .shell-upper .trial-upper,.handpan-explorer.is-open .shell-upper .trial-upper{display:block}
.handpan-explorer .shell-upper .trial-upper{opacity:0;transition:opacity 650ms ease 1300ms}.handpan-explorer.is-open .shell-upper .trial-upper{opacity:1;transition:opacity 700ms ease 0s}
@media(prefers-reduced-motion:reduce){.handpan-explorer .shell-upper .trial-upper{transition:none}}
/* Stage assembly separately from travel, so neither direction cuts mid-motion. */
.handpan-explorer .shell-upper .trial-upper{opacity:0;transition:opacity 850ms ease}
.handpan-explorer .shell-upper .shell-closed-photo{opacity:1;transition:opacity 850ms ease}
.handpan-explorer.is-separated .shell-upper .trial-upper{opacity:1;transition:opacity 450ms ease}
.handpan-explorer.is-separated .shell-upper .shell-closed-photo{opacity:0;transition:opacity 450ms ease}
.handpan-explorer .shell-lower{opacity:0;transition:opacity 850ms ease}
.handpan-explorer.is-separated .shell-lower{opacity:1;transition:opacity 600ms ease}
.handpan-explorer.is-closing .shell-lower{opacity:1;transition:none}
.handpan-explorer.is-separated .note-cue{opacity:0}
@media(prefers-reduced-motion:reduce){.handpan-explorer *{transition:none!important}}
/* Continuous geometry: one approved exterior, split at its curved seam.
   The lower face turns over; no shell photo is ever opacity-swapped. */
.handpan-explorer .shell-upper .trial-upper{visibility:hidden;opacity:0;transition:none}
.handpan-explorer .shell-upper .shell-closed-photo,.handpan-explorer.is-open .shell-upper .shell-closed-photo{opacity:1;transition:none;clip-path:polygon(0 0,100% 0,100% 58%,96% 66%,90% 73%,80% 79%,65% 83%,50% 85%,35% 83%,20% 79%,10% 73%,4% 66%,0 58%)}
.handpan-explorer .shell-lower,.handpan-explorer.is-open .shell-lower{opacity:1;transition:none;perspective:1200px;pointer-events:none}
.handpan-explorer.is-open .shell-lower{pointer-events:auto}
.handpan-explorer .shell-lower img,.handpan-explorer.is-open .shell-lower img{position:absolute;inset:0;width:100%;height:auto;backface-visibility:hidden;transition:transform var(--shell-duration) var(--shell-ease);transform-origin:50% 70%;opacity:1}
.handpan-explorer .shell-lower .shell-exterior{clip-path:polygon(0 58%,4% 66%,10% 73%,20% 79%,35% 83%,50% 85%,65% 83%,80% 79%,90% 73%,96% 66%,100% 58%,100% 100%,0 100%);transform:rotateX(0deg)}
.handpan-explorer .shell-lower .trial-lower{transform:rotateX(-180deg)}
.handpan-explorer.is-open .shell-lower .shell-exterior{transform:rotateX(180deg)}
.handpan-explorer.is-open .shell-lower .trial-lower{transform:rotateX(0deg)}
@media(prefers-reduced-motion:reduce){.handpan-explorer .shell-lower img{transition:none}}
/* Quicker response with the same continuous shell travel. */
.handpan-explorer{--shell-duration:1200ms}
.handpan-explorer.is-open .trial-reading{transition:opacity 400ms ease 550ms}
/* Shared touch-inspired cursor for every interactive element. */
:root{--interactive-cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Ccircle cx='28' cy='28' r='20' fill='%23d5eaec' fill-opacity='.25' stroke='%23f6f1e8' stroke-width='3.5'/%3E%3Ccircle cx='28' cy='28' r='20' fill='none' stroke='%23203638' stroke-width='1.5'/%3E%3Ccircle cx='28' cy='28' r='4' fill='%23203638' stroke='%23f6f1e8' stroke-width='1'/%3E%3C/svg%3E") 28 28,pointer}
a[href],button:not(:disabled),summary,[role="button"],[role="link"],input[type="button"],input[type="submit"],input[type="checkbox"],input[type="radio"],select,video[controls],.handpan-explorer .shell-hit{cursor:var(--interactive-cursor)}
/* Ambient transition for the handpan explorer only. */
main>.handpan-explorer{background:linear-gradient(180deg,var(--night) 0%,#35595d 12%,#83afb3 30%,#d5eaec 52%,#d5eaec 100%)}
/* No cut edge between the instrument and its ambient continuation. */
main>.instrument{background:linear-gradient(to bottom,transparent 65%,var(--night) 100%),radial-gradient(ellipse at 15% 40%,#24484b,var(--night) 70%)}
main>.handpan-explorer{mask-image:none;margin-top:0;background:linear-gradient(180deg,var(--night) 0%,var(--night) 5%,#35595d 18%,#83afb3 34%,#d5eaec 54%,#d5eaec 100%)}
/* Solid continuation of the preceding section. */
main>.handpan-explorer{background:var(--night);color:var(--night-text)}
.handpan-explorer .trial-reading p{color:var(--night-text)}
.handpan-explorer .trial-reading h3{color:var(--page)}
.shell-hit:focus-visible{outline-color:var(--brand)}
/* 50% more separation before the interactive handpan. */
.handpan-explorer,.handpan-explorer.is-open{padding-top:127.5px}
@media(max-width:700px){.handpan-explorer,.handpan-explorer.is-open{padding-top:97.5px}}
/* More breathing room around performance and community. */
main>.live,main>.community{padding-top:150px;padding-bottom:150px}
@media(max-width:700px){main>.live,main>.community{padding-top:100px;padding-bottom:100px}}
/* Compact layout: closed stage must match the responsive shell height exactly. */
@media(max-width:700px){
 .handpan-explorer .trial-art{height:calc(min(43vw,310px) + 30px)}
 .handpan-explorer.is-open .trial-art{height:1060px}
 .handpan-explorer,.handpan-explorer.is-open{padding-top:38px}
 .instrument-overview{padding-bottom:12px}
 main>.instrument{padding-bottom:30px}
}
/* Supplied landscape performance: retain its native ratio and full frame. */
main>.live{grid-template-columns:minmax(0,.65fr) minmax(0,1.65fr);gap:6%;padding-left:7%;padding-right:7%;align-items:center}
.live video{display:block;width:100%;max-width:none;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain;transform:none;background:#102628}
@media(max-width:800px){main>.live{grid-template-columns:1fr;gap:35px}.live video{width:100%;max-width:none}}

/* Landscape YouTube player retains the performance layout. */
.live .live-player{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;background:#102628;box-shadow:14px 14px 0 var(--brand)}