/* ============================================================
   Citizen Activate · Pre-Election Brunch & Learn section (v2.3)
   Illustrated: a Capitol View street scene of the Detroit Cowboy
   lit by the badge torch pouring a stream of sparks, then the speakers
   billed on a gig poster from the Cowboy's stage.
   Broadside system, scoped to .ca-br; tokens fall back to literals so
   the section also renders standalone. Rules kept: red UI never
   touches navy (paper/gold keyline between), gold never a text ground
   on light, Alfa ≥ 24px / sentence case / ≤ 2 lines, Barlow Condensed
   only for eyebrows, labels and buttons. Ratios are WCAG 2.x, measured
   against the flat ground named beside them.
   Tokens live on .ca-br rather than :root so the file can be appended
   to any stylesheet without leaking; they read the site's --ca-* tokens
   first, so the section follows the site if its palette ever moves.
   The scene animates only transform, opacity, fill and stroke-dashoffset:
   they composite or repaint locally, so 60-odd sparks stay cheap. Hover
   colour on the headline row's links fades over .15s.
   ============================================================ */
.ca-br{
  --br-navy-900:var(--ca-navy-900,#01132F);
  --br-navy-700:var(--ca-navy-700,#02204F);
  --br-navy-500:var(--ca-navy-500,#1E4278);
  --br-navy-300:var(--ca-navy-300,#8A9CC4);
  --br-navy-100:var(--ca-navy-100,#D8E0EE);
  --br-red-500:var(--ca-red-500,#B3030D);
  --br-red-700:var(--ca-red-700,#8C0209);
  --br-red-300:var(--ca-red-300,#E4666C);
  --br-gold-500:var(--ca-gold-500,#D1952B);
  --br-gold-300:var(--ca-gold-300,#E8C267);
  --br-gold-700:var(--ca-gold-700,#8F5E00);
  --br-gold-100:var(--ca-gold-100,#F8E6B4);
  --br-paper:var(--ca-paper,#F8F8F8);
  --br-cream:var(--ca-cream,#F6F4EC);
  --br-charcoal:var(--ca-charcoal,#2E3547);
  --br-limestone:var(--ca-limestone,#C9CFDB);
  --br-forest:var(--ca-forest,#2A541E);
  --br-display:var(--font-display,'Alfa Slab One',Rockwell,'Roboto Slab',serif);
  --br-text:var(--font-text,'Barlow','Helvetica Neue',Arial,sans-serif);
  --br-accent:var(--font-accent,'Barlow Condensed','Arial Narrow',sans-serif);
  --br-gutter:clamp(1rem,4vw,2.5rem);
  --br-wrap:var(--wrap,1180px);          /* one content width: headline row, cards band, footer content */
  --br-gap:clamp(3rem,6vw,5rem);         /* one rhythm between blocks */
  --br-frame:0 0 0 2px var(--br-paper),0 0 0 5px var(--br-gold-500),0 24px 40px -18px rgba(0,0,0,.6);   /* the cards' one frame */

  /* venue card: cream on the band in light, navy-900 in dark */
  --br-card-bg:var(--br-cream);
  --br-card-text:var(--br-charcoal);   /* 11.11 on cream */
  --br-card-head:var(--br-navy-700);   /* 14.42 on cream */
  --br-card-kick:var(--br-red-500);    /* 6.50 on cream */
  --br-card-link:var(--br-red-500);    /* 6.50 on cream */
  --br-card-link-hover:var(--br-red-700);  /* 8.96 on cream */
  --br-card-rule:var(--br-gold-700);
  --br-card-ring:var(--br-gold-700);
  --br-card-hair:var(--br-limestone);

  position:relative;overflow:hidden;isolation:isolate;
  background:var(--br-navy-700);color:var(--br-paper);              /* 14.96 */
  border-top:3px solid var(--br-gold-500);border-bottom:3px solid var(--br-gold-500);
  font-family:var(--br-text);font-size:1.0625rem;line-height:1.6;
  /* no scroll-margin: site.css already pads anchor jumps for the sticky header */
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ca-br{
    --br-card-bg:var(--br-navy-900);--br-card-text:var(--br-navy-100);--br-card-head:var(--br-paper);  /* 13.93 / 17.41 on navy-900 */
    --br-card-kick:var(--br-gold-300);--br-card-link:var(--br-paper);--br-card-link-hover:var(--br-gold-300);  /* 10.87 / 17.41 / 10.87 */
    --br-card-rule:var(--br-gold-500);--br-card-ring:var(--br-gold-500);--br-card-hair:rgba(138,156,196,.32);
  }
}
:root[data-theme="dark"] .ca-br{
  --br-card-bg:var(--br-navy-900);--br-card-text:var(--br-navy-100);--br-card-head:var(--br-paper);  /* 13.93 / 17.41 on navy-900 */
  --br-card-kick:var(--br-gold-300);--br-card-link:var(--br-paper);--br-card-link-hover:var(--br-gold-300);  /* 10.87 / 17.41 / 10.87 */
  --br-card-rule:var(--br-gold-500);--br-card-ring:var(--br-gold-500);--br-card-hair:rgba(138,156,196,.32);
}

.ca-br *,.ca-br *::before,.ca-br *::after{box-sizing:border-box}
.ca-br [hidden]{display:none!important}           /* carries the state switch, HTML and SVG */
.ca-br h2,.ca-br h3,.ca-br h4,.ca-br p,.ca-br dl,.ca-br dd,.ca-br ul,.ca-br ol,.ca-br address,.ca-br figure{margin:0}
.ca-br ul,.ca-br ol{padding:0;list-style:none}
.ca-br a:focus-visible,.ca-br button:focus-visible{outline:3px solid var(--br-gold-500);outline-offset:2px}
.br-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.br-wrap{position:relative;max-width:var(--br-wrap);margin-inline:auto;padding-inline:var(--br-gutter)}

/* ================= 1 · headline row: copy + menu card ================= */
.br-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4rem);align-items:center;padding-block:clamp(3rem,7vw,5rem) clamp(2.5rem,5vw,3.5rem)}
.br-copy{display:grid;gap:1.25rem;justify-items:start}
.br-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem;font-family:var(--br-accent);font-weight:600;font-size:.875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--br-paper)} /* 14.96 on navy-700 */
.br-gold{color:var(--br-gold-300)}                  /* 9.34 on navy-700 */
/* the pulse is a ring scaled out from behind the dot, so it stays a
   transform + opacity animation; three beats, then it rests (WCAG 2.2.2) */
.br-dot{display:none;position:relative;width:9px;height:9px;border-radius:50%;background:var(--br-gold-300)}
.br-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--br-gold-300);opacity:0}
.ca-br[data-state="live"] .br-dot{display:inline-block}
.ca-br[data-state="live"] .br-dot::after{animation:br-pulse 1.6s ease-out 3}
@keyframes br-pulse{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
.br-title{font-family:var(--br-display);font-weight:400;font-size:clamp(2.25rem,5vw,3.5rem);line-height:1.05;color:var(--br-paper);max-width:17ch;text-wrap:balance}
.br-lead{font-size:1.1875rem;line-height:1.55;color:var(--br-navy-100);max-width:56ch}   /* 11.96 on navy-700 */
.br-lead strong{color:var(--br-paper);font-weight:600}                  /* 14.96 */

.br-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-top:.25rem}
.br-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 1.35rem;border-radius:3px;border:2px solid transparent;font-family:var(--br-accent);font-weight:600;font-size:1.0625rem;line-height:1;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:background-color .15s,color .15s,border-color .15s}
.br-btn-primary{background:var(--br-gold-500);border-color:var(--br-gold-500);color:var(--br-navy-900)}   /* 7.09 on gold-500 */
.br-btn-primary:hover{background:var(--br-gold-300);border-color:var(--br-gold-300)}   /* 10.87 on gold-300 */
.br-btn-secondary{background:transparent;border-color:var(--br-paper);color:var(--br-paper)}   /* 14.96 on navy-700 */
.br-btn-secondary:hover{background:rgba(248,248,248,.12)}   /* ≈12.2 on the tinted ground */
.br-btn-tertiary{position:relative;padding:0 1.6em 0 .25rem;color:var(--br-paper);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--br-gold-500);text-underline-offset:.3em}   /* 14.96 on navy-700 */
.br-btn-tertiary:hover{color:var(--br-gold-300);text-decoration-color:var(--br-gold-300)}   /* 9.34 */
/* the arrow sits out of the text flow: an underline carries into every in-flow
   child of a flex link, but never into an absolutely positioned one */
.br-btn-tertiary::after{content:"→";position:absolute;right:.25rem;top:50%;translate:0 -50%;transition:translate .15s}
.br-btn-tertiary:hover::after{translate:3px -50%}   /* the arrow leans the way it points */

/* "Presented with", under the buttons: the partners by name, not logo,
   so the row stays quiet beside the buttons. Gold label, thin divider, the
   two names split by a gold star; each name links to the partner. */
.br-with{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.1rem;margin-top:.5rem;padding-top:1.1rem;border-top:1px solid rgba(232,194,103,.3);font-family:var(--br-accent)}
.br-with-label{padding-right:1.1rem;border-right:1px solid rgba(232,194,103,.4);font-weight:600;font-size:.875rem;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;color:var(--br-gold-300)}   /* 9.34 on navy-700 */
.br-with-names{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem}
.br-with-names>li{display:flex;align-items:center;gap:1rem}
.br-with-names>li+li::before{content:"";width:9px;height:9px;flex:none;background:var(--br-gold-500);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.br-with-name{display:inline-flex;align-items:center;min-height:24px;font-weight:600;font-size:1rem;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:var(--br-paper);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.3em;transition:color .15s,text-decoration-color .15s}   /* 14.96 on navy-700 */
.br-with-name:hover{color:var(--br-gold-300);text-decoration-color:var(--br-gold-500)}   /* 9.34 */
.br-with-name:focus-visible{outline-offset:3px;border-radius:2px}

/* the menu card: cream, a double gold rule inside, a gold seal that changes with the state */
.br-menu{position:relative;display:grid;gap:.6rem;justify-items:center;text-align:center;margin:10px;padding:1.75rem 1.5rem 1.6rem;background:var(--br-cream);color:var(--br-navy-700);border-radius:3px;box-shadow:0 0 0 2px var(--br-paper),0 0 0 5px var(--br-gold-500),0 24px 40px -18px rgba(0,0,0,.6);transform:rotate(-1deg)}   /* 14.42 on cream */
.br-menu::before{content:"";position:absolute;inset:9px;border:1px solid var(--br-gold-700);outline:1px solid var(--br-gold-700);outline-offset:-5px;border-radius:2px;pointer-events:none;opacity:.55}
.br-menu-kick{font-family:var(--br-accent);font-weight:600;font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;color:var(--br-red-500)}   /* 6.50 on cream */
.br-menu-title{font-family:var(--br-display);font-size:clamp(1.75rem,3vw,2.25rem);line-height:1.05;color:var(--br-navy-700)}   /* 14.42 on cream */
.br-menu-orn{display:flex;gap:.6rem;color:var(--br-gold-500)}
.br-menu-orn svg{width:14px;height:14px}
.br-menu-list{display:grid;gap:.85rem;width:100%;margin:.35rem 0 .25rem;text-align:left}
.br-menu-list dt{font-family:var(--br-accent);font-weight:600;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--br-gold-700)}   /* 5.06 on cream */
.br-menu-list dd{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .5rem}
.br-dish{font-weight:600;line-height:1.35;color:var(--br-navy-700)}   /* 14.42 on cream */
.br-leader{flex:1 1 1.5rem;min-width:1.5rem;border-bottom:2px dotted var(--br-limestone);transform:translateY(-.3em)}
.br-chef{flex-basis:100%;font-style:italic;color:var(--br-charcoal)}   /* 11.11 on cream */
.br-menu-foot{display:grid;gap:.1rem;padding-top:.75rem;border-top:1px solid var(--br-limestone);width:100%;font-weight:600;font-size:.9375rem;color:var(--br-navy-700)}   /* 14.42 on cream */
.br-menu-date{font-size:1.125rem;font-weight:900;line-height:1.35}   /* Barlow 900 is in the page's font link for this line alone */
.br-nw{white-space:nowrap}   /* when the date line has to wrap, it breaks at the dot, not inside the date or the time */   /* the when is the line people look for; a step up from the venue under it */
.br-menu-price{font-family:var(--br-accent);font-weight:600;font-size:.875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--br-charcoal)}   /* 11.11 on cream */
.br-menu-price b{color:var(--br-red-500);font-weight:700}   /* 6.50 on cream */
.br-seal{position:absolute;right:-18px;top:-22px;display:grid;place-items:center;width:84px;height:84px;padding:.6rem;border-radius:50%;text-align:center;background:var(--br-gold-500);color:var(--br-navy-900);font-family:var(--br-accent);font-weight:700;font-size:.75rem;line-height:1.05;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 0 0 3px var(--br-paper),0 0 0 6px var(--br-gold-500),0 8px 16px -6px rgba(0,0,0,.5);transform:rotate(10deg)}   /* navy-900 on gold-500 7.09 */
/* first view: the courses come up one at a time and the seal presses; it
   presses again when the day changes. Armed only by the script, so without
   JS or with reduced motion the card is simply there. */
.br-menu.is-armed .br-menu-list>div{opacity:0;transform:translateY(8px)}
.br-menu.is-in .br-menu-list>div{opacity:1;transform:none;transition:opacity .5s ease calc(.25s + var(--i)*.18s),transform .5s ease calc(.25s + var(--i)*.18s)}
.br-menu.is-in .br-seal{animation:br-press .5s cubic-bezier(.2,1.5,.4,1) .9s both}
.br-menu .br-seal.is-new{animation:br-press .5s cubic-bezier(.2,1.5,.4,1) both}
@keyframes br-press{from{transform:rotate(10deg) scale(1.7);opacity:0}to{transform:rotate(10deg) scale(1);opacity:1}}

/* ================= 2 · the street scene ================= */
/* the frame follows the drawing's own shape (1440 × 668) plus its two 3px
   rules, with no upper cap: the scene is anchored at the bottom, so any
   height short of that is taken off the top, flag and pennant first. If the
   frame comes out a touch taller (a scrollbar narrows the page below 100vw),
   the slice trims the sides instead, which costs nothing. */
.br-scene-frame{position:relative;height:clamp(320px,44.5vw,600px);border-top:3px solid var(--br-gold-500);border-bottom:3px solid var(--br-gold-500);background:var(--br-navy-900);overflow:hidden}
.br-scene-svg{display:block;width:100%;height:100%}
/* the scene's pan: on wide screens it just holds the drawing; on phones it scrolls sideways */
.br-scene-pan{height:100%}
.br-pan-hint{display:none}
/* the figcaption is not shown, but it still names the scene for screen readers (it's the svg's label) */
/* pause sits in the scene's corner so it reads as the scene's own control;
   a solid navy plate with a gold rim holds up over the light plaza paving */
.br-pause{position:absolute;left:clamp(.75rem,2vw,1.25rem);bottom:clamp(.75rem,2vw,1.25rem);z-index:2;display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 1rem 0 .85rem;background:var(--br-navy-900);border:2px solid var(--br-gold-500);border-radius:3px;box-shadow:0 0 0 2px var(--br-paper),0 6px 16px -6px rgba(0,0,0,.55);color:var(--br-paper);font-family:var(--br-accent);font-weight:600;font-size:.875rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}   /* paper on navy-900 17.41 */
.br-pause:hover{background:var(--br-navy-700)}   /* 14.96 */
.br-pause-ico{width:14px;height:14px;flex:none;fill:var(--br-gold-300)}
.br-ico-play,.br-pause[aria-pressed="true"] .br-ico-pause{display:none}
.br-pause[aria-pressed="true"] .br-ico-play{display:inline}

/* lettering inside the drawing (decorative; the facts are in the HTML) */
.br-sign{font-family:var(--br-display);font-size:21px;fill:#E8C267;letter-spacing:.02em}
.br-sign-sub{font-family:var(--br-accent);font-weight:600;font-size:9px;letter-spacing:.24em;fill:#F8F8F8}
.br-banner-k{font-family:var(--br-accent);font-weight:700;font-size:9.5px;letter-spacing:.2em;fill:#F8F8F8}
.br-banner-t{font-family:var(--br-accent);font-weight:700;font-size:15px;letter-spacing:.16em;fill:#F8F8F8}
.br-street-sign{font-family:var(--br-text);font-weight:600;font-size:12px;fill:#F8F8F8}
.br-chalk-sm{font-family:var(--br-accent);font-weight:600;font-size:8px;letter-spacing:.12em;fill:#E8C267}
.br-chalk-date{font-family:var(--br-accent);font-weight:700;font-size:9px;letter-spacing:.1em;fill:#F8F8F8}
.br-chalk-big{font-family:var(--br-display);font-size:12.5px;fill:#F8F8F8}
.br-roundel-t{font-family:var(--br-accent);font-weight:700;font-size:17px;letter-spacing:.2em;fill:#F8F8F8}

/* ---- the lit block: these are the resting states; the ignition
        animates *into* them, so no-JS and reduced motion get them as-is ---- */
.br-torch-flame,.br-spark,.br-tree>g,.br-banner,.br-steam{transform-box:fill-box}
.br-torch-flame{transform-origin:50% 100%;transform:scale(1);transition:transform .95s cubic-bezier(.2,1.5,.4,1) .2s}
.br-spark{opacity:0;transform-origin:50% 50%}
.br-glow{opacity:1;mix-blend-mode:screen;transition:opacity 1.4s ease .5s}
.br-rays line{stroke-dasharray:100;stroke-dashoffset:0;stroke-opacity:.24;transition:stroke-dashoffset 1.4s cubic-bezier(.3,.7,.2,1) var(--d,0s)}
.br-sky-warm{opacity:1;transition:opacity 2.4s ease .8s}
.br-skystars{opacity:0;transition:opacity 1.8s ease .8s}
/* fill-opacity holds still across the switch so only fill animates */
.br-win.is-on{fill:#E8C267;fill-opacity:.88;transition:fill .5s ease var(--d,0s)}
.br-win-off{fill:#1E3560}
.br-store{opacity:1;transition:opacity .8s ease 1.3s}
.br-chand{opacity:1;transition:opacity .8s ease 1.5s}
.br-bulb{opacity:.35}

/* armed = in the page, waiting to be scrolled to */
.br-scene.is-armed:not(.is-lit) .br-torch-flame{transform:scale(0)}
.br-scene.is-armed:not(.is-lit) .br-glow,
.br-scene.is-armed:not(.is-lit) .br-sky-warm{opacity:0}
.br-scene.is-armed:not(.is-lit) .br-skystars{opacity:1}
.br-scene.is-armed:not(.is-lit) .br-rays line{stroke-dashoffset:100}
.br-scene.is-armed:not(.is-lit) .br-win.is-on{fill:#1E3560}
.br-scene.is-armed:not(.is-lit) .br-store{opacity:.35}
.br-scene.is-armed:not(.is-lit) .br-chand{opacity:0}
.br-scene.is-armed:not(.is-lit) *{animation-play-state:paused}
.br-scene.is-armed.is-lit .br-spark{animation:br-spark .7s ease-out .08s 1}
@keyframes br-spark{0%{opacity:.95;transform:scale(.1)}100%{opacity:0;transform:scale(2.2)}}

/* ---- the living block (all infinite loops; paused by the button) ---- */
.br-skystars circle{animation:br-twinkle var(--tw,3s) ease-in-out var(--twd,0s) infinite}
@keyframes br-twinkle{0%,100%{opacity:.9}50%{opacity:.25}}
/* the spark stream: each spark burns down paper → gold-300 → red-300 →
   red-500 as it rises and shrinks, so the stream is hottest at the cup.
   Fill is animated on the circle itself, so the ghost flame underneath is
   what gives the fire its silhouette between sparks. */
.br-pt-ghost{fill-opacity:.42}.br-pt-ghost2{fill-opacity:.4}
.br-pt{transform-box:fill-box;transform-origin:50% 50%;opacity:0;fill:#F8F8F8;animation:br-pt var(--d,1.6s) linear var(--dl,0s) infinite}
@keyframes br-pt{0%{transform:translate(0,0) scale(1);fill:#F8F8F8;opacity:0}10%{opacity:1}45%{fill:#E8C267}72%{fill:#E4666C;opacity:.95}100%{transform:translate(var(--dx,0px),var(--dy,-100px)) scale(.2);fill:#B3030D;opacity:0}}
.br-bulb{animation:br-chase 2.4s linear calc(var(--b,0s) + 1.6s) infinite}
@keyframes br-chase{0%,100%{opacity:.35}6%{opacity:1}22%{opacity:.35}}
.br-glow{animation:br-breathe 4.8s ease-in-out 2s infinite}
@keyframes br-breathe{0%,100%{opacity:.8}50%{opacity:1}}
.br-steam{transform-origin:50% 100%;animation:br-steam 3s ease-in-out var(--sd,0s) infinite}
@keyframes br-steam{0%{opacity:0;transform:translateY(4px) scaleY(.7)}30%{opacity:.85}100%{opacity:0;transform:translateY(-12px) scaleY(1.1)}}
.br-car{animation:br-drive 24s linear 2.2s infinite;transform:translateX(var(--car-a,-220px))}
@keyframes br-drive{0%{transform:translateX(var(--car-a,-220px))}55%,100%{transform:translateX(var(--car-b,1520px))}}   /* the lane runs edge to edge of whatever crop shows */
.br-sig{fill:#3A4458}
.br-sig-r{animation:br-sig-r 12s steps(1) infinite}.br-sig-y{animation:br-sig-y 12s steps(1) infinite}.br-sig-g{animation:br-sig-g 12s steps(1) infinite}
@keyframes br-sig-g{0%{fill:#5FD06B}45%,100%{fill:#3A4458}}
@keyframes br-sig-y{0%{fill:#3A4458}45%{fill:#E8C267}57%,100%{fill:#3A4458}}
@keyframes br-sig-r{0%{fill:#3A4458}57%{fill:#E4666C}100%{fill:#E4666C}}
.br-tree>g{transform-origin:50% 100%;animation:br-sway 6s ease-in-out var(--sw,0s) infinite}
@keyframes br-sway{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
.br-banner{transform-origin:50% 0;animation:br-flutter 5s ease-in-out infinite}
@keyframes br-flutter{0%,100%{transform:skewX(0)}50%{transform:skewX(-2.5deg)}}
.br-glint{animation:br-glint 14s ease-in-out 2.5s infinite}   /* a slow 5s sweep, then a rest */
@keyframes br-glint{0%{transform:translateX(0)}36%,100%{transform:translateX(900px)}}

/* ---- the scene's toys: inert until the lighting has finished, when
        event-brunch.js adds .is-toys, the roles and the tab stops ---- */
.br-hit{fill:#000;fill-opacity:0}
.br-glow,.br-fx,.br-fx-p,.br-hint-ring{pointer-events:none}
.br-fx-p{opacity:0}
.br-scene-svg{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.is-toys .br-torch{-webkit-touch-callout:none}
.is-toys .br-coin{touch-action:none}   /* the coin alone: drag spins it, the rest of the scene still scrolls */
@media (pointer:fine){
  .is-toys .br-toy{cursor:pointer}
  .is-toys .br-facade{cursor:default}
  .is-toys .br-facade .br-win,.is-toys .br-facade .br-win-off{cursor:pointer}
  .is-toys .br-coin{cursor:grab}
  .is-toys .br-coin.is-drag{cursor:grabbing}
}
/* focus: a 3px gold-500 ring on a navy-900 halo, so it holds on the light
   paving as well as the night sky (halo 17.4 on paper paving, ring 7.1 on navy) */
.br-toy:focus{outline:none}
.br-ring,.br-ring-h{fill:none;opacity:0;pointer-events:none;vector-effect:non-scaling-stroke}
.br-ring{stroke:#D1952B;stroke-width:3}
.br-ring-h{stroke:#01132F;stroke-width:7}
.br-toy:focus-visible>.br-ring,.br-toy:focus-visible>.br-ring-h{opacity:1}

/* torch: the glow swells on a tap; held, the flame is stoked */
.br-glow{transform-box:fill-box;transform-origin:50% 50%}
.br-glow.is-swell{transform:scale(1.2)}
.br-torch-flame.is-stoked{transform:scale(1.35)}
.ca-br.is-paused .br-torch-flame{transition:none}
.br-hint-ring{opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.is-hint .br-hint-ring{animation:br-hint-pulse 1.4s ease-out 3}
@keyframes br-hint-pulse{0%{opacity:.9;transform:scale(.7)}100%{opacity:0;transform:scale(1.5)}}
/* marquee: hovered or focused, the chase runs three times as fast; pressed, every bulb blinks twice together */
.is-toys .br-marquee:hover .br-bulb,.is-toys .br-marquee:focus-visible .br-bulb{animation-duration:.8s;animation-delay:calc(var(--b,0s) / 3)}
.is-toys .br-marquee .br-bulbs.is-flash .br-bulb{opacity:1;animation:br-blink .5s linear 0s 2}
.ca-br.is-paused .br-marquee .br-bulbs.is-flash .br-bulb{animation:none}
@keyframes br-blink{0%,45%{opacity:1}50%,95%{opacity:.15}100%{opacity:1}}
/* windows: a 250ms warm fade either way */
.br-win.is-tog,.br-win-off.is-tog{transition:fill .25s ease}
/* flag and pennant take the wind from the left edge and the pole */
.br-flag{transform-box:fill-box;transform-origin:0 50%}
/* chalkboard: the event's board, or one of the toy's four messages */
.br-chalk-alt,.br-chalk-wipe{opacity:0}
.br-aframe.is-alt .br-chalk-main{opacity:0}
.br-aframe.is-alt .br-chalk-alt{opacity:1}
/* traffic light, once someone takes it over */
.br-sig-toy.is-manual .br-sig{animation:none;fill:#3A4458}
.br-sig-toy[data-sig="r"] .br-sig-r{fill:#E4666C}
.br-sig-toy[data-sig="y"] .br-sig-y{fill:#E8C267}
.br-sig-toy[data-sig="g"] .br-sig-g{fill:#5FD06B}
/* car: a bounce and two beep bubbles */
.br-car-body{transform-box:fill-box;transform-origin:50% 100%}
.br-beep{opacity:0;transform-box:fill-box;transform-origin:20% 100%}
.br-beep-top.is-beep .br-beep{opacity:1}
.br-beep-top{pointer-events:none}   /* lifted to the top layer (event-brunch.js) so nothing in the scene covers them */
.br-beep-t{font-family:var(--br-accent);font-weight:700;font-size:9px;letter-spacing:.12em;fill:#01132F}   /* navy-900 on paper 17.4 */
/* patio: steam curls taller over a hovered table; a static clink stands in for the fizz when motion is off */
.br-steam-w{transform-box:fill-box;transform-origin:50% 100%;transition:transform .45s ease}
.ca-br.is-paused .br-steam-w{transition:none}
.is-toys .br-table:hover .br-steam-w,.is-toys .br-patio:focus-visible .br-steam-w{transform:scaleY(1.7)}
.br-clink{opacity:0;pointer-events:none}
.br-table.is-fizz .br-clink{opacity:1}

/* flowerbed: hovered (or pressed, for touch and keyboard), each bud opens a
   ring of paper petals with a little spring, rippling out from the torch */
.br-petals{transform-box:fill-box;transform-origin:50% 50%;transform:scale(0) rotate(-40deg);opacity:0;transition:transform .55s cubic-bezier(.3,1.6,.5,1) var(--fd,0s),opacity .25s ease var(--fd,0s)}
.is-toys .br-bed:hover .br-petals,.br-bed.is-bloom .br-petals{transform:none;opacity:1}
.ca-br.is-paused .br-petals{transition:none}

/* the toast and the place card are real HTML over the drawing: cream
   ground, Alfa heading, a flat gold button (navy-900 on gold-500 7.09) */
.br-toast,.br-card{position:absolute;z-index:3;background:var(--br-cream);color:var(--br-navy-700);border-radius:3px;box-shadow:0 0 0 2px var(--br-gold-500),0 14px 28px -12px rgba(0,0,0,.6);font-family:var(--br-text)}
.br-toast{top:clamp(.75rem,2vw,1.25rem);right:clamp(.75rem,2vw,1.25rem);display:grid;gap:.65rem;justify-items:start;max-width:min(300px,calc(100% - 1.5rem));padding:1rem 3rem 1.1rem 1.1rem}
.br-toast-h,.br-card-h{font-family:var(--br-display);font-weight:400;font-size:1.25rem;line-height:1.15;color:var(--br-navy-700)}   /* navy-700 on cream 14.42 */
.br-toast-x{position:absolute;top:.2rem;right:.2rem;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;color:var(--br-navy-700);font-size:1.625rem;line-height:1;cursor:pointer}   /* 14.42 */
.br-card{display:grid;gap:.55rem;justify-items:center;width:max-content;max-width:210px;padding:.8rem 1rem .9rem;text-align:center;transform:rotate(-2deg)}
.br-card-h{font-size:1.125rem}
.br-toybtn{display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;background:var(--br-gold-500);border-radius:3px;color:var(--br-navy-900);font-family:var(--br-accent);font-weight:600;font-size:.9375rem;line-height:1;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap}   /* navy-900 on gold-500 7.09 */
.br-toybtn:hover{background:var(--br-gold-300)}   /* navy-900 on gold-300 10.87 */
.br-toast a:focus-visible,.br-card a:focus-visible,.br-toast-x:focus-visible{outline-color:var(--br-navy-900)}   /* the gold ring would vanish on cream */
.br-toast.is-in{animation:br-toast-in .35s ease-out}
@keyframes br-toast-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.br-card.is-in{animation:br-card-drop .6s cubic-bezier(.3,1.5,.5,1)}
@keyframes br-card-drop{0%{opacity:0;transform:translateY(-40px) rotate(-9deg)}55%{opacity:1}100%{opacity:1;transform:rotate(-2deg)}}
.br-hint{position:absolute;z-index:3;margin:0;padding:.35rem .75rem;background:var(--br-navy-900);border:2px solid var(--br-gold-500);border-radius:999px;color:var(--br-paper);font-family:var(--br-accent);font-weight:600;font-size:.875rem;line-height:1.2;letter-spacing:.08em;white-space:nowrap;pointer-events:none;transition:opacity .4s}   /* paper on navy-900 17.41 */
.br-hint.is-out{opacity:0}

/* ---------- torch · Dallas (the route-map torch, same motion as the Dallas section) ---------- */
.br-dal-tongue{transform-box:fill-box;transform-origin:50% 100%;animation:br-dal-flicker .9s ease-in-out infinite alternate}
@keyframes br-dal-flicker{from{transform:scale(1,1) rotate(-2deg)}to{transform:scale(.9,1.1) rotate(2.5deg)}}
.br-dal-glow{opacity:.55;transform-box:fill-box;transform-origin:50% 50%;animation:br-dal-breathe 1.8s ease-in-out infinite alternate}
@keyframes br-dal-breathe{from{transform:scale(.85);opacity:.42}to{transform:scale(1.15);opacity:.7}}
.br-dal-glowwrap{transition:opacity 1s ease .5s}
.br-dal-rays{opacity:.9;transition:opacity .8s ease 1.1s}
.br-dal-ray{fill:url(#br-dalray);animation:br-dal-ray 2.4s ease-in-out var(--rd,0s) infinite alternate}   /* each ray shimmers on its own beat */
@keyframes br-dal-ray{from{opacity:.55}to{opacity:1}}
.br-scene.is-armed:not(.is-lit) .br-dal-glowwrap,.br-scene.is-armed:not(.is-lit) .br-dal-rays{opacity:0}

.br-body{display:grid;gap:var(--br-gap);padding-block:var(--br-gap);isolation:isolate}
/* the navy field behind the cards echoes the scene's torch: a soft gold glow,
   and rays fanning from the top centre that fade out. Decoration only, behind
   the cards, so no text sits on it. */
.br-body::before,.br-body::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;translate:-50% 0;z-index:-1;pointer-events:none}
.br-body::before{background:repeating-conic-gradient(from 180deg at 50% 0%,rgba(232,194,103,.055) 0deg 1.4deg,transparent 1.4deg 7deg);
  -webkit-mask-image:radial-gradient(ellipse 60% 85% at 50% 0%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 60% 85% at 50% 0%,#000 10%,transparent 75%)}
.br-body::after{background:radial-gradient(ellipse 55% 50% at 50% 52%,rgba(209,149,43,.10),transparent 70%)}
/* ================= 3 · the speakers: a gig poster ================= */
/* The Cowboy has a stage, so the two sessions are the bill: a cream show
   poster, the sets side by side, both partners on a navy bar at the foot. */
.br-kicker{font-family:var(--br-accent);font-weight:600;font-size:.875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--br-gold-300)}
.br-h3{font-family:var(--br-display);font-weight:400;font-size:clamp(1.75rem,3.4vw,2.25rem);line-height:1.1;color:var(--br-paper)}
.br-poster{position:relative;display:flex;flex-direction:column;container-type:inline-size;margin-inline:5px;background:var(--br-cream);color:var(--br-charcoal);border-radius:3px;overflow:hidden;box-shadow:var(--br-frame)}   /* 11.11 on cream */
.br-poster-top{padding:.65rem 1rem;background:var(--br-red-500);color:var(--br-paper);text-align:center;font-family:var(--br-accent);font-weight:600;font-size:.875rem;letter-spacing:.18em;text-transform:uppercase}   /* 6.74 on red-500 */
/* a faint sunburst rising behind the heading, like a stage backdrop */
.br-poster-head{display:grid;gap:.6rem;justify-items:center;text-align:center;padding:clamp(1.75rem,4vw,2.75rem) clamp(1.25rem,4vw,2.5rem) 1.5rem;background:repeating-conic-gradient(from 0deg at 50% 120%,rgba(209,149,43,.13) 0 6deg,transparent 6deg 12deg)}
.br-poster-kick{font-family:var(--br-accent);font-weight:600;font-size:.875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--br-red-500)}   /* 6.50 on cream, 5.87 on a sunburst ray */
/* type ladder: section head 3.75 › speaker name 2.125 › lead 1.1875 › body 1 › labels .75–.875 */
.br-poster-h{font-family:var(--br-display);font-weight:400;font-size:clamp(2.5rem,5.5vw,3.75rem);line-height:1.02;color:var(--br-navy-700)}   /* 14.42 on cream, 13.03 on a ray */
.br-poster-lead{max-width:46ch;font-size:1.1875rem;line-height:1.55;color:var(--br-charcoal);text-wrap:balance}   /* 11.11 on cream, 10.03 on a ray */
.br-acts{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:0 clamp(1rem,3vw,2.5rem);padding:2rem clamp(1.25rem,4vw,2.75rem) 2.5rem;border-top:3px double var(--br-gold-700)}
.br-act{display:grid;align-content:start;gap:0;text-align:center;justify-items:center}
/* course label: a quiet outlined tag, so the name is the first thing you read */
.br-set{padding:.3rem .65rem .3rem .85rem;border:1px solid var(--br-gold-700);border-radius:3px;font-family:var(--br-accent);font-weight:600;font-size:.75rem;line-height:1.2;letter-spacing:.2em;text-transform:uppercase;color:var(--br-gold-700)}   /* 5.06 on cream */
.br-name{font-family:var(--br-display);font-weight:400;font-size:clamp(1.75rem,3vw,2.125rem);line-height:1.05;color:var(--br-navy-700)}   /* 14.42 on cream */
/* role in navy, not red: red stays with the kicker, the top band and the stamps */
.br-role{font-family:var(--br-accent);font-weight:600;font-size:.8125rem;line-height:1.35;letter-spacing:.12em;text-transform:uppercase;color:var(--br-navy-500)}   /* 9.06 on cream */
.br-desc{max-width:38ch;font-size:1rem;line-height:1.6;color:var(--br-charcoal);text-wrap:pretty}   /* 11.11 on cream */
/* topics as ink stamps: red double rule, red caps, square corners */
.br-chips{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.6rem .8rem}
.br-chips li{display:inline-flex;align-items:center;padding:.3rem .6rem .3rem .75rem;border:3px double var(--br-red-500);border-radius:2px;font-family:var(--br-accent);font-weight:700;font-size:.8125rem;line-height:1.1;letter-spacing:.14em;text-transform:uppercase;color:var(--br-red-500)}   /* 6.50 on cream */
/* scoped under .br-act so they outrank the section's .ca-br p reset */
.br-act>.br-set{margin-bottom:.85rem}
.br-act>.br-role{margin-top:.5rem}
.br-act>.br-desc{margin-top:.9rem}
.br-act>.br-chips{margin-top:1.15rem}
.br-acts-div{display:flex;flex-direction:column;justify-content:center;gap:.6rem;color:var(--br-gold-500)}
.br-acts-div svg{width:16px;height:16px}
/* footer: "Presented with" · thin gold divider · the two logos, split by a gold star */
.br-bill{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem clamp(1.25rem,3vw,2rem);padding:1.35rem 1.5rem;background:var(--br-navy-900);border-top:3px solid var(--br-gold-500)}
.br-bill-label{padding-right:clamp(1.25rem,3vw,2rem);border-right:1px solid rgba(209,149,43,.45);font-family:var(--br-accent);font-weight:600;font-size:.875rem;line-height:1.2;letter-spacing:.2em;text-transform:uppercase;color:var(--br-gold-300)}   /* 10.87 on navy-900 */
.br-bill-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem clamp(1.5rem,4vw,2.5rem)}
.br-bill-star{display:flex;color:var(--br-gold-500)}
.br-bill-star svg{width:14px;height:14px}
.br-logo{display:flex;align-items:center;justify-content:center;min-height:44px;color:var(--br-paper);text-decoration:none;transition:opacity .15s}
.br-logo:hover{opacity:.85}
/* a fixed height, not just a max: the SVG logo has no width of its own to fall back on and collapses to 0 in the flex row */
.br-logo img{display:block;width:auto;max-width:min(260px,38vw);object-fit:contain}
/* sized by eye: Yellow Belly is fine line work and reads light, Leadership Institute is a solid block */
.br-logo--ybm img{height:40px}
.br-logo--li img{height:30px}
.br-logo-text{display:none;font-family:var(--br-display);font-size:1.375rem;line-height:1.1;color:var(--br-paper)}   /* 17.41 on navy-900 */
.br-logo.is-broken img{display:none}
.br-logo.is-broken .br-logo-text{display:block}
/* first view: the sets come up like stage lights, one then the other, and
   the stars between them spin in. Armed only by the script, so without JS
   or with reduced motion the poster is simply there. */
.br-poster.is-armed .br-act{opacity:0;transform:translateY(14px)}
.br-poster.is-in .br-act{opacity:1;transform:none;transition:opacity .6s ease calc(.3s + var(--i)*.35s),transform .6s cubic-bezier(.2,1.2,.4,1) calc(.3s + var(--i)*.35s)}
.br-poster.is-armed .br-acts-div svg{transform:scale(0) rotate(-90deg)}
.br-poster.is-in .br-acts-div svg{transform:none;transition:transform .5s cubic-bezier(.2,1.6,.4,1) .9s}

/* ================= the seam into the next section ================= */
/* Where the playbook section ("Take the playbook home") follows straight on,
   the hard gold line becomes a gentler hand-off: a gold rule that tapers out
   toward both edges, a small star medallion sitting on it, and a faint warm
   glow that dissolves into the next section's ground (cream in light, navy
   in dark). Decoration only, behind the content. */
.ca-br:has(+ .ca-li){border-bottom:0}
.ca-br:has(+ .ca-li)::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:1;height:3px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--br-gold-500) 24%,var(--br-gold-500) 76%,transparent)}
.ca-br + .ca-li{position:relative;isolation:isolate;border-top:0}
.ca-br + .ca-li::before{content:"";position:absolute;top:0;left:50%;z-index:2;width:30px;height:30px;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:#01132F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5l1.9 4.1 4.5.5-3.4 3 1 4.4L8 11.2 4 13.5l1-4.4-3.4-3 4.5-.5z' fill='%23D1952B'/%3E%3C/svg%3E") center/14px no-repeat;
  box-shadow:0 0 0 2px #D1952B,0 0 0 6px #01132F}   /* navy-900 disc, gold ring, and a navy collar so the rule stops short of it */
.ca-br + .ca-li::after{content:"";position:absolute;left:0;right:0;top:0;z-index:-1;height:min(320px,45%);pointer-events:none;
  background:radial-gradient(ellipse 55% 100% at 50% 0%,rgba(209,149,43,.12),transparent 72%)}

/* ================= closing footer · layout 4 "Centered map" (efm-center.html) ================= */
/* ---- Brunch & Learn closing footer · scoped to .ca-ef ----
   Sits on the section's navy band in both themes. */
.ca-ef{
  --ef-navy-900:var(--ca-navy-900,#01132F);--ef-navy-700:var(--ca-navy-700,#02204F);--ef-navy-100:var(--ca-navy-100,#D8E0EE);
  --ef-red-500:var(--ca-red-500,#B3030D);--ef-gold-500:var(--ca-gold-500,#D1952B);--ef-gold-300:var(--ca-gold-300,#E8C267);--ef-gold-700:var(--ca-gold-700,#8F5E00);
  --ef-paper:var(--ca-paper,#F8F8F8);--ef-charcoal:var(--ca-charcoal,#2E3547);--ef-limestone:var(--ca-limestone,#C9CFDB);
  --ef-display:var(--font-display,'Alfa Slab One',Rockwell,'Roboto Slab',serif);--ef-text:var(--font-text,'Barlow','Helvetica Neue',Arial,sans-serif);--ef-accent:var(--font-accent,'Barlow Condensed','Arial Narrow',sans-serif);
  color:var(--ef-navy-100);font-family:var(--ef-text);font-size:1.0625rem;line-height:1.6}
.ca-ef *,.ca-ef *::before,.ca-ef *::after{box-sizing:border-box}
.ca-ef [hidden]{display:none!important}
.ca-ef h2,.ca-ef p,.ca-ef ul,.ca-ef ol{margin:0}
.ef-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ef-kick{font-family:var(--ef-accent);font-weight:600;font-size:.875rem;line-height:1.35;letter-spacing:.14em;text-transform:uppercase;color:var(--ef-gold-300);text-wrap:balance}   /* 10.6 on navy-900 */
.ef-h{font-family:var(--ef-display);font-weight:400;line-height:1.02;color:var(--ef-paper);text-wrap:balance}
.ef-lede{max-width:52ch;font-size:1.125rem;line-height:1.55;text-wrap:pretty}
.ef-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem}
.ef-btn{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 1.25rem;border:2px solid transparent;border-radius:3px;text-decoration:none;
  font-family:var(--ef-accent);font-weight:600;font-size:1.0625rem;line-height:1;letter-spacing:.08em;text-transform:uppercase;transition:background-color .15s,color .15s,border-color .15s}
.ef-btn svg{width:16px;height:16px;flex:none}
.ef-btn-primary{background:var(--ef-gold-500);border-color:var(--ef-gold-500);color:var(--ef-navy-900)}   /* 7.6 */
.ef-btn-primary:hover{background:var(--ef-gold-300);border-color:var(--ef-gold-300)}
.ef-btn-ghost{border-color:var(--ef-paper);color:var(--ef-paper)}
.ef-btn-ghost:hover{background:rgba(248,248,248,.12)}
.ef-link{display:inline-flex;align-items:center;min-height:44px;padding:0 .3rem;font-family:var(--ef-accent);font-weight:600;font-size:1.0625rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ef-paper);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--ef-gold-500);text-underline-offset:.3em}
.ef-link:hover{color:var(--ef-gold-300);text-decoration-color:var(--ef-gold-300)}
.ca-ef a:focus-visible{outline:3px solid var(--ef-gold-500);outline-offset:2px}
/* full-width band: same 1180px wrap and gutter as the other blocks */
.ca-ef{display:block;width:100%;background:var(--ef-navy-900);border-top:3px solid var(--ef-gold-500)}
.ef-in{max-width:var(--wrap,1180px);margin-inline:auto;padding:clamp(2.5rem,5vw,3.75rem) clamp(1rem,4vw,2.5rem) clamp(1.5rem,3vw,2rem)}
.ef-main{display:grid;gap:2rem clamp(2rem,4vw,3rem);align-items:center}
@media (min-width:901px){.ef-side .ef-actions{flex-wrap:nowrap}}
@media (max-width:900px){.ef-main{grid-template-columns:minmax(0,1fr)!important}}
/* sign-off: star · rule · line · rule · star across the full width */
.ef-sign{display:grid;grid-template-columns:auto minmax(1rem,1fr) auto minmax(1rem,1fr) auto;align-items:center;gap:1rem;margin-top:clamp(2.25rem,4vw,3rem)!important;
  font-family:var(--ef-accent);font-weight:600;font-size:.8125rem;line-height:1.5;letter-spacing:.16em;text-transform:uppercase;color:var(--ef-navy-100);text-align:center}
.ef-sign-rule{height:1px;background:rgba(232,194,103,.4)}
.ef-sign-t{padding-left:.16em}   /* evens out the trailing letter-space */
.ef-sign-t>span{white-space:nowrap}
.ef-sign-star{display:flex;color:var(--ef-gold-500)}
.ef-sign-star svg{width:12px;height:12px}
@media (max-width:600px){.ef-sign{gap:.6rem}.ef-sign-t>span{display:block}.ef-sign-sep{display:none!important}}
@media (max-width:480px){.ef-actions{flex-direction:column;align-items:stretch;width:100%}.ef-btn{justify-content:center}.ef-link{justify-content:center}.ef-side,.ef-copy{justify-items:stretch!important}}
@media (prefers-reduced-motion:reduce){.ca-ef *{transition:none!important;animation:none!important}}
/* ---- shared by the three layouts ---- */
.ca-ef{background:var(--ef-navy-900);box-shadow:0 0 0 100vmax var(--ef-navy-900);clip-path:inset(0 -100vmax);
  border-top:3px solid var(--ef-gold-500);border-image:linear-gradient(var(--ef-gold-500) 0 0) 1 / 3px 0 0 / 0 100vmax}   /* full bleed without a scrollbar */
.ca-ef h3{margin:0}
.ef-orn{display:flex;align-items:center;gap:.6rem;width:min(100%,520px);color:var(--ef-gold-500)}
.ef-orn span{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--ef-gold-500))}
.ef-orn span:last-child{background:linear-gradient(90deg,var(--ef-gold-500),transparent)}
.ef-orn-l{width:min(100%,360px)}
.ef-orn-l span:last-child{background:linear-gradient(90deg,var(--ef-gold-500),transparent)}
.ef-orn svg{width:14px;height:14px}
.ef-count{display:flex;gap:.6rem}
.ef-count div{display:grid;justify-items:center;gap:.15rem;min-width:4.75rem;padding:.65rem .5rem .55rem;border:1px solid rgba(232,194,103,.45);border-radius:3px;background:rgba(2,32,79,.6)}
.ef-count b{font-family:var(--ef-display);font-weight:400;font-size:2rem;line-height:1;color:var(--ef-paper);font-variant-numeric:tabular-nums}
.ef-count span{font-family:var(--ef-accent);font-weight:600;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ef-gold-300)}
.ef-sms{gap:.5rem}
.ef-sms svg{width:18px;height:18px;flex:none;color:var(--ef-gold-300)}
.ef-sms.is-copied{color:var(--ef-gold-300)}
.ef-ne{width:16px;height:16px;flex:none}
.ef-ev{gap:.55rem;white-space:nowrap}
@media (max-width:480px){.ca-ef .ef-ev,.efm-stop .ef-btn{width:100%;justify-content:center}.efm-stop{justify-items:stretch}.efm-vbtns{width:100%;flex-direction:column;align-items:stretch}.efm-vbtns .ef-link{justify-content:center}.efm-under{flex-direction:column;align-items:stretch}}
/* the sign-off: one hairline across the full width, a star each side of the line */
.ca-ef .ef-sign{display:grid;grid-template-columns:auto minmax(0,auto) auto;justify-content:center;align-items:center;gap:1.1rem;
  margin-top:clamp(2.25rem,4vw,3rem)!important;padding-top:1.4rem;border-top:1px solid rgba(138,156,196,.25)}
@media (max-width:600px){.ca-ef .ef-sign{gap:.75rem}}
/* ==== 4 · Centered map: headline, a short voting note with its link, the map, then the buttons ====
   Three groups on one rhythm: tight inside a group, --efm-gap between groups. */
.efm-center{--efm-gap:clamp(1.75rem,3.5vw,2.5rem)}
.efm-center .efm-hero{display:grid;justify-items:center;text-align:center}
.efm-top{display:grid;justify-items:center;gap:.85rem}
.efm-center .ef-h{font-size:clamp(2.25rem,6vw,4rem)}
@media (max-width:380px){.efm-center .ef-h{font-size:clamp(1.75rem,8vw,2.25rem)}}   /* "Thanks for pulling up a chair." keeps to two lines at 360px */
/* ---- the button row: one matched set (primary + secondary), every state ---- */
.ca-ef .ef-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem}
.ca-ef .ef-actions .ef-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:0 1.35rem;border:1.5px solid transparent;border-radius:3px;
  font-family:var(--ef-accent);font-weight:600;font-size:1.0625rem;line-height:1;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  transition:background-color .15s,border-color .15s,color .15s,translate .15s,box-shadow .15s}
.ca-ef .ef-actions .ef-btn svg{width:18px;height:18px;flex:none}
.ca-ef .ef-actions .ef-btn-primary{background:var(--ef-gold-500);border-color:var(--ef-gold-500);color:var(--ef-navy-900);box-shadow:0 8px 18px -12px rgba(209,149,43,.9)}   /* navy-900 on gold-500 7.09 */
.ca-ef .ef-actions .ef-btn-primary:hover{background:var(--ef-gold-300);border-color:var(--ef-gold-300);color:var(--ef-navy-900);translate:0 -1px}   /* 10.87 */
.ca-ef .ef-actions .ef-btn-secondary{background:rgba(248,248,248,.04);border-color:rgba(232,194,103,.6);color:var(--ef-paper)}   /* paper on the tinted navy-900 16.3 */
.ca-ef .ef-actions .ef-btn-secondary svg{color:var(--ef-gold-300)}
.ca-ef .ef-actions .ef-btn-secondary:hover{background:rgba(232,194,103,.1);border-color:var(--ef-gold-300);color:var(--ef-paper);translate:0 -1px}   /* 14.0 on the gold tint */
.ca-ef .ef-actions .ef-sms.is-copied{border-color:var(--ef-gold-300);color:var(--ef-gold-300)}   /* gold-300 on navy-900 10.87 */
.ca-ef .ef-actions .ef-btn:focus-visible{outline:3px solid var(--ef-gold-500);outline-offset:3px}
.efm-center .ef-actions .ef-btn{min-width:13rem}   /* the three read as an even row */
@media (max-width:480px){.ca-ef .ef-actions{flex-direction:column;align-items:stretch;width:100%}.ca-ef .ef-actions .ef-btn{width:100%;min-width:0}}
@media (prefers-reduced-motion:reduce){.ca-ef .ef-actions .ef-btn{transition:none}.ca-ef .ef-actions .ef-btn:hover{translate:none}}
.efm-vnote{display:grid;justify-items:center;gap:.4rem;margin-top:calc(var(--efm-gap) * .7)}
.efm-vp{max-width:50ch;font-size:1.125rem;line-height:1.6;color:var(--ef-navy-100);text-wrap:balance}   /* 13.9 on navy-900 */
.efm-vp b{font-weight:600;color:var(--ef-paper)}
.efm-vlink{display:flex;flex-wrap:wrap;justify-content:center;gap:0 1.5rem}   /* the early-voting link and the checklist link, side by side */
.efm-inl{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 .25rem;font-family:var(--ef-accent);font-weight:600;font-size:1.0625rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ef-gold-300);text-decoration:none}   /* 10.6 on navy-900 */
.efm-inl span{text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--ef-gold-500);text-underline-offset:.3em}
.efm-inl:hover{color:var(--ef-paper)}
.efm-inl:hover span{text-decoration-color:var(--ef-paper)}
.efm-ballot{width:18px;height:18px;flex:none}
.efm-inl .ef-ne{width:15px;height:15px;transition:translate .15s}
.efm-inl:hover .ef-ne{translate:2px -2px}
.ca-ef.efm-center .ca-vv{width:min(100% - 10px,720px);margin:var(--efm-gap) 5px 0}
.efm-acts{margin-top:var(--efm-gap)}
.efm-center .ef-actions{justify-content:center}
.efm-center .ef-actions .ef-btn{min-width:12.5rem;justify-content:center}
.efm-center .ef-sign{margin-top:var(--efm-gap)!important}
@media (max-width:480px){.efm-acts{width:100%}.efm-center .ef-actions .ef-btn{min-width:0}}
@media (prefers-reduced-motion:reduce){.efm-inl .ef-ne{transition:none}}


/* ---- Venue + vote card with the map · scoped to .ca-vv ----
   Light: cream card. Dark (site's data-theme="dark", or the OS setting when
   there is no data-theme): navy-900 card. Ratios are on the named ground. */
.ca-vv{
  --vv-navy-900:var(--ca-navy-900,#01132F);--vv-navy-700:var(--ca-navy-700,#02204F);--vv-navy-500:var(--ca-navy-500,#1E4278);--vv-navy-100:var(--ca-navy-100,#D8E0EE);
  --vv-red-500:var(--ca-red-500,#B3030D);--vv-red-700:var(--ca-red-700,#8C0209);--vv-gold-500:var(--ca-gold-500,#D1952B);--vv-gold-300:var(--ca-gold-300,#E8C267);--vv-gold-700:var(--ca-gold-700,#8F5E00);
  --vv-paper:var(--ca-paper,#F8F8F8);--vv-cream:var(--ca-cream,#F6F4EC);--vv-charcoal:var(--ca-charcoal,#2E3547);--vv-limestone:var(--ca-limestone,#C9CFDB);
  --vv-display:var(--font-display,'Alfa Slab One',Rockwell,'Roboto Slab',serif);--vv-text:var(--font-text,'Barlow','Helvetica Neue',Arial,sans-serif);--vv-accent:var(--font-accent,'Barlow Condensed','Arial Narrow',sans-serif);
  /* light */
  --vv-bg:var(--vv-cream);--vv-fg:var(--vv-charcoal);--vv-head:var(--vv-navy-700);--vv-kick:var(--vv-red-500);--vv-link:var(--vv-red-500);--vv-link-h:var(--vv-red-700);
  --vv-rule:var(--vv-gold-700);--vv-ring:var(--vv-gold-700);--vv-hair:var(--vv-limestone);--vv-accent-ink:var(--vv-gold-700);
  --vv-btn-bg:var(--vv-red-500);--vv-btn-fg:var(--vv-paper);--vv-btn-h:var(--vv-red-700);--vv-tint:rgba(209,149,43,.07);
  --vv-land:#EDE8D8;--vv-road:#FFFFFF;--vv-casing:#CFCAB8;--vv-minor:#E3DECC;--vv-label:#2E3547;--vv-cap:#8A9CC4;--vv-hill:#DCE1CC;--vv-plan-bg:#FFFFFF;
  position:relative;display:grid;margin-inline:5px;border-radius:3px;overflow:hidden;background:var(--vv-bg);color:var(--vv-fg);
  font-family:var(--vv-text);font-size:1.0625rem;line-height:1.6;box-shadow:0 0 0 2px var(--vv-paper),0 0 0 5px var(--vv-gold-500)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ca-vv{
  --vv-bg:var(--vv-navy-900);--vv-fg:var(--vv-navy-100);--vv-head:var(--vv-paper);--vv-kick:var(--vv-gold-300);--vv-link:var(--vv-paper);--vv-link-h:var(--vv-gold-300);
  --vv-rule:var(--vv-gold-500);--vv-ring:var(--vv-gold-500);--vv-hair:rgba(138,156,196,.32);--vv-accent-ink:var(--vv-gold-300);
  --vv-btn-bg:var(--vv-gold-500);--vv-btn-fg:var(--vv-navy-900);--vv-btn-h:var(--vv-gold-300);--vv-tint:rgba(138,156,196,.07);
  --vv-land:#0A1B3A;--vv-road:#2C4F86;--vv-casing:#16305C;--vv-minor:#102447;--vv-label:#D8E0EE;--vv-cap:#8A9CC4;--vv-hill:#11284E;--vv-plan-bg:#0A1B3A}}
:root[data-theme="dark"] .ca-vv{
  --vv-bg:var(--vv-navy-900);--vv-fg:var(--vv-navy-100);--vv-head:var(--vv-paper);--vv-kick:var(--vv-gold-300);--vv-link:var(--vv-paper);--vv-link-h:var(--vv-gold-300);
  --vv-rule:var(--vv-gold-500);--vv-ring:var(--vv-gold-500);--vv-hair:rgba(138,156,196,.32);--vv-accent-ink:var(--vv-gold-300);
  --vv-btn-bg:var(--vv-gold-500);--vv-btn-fg:var(--vv-navy-900);--vv-btn-h:var(--vv-gold-300);--vv-tint:rgba(138,156,196,.07);
  --vv-land:#0A1B3A;--vv-road:#2C4F86;--vv-casing:#16305C;--vv-minor:#102447;--vv-label:#D8E0EE;--vv-cap:#8A9CC4;--vv-hill:#11284E;--vv-plan-bg:#0A1B3A}
.ca-vv *,.ca-vv *::before,.ca-vv *::after{box-sizing:border-box}
.ca-vv [hidden]{display:none!important}
.ca-vv h3,.ca-vv p,.ca-vv ol,.ca-vv dl,.ca-vv dd,.ca-vv figure,.ca-vv address{margin:0}
.vv-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* type */
.vv-kick{font-family:var(--vv-accent);font-weight:600;font-size:.875rem;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--vv-kick)}   /* red 6.66 on cream · gold-300 10.6 on navy-900 */
.vv-h{margin-top:-.4rem!important;font-family:var(--vv-display);font-weight:400;font-size:clamp(1.75rem,3.4vw,2.25rem);line-height:1.1;color:var(--vv-head);text-wrap:balance}
.vv-lede{max-width:46ch}
.vv-fine{font-size:.9375rem;max-width:52ch}
.ca-vv a{display:inline-flex;align-items:center;min-height:24px;font-weight:600;color:var(--vv-link);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--vv-rule);text-underline-offset:.2em}
.ca-vv a:hover{color:var(--vv-link-h);text-decoration-color:var(--vv-link-h)}
.ca-vv a:focus-visible,.ca-vv button:focus-visible{outline:3px solid var(--vv-ring);outline-offset:2px}
.vv-ext{width:11px;height:11px;margin-left:.35em;flex:none}
.vv-links,.vv-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.5rem}
.ca-vv a.vv-btn{min-height:44px;padding:0 1.35rem;border-radius:3px;background:var(--vv-btn-bg);color:var(--vv-btn-fg);text-decoration:none;
  font-family:var(--vv-accent);font-weight:600;font-size:1.0625rem;line-height:1;letter-spacing:.08em;text-transform:uppercase}   /* paper on red-500 6.4 · navy-900 on gold-500 7.6 */
.ca-vv a.vv-btn:hover{background:var(--vv-btn-h);color:var(--vv-btn-fg)}

/* top row: venue facts | map */
.vv-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.vv-venue{display:grid;align-content:start;gap:1.1rem;padding:clamp(1.5rem,3.2vw,2.5rem)}
.vv-facts{display:grid;border-top:1px solid var(--vv-hair)}
.vv-facts>div{display:grid;grid-template-columns:5.75rem minmax(0,1fr);gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--vv-hair)}
.vv-facts dt{padding-top:.2rem;font-family:var(--vv-accent);font-weight:600;font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;color:var(--vv-accent-ink)}   /* gold-700 4.9 on cream */
.vv-facts dd{line-height:1.45}
.ca-vv address{font-style:normal;font-weight:600;color:var(--vv-head)}
.vv-actions{margin-top:.25rem}

/* the map */
.vv-map{display:flex;flex-direction:column;background:var(--vv-land);border-left:1px solid var(--vv-hair)}
.vv-map-art{flex:1;display:flex;align-items:center}
.vv-map-svg{display:block;width:100%;height:auto}
.vv-map-phone{display:none}
.vv-map-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.4rem 1.25rem;padding:.65rem clamp(1rem,2.5vw,1.5rem);border-top:1px solid var(--vv-hair);
  font-family:var(--vv-accent);font-weight:600;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--vv-label)}
.vv-legend{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem 1rem}
.vv-li{display:inline-flex;align-items:center;gap:.45rem}
.vv-legend i{display:inline-block;flex:none;width:12px;height:12px;border-radius:50%}
.vv-key-red{background:var(--vv-red-500);box-shadow:0 0 0 2px var(--vv-paper)}
.vv-key-navy{background:var(--vv-navy-500);box-shadow:0 0 0 2px var(--vv-paper)}
.vv-key-route{width:22px!important;height:0!important;border-radius:0!important;border-top:3px dashed var(--vv-gold-500)}
.vv-map-tag{opacity:.8}
.vv-land{fill:var(--vv-land)}
.vv-minor line{stroke:var(--vv-minor);stroke-width:7}
.vv-casing{stroke:var(--vv-casing)}.vv-road{stroke:var(--vv-road)}
.vv-slabel{font-family:var(--vv-text);font-weight:600;fill:var(--vv-label)}
.vv-plabel{font-family:var(--vv-accent);font-weight:700;letter-spacing:.03em;fill:var(--vv-label)}
.vv-sub{font-family:var(--vv-text);font-weight:500;fill:var(--vv-label)}
.vv-halo{stroke:var(--vv-land);stroke-width:5px;stroke-linejoin:round;paint-order:stroke}
.vv-rlabel{font-family:var(--vv-accent);font-weight:700;letter-spacing:.14em;fill:var(--vv-accent-ink)}
.vv-cap{fill:var(--vv-cap)}.vv-hill{fill:var(--vv-hill)}
.vv-garage rect{fill:var(--vv-navy-500)}.vv-garage text{font-family:var(--vv-text);font-weight:700;font-size:17px;fill:var(--vv-paper)}
.vv-pin-red{fill:var(--vv-red-500);stroke:var(--vv-paper);stroke-width:2.5}
.vv-pin-navy{fill:var(--vv-navy-500);stroke:var(--vv-paper);stroke-width:2.5}
.vv-flame{fill:var(--vv-gold-300)}.vv-rim{fill:var(--vv-paper)}
.vv-box{fill:var(--vv-paper)}.vv-ballot{fill:var(--vv-gold-300)}.vv-tick{fill:none;stroke:var(--vv-navy-700);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vv-ring{fill:none;stroke:var(--vv-red-500);stroke-width:2;transform-box:fill-box;transform-origin:50% 50%;animation:vv-ripple 2.4s ease-out 1.2s infinite}
@keyframes vv-ripple{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(2.4)}}
.vv-route{fill:none;stroke:var(--vv-gold-500);stroke-width:4;stroke-linecap:round;stroke-dasharray:2 10;animation:vv-walk 1.2s linear infinite}
@keyframes vv-walk{to{stroke-dashoffset:-12}}
.vv-arrowhead{fill:var(--vv-gold-500)}
.vv-north path{fill:var(--vv-label)}.vv-north text{font-family:var(--vv-accent);font-weight:700;font-size:12px;fill:var(--vv-label)}
/* one route per plan; no route after brunch; no Lentz pin after early voting */
.ca-vv[data-plan="vote"] .vv-route-w,.ca-vv[data-plan="brunch"] .vv-route-e{display:none}
.ca-vv:not([data-vv="pre"]) .vv-route,.ca-vv:not([data-vv="pre"]) .vv-route-lab,.ca-vv:not([data-vv="pre"]) .vv-li-route{display:none}
.ca-vv[data-vv="closed"] .vv-poll,.ca-vv[data-vv="closed"] .vv-poll-lab,.ca-vv[data-vv="closed"] .vv-li-navy{display:none}

/* bottom row, full width: vote, then eat */
.vv-vote{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:1.75rem clamp(1.5rem,4vw,3rem);align-items:start;
  position:relative;padding:clamp(2rem,4vw,3rem) clamp(1.5rem,3.2vw,2.5rem) clamp(1.5rem,3.2vw,2.5rem);border-top:1px solid var(--vv-hair);
  background:linear-gradient(180deg,var(--vv-tint),transparent 9rem)}
/* the seam: a star where the map's edge meets the divider */
.vv-orn{position:absolute;top:0;left:calc(100% / 2.15);display:grid;place-items:center;width:34px;height:34px;translate:-50% -50%;border-radius:50%;
  background:var(--vv-bg);border:1px solid var(--vv-hair);color:var(--vv-gold-500)}
.vv-orn svg{width:14px;height:14px}
.vv-vote-a,.vv-vote-b{display:grid;align-content:start;gap:1rem}
.ca-vv:not([data-vv="pre"]) .vv-vote{grid-template-columns:minmax(0,1fr)}
.ca-vv:not([data-vv="pre"]) .vv-lede{max-width:62ch}

/* the two plans */
.vv-plans-h{font-family:var(--vv-accent);font-weight:600;font-size:.875rem;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--vv-kick)}
.vv-plans{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.85rem}
.vv-plan{display:grid;align-content:start;gap:.75rem;padding:.95rem 1.05rem 1.1rem;text-align:left;cursor:pointer;font:inherit;font-size:.9375rem;line-height:1.45;color:var(--vv-fg);
  background:var(--vv-plan-bg);border:2px solid var(--vv-hair);border-radius:3px;transition:border-color .15s,box-shadow .15s}
.vv-plan:hover{border-color:var(--vv-gold-500)}
.vv-plan[aria-pressed="true"]{border-color:var(--vv-gold-500);box-shadow:inset 0 4px 0 var(--vv-gold-500)}
.vv-plan-tag{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.25rem .75rem;font-family:var(--vv-accent);font-weight:700;font-size:.875rem;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--vv-head)}
.vv-on{display:none;font-family:var(--vv-accent);font-weight:600;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--vv-accent-ink)}
.vv-plan[aria-pressed="true"] .vv-on{display:inline}
.vv-step{display:grid;grid-template-columns:1.75rem minmax(0,1fr);gap:.65rem;align-items:start}
.vv-step i{display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--vv-gold-500);color:var(--vv-navy-900);
  font-family:var(--vv-accent);font-style:normal;font-weight:700;font-size:.9375rem}
.vv-step b{display:block;font-family:var(--vv-accent);font-weight:600;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--vv-accent-ink)}

/* key dates: one strip across the bottom */
.vv-dates{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;padding:1.25rem 0 0;list-style:none;border-top:1px solid var(--vv-hair)}
.vv-dates li{position:relative;display:grid;gap:.1rem;padding-top:1.5rem;line-height:1.3}
.vv-dates li::before{content:"";position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:var(--vv-bg);border:2px solid var(--vv-hair);z-index:1}
.vv-dates li:not(:last-child)::after{content:"";position:absolute;left:12px;right:-.75rem;top:5px;height:2px;background:var(--vv-hair)}
.vv-dates span{font-family:var(--vv-accent);font-weight:600;font-size:.875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--vv-head)}
.vv-dates .is-us{font-weight:600;color:var(--vv-head)}
.vv-dates .is-us::before{background:var(--vv-gold-500);border-color:var(--vv-gold-500);box-shadow:0 0 0 3px rgba(209,149,43,.3)}

/* first view: the pins drop, the route walks in */
.ca-vv.is-armed .vv-pin,.ca-vv.is-armed .vv-poll{opacity:0;translate:0 -36px}
.ca-vv.is-in .vv-pin,.ca-vv.is-in .vv-poll{opacity:1;translate:0 0;transition:translate .7s cubic-bezier(.3,1.6,.5,1) .3s,opacity .2s ease .3s}
.ca-vv.is-in .vv-poll{transition-delay:.55s}
.ca-vv.is-armed .vv-route{opacity:0}
.ca-vv.is-in .vv-route{opacity:1;transition:opacity .6s ease 1s}

@media (max-width:860px){
  .vv-top,.vv-vote{grid-template-columns:minmax(0,1fr)}
  .vv-map{border-left:0;border-top:1px solid var(--vv-hair)}
  .vv-orn{left:50%}
}
@media (max-width:560px){
  .vv-map-col{display:none}.vv-map-phone{display:block}
  .vv-plans{grid-template-columns:minmax(0,1fr)}
  .vv-dates{grid-template-columns:minmax(0,1fr);gap:0;padding-top:.75rem}
  .vv-dates li{grid-template-columns:7.5rem minmax(0,1fr);gap:.5rem;padding:.45rem 0 .45rem 1.5rem}
  .vv-dates li::before{top:.7rem}
  .vv-dates li:not(:last-child)::after{left:5px;right:auto;top:1.3rem;width:2px;height:100%}
}
@media (prefers-reduced-motion:reduce){.ca-vv *,.ca-vv *::before,.ca-vv *::after{animation:none!important;transition:none!important}}

/* ---- map on its own ---- */
.vv-solo .vv-map{border-left:0;--vv-land:var(--vv-bg)}
@media (max-width:860px){.vv-solo .vv-map{border-top:0}}

/* ---- the map inside the footer: always the dark palette, framed like the section's cards ---- */
.ca-ef .ca-vv{--vv-bg:var(--vv-navy-900);--vv-fg:var(--vv-navy-100);--vv-head:var(--vv-paper);--vv-kick:var(--vv-gold-300);--vv-link:var(--vv-paper);--vv-link-h:var(--vv-gold-300);
  --vv-rule:var(--vv-gold-500);--vv-ring:var(--vv-gold-500);--vv-hair:rgba(138,156,196,.32);--vv-accent-ink:var(--vv-gold-300);
  --vv-btn-bg:var(--vv-gold-500);--vv-btn-fg:var(--vv-navy-900);--vv-btn-h:var(--vv-gold-300);--vv-tint:rgba(138,156,196,.07);
  --vv-land:#0A1B3A;--vv-road:#2C4F86;--vv-casing:#16305C;--vv-minor:#102447;--vv-label:#D8E0EE;--vv-cap:#8A9CC4;--vv-hill:#11284E;--vv-plan-bg:#0A1B3A;
  margin:5px;box-shadow:0 0 0 2px var(--vv-paper),0 0 0 5px var(--vv-gold-500),0 24px 40px -18px rgba(0,0,0,.6)}
.ca-ef .vv-solo .vv-map{--vv-land:#0A1B3A}

/* pause: every CSS loop stops (SMIL loops are paused from the script) */
.ca-br.is-paused *,.ca-br.is-paused *::before,.ca-br.is-paused *::after{animation-play-state:paused!important}

/* ================= responsive ================= */
@media (max-width:960px){
  .br-head{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
}
@media (max-width:760px){
  .br-head{grid-template-columns:minmax(0,1fr)}
  .br-menu{max-width:28rem}
  .br-scene-frame{height:418px}
  /* phones: the whole street at the frame's height, dragged sideways; the scene's
     controls (Pause, and the jukebox's music button) sit in a row under it */
  .br-scene-frame{overflow:visible;margin-bottom:calc(44px + 1.5rem)}
  .br-scene-pan{position:relative;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .br-scene-pan::-webkit-scrollbar{display:none}
  .br-scene-svg{width:auto;max-width:none}
  .br-pause{top:calc(100% + .75rem);bottom:auto;left:1rem}
  .br-pan-hint{display:block;position:absolute;z-index:2;left:50%;top:.75rem;translate:-50% 0;margin:0;padding:.35rem .8rem;background:var(--br-navy-900);border:2px solid var(--br-gold-500);border-radius:999px;color:var(--br-paper);font-family:var(--br-accent);font-weight:600;font-size:.8125rem;line-height:1.2;letter-spacing:.08em;white-space:nowrap;pointer-events:none;transition:opacity .4s}   /* paper on navy-900 17.41 */
  .br-pan-hint span{color:var(--br-gold-300)}
  .ca-br.is-panned .br-pan-hint{opacity:0}
}
@media (max-width:400px){
  .br-pause{padding:0 .75rem 0 .65rem;gap:.4rem;letter-spacing:.04em}   /* Pause and Play music share the row at 320px */
  .br-pan-hint{font-size:.75rem}
}
@container (max-width:560px){
  .br-acts{grid-template-columns:minmax(0,1fr)}
  .br-acts-div{flex-direction:row;justify-content:center;padding:1.75rem 0 1.5rem}
}
@media (max-width:560px){
  .br-bill{flex-direction:column;gap:.9rem}
  .br-bill-label{padding:0 0 .9rem;border-right:0;border-bottom:1px solid rgba(209,149,43,.45)}
}
@media (max-width:480px){
  .ca-br:not([data-state="pre"]) .br-title{font-size:1.875rem}              /* every state's headline stays on two lines at 360–480px */
  .br-actions{flex-direction:column;align-items:stretch;width:100%}
  .br-btn-tertiary{align-self:flex-start}       /* a text link, so it keeps its own width */
  .br-menu{padding:1.6rem 1.15rem 1.4rem}
  .br-seal{width:72px;height:72px;right:-8px;top:-18px;font-size:.6875rem}
  .br-with-label{flex-basis:100%;padding-right:0;border-right:0}
  .br-with-name{font-size:.9375rem;white-space:normal}
  .br-scene-frame{height:376px}
}

/* ---- v3 copy: two-line title, tagline, what's included, limit line ---- */
.br-title .br-l{display:block}
.br-title{max-width:none}
/* "Two ways to get involved." is the long line (~13.85em in Alfa): sized to the column so each sentence keeps one line */
.ca-br[data-state="pre"] .br-title{font-size:clamp(1.5rem,3.6vw,2.7rem)}
@media (max-width:760px){.ca-br[data-state="pre"] .br-title{font-size:clamp(1.5rem,5.5vw,2.6rem)}}
@media (max-width:400px){.ca-br[data-state="pre"] .br-title{letter-spacing:-.02em}}
/* the site's two-column row is narrower than the preview's at 761–960px, and the
   smallest phones are narrower still: size to the column there so neither line wraps */
@media (min-width:761px) and (max-width:960px){.ca-br[data-state="pre"] .br-title{font-size:clamp(1.5rem,3.15vw,2.7rem)}}
@media (max-width:359px){.ca-br[data-state="pre"] .br-title{font-size:1.3125rem}}
.br-tagline{font-weight:600;font-size:1.1875rem;line-height:1.4;color:var(--br-gold-300)}   /* 9.6 on navy-700 */
.br-incl{display:grid;gap:.5rem;width:100%;padding:1rem 0 .1rem;border-top:1px solid rgba(232,194,103,.3)}
.br-incl-h{font-family:var(--br-accent);font-weight:600;font-size:.8125rem;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--br-gold-300)}
/* a tidy grid, a gold star before every item, so no line ever starts with a stray separator */
.br-incl-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(11.5rem,1fr));gap:.4rem 1.25rem;margin:0;padding:0;list-style:none;font-weight:500;font-size:1rem;line-height:1.35;color:var(--br-paper)}
.br-incl-l li{display:flex;align-items:center;gap:.55rem}
.br-incl-l li::before{content:"";width:9px;height:9px;flex:none;background:var(--br-gold-500);
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
/* partner names stack on phones instead of wrapping with a star at the start of a line */
@media (max-width:480px){.br-with-names{flex-direction:column;align-items:flex-start;gap:.4rem}.br-with-names>li+li::before{display:none}}
.br-limit{font-weight:600;font-size:1rem;color:var(--br-paper)}
.br-limit::before{content:"";display:inline-block;width:8px;height:8px;margin-right:.55rem;border-radius:50%;background:var(--br-red-500);box-shadow:0 0 0 2px var(--br-paper);vertical-align:.1em}   /* paper ring: red never touches navy */

/* ---- v3 menu card: the three courses, then the happy-hour "after" course ---- */
.br-after{display:grid;gap:.15rem;width:100%;padding:.7rem .85rem .75rem;text-align:left;background:rgba(209,149,43,.12);border-left:3px solid var(--br-gold-500);border-radius:2px}
.br-after-k{font-family:var(--br-accent);font-weight:600;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--br-red-500)}   /* 6.2 on the tinted cream */
.br-after-t{font-weight:700;font-size:1rem;line-height:1.3;color:var(--br-navy-700)}
.br-after-d{font-size:.875rem;line-height:1.45;color:var(--br-charcoal)}
.br-menu-foot{margin-top:.15rem}
.br-seal{width:96px;height:96px;right:-22px;top:-26px;font-size:.75rem;line-height:1.1}
.br-menu.is-armed .br-after{opacity:0;transform:translateY(8px)}
.br-menu.is-in .br-after{opacity:1;transform:none;transition:opacity .5s ease .79s,transform .5s ease .79s}
@media (max-width:480px){.br-seal{width:80px;height:80px;right:-8px;top:-20px;font-size:.6875rem}}

/* the sign-up group (limit line, buttons, bring-a-friend) on a faint panel:
   a whisper of paper over the navy and a soft gold hairline, so it reads as
   the place to act without competing with the menu card */
.br-cta{display:grid;gap:1.25rem;justify-items:start;width:100%;padding:clamp(1rem,2.5vw,1.4rem) clamp(1rem,2.5vw,1.5rem);background:rgba(248,248,248,.045);border:1px solid rgba(232,194,103,.3);border-radius:3px}   /* the tint keeps every pair inside above 11:1 */
.br-cta>.br-actions{margin-top:0}

/* "Bringing a friend?": share by text, under the before-row buttons. A text
   link, not a button, so "Save my free seat" stays the one primary action. */
.ca-br .br-friend{display:flex;flex-wrap:wrap;align-items:center;gap:.1rem .6rem;margin-top:-.4rem;font-weight:500;font-size:1rem;color:var(--br-navy-100)}   /* navy-100 on navy-700 12.4 */
.br-friend-link{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;font-weight:600;color:var(--br-paper);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--br-gold-500);text-underline-offset:.3em;transition:color .15s,text-decoration-color .15s}   /* paper on navy-700 14.96 */
.br-friend-link svg{flex:none;width:16px;height:16px;color:var(--br-gold-300)}   /* gold-300 on navy-700 9.34 */
.br-friend-link:hover,.br-friend-link.is-copied{color:var(--br-gold-300);text-decoration-color:var(--br-gold-300)}   /* gold-300 on navy-700 9.34 */

/* one switch for every animation and transition (WCAG 2.3.3) */
@media (prefers-reduced-motion:reduce){
  .ca-br *,.ca-br *::before,.ca-br *::after{animation:none!important;transition:none!important}
  .br-car{transform:translateX(330px)}
  .br-pause{display:none}
  .br-sig-g{fill:#5FD06B}               /* a still signal should still show a light */
  /* a still spark is a dot, not a flame: the ghost tongues stand in, solid */
  .br-pt{display:none}
  .br-pt-ghost,.br-pt-ghost2{fill-opacity:1}
  .is-hint .br-hint-ring{opacity:.8}       /* the hint stands still: a ring, no pulse */
}