/* A short opening statement, followed by a consistent reading column. */
body.st-francis-project .project-opening .story-copy{max-width:700px}
.st-francis-project .project-opening .story-copy .lead{font-size:clamp(24px,2vw,28px);line-height:1.4;max-width:42ch;letter-spacing:-.015em}
.st-francis-project .project-opening .story-copy>p:not(.lead){font-size:20px;line-height:1.65}
/* Give the single sketch passage room to read alongside the instrument. */
.st-francis-project .sketch-st-francis{position:relative;grid-template-columns:minmax(0,1.85fr) minmax(280px,1fr);margin-top:28px;align-items:center;column-gap:clamp(28px,3vw,48px)}
.st-francis-project .sketch-st-francis .sketch-0{grid-column:1;grid-row:1;min-width:0;margin:0 -3% 0 -5%}
.st-francis-project .sketch-st-francis .sketch-note{grid-column:2;grid-row:1;align-self:end;max-width:none;min-width:0;padding:0 0 clamp(20px,3vw,44px);margin:0}
.st-francis-project .sketch-st-francis .sketch-note p{max-width:38ch;font-size:20px;line-height:1.65}
.st-francis-project .sketch-st-francis .drawing img{width:100%;filter:grayscale(1) contrast(1.06)}
/* Slim percussion bars: generous hit areas, quiet visual feedback. */
.st-francis-project .music-experience{border-top:1px solid var(--line);margin-top:48px;padding-top:38px}
.st-francis-project .music-introduction{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:start;max-width:980px;margin:auto}
.st-francis-project .music-introduction h2{font-size:clamp(32px,3.3vw,45px);line-height:1.15}
.st-francis-project .music-introduction p{font-size:20px;line-height:1.6;max-width:30ch;justify-self:end}
.st-francis-project .instrument{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));align-items:stretch;gap:8px;height:300px;width:min(100%,790px);padding:0;margin:38px auto 18px;touch-action:pan-y;user-select:none}
.st-francis-project .note-bar,.st-francis-project .note-bar:nth-child(even){position:relative;height:100%;width:100%;max-width:none;min-width:0;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;color:var(--ink);transform:none;display:block;transition:color .15s}
.st-francis-project .note-bar svg{position:absolute;width:clamp(12px,1.6vw,19px);height:var(--height);bottom:calc(15px + var(--rise));left:50%;transform:translateX(-50%);overflow:visible;fill:none;stroke:currentColor;stroke-width:1.1;vector-effect:non-scaling-stroke;pointer-events:none}
.st-francis-project .note-bar::after{content:"";position:absolute;left:50%;bottom:0;height:calc(7px + var(--rise));border-left:1px dashed var(--line);pointer-events:none}
.st-francis-project .note-bar:hover,.st-francis-project .note-bar.struck{color:var(--blue);background:transparent;transform:none}
.st-francis-project .note-bar.struck svg{animation:bar-resonance .65s ease-out}
.st-francis-project .note-bar:focus-visible{outline:1px solid var(--blue);outline-offset:0;border-radius:2px}
.st-francis-project .note-bar:focus-visible{color:var(--blue)}
.st-francis-project .note-bar::before{content:attr(data-note);position:absolute;bottom:-18px;left:0;right:0;font:400 13px/18px var(--sans);color:var(--blue);opacity:0;pointer-events:none}
.st-francis-project .note-bar[data-note="C high"]::before{content:"C′"}
.st-francis-project .note-bar[data-note="D high"]::before{content:"D′"}
.st-francis-project .note-bar[data-note="E high"]::before{content:"E′"}
.st-francis-project .note-bar[data-note="G high"]::before{content:"G′"}
.st-francis-project .note-bar:focus-visible::before,.st-francis-project .note-bar.struck::before{opacity:1}
@media(hover:hover){.st-francis-project .note-bar:hover::before{opacity:1}}
.st-francis-project .note-bar:focus-visible::after,.st-francis-project .note-bar.struck::after{border-left-color:var(--blue);border-left-style:solid}
.st-francis-project .music-controls{max-width:790px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.st-francis-project .sound-toggle{font-size:18px;min-height:44px;line-height:1.4;padding:8px 0;background:transparent;border:0;border-bottom:1px solid var(--blue);color:var(--blue);white-space:nowrap}
.st-francis-project .music-current{font:italic 25px/1.3 var(--serif);color:var(--blue);min-width:50px;text-align:right}
.st-francis-project .music-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.st-francis-project .funding-section p+p:not(.funding-number){margin-top:18px}
@keyframes bar-resonance{0%,100%{transform:translateX(-50%)}15%{transform:translateX(calc(-50% + 2px))}32%{transform:translateX(calc(-50% - 1.5px))}52%{transform:translateX(calc(-50% + 1px))}72%{transform:translateX(calc(-50% - .5px))}}
@media(prefers-reduced-motion:reduce){.st-francis-project .note-bar.struck svg{animation:none}}
@media(max-width:900px){
 .st-francis-project .sketch-st-francis{grid-template-columns:minmax(0,1fr);row-gap:18px}
 .st-francis-project .sketch-st-francis .sketch-0{grid-column:1;margin:0 -3%}
 .st-francis-project .sketch-st-francis .sketch-note{grid-column:1;grid-row:2;padding:0;margin:0}
 .st-francis-project .sketch-st-francis .sketch-note p{max-width:52ch}
}
@media(max-width:700px){
 .st-francis-project .sketch-st-francis{margin-top:15px;row-gap:22px}
 .st-francis-project .sketch-st-francis .sketch-0{margin:0 -6%}
 .st-francis-project .sketch-st-francis .sketch-note{grid-column:1/-1;margin:0;padding:0}
 .st-francis-project .sketch-st-francis .sketch-note p{max-width:none}
 .st-francis-project .music-experience{margin-top:35px;padding-top:30px}
 .st-francis-project .music-introduction{grid-template-columns:1fr;gap:22px}
 .st-francis-project .music-introduction h2{font-size:33px}
 .st-francis-project .music-introduction p{max-width:none;justify-self:start}
 .st-francis-project .instrument{height:255px;gap:0;margin-top:30px}
 .st-francis-project .note-bar svg{width:12px}
}