/* Hallmark · component kit: character layer (stitch · lift · squiggle · wave · rise · stage · peek · parade)
* genre: playful-within-editorial · tokens mirror the homepage :root (Guided Road build)
* motion: one easing (--bb-ease) and the site's three durations only
* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4
*/
:root{
--bb-navy-deep:#16222C; --bb-navy:#233746; --bb-navy-lift:#2E4A5E;
--bb-gold:#B08A3E; --bb-gold-deep:#7A5C1E; --bb-gold-lt:#D2B26A; --bb-sand:#EAD9B0; --bb-cream:#EAE1CC; --bb-cream-2:#E2D5B8;
--bb-card:#FBF6EC; --bb-ink:#1F2A32; --bb-ink-soft:#4A5560; --bb-on-dark:#F3EEE3; --bb-muted:#7A858E;
--bb-stitch-light:rgba(70,107,126,.45); --bb-stitch-dark:rgba(234,217,176,.50);
--bb-glow:rgba(210,178,106,.30); --bb-shadow:rgba(22,34,44,.18);
--bb-display:'Cormorant Garamond','Cormorant',Georgia,serif; --bb-body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
--bb-ease:cubic-bezier(.2,.7,.2,1); --bb-fast:160ms; --bb-base:320ms; --bb-slow:1400ms;
}
/* Buckets and Barrels "character" kit (Oct 2026): stitching, lift, squiggle, wave, rise.
Applied by bb-character.js. Remove the two tags from a page to switch it off. */
.bb-card{position:relative;transition:transform var(--bb-base) var(--bb-ease),box-shadow var(--bb-base) var(--bb-ease)}
.bb-card:hover{transform:translateY(-5px) scale(1.006);box-shadow:0 14px 30px rgba(22,34,44,.18)}
.bb-stitch{position:absolute;inset:10px;border-radius:inherit;pointer-events:none;z-index:2;
background:
repeating-linear-gradient(90deg,var(--bb-st) 0 6px,transparent 6px 13px) top/100% 1.5px no-repeat,
repeating-linear-gradient(90deg,var(--bb-st) 0 6px,transparent 6px 13px) bottom/100% 1.5px no-repeat,
repeating-linear-gradient(180deg,var(--bb-st) 0 6px,transparent 6px 13px) left/1.5px 100% no-repeat,
repeating-linear-gradient(180deg,var(--bb-st) 0 6px,transparent 6px 13px) right/1.5px 100% no-repeat}
.bb-light{--bb-st:var(--bb-stitch-light)}
.bb-dark{--bb-st:var(--bb-stitch-dark)}
h2.bb-squig::after{content:"";display:block;width:110px;height:8px;margin:12px auto 0;
background:url('data:image/svg+xml;utf8,') center/contain no-repeat}
h2.bb-squig.bb-left::after{margin-left:0}
.bb-wave{display:block;width:96%;max-width:1240px;margin:0 auto;height:auto;color:var(--bb-navy)}
.bb-wavehold{line-height:0;padding:14px 0 6px}
@media (prefers-reduced-motion:no-preference){
html.bb-js .bb-rise{opacity:0;translate:0 26px;transition:opacity var(--bb-base) var(--bb-ease),translate var(--bb-base) var(--bb-ease)}
html.bb-js .bb-rise.bb-in{opacity:1;translate:0 0}
html.bb-js h2.bb-squig::after{width:0;transition:width var(--bb-base) var(--bb-ease) var(--bb-fast)}
html.bb-js h2.bb-squig.bb-in::after{width:110px}
.bb-wave path{stroke-dasharray:1400;stroke-dashoffset:1400}
.bb-wave.bb-in path{animation:bbdraw var(--bb-slow) var(--bb-ease) forwards}
.bb-wave.bb-in circle{animation:bbpop var(--bb-base) var(--bb-ease) 1.8s both}
}
@media (prefers-reduced-motion:reduce){.bb-card:hover{transform:none}}
@keyframes bbdraw{to{stroke-dashoffset:0}}
@keyframes bbpop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
.bb-wave circle{transform-box:fill-box;transform-origin:center}
/* ---------- The stage: a lit backdrop for charts and infographics ---------- */
.bb-stage{position:relative;margin:28px 0 8px;padding:46px clamp(16px,4vw,54px) 34px;border-radius:22px;
background:radial-gradient(ellipse 70% 60% at 50% 42%,rgba(210,178,106,.30),rgba(210,178,106,0) 70%),
radial-gradient(ellipse at 50% 120%,var(--bb-navy-lift),var(--bb-navy) 55%,var(--bb-navy-deep));
box-shadow:0 22px 50px rgba(22,34,44,.30),inset 0 0 0 1px rgba(210,178,106,.25);overflow:visible}
.bb-stage::before{content:"";position:absolute;inset:12px;border-radius:14px;pointer-events:none;
background:
repeating-linear-gradient(90deg,rgba(234,217,176,.45) 0 6px,transparent 6px 13px) top/100% 1.5px no-repeat,
repeating-linear-gradient(90deg,rgba(234,217,176,.45) 0 6px,transparent 6px 13px) bottom/100% 1.5px no-repeat,
repeating-linear-gradient(180deg,rgba(234,217,176,.45) 0 6px,transparent 6px 13px) left/1.5px 100% no-repeat,
repeating-linear-gradient(180deg,rgba(234,217,176,.45) 0 6px,transparent 6px 13px) right/1.5px 100% no-repeat}
.bb-stage .bb-sparks{position:absolute;inset:0;border-radius:22px;pointer-events:none;opacity:.55;
background-image:radial-gradient(1.6px 1.6px at 12% 18%,var(--bb-sand) 50%,transparent 51%),radial-gradient(1.2px 1.2px at 28% 8%,var(--bb-sand) 50%,transparent 51%),
radial-gradient(1.4px 1.4px at 71% 12%,var(--bb-sand) 50%,transparent 51%),radial-gradient(1.8px 1.8px at 88% 22%,var(--bb-sand) 50%,transparent 51%),
radial-gradient(1.2px 1.2px at 8% 70%,var(--bb-sand) 50%,transparent 51%),radial-gradient(1.5px 1.5px at 93% 64%,var(--bb-sand) 50%,transparent 51%),
radial-gradient(1.2px 1.2px at 52% 4%,var(--bb-sand) 50%,transparent 51%),radial-gradient(1.3px 1.3px at 40% 95%,var(--bb-sand) 50%,transparent 51%)}
.bb-stage-kick{position:relative;text-align:center;font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--bb-gold-lt);margin:0 0 6px}
.bb-stage-title{position:relative;text-align:center;font-family:var(--bb-display);font-weight:500;color:var(--bb-on-dark);font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.15;margin:0 0 26px}
.bb-stage-mat{position:relative;background:var(--bb-card);border-radius:14px;padding:clamp(8px,1.6vw,18px);
box-shadow:0 0 0 6px rgba(210,178,106,.18),0 0 60px rgba(210,178,106,.35),0 18px 40px rgba(0,0,0,.35);
transform:rotate(-.4deg);transition:transform var(--bb-base) var(--bb-ease)}
.bb-stage:hover .bb-stage-mat{transform:rotate(0) translateY(-3px)}
.bb-stage-mat img{display:block;width:100%;height:auto;border-radius:8px}
.bb-stage-say{position:relative;max-width:760px;margin:26px auto 0;text-align:center;color:var(--bb-on-dark);font-size:1.06rem;line-height:1.6}
.bb-stage-say b{color:var(--bb-sand)}
.bb-stage-btns{position:relative;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px}
.bb-stage-btns a{display:inline-block;font-weight:700;font-size:.98rem;text-decoration:none;padding:13px 26px;border-radius:12px;transition:transform var(--bb-fast) var(--bb-ease),filter var(--bb-fast)}
.bb-stage-btns a:hover{transform:translateY(-2px);filter:brightness(1.07)}
.bb-stage-btns .g{background:var(--bb-gold);color:var(--bb-navy-deep)}
.bb-stage-btns .l{border:2px solid var(--bb-sand);color:var(--bb-on-dark)}
.bb-guide{position:absolute;right:-22px;bottom:-34px;width:clamp(96px,11vw,150px);z-index:3;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35));pointer-events:none}
.bb-guide-say{position:absolute;right:calc(clamp(96px,11vw,150px) - 10px);bottom:-16px;z-index:3;background:var(--bb-card);color:var(--bb-ink);border-radius:14px;padding:9px 16px;
font-family:var(--bb-display);font-style:italic;font-size:1.1rem;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.bb-guide-say small{display:block;font-family:var(--bb-body);font-style:normal;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--bb-gold)}
@media (max-width:700px){.bb-guide{display:none}.bb-guide-say{position:relative;left:auto;bottom:auto;display:inline-block;margin-top:18px}}
@media (prefers-reduced-motion:reduce){.bb-stage-mat{transform:none}}
/* ---------- Peek-a-boo guide: a Bunch member leans in from the edge and waves ---------- */
.bb-peek{position:fixed;right:0;bottom:16vh;z-index:80;display:flex;align-items:flex-end;pointer-events:none}
.bb-peek-fig{width:clamp(110px,12vw,170px);height:auto;transform:translateX(115%) rotate(-10deg);transform-origin:80% 100%;
transition:transform 900ms var(--bb-ease);cursor:pointer;pointer-events:auto;filter:drop-shadow(-6px 10px 14px rgba(0,0,0,.28));margin-right:-34px}
.bb-peek.on .bb-peek-fig{transform:translateX(0) rotate(-10deg);animation:bbwave var(--bb-slow) var(--bb-ease) var(--bb-base) 2}
@keyframes bbwave{0%,100%{transform:translateX(0) rotate(-10deg)}25%{transform:translateX(0) rotate(-2deg)}50%{transform:translateX(0) rotate(-13deg)}75%{transform:translateX(0) rotate(-3deg)}}
.bb-peek-say{order:-1;max-width:250px;margin:0 4px 120px 0;background:var(--bb-card);color:var(--bb-ink);border-radius:16px 16px 4px 16px;padding:12px 16px 12px;
box-shadow:0 10px 26px rgba(22,34,44,.25);border:1px solid rgba(176,138,62,.35);opacity:0;transform:translateY(8px) scale(.96);
transition:opacity var(--bb-base) var(--bb-ease) .55s,transform var(--bb-base) var(--bb-ease) .55s;pointer-events:auto;position:relative}
.bb-peek.on .bb-peek-say{opacity:1;transform:none}
.bb-peek-say q{display:block;font-family:var(--bb-display);font-style:italic;font-size:1.18rem;line-height:1.3;quotes:"\201C" "\201D"}
.bb-peek-say small{display:block;margin-top:5px;font-family:var(--bb-body);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bb-gold)}
.bb-peek-say a{display:inline-block;margin-top:9px;background:var(--bb-gold);color:var(--bb-navy-deep);font-family:var(--bb-body);font-weight:700;font-size:.88rem;text-decoration:none;padding:8px 14px;border-radius:10px}
.bb-peek-x{position:absolute;top:4px;right:6px;border:0;background:none;font-size:1.1rem;line-height:1;color:var(--bb-muted);cursor:pointer;padding:4px}
@media (max-width:640px){.bb-peek{bottom:84px}.bb-peek-fig{width:96px;margin-right:-22px}.bb-peek-say{max-width:190px;margin-bottom:70px}.bb-peek-say q{font-size:1.02rem}}
@media (prefers-reduced-motion:reduce){.bb-peek-fig,.bb-peek-say{transition:opacity var(--bb-fast)}.bb-peek.on .bb-peek-fig{animation:none}}
@media print{.bb-peek,.bb-parade{display:none}}
/* ---------- The parade: the Bunch walks you out at the bottom of the page ---------- */
.bb-parade{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(234,225,204,0) 0,var(--bb-cream) 38%,var(--bb-cream-2) 100%);padding:34px 0 0;text-align:center}
.bb-parade-say{font-family:var(--bb-display);font-style:normal;font-weight:600;font-size:clamp(1.25rem,2.4vw,1.6rem);color:var(--bb-navy);margin:0 16px 4px}
.bb-parade-sub{font-size:.9rem;color:var(--bb-ink-soft);margin:0 16px 10px}
.bb-parade-road{position:relative;height:clamp(150px,17vw,210px);max-width:1280px;margin:0 auto}
.bb-parade-road::after{content:"";position:absolute;left:0;right:0;bottom:16px;height:3px;border-radius:3px;
background:repeating-linear-gradient(90deg,var(--bb-gold) 0 14px,transparent 14px 24px);opacity:.55}
.bb-walker{position:absolute;bottom:18px;display:block;text-decoration:none;transform:translateX(-130vw);will-change:transform}
.bb-walker img{display:block;height:100%;width:auto;transform-origin:50% 100%}
.bb-walker.v{height:clamp(54px,6.2vw,80px)}
.bb-walker.c{height:clamp(100px,12vw,160px)}
.bb-parade.go .bb-walker{animation:bbwalk 5200ms var(--bb-ease) forwards}
.bb-parade.go .bb-walker img{animation:bbbob 650ms var(--bb-ease) 8 alternate}
.bb-walker:hover img,.bb-walker:focus-visible img{animation:bbhop var(--bb-base) var(--bb-ease) !important}
.bb-walker.c.waving img{animation:bbtilt var(--bb-slow) var(--bb-ease) 2 !important}
@keyframes bbwalk{from{transform:translateX(-130vw)}to{transform:translateX(0)}}
@keyframes bbbob{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-9px) rotate(3deg)}}
@keyframes bbhop{0%,100%{transform:translateY(0)}40%{transform:translateY(-22px) rotate(-6deg)}70%{transform:translateY(-6px) rotate(3deg)}}
@keyframes bbtilt{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}75%{transform:rotate(6deg)}}
.bb-walker .tip{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap;background:var(--bb-navy);color:var(--bb-on-dark);font-size:.75rem;font-weight:700;padding:4px 9px;border-radius:8px;opacity:0;transition:opacity var(--bb-fast);pointer-events:none}
.bb-walker:hover .tip,.bb-walker:focus-visible .tip{opacity:1}
@media (prefers-reduced-motion:reduce){.bb-walker{transform:none}.bb-parade.go .bb-walker,.bb-parade.go .bb-walker img{animation:none}}
.bb-parade{overflow-x:clip}
.bb-stage.has-guide{padding-bottom:64px}
.bb-stage h2.bb-squig::after{margin-left:auto}
/* fixes after first render */
.bb-peek-say{max-width:270px}
.bb-peek-say a{white-space:nowrap}
@media (max-width:700px){.bb-guide,.bb-guide-say{display:none !important}.bb-stage.has-guide{padding-bottom:30px}.bb-stage-mat{transform:none}}
@media (max-width:640px){
.bb-parade-road .bb-walker.c{display:none}
.bb-parade-road .bb-walker.c:nth-child(1),.bb-parade-road .bb-walker.c:nth-child(3),.bb-parade-road .bb-walker.c:nth-child(6),.bb-parade-road .bb-walker.c:nth-child(9){display:block}
.bb-parade-road .bb-walker.c:nth-child(1){left:2% !important}
.bb-parade-road .bb-walker.c:nth-child(3){left:27% !important}
.bb-parade-road .bb-walker.c:nth-child(6){left:52% !important}
.bb-parade-road .bb-walker.c:nth-child(9){left:75% !important}
}
/* small-phone safety net (320 to 400px): let fixed-width cards shrink instead of pushing the page sideways, and stack one per row so they never squeeze into skinny columns */
@media (max-width:400px){
[style*="min-width:300px"],[style*="min-width:280px"],[style*="min-width:270px"],[style*="min-width:260px"],[style*="min-width:250px"],[style*="min-width:240px"]{min-width:0 !important;flex-basis:100% !important}
.bb-card{min-width:0 !important;max-width:100%}
.bb-card:hover{transform:none}
}
html,body{overflow-x:clip}
.bb-peek-say{padding-right:30px}
/* phones: the character waves from the corner; tap them to hear what they have to say */
.bb-peek.quiet .bb-peek-say{display:none}
.bb-peek.quiet .bb-peek-fig{pointer-events:auto;cursor:pointer}
/* ---------- Pressure gauge (bb-gauge.js) ---------- */
.bb-gauge{--g-calm:#7FB3D5;--g-fill:var(--bb-gold-lt);--g-spill:#C0573F;--g-water:#5B9BD5;
--g-ink:var(--bb-ink);--g-soft:var(--bb-ink-soft);--g-card:var(--bb-card);--g-line:rgba(35,55,70,.16);
position:relative;margin:34px 0 8px;padding:clamp(20px,3vw,36px);border-radius:20px;background:var(--g-card);color:var(--g-ink);
box-shadow:0 14px 34px var(--bb-shadow);border-top:4px solid var(--bb-gold)}
.bb-gauge[data-tone=dark]{--g-ink:var(--bb-on-dark);--g-soft:rgba(243,238,227,.82);--g-card:rgba(22,34,44,.55);--g-line:rgba(234,217,176,.25)}
.bbg-explain{margin:0 0 18px;font-size:1.05rem;line-height:1.6;color:var(--g-ink)}
.bbg-explain b{color:var(--bb-gold)}
.bb-gauge[data-tone=dark] .bbg-explain b{color:var(--bb-gold-lt)}
.bbg-visual{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(12px,3vw,40px);align-items:end}
.bbg-visual figure{margin:0;text-align:center}
.bbg-visual svg{width:100%;height:auto;display:block;max-height:260px}
.bbg-visual figcaption{font-size:.82rem;font-weight:700;letter-spacing:.06em;color:var(--g-soft);margin-top:8px}
.bbg-z{fill:none;stroke-width:22;stroke-linecap:butt}
.bbg-z.calm{stroke:var(--g-calm)}.bbg-z.fill{stroke:var(--g-fill)}.bbg-z.spill{stroke:var(--g-spill)}
.bbg-t{font:700 11px var(--bb-body);fill:var(--g-soft)}
.bbg-needle{transform-origin:120px 124px;transition:transform var(--bb-base) var(--bb-ease)}
.bbg-needle line{stroke:var(--g-ink);stroke-width:5;stroke-linecap:round}
.bbg-needle circle{fill:var(--bb-gold)}
.bbg-pail{fill:none;stroke:var(--g-ink);stroke-width:4;stroke-linejoin:round}
.bbg-handle{fill:none;stroke:var(--g-ink);stroke-width:3;opacity:.7}
.bbg-water{fill:var(--g-water);opacity:.85;transition:y var(--bb-base) var(--bb-ease),height var(--bb-base) var(--bb-ease)}
.bbg-pour path{stroke:var(--g-water);stroke-width:5;stroke-linecap:round;stroke-dasharray:6 7;opacity:.8}
.bbg-spill{opacity:0;transition:opacity var(--bb-base) var(--bb-ease)}
.bbg-spill path{fill:none;stroke:var(--g-water);stroke-width:5;stroke-linecap:round}
.bbg-spill circle{fill:var(--g-water)}
.bb-gauge[data-zone=spill] .bbg-spill{opacity:1}
.bb-gauge[data-zone=spill] .bbg-z.spill,.bb-gauge[data-zone=fill] .bbg-z.fill,.bb-gauge[data-zone=calm] .bbg-z.calm{stroke-width:28}
@media (prefers-reduced-motion:no-preference){.bbg-pour path{animation:bbgpour 700ms linear infinite}}
@keyframes bbgpour{to{stroke-dashoffset:-13}}
.bbg-controls{margin:22px 0 6px}
.bbg-lab{display:block;font-weight:700;font-size:1rem;margin-bottom:8px;color:var(--g-ink)}
.bbg-lab span{font-weight:400;color:var(--g-soft);font-size:.92rem}
.bbg-range{width:100%;accent-color:var(--bb-gold);height:28px}
.bbg-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.bbg-tab{white-space:nowrap;cursor:pointer;font:700 .95rem var(--bb-body);padding:9px 18px;border-radius:999px;border:2px solid var(--g-line);background:transparent;color:var(--g-ink);transition:transform var(--bb-fast) var(--bb-ease)}
.bbg-tab:hover{transform:translateY(-2px)}
.bbg-tab:focus-visible,.bbg-range:focus-visible{outline:3px solid var(--bb-gold-lt);outline-offset:3px}
.bbg-tab.calm[aria-pressed=true]{background:var(--g-calm);border-color:var(--g-calm);color:var(--bb-navy-deep)}
.bbg-tab.fill[aria-pressed=true]{background:var(--g-fill);border-color:var(--g-fill);color:var(--bb-navy-deep)}
.bbg-tab.spill[aria-pressed=true]{background:var(--g-spill);border-color:var(--g-spill);color:#fff}
.bbg-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px;border-top:1px dashed var(--g-line);padding-top:18px}
.bbg-panel h4{margin:0 0 6px;font:700 .78rem var(--bb-body);letter-spacing:.12em;text-transform:uppercase;color:var(--bb-gold)}
.bb-gauge[data-tone=dark] .bbg-panel h4{color:var(--bb-gold-lt)}
.bbg-panel p{margin:0;font-size:1rem;line-height:1.55;color:var(--g-ink)}
@media (max-width:700px){.bbg-visual{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}.bbg-panel{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.bbg-needle,.bbg-water{transition:none}}
.bb-parade-road .bb-walker[data-who=clue]{height:clamp(132px,15.8vw,210px)}
/* audit fixes Oct 2026: small gold labels on cream use the deep gold */
.bb-guide-say small,.bb-peek-say small{color:var(--bb-gold-deep)}
.bb-gauge{--g-spill:#B04A33}
/* first-screen buttons (audit 13) */
.bb-hctas{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 6px;justify-content:inherit}
section[style*="text-align:center"] .bb-hctas,[style*="text-align: center"] .bb-hctas{justify-content:center}
.bb-hbtn{display:inline-flex;align-items:center;line-height:1;white-space:nowrap;font-family:var(--bb-body);font-weight:700;font-size:1rem;text-decoration:none;padding:14px 24px;border-radius:12px;transition:transform var(--bb-fast) var(--bb-ease),filter var(--bb-fast) var(--bb-ease)}
.bb-hbtn:hover{transform:translateY(-2px);filter:brightness(1.07)}
.bb-hbtn:active{transform:translateY(0)}
.bb-hbtn:focus-visible{outline:3px solid var(--bb-gold-lt);outline-offset:3px}
.bb-hbtn.g{background:var(--bb-gold);color:var(--bb-navy-deep)}
.bb-hbtn.l{border:2px solid var(--bb-sand);color:var(--bb-on-dark)}
@media (prefers-reduced-motion:reduce){.bb-hbtn{transition:none}}
/* waving while they walk in: little gold "hello" lines beside each head, and a friendlier sway */
.bb-walker.c::after{content:"";position:absolute;top:4%;right:-20px;width:28px;height:28px;opacity:0;pointer-events:none;transform-origin:0 100%;
background:url('data:image/svg+xml;utf8,') center/contain no-repeat}
@media (prefers-reduced-motion:no-preference){
.bb-parade.go .bb-walker.c::after{animation:bbhello 650ms var(--bb-ease) 0s 10 alternate}
.bb-parade.go .bb-walker img{animation-name:bbbobwave}
}
@keyframes bbhello{from{opacity:.15;transform:rotate(-18deg)}to{opacity:1;transform:rotate(14deg)}}
@keyframes bbbobwave{from{transform:translateY(0) rotate(-5deg)}to{transform:translateY(-9px) rotate(5deg)}}
/* three gold dots: the section divider (replaces the point-line-point wave, Oct 2026) */
.bb-dots{display:flex;justify-content:center;align-items:center;gap:18px;padding:28px 0 24px;line-height:0}
.bb-dots span{display:block;width:10px;height:10px;border-radius:50%;background:var(--bb-gold)}
.bb-dots span:nth-child(2){width:14px;height:14px;background:var(--bb-gold-lt);box-shadow:0 0 0 4px rgba(210,178,106,.18)}
@media (prefers-reduced-motion:no-preference){
html.bb-js .bb-dots span{opacity:0;transform:scale(.3);transition:opacity var(--bb-base) var(--bb-ease),transform var(--bb-base) var(--bb-ease)}
html.bb-js .bb-dots.bb-in span{opacity:1;transform:none}
html.bb-js .bb-dots.bb-in span:nth-child(2){transition-delay:120ms}
html.bb-js .bb-dots.bb-in span:nth-child(3){transition-delay:240ms}
}
/* The march, Oct 2026 (v2): the Bunch waits off to the left, then steps in one at a time at the same easy pace,
three beats apart, to the Bucket Hollow March. Roll call bows, then a big wave together. */
.bb-walker.bbp-ready{transform:translateX(var(--from,-130vw));transition:none}
.bb-walker.bbp-ready.bbp-walk{transform:translateX(0);transition:transform var(--dur,9000ms) cubic-bezier(.25,.1,.45,1)}
.bb-walker.bbp-here{transform:none;transition:none}
@media (prefers-reduced-motion:no-preference){
.bb-walker.bbp-walk img{animation:bbstep 625ms ease-in-out infinite alternate}
.bb-walker.c.bbp-walk::after{animation:bbhello 625ms ease-in-out infinite alternate}
.bb-parade .bb-walker.c.bbp-bow img{animation:bbbow 1000ms var(--bb-ease) !important}
.bb-parade .bb-walker.c.bbp-wave img{animation:bbbigwave 520ms ease-in-out 8 alternate !important}
.bb-parade .bb-walker.c.bbp-wave::after{animation:bbhello 520ms ease-in-out 8 alternate}
}
@keyframes bbstep{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-8px) rotate(4deg)}}
@keyframes bbbow{0%,100%{transform:none}45%{transform:translateY(6px) rotate(8deg)}}
@keyframes bbbigwave{from{transform:translateY(0) rotate(-10deg)}to{transform:translateY(-14px) rotate(10deg)}}
.bb-walker.c.bbp-bow .tip{opacity:1}
.bb-walker .tip b{font-weight:700}
.bb-walker .tip .ln{display:none}
.bb-walker:hover .tip .ln,.bb-walker:focus-visible .tip .ln{display:inline}
.bb-parade-ctl{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:2px 16px 6px}
.bb-pbtn{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;line-height:1;font:700 .85rem var(--bb-body);color:var(--bb-navy);background:transparent;border:2px solid var(--bb-gold);border-radius:999px;padding:8px 14px;cursor:pointer;transition:transform var(--bb-fast) var(--bb-ease),background var(--bb-fast) var(--bb-ease)}
.bb-pbtn:hover{background:rgba(176,138,62,.14);transform:translateY(-1px)}
.bb-pbtn:active{transform:none}
.bb-pbtn:focus-visible{outline:3px solid var(--bb-navy);outline-offset:2px}
.bb-pbtn.off .w{opacity:0}
.bb-parade .bb-start{display:none;background:var(--bb-gold);color:var(--bb-navy-deep);font-size:1rem;padding:12px 22px}
.bb-parade.wait .bb-start{display:inline-flex}
.bb-parade.wait .bb-mute{display:none}
.bb-parade .bb-again{display:none}
.bb-parade.done .bb-again{display:inline-flex}
@media (prefers-reduced-motion:reduce){.bb-parade-ctl{display:none}}
/* Oct 2026 v3: parade lives on the Bunch page only. Tempo rolls (wheelchair) instead of bobbing. Balloons at the end. */
@media (prefers-reduced-motion:no-preference){
.bb-parade .bb-walker[data-who=tempo].bbp-walk img{animation:bbroll 1250ms ease-in-out infinite alternate}
.bb-parade .bb-walker[data-who=tempo].bbp-wave img{animation:bbrollwave 700ms ease-in-out 6 alternate !important}
.bb-parade .bb-walker[data-who=tempo].bbp-bow img{animation:bbnod 1000ms var(--bb-ease) !important}
}
@keyframes bbroll{from{transform:rotate(-2deg)}to{transform:rotate(0deg)}}
@keyframes bbrollwave{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
@keyframes bbnod{0%,100%{transform:none}45%{transform:rotate(-5deg)}}
.bb-parade.wait .bb-walker.bbp-ready{transition:transform 900ms var(--bb-ease)}
.bbp-sky{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.bbp-b{position:absolute;bottom:-120px;display:block;animation-name:bbrise;animation-timing-function:cubic-bezier(.35,.1,.6,1);animation-fill-mode:both}
.bbp-bs{display:block;animation:bbsway ease-in-out infinite alternate}
.bbp-b svg{display:block;width:100%;height:auto;filter:drop-shadow(0 4px 6px rgba(22,34,44,.18))}
@keyframes bbrise{from{transform:translateY(0)}to{transform:translateY(calc(-100vh - 260px))}}
@keyframes bbsway{from{transform:translateX(-14px) rotate(-6deg)}to{transform:translateX(14px) rotate(6deg)}}
@media (prefers-reduced-motion:reduce){.bbp-sky{display:none}}
/* 2026-10-20 critique: on phones the greeter covered the right edge of every section, so it stays off small screens. */
@media (max-width:640px){.bb-peek{display:none !important}}