/* Boothe Music case study: a side-scrolling full score. Served on /work/boothe-music/ by [tc_case name="boothe"]. */
body.tc-case-page{overflow:hidden}
.cs{--paper:#F3EBD9;--ink:#241B13;--ox:#8E1F24;--rule:#B9A781;--soft:#7A6650;--gw:128px;--txt:clamp(250px,39%,370px);
  position:fixed;left:0;right:0;bottom:0;top:var(--wp-admin--admin-bar--height,0px);z-index:50;display:flex;flex-direction:column;
  background:var(--paper);color:var(--ink);font-family:"Source Serif 4",Georgia,serif;-webkit-font-smoothing:antialiased}
.cs *,.cs *::before,.cs *::after{box-sizing:border-box}
.cs a{color:inherit}
.cs :focus-visible{outline:2px solid var(--ox);outline-offset:3px}

/* top bar */
.cs-bar{flex:none;display:flex;align-items:center;flex-wrap:wrap;gap:8px 22px;padding:12px clamp(16px,3vw,40px);padding-top:calc(12px + env(safe-area-inset-top,0px));border-bottom:1px solid var(--rule);background:var(--paper);position:relative;z-index:4}
.cs-wm{font-family:"Cormorant Garamond","Bodoni Moda",Georgia,serif;font-size:25px;line-height:1;text-decoration:none;color:var(--ink)}
.cs-wm i{color:var(--ox)}
.cs-label{font-style:italic;color:var(--soft);font-size:15px}
.cs-nav{margin-left:auto;display:flex;align-items:center;gap:12px}
.cs-nav a{font-size:15px;text-underline-offset:3px}
.cs-hint{font-size:13px;font-style:italic;color:var(--soft);white-space:nowrap}
.cs-prog{width:120px;height:2px;background:var(--rule);overflow:hidden}
.cs-prog i{display:block;height:100%;width:0;background:var(--ox)}
.cs-nav button{width:36px;height:36px;border-radius:50%;border:1px solid var(--ink);background:transparent;color:var(--ink);padding:0;display:grid;place-items:center;cursor:pointer}
.cs-nav button svg{width:16px;height:16px;display:block}
.cs-nav button:hover{background:var(--ink);color:var(--paper)}
@media (max-width:700px){.cs-label,.cs-hint,.cs-prog{display:none}}

/* scroll engine: the stage scrolls vertically and moves the score sideways; snaps panel to panel */
.cs-stage{position:relative;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scroll-snap-type:y mandatory}
.cs-stage:focus{outline:none}
.cs-runway{position:relative}
.cs-vp{position:sticky;top:0;overflow:hidden;background:var(--paper)}
.cs-track{position:relative;display:flex;width:max-content;height:100%;will-change:transform}
.cs-snap{position:absolute;left:0;width:1px;height:1px;scroll-snap-align:start;scroll-snap-stop:always;pointer-events:none}
/* touch screens: the score swipes sideways one panel at a time. Text takes the height it needs; the staves take the rest. */
.cs.native .cs-stage{overflow:hidden;scroll-snap-type:none}
.cs.native .cs-runway{height:100%}
.cs.native .cs-vp{position:relative;height:100%}
.cs.native .cs-track{width:auto;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;transform:none!important;-webkit-overflow-scrolling:touch}
.cs.native .cs-track::-webkit-scrollbar{display:none}
.cs.native .cs-panel{scroll-snap-align:start;scroll-snap-stop:always;width:100vw!important;grid-template-rows:auto minmax(170px,1fr)}
.cs.native .cs-txt{overflow:visible;padding:20px 20px 2px!important}
.cs.native .cs-gutter,.cs.native .key{display:none}

/* panels: text on top, the system of six staves below, the same height on every panel so the lines run on */
.cs-panel{flex:0 0 auto;height:100%;position:relative;width:var(--w,820px);display:grid;grid-template-rows:var(--txt) minmax(0,1fr)}
.cs-txt{padding:clamp(18px,3.4vh,40px) clamp(22px,3vw,46px) 0;overflow:hidden}
.cs-panel:first-child .cs-txt{padding-left:calc(var(--gw) + 8px)}
.cs-sys{position:relative;min-height:0}
.cs-sys svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cs .rl{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 6px;border:1.6px solid var(--ink);font-family:"Bodoni Moda",serif;font-weight:600;font-size:14px}
.cs .term{font-family:"Bodoni Moda",serif;font-style:italic;color:var(--ox);font-size:19px;margin-left:10px;vertical-align:middle}
.cs h1,.cs h2,.cs h3{font-family:"Bodoni Moda",Didot,serif;font-weight:400;letter-spacing:-.015em;line-height:1.02;margin:12px 0 0;text-wrap:balance;color:var(--ink)}
.cs h1{font-size:clamp(42px,5vw,70px)}
.cs h1 em{font-style:italic;color:var(--ox)}
.cs h2{font-size:clamp(28px,2.9vw,40px)}
.cs p{font-size:clamp(17px,1.3vw,19.5px);line-height:1.5;color:#3A2E22;margin:12px 0 0}
.cs .meta{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:16px;font-size:15px;color:#6B5A45}
.cs .meta b{color:var(--ink);font-weight:600}
.cs .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.cs .tags span{font-size:16px;border:1px solid var(--rule);padding:4px 10px;background:#F8F2E4}
.cs .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 26px;margin-top:14px}
.cs .grid h3{font-family:"Source Serif 4",Georgia,serif;font-optical-sizing:auto;font-variation-settings:normal;font-weight:600;font-size:19px;letter-spacing:0;margin:0}
.cs .grid p{font-size:15px;line-height:1.4;margin-top:4px}
.cs .solo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 clamp(26px,2.8vw,44px);align-items:start;margin-top:clamp(24px,3.6vh,42px)}
.cs .big{display:flex;align-items:baseline;font-family:"Bodoni Moda",serif;font-weight:400;font-size:clamp(72px,8.6vw,122px);line-height:.74;color:var(--ox);letter-spacing:-.03em;font-variant-numeric:lining-nums;white-space:nowrap}
.cs .big .x{font-family:"Source Serif 4",Georgia,serif;font-weight:600;font-size:.5em;line-height:1;margin-left:.06em;letter-spacing:0;position:relative;top:.05em}
.cs .big .x.pre{margin:0 .04em 0 0}
.cs .big .in{font-style:italic;font-size:.4em;line-height:1;margin:0 .14em;letter-spacing:0}
.cs .solo h2{margin:0;font-size:clamp(24px,2.3vw,32px)}
.cs .solo p{margin-top:6px}
.cs .basis{font-style:italic;font-size:14.5px;color:var(--soft);margin-top:8px}
.cs blockquote{margin:14px 0 0;font-family:"Bodoni Moda",serif;font-style:italic;font-size:clamp(23px,2.2vw,30px);line-height:1.3}
.cs .who{font-size:15px;color:#6B5A45}
.cs ul.two{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 28px;max-width:760px}
.cs ul.two li{position:relative;padding-left:24px;font-size:17px;line-height:1.4}
.cs ul.two li{padding-left:28px}
.cs ul.two li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:9px;border-radius:50%;background:var(--ink);transform:rotate(-20deg)}
.cs ul.two li::after{content:"";position:absolute;left:10.6px;top:calc(.62em - 15px);width:1.4px;height:19px;background:var(--ink)}
.cs .btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.cs .btn{display:inline-block;padding:12px 20px;background:var(--ox);color:var(--paper);text-decoration:none;font-family:"Bodoni Moda",serif;font-size:14px;letter-spacing:.14em;text-transform:uppercase;border:1.5px solid var(--ox)}
.cs .btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}

/* instrument names, frozen at the left like a printed score */
.cs-gutter{position:absolute;left:0;bottom:0;width:var(--gw);z-index:3;pointer-events:none;background:linear-gradient(to right,var(--paper) 78%,rgba(243,235,217,0))}
.cs-gutter .lab{position:absolute;right:26px;transform:translateY(-50%);text-align:right;font-size:14px;line-height:1.05;color:#A8977C;transition:color .25s}
.cs-gutter .lab small{display:block;font-style:italic;font-size:11.5px}
.cs-gutter .lab.on{color:var(--ox);font-weight:600}
.cs-gutter .lab.all{color:var(--ink)}
.cs-gutter svg{position:absolute;right:6px;top:0;width:16px;overflow:visible}
.cs .key{position:absolute;right:clamp(16px,2vw,30px);bottom:8px;font-style:italic;font-size:12.5px;color:var(--soft);z-index:2}

@media (max-width:900px){.cs .grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cs .grid p{display:none}}
@media (max-width:700px){
  .cs{--gw:78px;--txt:clamp(250px,44%,340px)}
  .cs-gutter .lab{font-size:11.5px;right:18px}.cs-gutter .lab small{display:none}
  .cs .solo{grid-template-columns:minmax(0,1fr);gap:10px}
  .cs ul.two{grid-template-columns:minmax(0,1fr)}
  .cs-panel:first-child .cs-txt{padding-left:22px}
  .cs .key{display:none}
}
@media (max-height:720px){.cs .grid p{display:none}.cs .meta{display:none}}

/* Bodoni's display cut has hairlines too thin to read on screen. Use its text-size optical cut and a touch
   more weight, so the thin strokes hold up at every size. */
.cs h1,.cs h2,.cs h3,.cs blockquote,.cs .term,.cs .rl{font-optical-sizing:none;font-variation-settings:"opsz" 14}
.cs h1,.cs h2{font-weight:500;letter-spacing:-.005em}
.cs .big{font-optical-sizing:none;font-variation-settings:"opsz" 24;font-weight:500}
.cs .solo h2{font-weight:500}

/* the video request form on the last panel: fields written on a rule, like a line of the staff */
.cs-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:14px 28px;align-items:end;margin-top:18px}
.cs-form label{display:grid;gap:2px}
.cs-form label span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.cs-form input{font-family:"Source Serif 4",Georgia,serif;font-size:20px;color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid var(--ink);border-radius:0;padding:6px 0 7px;height:46px;width:100%;box-shadow:none}
.cs-form input::placeholder{color:#B4A587}
.cs-form input:focus{outline:none;border-bottom-color:var(--ox);box-shadow:0 1.5px 0 var(--ox)}
.cs-form .btn{height:46px;display:inline-flex;align-items:center;justify-content:center;padding:0 24px;font-size:13px;letter-spacing:.16em;cursor:pointer;white-space:nowrap}
.cs-form .btn[disabled]{opacity:.6;cursor:default}
.cs-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cs-msg{font-size:17px;margin:12px 0 0;color:var(--ox)}
.cs-msg:empty{display:none}
.cs .who{margin-top:14px}
.cs .who a{color:var(--ink);text-underline-offset:4px;text-decoration-thickness:1px}
.cs .who a::after{content:" \2192"}
@media (max-width:700px){.cs-form{grid-template-columns:minmax(0,1fr)}.cs-form .btn{width:100%}}
.cs p.wide{}