/* Live Music at Midtown Stomp (/live-bands, tools/live-music-page/build.mjs). Brand colours: Midtown red #a00826, gold #e7bd65, deep red #500b19, Spotlight maroon #7f1623, charcoal #404041. Tints and shades are design choices. */
:root{--lm-bg:#0d0708;--lm-ink:#fff6e5;--lm-gold:#e7bd65;--lm-red:#a00826;--lm-deep:#500b19;--lm-maroon:#7f1623;--lm-char:#404041;--lm-cream:#fbf1dd;--lm-paper:#fffefa;
 --lm-serif:'Playfair Display',Georgia,serif;--lm-sans:'DM Sans',Arial,sans-serif;--lm-gut:16px;--lm-head:122px;--lm-thump:0;--lm-vh:1vh}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--lm-bg)}
body{background:var(--lm-bg);overflow-x:clip}
#film,.foot,.ctl{color:var(--lm-ink);font:16px/1.45 var(--lm-sans)}
h1,h2,p{margin:0;padding:0}
.bill{margin:0;padding:0}
:where(#film,.foot) a{color:inherit}
.hear,.ctl button,.play-big{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
#film :focus-visible,.ctl :focus-visible,.foot :focus-visible,.play-big:focus-visible{outline:3px solid var(--lm-gold);outline-offset:3px}
#film [hidden],#play-big[hidden],#ctl[hidden]{display:none!important}

/* The stage: pinned under everything, one video on it */
#film{position:relative;display:block}
.stage{position:sticky;top:0;height:100vh;height:100lvh;margin-bottom:-100vh;margin-bottom:-100lvh;overflow:hidden;background:#000;z-index:0}
.frame{position:absolute;inset:0;overflow:hidden;background:#000}
.hole{position:absolute;inset:0;overflow:hidden;will-change:clip-path}
.hole video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;visibility:hidden;background:#000;transform:scale(var(--lm-zoom,1));transform-origin:50% 46%}
.hole video.on{opacity:1;visibility:visible;animation:cut .22s ease-out}
@keyframes cut{from{opacity:0}to{opacity:1}}
.shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(13,7,8,.28) 0%,rgba(13,7,8,0) 24%,rgba(13,7,8,0) 40%,rgba(13,7,8,.62) 66%,rgba(13,7,8,.92) 100%);transition:opacity .2s}
.shade.top{background:linear-gradient(180deg,rgba(13,7,8,.86) 0%,rgba(13,7,8,.66) 38%,rgba(13,7,8,.12) 58%,rgba(13,7,8,0) 72%,rgba(13,7,8,.4) 100%)}
.shade.light{background:linear-gradient(180deg,rgba(13,7,8,.62) 0%,rgba(13,7,8,.32) 26%,rgba(13,7,8,0) 44%,rgba(13,7,8,0) 100%)}
.shade.full{background:rgba(13,7,8,.5)}
.shade.off{opacity:0}
.heat{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(120% 90% at 50% 45%,rgba(160,8,38,0) 52%,rgba(160,8,38,.75) 100%);transition:opacity .1s linear}

/* The door */

/* Words */
.words{position:absolute;inset:0;pointer-events:none}
.beat{position:absolute;inset:0;padding:var(--lm-gut);display:flex;flex-direction:column;justify-content:flex-end;gap:.28em;visibility:hidden;opacity:0;transform:translateY(var(--lm-drift,0))}
.beat.on{visibility:visible;opacity:1}
.beat p{font:500 clamp(1.7rem,7.6vw,2.6rem)/1.13 var(--lm-serif);text-shadow:0 2px 22px rgba(0,0,0,.7),0 0 3px rgba(0,0,0,.4)}
.beat .big{font-size:clamp(3rem,14.2vw,5rem);font-weight:700;line-height:1;letter-spacing:-.015em}
.beat .gold{color:var(--lm-gold)}
.ln{opacity:0}
.ln.lit{opacity:1;transform:none;animation:hit .24s cubic-bezier(.2,1.3,.4,1)}
@keyframes hit{from{opacity:0;transform:translateY(.28em) scale(.95)}to{opacity:1;transform:none}}
.ln a{pointer-events:auto}
.who{font:500 .84rem/1.35 var(--lm-sans)!important;color:#f3dcc0;margin-top:.8em}
/* Each beat sits somewhere else on the screen, the way a band moves around a stage */

/* The bill: names stacked like a poster, surname as wide as the screen */

/* The peak */

/* At the door */

/* After the door: louder and looser */
.shout{justify-content:center;align-items:flex-start}
.shout p{font:italic 700 clamp(3.1rem,15.5vw,6rem)/.96 var(--lm-serif);letter-spacing:-.02em;transform-origin:0 50%}
.shout .ln.lit{transform:rotate(-4deg) scale(calc(1 + var(--lm-thump)*.035))}
.b-nband{justify-content:flex-end;padding-bottom:calc(var(--lm-gut) + 90px)}
.b-nband p{color:var(--lm-gold)}
.b-nkenny{justify-content:flex-end;padding-bottom:calc(var(--lm-gut) + 90px)}
.b-nmh{justify-content:flex-start;padding-top:calc(var(--lm-gut) + 70px);align-items:flex-end;text-align:right}
.b-nmh p{transform-origin:100% 50%;color:var(--lm-gold)}

/* Come at 8 */

/* First screen */
.lm-hero{position:relative;z-index:1;display:flex;flex-direction:column;min-height:calc(100vh - var(--lm-head));min-height:calc(100svh - var(--lm-head));padding:12px var(--lm-gut) 8px;pointer-events:none;will-change:opacity}
.lm-hero a,.lm-hero button{pointer-events:auto}
.hear{display:flex;align-items:center;gap:14px;width:100%;min-height:72px;padding:10px 18px;border:2px solid var(--lm-gold);border-radius:14px;background:rgba(13,7,8,.72);color:var(--lm-ink);text-align:left;box-shadow:0 8px 30px rgba(0,0,0,.45)}
.hear-t{display:block}.hear b{display:block;font:700 1.45rem/1.1 var(--lm-sans)}.hear small{display:block;font:500 .9rem/1.25 var(--lm-sans);color:#f3dcc0;margin-top:2px}
.fail{display:block;margin:0;padding:12px 14px;background:rgba(13,7,8,.78);border-radius:10px;font:500 .95rem/1.35 var(--lm-sans)}
.hero-low{margin-top:auto}
.lm-hero h1{font:700 clamp(3rem,14.4vw,4.6rem)/.95 var(--lm-serif);letter-spacing:-.018em;text-shadow:0 3px 26px rgba(0,0,0,.7)}
.lm-hero h1 span{display:block;font:italic 500 clamp(1.5rem,7.2vw,2.4rem)/1.2 var(--lm-serif);letter-spacing:0;color:var(--lm-gold)}
.stub{position:relative;margin-top:12px;padding:12px 14px 14px;background:var(--lm-gold);color:#2a0910;border-radius:12px;-webkit-mask:radial-gradient(circle 9px at 0 62%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 62%,transparent 98%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 9px at 0 62%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 62%,transparent 98%,#000) right/51% 100% no-repeat}
.stub-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.stub-k{font:700 .76rem/1.2 var(--lm-sans);letter-spacing:.03em}
.stub-n{font:700 1.3rem/1.08 var(--lm-serif);margin-top:3px}
.stub-p{flex:none;text-align:right;width:78px}
.stub-p b{display:block;font:700 2.1rem/1 var(--lm-serif);font-feature-settings:'lnum'}
.stub-p span{display:block;font:600 .68rem/1.15 var(--lm-sans);margin-top:1px}
.stub-w{font:500 .84rem/1.25 var(--lm-sans);margin:8px 0 10px}
.buy{display:flex;align-items:center;justify-content:center;min-height:54px;padding:8px 18px;background:#2a0910;color:var(--lm-gold);border-radius:8px;font:700 1.25rem var(--lm-sans);text-decoration:none}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 6px}}

/* Scroll room */
.z{position:relative;z-index:1;height:calc(var(--lm-h)*1vh);pointer-events:none}

/* The bill */
.sheet{position:relative;z-index:2;background:var(--lm-deep);color:var(--lm-ink);min-height:100vh;min-height:100lvh;display:flex;align-items:center;padding:34px var(--lm-gut);box-shadow:0 -24px 60px rgba(0,0,0,.6),0 24px 60px rgba(0,0,0,.6)}
.sheet-in{width:100%;max-width:720px;margin:0 auto}
.sheet h2{font:700 clamp(3rem,14.4vw,5rem)/1 var(--lm-serif);letter-spacing:-.018em;color:var(--lm-gold)}
.sheet-k{font:500 1rem/1.35 var(--lm-sans);margin:10px 0 18px}
.bill{list-style:none;display:flex;flex-direction:column;gap:0}
.bill li{display:flex;align-items:center;gap:12px;background:var(--lm-cream);color:#2a0910;padding:14px 12px;border-bottom:2px dashed rgba(80,11,25,.45)}
.bill li:first-child{border-radius:12px 12px 0 0}.bill li:last-child{border-radius:0 0 12px 12px;border-bottom:0}
.dt{flex:none;width:44px;text-align:center}.dt i{display:block;font:700 .72rem/1 var(--lm-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--lm-red)}.dt b{display:block;font:700 1.9rem/1 var(--lm-serif);font-feature-settings:'lnum'}
.bn{flex:1;min-width:0;font:700 1.16rem/1.12 var(--lm-serif)}.bn small{display:block;font:500 .82rem/1.2 var(--lm-sans);margin-top:3px}

/* The last shot: him, the band behind him, the buy button, nothing else */
.end{position:relative;z-index:1;min-height:100vh;min-height:100lvh;display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--lm-gut) + 44px) var(--lm-gut) 22px;background:linear-gradient(180deg,rgba(13,7,8,0) 0%,rgba(13,7,8,.5) 8%,rgba(13,7,8,0) 30%,rgba(13,7,8,0) 84%,rgba(13,7,8,.6) 100%)}
.end h2{font:700 clamp(4rem,19.5vw,7rem)/.9 var(--lm-serif);letter-spacing:-.02em;text-shadow:0 3px 26px rgba(0,0,0,.65)}
.end h2 span{display:block;font-style:italic;color:var(--lm-gold);font-size:.68em;line-height:1.05;margin-top:.04em}
.foot{position:relative;z-index:1;background:var(--lm-bg);padding:16px var(--lm-gut) 20px}
.tl{font:500 .76rem/1.4 var(--lm-sans);color:#cdbba2}

/* The small control */
.ctl{position:fixed;z-index:5;right:10px;top:var(--lm-ctl-top,10px);display:flex;align-items:stretch;background:rgba(13,7,8,.74);border:1px solid rgba(231,189,101,.7);border-radius:99px;overflow:hidden}
.ctl button{display:flex;align-items:center;gap:6px;min-width:44px;min-height:44px;padding:0 11px;justify-content:center;color:var(--lm-ink);font:600 .8rem var(--lm-sans)}
.ctl button+button{border-left:1px solid rgba(231,189,101,.35)}
.ctl .lbl:empty{display:none}
.ctl.ask{background:var(--lm-gold);border-color:var(--lm-gold)}.ctl.ask button{color:#2a0910}
.ic{display:block;width:18px;height:18px;background:currentColor;-webkit-mask:var(--lm-m) center/contain no-repeat;mask:var(--lm-m) center/contain no-repeat}
.ic-snd{--lm-m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9z'/%3E%3Cpath d='M15 8a5 5 0 0 1 0 8M17.5 5a9 9 0 0 1 0 14' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E")}
.ctl.silent .ic-snd{--lm-m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9z'/%3E%3Cpath d='M15 9l6 6M21 9l-6 6' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E")}
.ic-pause{--lm-m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4h4v16H6zM14 4h4v16h-4z'/%3E%3C/svg%3E")}
.ic-play{--lm-m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4l13 8-13 8z'/%3E%3C/svg%3E")}
/* What he is saying, when you have scrolled on ahead of him */

@media(prefers-reduced-motion:reduce){.ln.lit,.hole video.on{animation:none}.more-arrow{animation:none}}

/* Short phones */
@media(max-height:700px) and (orientation:portrait){.hear{min-height:58px;padding:6px 14px}.hear b{font-size:1.22rem}.hear small{font-size:.8rem}.lm-hero h1{font-size:2.6rem}.lm-hero h1 span{font-size:1.35rem}.stub{margin-top:8px;padding:9px 12px 10px}.stub-n{font-size:1.14rem}.stub-w{margin:6px 0 7px;font-size:.78rem}.buy{min-height:48px;font-size:1.12rem}.sheet-k{margin-bottom:12px;font-size:.92rem}.bill li{padding:9px 10px}.sheet{padding-top:24px;padding-bottom:24px}.sheet h2{font-size:2.6rem}}

/* Desktop: one tall video on the right, the words beside it */
@media(orientation:landscape){
 :root{--lm-col:calc(100lvh*.5625);--lm-side:max(40px,5vw)}
 .frame{left:auto;right:var(--lm-side);width:var(--lm-col);background:var(--lm-bg)}
 .stage{background:var(--lm-bg)}
 .shade{background:linear-gradient(180deg,rgba(13,7,8,0) 70%,rgba(13,7,8,.35) 100%)!important}
 .words{left:0;right:calc(var(--lm-col) + var(--lm-side)*2)}
 .beat{padding:40px 0 48px var(--lm-side);justify-content:center;align-items:flex-start;text-align:left}
 .who{font-size:1rem!important;max-width:34em}
 .shout p{font-size:clamp(3.4rem,6.6vw,6.8rem)}
 .b-nmh{align-items:flex-start;text-align:left}.b-nmh p{transform-origin:0 50%}
 .lm-hero{padding:24px calc(var(--lm-col) + var(--lm-side)*2) 18px var(--lm-side)}
 .hear{max-width:460px}
 .lm-hero h1{font-size:clamp(3.8rem,6.6vw,6.6rem)}
 .lm-hero h1 span{font-size:clamp(2rem,3.1vw,3.1rem)}
 .stub{max-width:560px}
 .end{padding:40px calc(var(--lm-col) + var(--lm-side)*2) 40px var(--lm-side);background:none;justify-content:center;gap:28px}
 .end h2{font-size:clamp(4.4rem,8vw,8rem)}
 .foot{padding:18px var(--lm-side) 22px}
 .sheet{padding:50px var(--lm-side)}
 .sheet h2{font-size:clamp(3.4rem,5.4vw,5.4rem)}
 .bill li{padding:16px 18px}.bn{font-size:1.4rem}
}

/* A phone on its side */
@media(orientation:landscape) and (max-height:500px){
 .beat{padding-top:10px;padding-bottom:10px}
 .beat p{font-size:7.4vh}.beat .big,.b-e .gold{font-size:13vh}.b-e .big{font-size:10vh}.b-f .big{font-size:18vh}
 .shout p{font-size:14vh}
}

/* Frankie's words: one place, on every screen */
.beat.say{justify-content:flex-start;padding:var(--lm-cap,134px) 100px 0 var(--lm-gut);gap:.12em;transform:none}
.beat.say p{font:500 clamp(1.45rem,6.6vw,2.3rem)/1.16 var(--lm-serif);text-wrap:balance}
.beat.say .big{font:700 clamp(1.45rem,6.6vw,2.3rem)/1.16 var(--lm-serif);letter-spacing:0}
.beat.say .gold,.beat.say .name b{color:var(--lm-gold)}
.beat.say .name b{font-weight:700}
.beat.say .who{font:500 .8rem/1.3 var(--lm-sans)!important}
.b-f .big{font-style:italic;color:var(--lm-gold)}
.beat.say.b-g .no,.beat.say.b-g .good{font:700 clamp(3.4rem,17vw,8rem)/.92 var(--lm-serif);letter-spacing:-.02em;color:var(--lm-gold)}
.shade.both{background:linear-gradient(180deg,rgba(13,7,8,.7) 0%,rgba(13,7,8,.48) 26%,rgba(13,7,8,.04) 40%,rgba(13,7,8,.3) 56%,rgba(13,7,8,.85) 100%)}
/* Clips dissolve into each other: the new one fades in over the old, which waits underneath until it is covered */
.hole video{transition:opacity 0s linear .7s,visibility 0s linear .7s}
.hole video.on{z-index:1;animation:none;transition:opacity .7s ease}
/* The big lines hold still */
.shout .ln.lit{transform:rotate(-4deg)}
.beat.shout{transform:none}
.shout .ln.lit{animation:fadein .4s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
/* After his last line: the one scroll cue, big and plain. It sits in the first screen's own column above the title, so it never lands on other words, and it goes once the reader scrolls. */
.more{display:none;align-items:center;gap:.4em;margin:0 0 .5em;font:700 clamp(2.3rem,10.6vw,4.6rem)/1 var(--lm-serif);color:var(--lm-gold);text-shadow:0 3px 24px rgba(0,0,0,.9);pointer-events:none}
.more.on{display:flex;animation:fadein .5s ease}
.more-arrow{flex:none;width:.42em;height:.42em;margin-top:-.2em;border:solid currentColor;border-width:0 .1em .1em 0;transform:rotate(45deg);animation:bob 1.15s ease-in-out infinite}
/* The play button on paused video */
.play-big{position:fixed;z-index:5;left:50%;top:50%;width:92px;height:92px;margin:-46px 0 0 -46px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:2px solid var(--lm-gold);background:rgba(13,7,8,.72);color:var(--lm-gold)}
.play-big[hidden]{display:none}
.play-big .ic{width:40px;height:40px;margin-left:4px}
@media(max-height:700px) and (orientation:portrait){.more{font-size:2.4rem}}
@media(orientation:landscape){
 .more{font-size:clamp(3rem,5.6vw,5.6rem)}
 .play-big{left:auto;right:calc(var(--lm-side) + var(--lm-col)/2 - 46px);margin-left:0}
}
/* The film swings open like a door, with the light of the room around its edge and the floor right behind it */
.hole{perspective:1500px;perspective-origin:50% 46%;will-change:auto}
.hole video.thru{opacity:1;visibility:visible;z-index:1}
.hole video.swing{z-index:2;transform-origin:0 50%;box-shadow:0 0 70px 14px rgba(255,214,140,.55)}
/* First screen */
/* Tap for sound (Ron, 2026-11-05: the page only works with sound). One big button over the title, a speaker in a gold circle that pulses until the sound is on. */
:where(#film) .hero-low .hear{width:100%;min-height:66px;padding:8px 16px 8px 10px;margin-bottom:12px;gap:14px;animation:lm-glow 1.8s ease-in-out infinite}
:where(#film) .hear b{font-size:1.32rem}
:where(#film) .hear small{font-size:.9rem;margin-top:3px}
:where(#film) .hear-ic{position:relative;flex:none;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--lm-gold);color:#2a0910}
:where(#film) .hear-ic .ic{width:26px;height:26px}
:where(#film) .hear-ic::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--lm-gold);animation:lm-ring 1.8s ease-out infinite;pointer-events:none}
@keyframes lm-ring{from{transform:scale(1);opacity:.9}to{transform:scale(1.7);opacity:0}}
@keyframes lm-glow{0%,100%{box-shadow:0 8px 30px rgba(0,0,0,.45),0 0 0 0 rgba(231,189,101,0)}50%{box-shadow:0 8px 30px rgba(0,0,0,.45),0 0 0 6px rgba(231,189,101,.3)}}
@media(prefers-reduced-motion:reduce){:where(#film) .hero-low .hear,:where(#film) .hear-ic::after{animation:none}}
/* Once it plays: a short line in its place, then the pill at the top keeps the mute */
:where(#film) .hear-on{margin:0 0 12px;padding:10px 14px;border-left:3px solid var(--lm-gold);border-radius:8px;background:rgba(13,7,8,.74);font:500 .95rem/1.35 var(--lm-sans);color:var(--lm-ink);transition:opacity .5s}
:where(#film) .hear-on b{color:var(--lm-gold);font-weight:700}
:where(#film) .hear-on.gone{opacity:0}
/* Until the sound is on, the whole opening film is the button */
:where(html.lm-ask) :where(#film) .stage{cursor:pointer}
.lm-hero h1{font-size:clamp(2.4rem,11.4vw,3.8rem)}
.lm-hero h1 span{font-size:clamp(1.25rem,5.8vw,2rem)}
/* The big lines stay low, so his words can run above them */
.b-nmh{justify-content:flex-end;align-items:flex-start;text-align:left;padding-bottom:calc(var(--lm-gut) + 90px);padding-top:0}
.b-nmh p{transform-origin:0 50%}
/* Never danced? Holds still on the stage. */
.b-shim{justify-content:flex-end;gap:0;padding-bottom:calc(var(--lm-gut) + 18px)}
.b-shim .nb1{font:500 clamp(1.5rem,6.8vw,2.4rem)/1.13 var(--lm-serif)}
.b-shim .nb2{font:700 clamp(3.1rem,15vw,5.4rem)/1.02 var(--lm-serif);letter-spacing:-.015em;color:var(--lm-gold)}
.b-shim .nb3{font:500 1rem/1.36 var(--lm-sans);margin-top:.5em}
.b-lindy .nb2 a{color:inherit;text-decoration:underline;text-decoration-thickness:.05em;text-underline-offset:.08em;pointer-events:auto}
.b-lindy .nb2{font-size:clamp(2.5rem,12vw,5rem)}
.end{min-height:calc(100svh - var(--lm-foot,74px))}
/* The small gold ticket on each date */
.tk{flex:none;display:flex;align-items:center;justify-content:center;width:88px;min-height:50px;padding:6px 12px;background:var(--lm-gold);color:#2a0910;border-radius:7px;font:700 .86rem/1.1 var(--lm-sans);text-align:center;text-decoration:none;-webkit-mask:radial-gradient(circle 5px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 5px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 5px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 5px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat}
.end .stub{margin-top:auto}
.end h2{font-size:clamp(2.7rem,13vw,5rem)}
@media(max-height:700px) and (orientation:portrait){:where(#film) .hero-low .hear{min-height:52px;margin-bottom:8px;padding:5px 12px 5px 8px;gap:10px}:where(#film) .hear b{font-size:1.12rem}:where(#film) .hear small{font-size:.76rem;margin-top:1px}:where(#film) .hear-ic{width:38px;height:38px}:where(#film) .hear-ic .ic{width:21px;height:21px}:where(#film) .hear-on{margin-bottom:8px;padding:7px 12px;font-size:.84rem}.lm-hero h1{font-size:2rem}.lm-hero h1 span{font-size:1.1rem}.beat.say p,.beat.say .big{font-size:1.25rem}.beat.say.b-c{gap:0}.beat.say.b-c p{font-size:1.12rem;line-height:1.1}.beat.say .who{display:none}.b-shim .nb2{font-size:2.6rem}.b-shim .nb3{font-size:.9rem}}
@media(orientation:landscape){
 .beat.say{padding:var(--lm-cap,120px) 40px 0 var(--lm-side);justify-content:flex-start}
 .beat.say .who{display:block}
 .beat.say p,.beat.say .big{font-size:clamp(2rem,3.1vw,3.1rem)}
 .beat.say.b-g .no,.beat.say.b-g .good{font-size:clamp(5rem,9vw,9rem)}
 .b-nmh{justify-content:center;padding:40px 0 48px var(--lm-side)}
 .b-shim{padding:40px 40px 48px var(--lm-side);justify-content:center}
 .b-shim .nb1{font-size:clamp(1.8rem,2.9vw,2.8rem)}.b-shim .nb2{font-size:clamp(4rem,7vw,7rem)}.b-shim .nb3{max-width:32em;font-size:1.12rem}
 .b-lindy .nb2{font-size:clamp(3rem,5vw,5rem)}
 .lm-hero h1{font-size:clamp(3rem,5vw,5rem)}.lm-hero h1 span{font-size:clamp(1.6rem,2.4vw,2.4rem)}
 .tk{width:104px;font-size:.92rem}
 .end{justify-content:flex-start}
 .end .stub{margin-top:28px;width:100%}
}
/* The site styles a bare footer. On this page it only holds the taglines. */
body[data-page] main footer{margin:0;padding:0;border:0;background:none;color:inherit}
.tl a{color:inherit}
/* One layer at a time (Ron, 2026-11-06: "This page gets way too busy on mobile"). public/live-music.js sets the classes on <html>.
   lm-nocard: the Tap for sound button has given way to the pill (the sound is on, he has finished, or the reader has scrolled on). Only one shows at a time.
   lm-told: he has finished, so the line that confirmed the sound goes too. lm-say: his words are on screen, so the pill keeps to its icons. */
html.lm-nocard :where(#film) .hear,html.lm-told :where(#film) .hear-on,html.lm-told :where(#film) .fail{display:none}
@keyframes lm-late{from{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}
@media(orientation:portrait){
 .lm-hero h1{animation:lm-late .6s ease 50s both}
 html.lm-talk .lm-hero h1{animation:none;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;opacity:0}
 html.lm-talk .lm-hero .stub{animation:none;display:block;opacity:1;visibility:visible}
 html.lm-told .lm-hero h1,html.lm-told .lm-hero .stub{animation:fadein .6s ease;opacity:1;visibility:visible}
 /* His words keep clear of the pill at the top right */
 .beat.say{padding-right:108px}
 html.lm-say .ctl:not(.ask) .lbl{display:none}
}
@media(orientation:landscape){
 /* When his words follow the reader down the page, the big lines drop to the foot of the screen, below them */
 html.lm-say .beat.shout,html.lm-say .beat.b-shim{justify-content:flex-end}
}
/* Phones (Ron, 2026-11-06: "I think most of the text is too big on mobile for it all to fit"). Calmer type so each screen breathes. Wide screens are unchanged. */
@media(orientation:portrait) and (max-width:480px){
 .beat.say p,.beat.say .big{font-size:1.5rem;line-height:1.2}
 .more{font-size:1.375rem;gap:.5em;margin-bottom:.7em}
 .more-arrow{border-width:0 .14em .14em 0}
 .lm-hero h1{font-size:2.2rem;line-height:1}
 .lm-hero h1 span{font-size:1.2rem;margin-top:.15em}
 .shout p{font-size:2.4rem;line-height:1.02}
 .b-shim .nb1{font-size:1.25rem}
 .b-shim .nb2{font-size:2.25rem}
 .b-shim .nb3{font-size:.95rem}
 .b-lindy .nb2{font-size:2rem}
 .sheet h2{font-size:2.25rem}
 .end h2{font-size:2.4rem}
}
@media(orientation:portrait) and (max-width:480px) and (max-height:700px){
 .beat.say p,.beat.say .big{font-size:1.3rem}
 .beat.say.b-c p{font-size:1.15rem}
 .lm-hero h1{font-size:2rem}
 .lm-hero h1 span{font-size:1.1rem}
}

@media(orientation:portrait){:where(#film) .hero-low .hear{position:absolute;top:12px;right:16px;width:auto;max-width:190px;min-height:56px;height:56px;padding:5px 10px;gap:7px;margin:0;border-radius:999px;animation:lm-glow 1.8s ease-in-out infinite}:where(#film) .hear b{font-size:.8rem;line-height:1}:where(#film) .hear small{display:none}:where(#film) .hear-ic{width:24px;height:24px}:where(#film) .hear-ic .ic{width:18px;height:18px}:where(#film) .hear-ic::after{display:none}:where(#film) .hear-on{position:absolute;right:16px;top:58px;max-width:250px;padding:6px 10px;font-size:.75rem}}

@media(orientation:portrait){.beat.say{padding-top:calc(var(--lm-cap,134px) + 64px)}}