/* This is Lindy Hop (/this-is-lindy-hop): the Midtown Stomp story page. Light document: tools/lindy-page/build.mjs writes the HTML,
   public/lindy-page.js runs the clips and the scroll fallback. Scroll effects animate transform and opacity only, driven by one number per
   section, --p (0 to 1): a CSS scroll-driven animation where the browser has them, otherwise the page script sets it. Brand colours:
   Midtown red #a00826, warm gold #e7bd65, deep red #500b19 (docs/brand-rules.md). */
@property --p{syntax:'<number>';inherits:true;initial-value:0}
.lh{--lh-bg:#120b0c;--lh-bg2:#1c1012;--lh-panel:rgba(18,11,12,.9);--lh-ink:#f8f0e3;--lh-soft:#d9cbb6;--lh-gold:#e7bd65;--lh-red:#a00826;--lh-deep:#500b19;
 --lh-gut:16px;background:var(--lh-bg);color:var(--lh-ink);font-family:var(--sans);overflow-x:clip;position:relative}
.lh *{box-sizing:border-box}
.lh h1,.lh h2,.lh h3{font-family:var(--serif);font-weight:700;color:var(--lh-ink);margin:0}
.lh h2{font-size:clamp(2.2rem,6vw,4.6rem);line-height:1.02;letter-spacing:-.01em}
.lh h3{font-size:clamp(1.3rem,2.4vw,1.8rem);line-height:1.15;margin-bottom:.5em}
.lh p{font-size:clamp(1.02rem,1.3vw,1.18rem);line-height:1.65;margin:0 0 1em;color:var(--lh-ink)}
.lh a{color:var(--lh-gold)}
.lh a:focus-visible,.lh button:focus-visible{outline:3px solid var(--lh-gold);outline-offset:3px}
.lh-wrap{width:min(1120px,calc(100% - 2*var(--lh-gut)));margin-inline:auto}
.lh-eyebrow{font-family:var(--sans);font-size:.82rem!important;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--lh-gold)!important;margin:0 0 .9em!important}
.lh-chapter{position:relative;padding:0}
.lh-intro{padding-block:12vh 4vh}
.lh-intro p{max-width:62ch}
.lh-lead{font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,2.6vw,2rem)!important;color:var(--lh-gold)!important}

/* Clips: a poster image under a muted video that fades in once it plays. */
.lh-media{position:relative;overflow:hidden;background:#000}
/* Scroll anchoring never picks a pinned or moving box (the sticky stages, the clips, the YouTube frame) as the point it holds still. */
.lh-media,.lh-stage,.lh-tall,.lh-draw,.lh-map,.lh-yt{overflow-anchor:none}
.lh-media img,.lh-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 50%);display:block}
.lh-contain img,.lh-contain video{object-fit:contain}
.lh-video{opacity:0;transition:opacity .5s ease}
.lh-video.is-playing{opacity:1}
.lh-tag{position:absolute;left:var(--lh-gut);bottom:var(--lh-gut);z-index:2;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:rgba(18,11,12,.82);color:var(--lh-ink);padding:.45em .75em;border-left:3px solid var(--lh-gold)}

/* 1. Opening */
.lh-hero{position:relative;height:max(480px,calc(100svh - var(--lh-head,0px)));display:grid;align-items:end;isolation:isolate}
.lh-hero>.lh-media{position:absolute;inset:0;z-index:-2;opacity:calc(1 - var(--p)*.55)}
.lh-hero::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(18,11,12,.15) 0%,rgba(18,11,12,0) 30%,rgba(18,11,12,.35) 58%,rgba(18,11,12,.92) 100%)}
.lh-hero-copy{width:min(1180px,calc(100% - 2*var(--lh-gut)));margin:0 auto;padding-bottom:clamp(88px,15vh,160px);transform:translateY(calc(var(--p)*-22vh));opacity:calc(1 - var(--p)*1.7);will-change:transform,opacity}
.lh-hero h1{font-size:clamp(3.3rem,13vw,10rem);line-height:.88;letter-spacing:-.02em;text-shadow:0 4px 30px rgba(0,0,0,.45);margin-bottom:.18em}
.lh-hype{font-size:clamp(1.15rem,2.2vw,1.6rem)!important;line-height:1.4!important;max-width:34ch;font-weight:500;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.lh-cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--lh-ink)!important;text-decoration:none;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;opacity:calc(1 - var(--p)*4)}
.lh-cue-line{width:2px;height:38px;background:linear-gradient(var(--lh-gold),transparent);transform-origin:top;animation:lh-cue 1.8s ease-in-out infinite}
@keyframes lh-cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* 2. Born in Harlem: the 1929 film stays while the story scrolls over it, then dissolves into today's floor. */
.lh-stage-track{position:relative}
.lh-stage{position:sticky;top:0;height:100svh;overflow:hidden;background:#000}
.lh-layer{position:absolute;inset:0}
.lh-layer .lh-media{position:absolute;inset:0}
.lh-then{opacity:clamp(0,calc((.8 - var(--p))*6),1)}
.lh-now{opacity:clamp(0,calc((var(--p) - .64)*6),1)}
.lh-year{position:absolute;right:var(--lh-gut);top:clamp(16px,4vh,40px);font-family:var(--serif);font-weight:700;font-size:clamp(3rem,10vw,8rem);line-height:1;color:var(--lh-gold);text-shadow:0 4px 24px rgba(0,0,0,.7);display:grid}
.lh-year span{grid-area:1/1;text-align:right}
.lh-y-then{opacity:clamp(0,calc((.74 - var(--p))*8),1)}
.lh-y-now{opacity:clamp(0,calc((var(--p) - .7)*8),1)}
.lh-beats{position:relative;z-index:2;margin-top:-100svh;padding-bottom:30svh}
.lh-beat{min-height:85svh;display:flex;flex-direction:column;justify-content:center;width:min(500px,calc(100% - 2*var(--lh-gut)));margin-left:max(var(--lh-gut),6vw)}
.lh-beat>*{background:var(--lh-panel);padding:22px 24px;margin:0}
.lh-beat h3{padding-bottom:0;border-left:3px solid var(--lh-gold);color:var(--lh-gold)}
.lh-beat p{border-left:3px solid var(--lh-gold)}
.lh-beat-title{min-height:70svh;justify-content:flex-end}
.lh-beat-title>*{background:none;padding:0;border:0}
.lh-beat-title h2{font-size:clamp(2.8rem,9vw,6.5rem);text-shadow:0 4px 30px rgba(0,0,0,.8)}
.lh-after-stage{padding-block:8vh 4vh}
.lh-context{font-size:.98rem!important;color:var(--lh-soft)!important;border-left:3px solid var(--lh-red);padding-left:14px;max-width:70ch}

/* Longer clips: poster and a play button; the script puts the player in when pressed. */
.lh-clip{margin:28px 0 0}
.lh-clip-stage{position:relative;width:100%;max-height:80svh;background:#000;overflow:hidden}
.lh-clip-stage>.lh-media{position:absolute;inset:0}
.lh-clip-stage video.lh-player{position:absolute;inset:0;width:100%;height:100%;background:#000}
.lh-clip figcaption,.lh-film figcaption,.lh-band figcaption{font-size:.92rem;color:var(--lh-soft);line-height:1.5;margin-top:10px}
.lh-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:16px;border:0;background:linear-gradient(0deg,rgba(18,11,12,.55),rgba(18,11,12,.15));color:var(--lh-ink);font:700 clamp(1rem,2vw,1.3rem)/1.2 var(--sans);cursor:pointer;text-align:left}
.lh-play small{display:block;font-weight:500;font-size:.85em;color:var(--lh-soft);margin-top:4px}
.lh-play-icon{width:64px;height:64px;border-radius:50%;background:var(--lh-gold);flex:none;position:relative;box-shadow:0 6px 24px rgba(0,0,0,.45);transition:transform .2s}
.lh-play-icon::after{content:'';position:absolute;left:26px;top:20px;border-style:solid;border-width:12px 0 12px 19px;border-color:transparent transparent transparent var(--lh-bg)}
.lh-play:hover .lh-play-icon,.lh-yt-btn:hover .lh-play-icon{transform:scale(1.08)}
/* Sound: "Watch with sound" over the 1929 loop, and the Mute button under a clip that plays with sound. */
.lh-beat .lh-sound{padding-top:0}
.lh-beat-title .lh-sound{margin-top:20px}
.lh-hero-sound{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:4px 0 0}
.lh-sound-note{font-size:.95rem;font-weight:600;color:var(--lh-ink);text-shadow:0 2px 10px rgba(0,0,0,.75)}
.lh-sound-btn{gap:10px;cursor:pointer;font:700 1rem var(--sans)}
.lh-sound-icon{width:18px;height:18px;flex:none;background:currentColor;clip-path:polygon(0 32%,28% 32%,62% 0,62% 100%,28% 68%,0 68%);position:relative}
/* The row under a clip with sound is held open from the start (build.mjs), so the Mute button arrives without moving the caption. */
.lh-mute-slot{min-height:54px}
.lh-mute{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;padding:8px 18px;border-radius:999px;border:2px solid var(--lh-gold);background:transparent;color:var(--lh-ink);font:700 .95rem var(--sans);cursor:pointer}
.lh-mute:hover{background:rgba(231,189,101,.15)}

/* Split sections: a tall vertical clip in a sticky column beside the words (desktop); on phones the clip is full-bleed and the words
   scroll up over it. */
.lh-split{display:grid;grid-template-columns:minmax(300px,36vw) minmax(0,1fr);align-items:start}
.lh-split-right{grid-template-columns:minmax(0,1fr) minmax(300px,36vw)}
.lh-split-right>.lh-tall{order:2}
.lh-tall{position:sticky;top:0;height:100svh}
.lh-tall>.lh-media{position:absolute;inset:0}
.lh-tall-title{display:none}
.lh-split-copy{padding:0 clamp(20px,5vw,80px) 10vh;min-width:0}

/* 3. The swingout: the path draws as you scroll */
.lh-draw-track{position:relative;height:240svh}
.lh-draw{position:sticky;top:6svh;padding:3svh 0}
.lh-swing-svg{width:100%;height:auto;max-height:46svh;display:block;overflow:visible}
.lh-slot{stroke:rgba(248,240,227,.18);stroke-width:2;stroke-dasharray:6 10;fill:none}
.lh-follow{fill:none;stroke:var(--lh-gold);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--p))}
.lh-lead{fill:none;stroke:#e2405a;stroke-width:6;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:calc(1 - clamp(0,calc((var(--p) - .25)*2),1))}
.lh-dot-follow{fill:var(--lh-gold)}.lh-dot-lead{fill:#e2405a}
.lh-count{font:700 26px var(--sans);fill:var(--lh-ink);text-anchor:middle;opacity:clamp(.12,calc((var(--p) - var(--i)*.125)*10),1)}
.lh-draw-tag{font-family:var(--serif);font-style:italic;color:var(--lh-gold)!important;font-size:clamp(1.1rem,1.8vw,1.4rem)!important;margin:8px 0 14px!important}
.lh-counts-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lh-counts-list li{display:grid;grid-template-columns:4.2em 1fr;gap:4px 12px;align-items:baseline;font-size:clamp(.98rem,1.2vw,1.08rem);line-height:1.5;padding:8px 12px;border-left:3px solid transparent;
 opacity:clamp(.62,calc((var(--p)*4 - var(--i))*3),1);background:rgba(248,240,227,calc(.06*clamp(0,calc(1 - (var(--p)*4 - var(--i) - .5)*(var(--p)*4 - var(--i) - .5)*4),1)))}
.lh-counts-list li strong{color:var(--lh-gold)}
.lh-n{font:700 1.05rem var(--sans);color:var(--lh-gold);grid-row:span 2}

/* 4. Air steps and Hollywood */
.lh-words{display:flex;flex-direction:column;margin:2vh 0 6vh!important;line-height:.95!important}
.lh-words span{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(3.2rem,12vw,9.5rem);color:var(--lh-ink)}
.lh-words span:nth-child(2){color:var(--lh-gold);align-self:flex-end}
.lh-words span:nth-child(3){color:#e2405a}
.lh-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);margin-bottom:6vh}
.lh-film{margin:0 0 12vh}
/* One shape before and after play: the frame takes the facade's box (YouTube letterboxes inside it), so pressing play moves nothing. */
.lh-yt{position:relative;aspect-ratio:4/3;max-height:78svh;width:100%;max-width:960px;background:#000;overflow:hidden}
.lh-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lh-yt-link,.lh-yt-btn{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:10px;padding:clamp(18px,4vw,48px);border:0;cursor:pointer;text-align:left;text-decoration:none;color:var(--lh-ink)!important;font:inherit;
 background:radial-gradient(ellipse at 70% 30%,rgba(231,189,101,.22),transparent 55%),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 7px),linear-gradient(160deg,#2a2224,#0b0809)}
.lh-yt-btn{display:none}
.lh-js .lh-yt-btn{display:flex}
.lh-js .lh-yt-link{display:none}
.lh-yt-title{font-family:var(--serif);font-weight:700;font-size:clamp(2rem,5vw,3.6rem);line-height:1}
.lh-yt-sub{max-width:40ch;color:var(--lh-soft);font-size:clamp(.98rem,1.4vw,1.15rem);line-height:1.5}
.lh-yt .lh-play-icon{position:absolute;right:clamp(18px,4vw,48px);top:clamp(18px,4vw,48px)}
.lh-yt-kicker{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lh-gold)}
/* A 16:9 video (Jean Veloz at Lindyfest) is 16:9 from the start on wider screens; on a phone it keeps the 4:3 box so the words fit. */
@media (min-width:700px){.lh-yt-wide{aspect-ratio:16/9}}

/* 4b. West to Hollywood: a rail beside the four beats draws as the chapter scrolls (--p, transform only); then Groovie Movie, the featured film,
   and the closing card with Jean Veloz at Lindyfest. Both films are the YouTube facade above. */
.lh-la-beats{position:relative;margin:0 0 6vh;padding-left:clamp(28px,6vw,84px)}
.lh-la-beats::before,.lh-la-beats::after{content:'';position:absolute;left:6px;top:0;bottom:0;width:3px}
.lh-la-beats::before{background:rgba(248,240,227,.16)}
.lh-la-beats::after{background:linear-gradient(var(--lh-gold),var(--lh-red));transform-origin:top;transform:scaleY(var(--p))}
.lh-la-beat{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(16px,4vw,64px);align-items:start;padding-block:clamp(28px,6vh,64px);border-bottom:1px solid rgba(231,189,101,.18)}
.lh-la-beat:last-child{border-bottom:0}
.lh-la-beat::before{content:'';position:absolute;left:calc(clamp(28px,6vw,84px)*-1 + 1px);top:calc(clamp(28px,6vh,64px) + .5em);width:13px;height:13px;border-radius:50%;background:var(--lh-gold);box-shadow:0 0 0 5px var(--lh-bg)}
.lh-la-beat h3{font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:1.04;margin:0;color:var(--lh-gold)}
.lh-la-beat p{margin:0;max-width:60ch}
.lh-la-film{margin:0 auto 10vh;width:min(860px,100%)}
.lh-la-video{margin:1.6em 0 0;width:min(760px,100%)}
.lh-la-forward{margin:0 0 14vh;padding:clamp(22px,4vw,44px);background:var(--lh-bg2);border:1px solid rgba(231,189,101,.35);border-top:5px solid var(--lh-gold)}
.lh-la-forward h3{font-size:clamp(1.7rem,3.4vw,2.6rem);margin-bottom:.6em}
.lh-la-forward p{max-width:64ch}

/* 5. Thriving: a dotted world map that lights up as you scroll (tools/lindy-page/worldmap.mjs). Every dot and name carries its own moment
   in the scroll (--t) and every name how long it stays (--w); these few rules turn --p into the waves. The name positions and windows are
   chosen at build time so names on screen together never overlap each other or a lit dot. */
.lh-map-track{position:relative;height:250svh}
.lh-map{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:2vh;padding:4svh var(--lh-gut);overflow:hidden}
.lh-map-svg{width:min(1400px,100%);max-height:72svh;height:auto;margin:0 auto;display:block;overflow:visible}
.lh-land{fill:none;stroke:rgba(248,240,227,.26);stroke-width:5.2;stroke-linecap:round}
.lh-pin{fill:var(--lh-gold);opacity:clamp(0,calc((var(--p) - var(--t))*60),1);transform-box:fill-box;transform-origin:center;transform:scale(calc(var(--pin,1)*clamp(1,calc(2.6 - (var(--p) - var(--t))*80),2.6)))}
.lh-pin.lh-key{fill:#fff3d6}
.lh-pin.lh-home{fill:#ff3b5c}
.lh-name{font-family:var(--sans);font-weight:700;fill:var(--lh-ink);paint-order:stroke;stroke:var(--lh-bg);stroke-width:6px;stroke-linejoin:round;
 opacity:clamp(0,calc(min(var(--p) - var(--t),var(--t) + var(--w) - var(--p))*200),1)}
/* Two sets of names (tools/lindy-page/worldmap.mjs): the wide map's, and larger ones for the whole world on a phone. */
.lh-names-phone{display:none}
.lh-name.lh-home{fill:#ff8a9e}
.lh-ring-at{opacity:clamp(0,calc((var(--p) - var(--t))*30),1)}
.lh-map-list-title,.lh-map-list{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lh-ring{fill:none;stroke:#ff3b5c;stroke-width:3;transform-box:fill-box;transform-origin:center;animation:lh-ring 2s ease-out infinite}
@keyframes lh-ring{from{transform:scale(.6);opacity:1}to{transform:scale(2.6);opacity:0}}
.lh-map-captions{display:grid;text-align:center;min-height:3.4em}
.lh-map-cap{grid-area:1/1;margin:0!important;font-family:var(--serif);font-size:clamp(1.3rem,2.8vw,2.2rem)!important;line-height:1.25!important;
 opacity:clamp(0,calc(min(var(--p) - var(--a),var(--b) - var(--p))*16),1)}
.lh-map-cap .lh-when{display:block;font-family:var(--sans);font-size:.5em;letter-spacing:.18em;text-transform:uppercase;color:var(--lh-gold)}
.lh-map{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,24vw);align-items:center;gap:clamp(16px,3vw,40px)}
.lh-map-main{display:flex;flex-direction:column;gap:2vh;min-width:0}
.lh-shim{position:relative;margin:0;background:#000;overflow:hidden}
.lh-shim .lh-media{position:absolute;inset:0}
.lh-shim figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 16px 16px;background:linear-gradient(transparent,rgba(18,11,12,.9));font-size:.95rem;line-height:1.45;color:var(--lh-ink)}
.lh-shim figcaption strong{display:block;font-family:var(--serif);font-size:1.6rem;color:var(--lh-gold)}
.lh-shim-side{height:min(86svh,calc(24vw*16/9));aspect-ratio:9/16;justify-self:end;opacity:clamp(0,calc((var(--p) - .12)*6),1);transform:translateY(calc((1 - clamp(0,calc((var(--p) - .12)*6),1))*40px))}
.lh-shim-beat{display:none}
.lh-big{font-family:var(--serif);font-size:clamp(1.5rem,3.2vw,2.6rem)!important;line-height:1.3!important;padding-block:6vh 14vh;max-width:30ch}

/* 6. Lindy in Sacramento */
.lh-row{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:center;gap:clamp(10px,1.4vw,20px);padding:0 var(--lh-gut);max-width:1400px;margin:0 auto 8vh}
.lh-row-item{position:relative;margin:0;aspect-ratio:9/16;max-height:84svh;background:#000;overflow:hidden}
.lh-row-item .lh-media{position:absolute;inset:0}
.lh-row-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 16px 16px;background:linear-gradient(transparent,rgba(18,11,12,.88));font-family:var(--serif);font-weight:700;font-size:clamp(1.2rem,2.2vw,1.9rem);color:var(--lh-ink)}
.lh-row-main{max-height:92svh}
/* One clip at a time when the row is side by side (public/lindy-page.js): a dim layer over the others and only the playing clip's word lit.
   Colour, opacity and a small transform only, so no box ever changes size. */
.lh-seq .lh-row-item::after{content:'';position:absolute;inset:0;z-index:1;background:#0b0809;opacity:0;pointer-events:none;transition:opacity .5s ease}
.lh-seq.has-on .lh-row-item:not(.is-on)::after{opacity:.5}
.lh-seq .lh-row-item figcaption{z-index:2;pointer-events:none;transition:color .5s ease,transform .5s ease}
.lh-seq.has-on .lh-row-item:not(.is-on) figcaption{color:rgba(248,240,227,.72);transform:translateY(6px)}
.lh-seq .lh-row-item.is-on figcaption{color:var(--lh-gold)}
.lh-sac-more{padding-bottom:6vh}
.lh-band{margin:0 0 4vh}
.lh-band .lh-media{aspect-ratio:16/9}

/* 7. Your first step */
.lh-first .lh-split-copy{padding-bottom:12vh}
.lh-cards{display:grid;gap:20px}
.lh-card{background:var(--lh-bg2);border:1px solid rgba(231,189,101,.35);border-top:5px solid var(--lh-gold);padding:clamp(20px,3vw,32px)}
/* Lindy Hop 1 is the big red box (Ron, 2026-11-02); the Friday lesson below it is the quieter dark card. Gold and cream on #a00826 pass 4.5:1 (checked in the browser test). */
.lh-card-series{background:var(--lh-red);border-color:var(--lh-red);border-top-color:var(--lh-gold)}
.lh-card-series h3{font-size:clamp(1.75rem,3.4vw,2.5rem);line-height:1.1;margin:0 0 .45em}
.lh-series-kicker{font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:.88rem!important;color:var(--lh-gold)!important;margin:0 0 .6em!important}
.lh-series-intro{font-weight:500}
.lh-series-when{font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.88rem!important;color:var(--lh-gold)!important;margin-bottom:.4em!important}
.lh-series-dates,.lh-series-status{font-weight:600;margin-bottom:.3em!important}
.lh-price strong{font-family:var(--serif);font-size:1.8em;color:var(--lh-gold)}
.lh-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.lh-button{display:inline-flex;align-items:center;min-height:48px;padding:10px 20px;background:var(--lh-gold);color:#2a0710!important;font-weight:700;text-decoration:none;border:2px solid var(--lh-gold);border-radius:999px}
.lh-button:hover{background:#f1cf86}
.lh-pass-primary{flex:1 1 100%}
.lh-pass-primary .lh-button{display:inline-flex;justify-content:center;text-align:center;max-width:100%;border-radius:28px;line-height:1.25;font-size:1.05rem}
.lh-pass-note{margin:.55em 0 0!important;font-size:.95rem;line-height:1.4}
.lh-card-series{scroll-margin-top:calc(var(--lh-head,0px) + 16px)}
.lh-jump{margin-top:14px!important;font-size:.95rem}
.lh-jump a{color:var(--lh-ink)!important;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-shadow:0 2px 10px rgba(0,0,0,.75)}
/* The same small link closing a chapter (JUMP in content.mjs): on the chapter's own background, never over a video. */
[data-jump][hidden]{display:none!important}
.lh-jump-end{padding-block:clamp(18px,3vh,32px) clamp(28px,6vh,64px)}
.lh-jump-end .lh-jump{margin:0!important}
/* A very short phone: the opening's words fill the screen, so the scroll cue steps aside rather than touch the link. */
@media (max-height:600px){.lh-cue{display:none}}
.lh-ghost{background:transparent;color:var(--lh-ink)!important;border-color:rgba(248,240,227,.7)}
.lh-ghost:hover{background:rgba(248,240,227,.1)}

/* Sources */
.lh-sources{background:#0b0708;padding:8vh 0 10vh;border-top:1px solid rgba(231,189,101,.25)}
.lh-sources h2{font-size:1.5rem;margin-bottom:12px}
.lh-sources p,.lh-sources li{font-size:.95rem!important;line-height:1.6;color:var(--lh-soft)!important}
.lh-sources ul{padding-left:1.2em;margin:0;display:grid;gap:6px;max-width:90ch}

/* The pause control for the moving clips */
.lh-motion{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));z-index:20;min-height:44px;padding:8px 16px;border-radius:999px;border:2px solid var(--lh-gold);background:rgba(18,11,12,.9);color:var(--lh-ink);font:700 .9rem var(--sans);cursor:pointer}
.lh-motion[hidden]{display:none}
/* The background music pill (public/lindy-page.js): once "Sound on" has been pressed, a small toggle in the other corner, anywhere on the page. */
.lh-music-pill{position:fixed;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));z-index:20;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:999px;border:2px solid var(--lh-gold);background:rgba(18,11,12,.9);color:var(--lh-ink);font:700 .9rem var(--sans);cursor:pointer}
.lh-music-pill .lh-sound-icon{width:16px;height:16px}
.lh-music-pill[hidden]{display:none}

/* Reveals: scroll-driven where supported, otherwise the script adds .is-in as each element arrives (html.lh-reveal only when that runs,
   so nothing stays hidden without the script). */
@keyframes lh-p{from{--p:0}to{--p:1}}
@keyframes lh-rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes lh-side-l{from{opacity:0;transform:translateX(-22vw)}to{opacity:1;transform:none}}
@keyframes lh-side-r{from{opacity:0;transform:translateX(22vw)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
 @supports (animation-timeline:view()){
  .lh-scrub{animation:lh-p linear both;animation-timeline:view()}
  .lh-scrub[data-scrub=exit]{animation-range:exit 0% exit 100%}
  .lh-scrub[data-scrub=contain]{animation-range:contain 0% contain 100%}
  .lh-scrub[data-scrub=cover]{animation-range:entry 20% exit 0%}
  [data-reveal]{animation:lh-rise linear both;animation-timeline:view();animation-range:entry 5% entry 75%}
  [data-reveal=side]{animation-name:lh-side-l;animation-range:entry 0% cover 40%}
  [data-reveal=side]:nth-child(2){animation-name:lh-side-r}
 }
 html.lh-reveal [data-reveal]{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
 html.lh-reveal [data-reveal=side]{transform:translateX(-14vw)}
 html.lh-reveal [data-reveal=side]:nth-child(2){transform:translateX(14vw)}
 html.lh-reveal [data-reveal].is-in{opacity:1;transform:none}
}
/* Reduced motion: no scroll-driven motion, nothing pinned, every drawing complete, both films side by side. */
@media (prefers-reduced-motion:reduce){
 .lh{--p:1}
 .lh-hero{--p:0}
 .lh-cue-line{animation:none}
 .lh-stage-track .lh-stage{position:relative;height:auto;display:grid;grid-template-columns:1fr 1fr;gap:4px}
 .lh-stage .lh-layer{position:relative;opacity:1;aspect-ratio:4/3}
 .lh-year{display:none}
 .lh-beats{margin-top:0;padding:4vh 0}
 .lh-beat,.lh-beat-title{min-height:0;margin-block:0 16px}
 .lh-draw-track{height:auto}
 .lh-draw{position:relative;top:0}
 .lh-counts-list li{opacity:1;background:none}
 .lh-map-track{height:auto}
 .lh-map{position:relative;height:auto;padding-block:4vh}
 .lh-map-cap{opacity:0}
 .lh-map-cap:last-child{opacity:1}
 .lh-shim-side{opacity:1;transform:none}
 .lh-pin{transform:scale(var(--pin,1))}
 .lh-ring{animation:none;opacity:.6}
 .lh-map-list-title,.lh-map-list{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}
 .lh-map-list-title{font-size:.95rem!important;color:var(--lh-soft)!important;margin:0 0 .3em!important;text-align:center}
 .lh-map-list{list-style:none;text-align:center;max-width:62ch;margin-inline:auto;line-height:1.7;font-size:1rem}
 .lh-map-list li{display:inline}
 .lh-map-list li:not(:last-child)::after{content:', '}
 .lh-video{transition:none}
 .lh-seq .lh-row-item::after,.lh-seq .lh-row-item figcaption{transition:none}
 .lh-seq.has-on .lh-row-item:not(.is-on) figcaption{transform:none}
}

/* A browser without scroll-driven animations and without the page script: the still map, as with reduced motion. */
@supports not (animation-timeline:view()){
 html:not(.lh-js) .lh-map-track{--p:1;height:auto}
 html:not(.lh-js) .lh-map{position:relative;height:auto;padding-block:4vh}
 html:not(.lh-js) .lh-map-cap{opacity:0}
 html:not(.lh-js) .lh-map-cap:last-child{opacity:1}
 html:not(.lh-js) .lh-map-list-title,html:not(.lh-js) .lh-map-list{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}
 html:not(.lh-js) .lh-map-list{list-style:none;text-align:center;max-width:62ch;margin-inline:auto;line-height:1.7}
 html:not(.lh-js) .lh-map-list li{display:inline}
 html:not(.lh-js) .lh-map-list li:not(:last-child)::after{content:', '}
 @media (max-width:899px){html:not(.lh-js) .lh-map-svg{width:100%;transform:none}}
}

/* Phones and narrow windows */
@media (max-width:899px){
 .lh-split,.lh-split-right{display:block}
 .lh-tall{position:sticky;top:0;height:100svh;z-index:0}
 .lh-tall-title{display:block;position:absolute;left:var(--lh-gut);right:var(--lh-gut);bottom:12svh;font-family:var(--serif);font-weight:700;font-size:clamp(2.6rem,13vw,4.4rem);line-height:.95;color:var(--lh-ink);text-shadow:0 4px 24px rgba(0,0,0,.75)}
 .lh-split-copy{position:relative;z-index:1;padding:0;background:transparent}
 .lh-split-copy>*{background:var(--lh-panel);margin:0;padding-inline:var(--lh-gut)}
 .lh-split-copy>.lh-intro{padding-block:7vh 4vh;margin-top:0}
 .lh-split-copy>.lh-clip,.lh-split-copy>.lh-band{padding-block:16px 24px}
 .lh-split-copy>.lh-cards{padding-block:8px 10vh;background:var(--lh-panel)}
 .lh-draw-track{height:auto;padding-bottom:0}
 .lh-draw{position:sticky;top:0;min-height:100svh;padding:4svh var(--lh-gut);background:var(--lh-bg);display:flex;flex-direction:column;justify-content:center}
 .lh-swing .lh-draw-track{height:260svh;background:var(--lh-bg)}
 .lh-two{grid-template-columns:1fr;gap:0}
 .lh-la-beat{grid-template-columns:1fr;gap:12px}
 .lh-map-track{height:240svh}
 .lh-row{display:flex;flex-direction:column;align-items:stretch;padding:0;margin-bottom:0}
 .lh-row-item{aspect-ratio:auto;height:100svh;max-height:none}
 .lh-row-main{order:-1}
 .lh-row-extra{display:none}
 .lh-row-item figcaption{font-size:clamp(2.4rem,12vw,3.6rem);padding:90px var(--lh-gut) 12svh}
 .lh-map{display:flex;flex-direction:column;justify-content:center;align-items:stretch;padding-inline:0}
 .lh-shim-side{display:none}
 .lh-shim-beat{display:block;height:100svh}
 .lh-shim-beat figcaption{padding:90px var(--lh-gut) 10svh;font-size:1.05rem}
 .lh-shim-beat figcaption strong{font-size:clamp(2.4rem,12vw,3.6rem)}
 /* The whole world on a phone (Ron, 2026-11-01: lights all around the world at once), with larger dots and its own larger names
    (worldmap.mjs: LAYOUTS.phone, PHONE_PIN 2, names of about 12 px at 390 px wide). */
 .lh-map-svg{width:100%;max-width:none;max-height:none;margin:0;--pin:2}
 .lh-land{stroke-width:6.5}
 .lh-names-wide{display:none}
 .lh-names-phone{display:inline}
 .lh-map-captions,.lh-map-list-title,.lh-map-list{padding-inline:var(--lh-gut)}
 .lh-beat{margin-left:var(--lh-gut);margin-right:var(--lh-gut);width:auto;justify-content:flex-end;padding-bottom:6svh}
 .lh-year{font-size:clamp(2.6rem,16vw,4.4rem)}
 .lh-words span:nth-child(2){align-self:auto;padding-left:12vw}
}
@media (max-width:899px) and (prefers-reduced-motion:reduce){
 .lh-map-svg{width:100%;transform:none}
 .lh-tall{position:relative}
 .lh-stage-track .lh-stage{grid-template-columns:1fr}
}