/* ==========================================================================
   Bubby & Sissy's: Poster Stack

   Direction: a drag show's wheatpasted posters stacked down a wall, the pin-up's
   black ink and halftone overprinted on flat loud colour, each new band sliding
   past the last the way Offbeat's parallax does.

   Tokens are a contract. Nothing below :root and the .bs-c-* inks names a colour.
   ========================================================================== */

@font-face { font-family: "Oswald"; src: url("../fonts/oswald-var.woff2") format("woff2"); font-weight: 200 700; font-display: swap; }
@font-face { font-family: "Mr Dafoe"; src: url("../fonts/mr-dafoe.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Familjen Grotesk"; src: url("../fonts/familjen-grotesk-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
	/* Colour: one ink, one paper, six poster inks. */
	--ink: #16081f;
	--ink-soft: #2b1a38;
	--paper: #fff4e0;
	--pink: #ff2d55;
	--lemon: #ffd60a;
	--teal: #00c9b1;
	--purple: #8f1fc2;
	--tangerine: #ff8a1f;
	--blue: #2340ff;
	--muted-on-ink: #c9bcd4;

	/* Duotone shadows: what black becomes in each band's photo. */
	--shade-pink: #4a0a5e;
	--shade-lemon: #c8102e;
	--shade-teal: #0b2a7a;
	--shade-purple: #1d0638;
	--shade-tangerine: #8a0f4a;
	--shade-blue: #0a1160;
	--light-purple: #c75bff;
	--light-blue: #3f8bff;

	/* Script runs on bright inks. */
	--script-on-lemon: #7a14a8;
	--script-on-teal: #2a0a6b;
	--script-on-tangerine: #4a0a5e;
	--script-on-pink: #fff4e0;

	/* Type */
	--font-display: "Oswald", "Arial Narrow", "Haettenschweiler", Impact, sans-serif;
	--font-script: "Mr Dafoe", "Brush Script MT", "Segoe Script", cursive;
	--font-body: "Familjen Grotesk", "Trebuchet MS", "Gill Sans", sans-serif;
	--text-xs: 0.8125rem;
	--text-sm: 0.9375rem;
	--text-base: 1.0625rem;
	--text-lg: clamp(1.125rem, 0.95rem + 0.6vw, 1.3125rem);
	--text-xl: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	--text-script: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
	--text-title: clamp(3rem, 1.6rem + 5.8vw, 6.75rem);
	--text-title-long: clamp(2.5rem, 1.5rem + 3.6vw, 4.75rem);
	--text-hero: clamp(3rem, 0.9rem + 5vw, 6.5rem);
	--text-mail: clamp(1.375rem, 0.7rem + 3.2vw, 3.5rem);
	--leading-tight: 1.02;
	--leading-title: 1.06;
	--leading-body: 1.55;
	--track-caps: 0.14em;
	--track-title: 0.005em;

	/* Space */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4.5rem;
	--space-9: 6.5rem;
	--gutter: clamp(1rem, 4vw, 3.75rem);
	--grid: 81.25rem;
	--measure: 34rem;

	/* Band geometry. Offbeat's rows run about 70% of the screen. */
	--band-min: max(70vh, 36rem);
	--band-short: max(46vh, 26rem);
	--head-h: 4.5rem;
	--target: 2.75rem;

	/* Edges */
	--radius-sm: 0.1875rem;
	--edge: 0.1875rem;
	--tilt-a: -2.5deg;
	--tilt-b: 2deg;
	--shadow-hard: 0.5rem 0.5rem 0 var(--ink);
	--shadow-btn: 0.25rem 0.25rem 0 var(--btn-shadow);
	--shadow-btn-press: 0.0625rem 0.0625rem 0 var(--btn-shadow);
	--dot: 0.5rem;

	/* Motion */
	--fast: 140ms;
	--base: 320ms;
	--slow: 700ms;
	--ticker: 42s;
	--lamp: 1.8s;
	--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* The inks. A band, the stub, anything can wear one of these. */
.bs-c-pink { --b-bg: var(--pink); --b-text: var(--ink); --b-script: var(--script-on-pink); --b-shade: var(--shade-pink); --b-light: var(--pink); --b-cta: var(--ink); --b-cta-text: var(--paper); --b-pop: var(--lemon); --b-pop-text: var(--ink); --b-focus: var(--ink); }
.bs-c-lemon { --b-bg: var(--lemon); --b-text: var(--ink); --b-script: var(--script-on-lemon); --b-shade: var(--shade-lemon); --b-light: var(--lemon); --b-cta: var(--ink); --b-cta-text: var(--paper); --b-pop: var(--pink); --b-pop-text: var(--ink); --b-focus: var(--ink); }
.bs-c-teal { --b-bg: var(--teal); --b-text: var(--ink); --b-script: var(--script-on-teal); --b-shade: var(--shade-teal); --b-light: var(--teal); --b-cta: var(--ink); --b-cta-text: var(--paper); --b-pop: var(--lemon); --b-pop-text: var(--ink); --b-focus: var(--ink); }
.bs-c-purple { --b-bg: var(--purple); --b-text: var(--paper); --b-script: var(--lemon); --b-shade: var(--shade-purple); --b-light: var(--light-purple); --b-cta: var(--lemon); --b-cta-text: var(--ink); --b-pop: var(--teal); --b-pop-text: var(--ink); --b-focus: var(--lemon); }
.bs-c-tangerine { --b-bg: var(--tangerine); --b-text: var(--ink); --b-script: var(--script-on-tangerine); --b-shade: var(--shade-tangerine); --b-light: var(--tangerine); --b-cta: var(--ink); --b-cta-text: var(--paper); --b-pop: var(--teal); --b-pop-text: var(--ink); --b-focus: var(--ink); }
.bs-c-blue { --b-bg: var(--blue); --b-text: var(--paper); --b-script: var(--lemon); --b-shade: var(--shade-blue); --b-light: var(--light-blue); --b-cta: var(--lemon); --b-cta-text: var(--ink); --b-pop: var(--pink); --b-pop-text: var(--ink); --b-focus: var(--lemon); }

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--head-h); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); overflow-x: clip; }
img, svg, iframe { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
:focus-visible { outline: var(--edge) solid var(--b-focus, var(--lemon)); outline-offset: var(--edge); }
.bs-sprite { position: absolute; }
.bs-skip { position: absolute; left: var(--space-4); top: calc(var(--space-9) * -1); z-index: 60; background: var(--lemon); color: var(--ink); padding: var(--space-2) var(--space-4); font-weight: 700; }
.bs-skip:focus { top: var(--space-2); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.bs-head { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--space-5); height: var(--head-h); padding-inline: var(--gutter); background: var(--ink); color: var(--paper); border-bottom: 1px solid var(--ink-soft); }
.admin-bar .bs-head { top: var(--wp-admin--admin-bar--height, 0); }
.bs-head__brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; min-width: 0; }
.bs-head__words { display: grid; min-width: 0; }
.bs-head__name { font-family: var(--font-script); font-size: var(--text-xl); line-height: 1.1; color: var(--paper); white-space: nowrap; transition: color var(--fast); }
.bs-head__brand:hover .bs-head__name { color: var(--lemon); }
.bs-head__tag { font-size: 0.6875rem; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted-on-ink); white-space: nowrap; }
.bs-head__nav { margin-inline-start: auto; }
.bs-head__links { display: flex; gap: var(--space-5); }
.bs-head__links a { display: inline-flex; align-items: center; min-height: var(--target); font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm); letter-spacing: var(--track-caps); text-transform: uppercase; text-decoration: none; background: linear-gradient(var(--pink), var(--pink)) no-repeat left 78% / 0 2px; transition: background-size var(--base) var(--ease-out), color var(--fast); }
.bs-head__links a:hover { background-size: 100% 2px; color: var(--lemon); }
.bs-head__links a:active { color: var(--pink); }

.bs-burger { display: none; margin-inline-start: auto; width: var(--target); height: var(--target); padding: var(--space-2); background: none; border: 0; cursor: pointer; }
.bs-burger span { display: block; height: 2px; margin-block: 0.4375rem; background: var(--paper); transition: background var(--fast), transform var(--fast) var(--ease-out); }
.bs-burger:hover span { background: var(--lemon); }
.bs-burger:hover span:nth-child(2) { transform: translateX(var(--space-1)); }
.bs-burger:active span { background: var(--pink); }

.bs-drawer { width: min(26rem, 100vw); height: 100dvh; max-height: none; margin: 0 0 0 auto; padding: var(--space-8) var(--space-6) var(--space-6); border: 0; background: var(--ink); color: var(--paper); }
.bs-drawer::backdrop { background: var(--ink); opacity: 0.6; }
.bs-drawer[open] { animation: bs-drawer-in var(--base) var(--ease-out); display: flex; flex-direction: column; }
.bs-drawer__close { position: absolute; top: var(--space-4); right: var(--space-4); width: var(--target); height: var(--target); padding: var(--space-2); background: none; border: 0; cursor: pointer; }
.bs-drawer__close svg { fill: none; stroke: var(--paper); stroke-width: 2.5; transition: stroke var(--fast); }
.bs-drawer__close:hover svg { stroke: var(--pink); }
.bs-drawer__links { display: grid; gap: var(--space-2); }
.bs-drawer__links a { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); line-height: 1.25; text-transform: uppercase; text-decoration: none; transition: transform var(--fast) var(--ease-out); }
.bs-drawer__links li:nth-child(6n + 1) a { color: var(--pink); }
.bs-drawer__links li:nth-child(6n + 2) a { color: var(--lemon); }
.bs-drawer__links li:nth-child(6n + 3) a { color: var(--teal); }
.bs-drawer__links li:nth-child(6n + 4) a { color: var(--tangerine); }
.bs-drawer__links li:nth-child(6n + 5) a { color: var(--light-purple); }
.bs-drawer__links li:nth-child(6n + 6) a { color: var(--paper); }
.bs-drawer__links a:hover { transform: translateX(var(--space-2)); }
.bs-drawer__foot { margin-top: auto; padding-top: var(--space-6); color: var(--muted-on-ink); font-size: var(--text-sm); }

/* --------------------------------------------------------------------------
   The band
   -------------------------------------------------------------------------- */
.bs-band { position: relative; overflow: hidden; contain: paint; background: var(--b-bg); color: var(--b-text); min-height: var(--band-min); display: flex; align-items: center; isolation: isolate; }
.bs-band--short { min-height: var(--band-short); }
.bs-band--hero { min-height: calc(100svh - var(--head-h)); }
.bs-band--hero .bs-band__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); padding-block: var(--space-7); }

/* The photo, duotoned: black becomes the band's shade, white becomes its ink.
   Any phone snapshot comes out of this looking like part of the print run. */
.bs-band__photo { position: absolute; inset: 0; z-index: -3; background: var(--b-light); isolation: isolate; will-change: transform; }
.bs-band__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.2) brightness(1.1); mix-blend-mode: multiply; }
.bs-band__photo::after { content: ""; position: absolute; inset: 0; background: var(--b-shade); mix-blend-mode: lighten; }

/* Flat ink under the words so they never fight the photo. Then the halftone. */
.bs-band__scrim { position: absolute; inset: 0; z-index: -2; }
.bs-band--left .bs-band__scrim { background: linear-gradient(90deg, var(--b-bg) 0%, var(--b-bg) 42%, transparent 74%); }
.bs-band--right .bs-band__scrim { background: linear-gradient(270deg, var(--b-bg) 0%, var(--b-bg) 42%, transparent 74%); }
.bs-band__scrim::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, var(--b-shade) 18%, transparent 20%) 0 0 / var(--dot) var(--dot); opacity: 0.22; }
.bs-band--left .bs-band__scrim::after { -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000 80%); mask-image: linear-gradient(90deg, transparent 40%, #000 80%); }
.bs-band--right .bs-band__scrim::after { -webkit-mask-image: linear-gradient(270deg, transparent 40%, #000 80%); mask-image: linear-gradient(270deg, transparent 40%, #000 80%); }

.bs-band__inner { width: 100%; max-width: var(--grid); margin-inline: auto; padding: var(--space-8) var(--gutter); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-7); align-items: center; }
.bs-band--right .bs-band__words { order: 2; }
.bs-band--right .bs-band__art { order: 1; }
.bs-band__words { max-width: 40rem; }
.bs-band--right .bs-band__words { justify-self: end; }
.bs-band__art { display: grid; place-items: center; min-width: 0; }

/* Cut-outs drifting at their own depth. */
.bs-deco { position: absolute; z-index: -1; fill: var(--b-pop); width: clamp(2.5rem, 1.5rem + 3vw, 5rem); height: clamp(2.5rem, 1.5rem + 3vw, 5rem); pointer-events: none; }
.bs-band--left .bs-deco--a { top: 12%; left: 56%; }
.bs-band--left .bs-deco--b { bottom: 12%; right: 5%; width: clamp(1.75rem, 1rem + 2vw, 3.25rem); height: clamp(1.75rem, 1rem + 2vw, 3.25rem); }
.bs-band--right .bs-deco--a { top: 12%; right: 56%; }
.bs-band--right .bs-deco--b { bottom: 12%; left: 5%; width: clamp(1.75rem, 1rem + 2vw, 3.25rem); height: clamp(1.75rem, 1rem + 2vw, 3.25rem); }

/* Words */
.bs-script { font-family: var(--font-script); font-size: var(--text-script); line-height: 1.15; color: var(--b-script, var(--lemon)); margin-bottom: var(--space-2); transform: rotate(-2deg); transform-origin: left bottom; text-wrap: balance; }
.bs-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-title); line-height: var(--leading-title); letter-spacing: var(--track-title); text-transform: uppercase; text-wrap: balance; overflow-wrap: break-word; }
.bs-title a { text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat left 100% / 0 0.08em; transition: background-size var(--base) var(--ease-out); }
.bs-title a:hover { background-size: 100% 0.08em; }
.bs-title--long { font-size: var(--text-title-long); }
.bs-title--hero { font-size: var(--text-hero); line-height: var(--leading-tight); }
.bs-script-run { display: inline-block; font-family: var(--font-script); font-style: normal; font-weight: 400; text-transform: none; color: var(--lemon); font-size: 1.12em; line-height: 0.9; letter-spacing: 0; padding-inline-end: 0.08em; transform: rotate(-3deg); text-shadow: 0.04em 0.04em 0 var(--ink); }
.bs-when { font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); letter-spacing: 0.06em; text-transform: uppercase; margin-top: var(--space-3); }
.bs-pitch { font-size: var(--text-lg); line-height: var(--leading-body); max-width: var(--measure); margin-top: var(--space-3); font-weight: 500; }
.bs-pitch p + p { margin-top: var(--space-3); }
.bs-shout { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); text-transform: uppercase; color: var(--b-script); margin-top: var(--space-5); line-height: 1.2; }
.bs-tips { display: grid; gap: var(--space-1); }
.bs-tips li { display: flex; gap: var(--space-2); }
.bs-tips li::before { content: "★"; flex: none; }
.bs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-top: var(--space-5); }
.bs-actions .bs-when { margin: 0; }
.is-cancelled .bs-title { text-decoration: line-through; text-decoration-thickness: 0.08em; }

/* Buttons: printed labels with a hard shadow, like Offbeat's solid blocks. */
.bs-btn { --btn-shadow: var(--b-pop, var(--pink)); display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: var(--space-2) var(--space-5); background: var(--b-cta, var(--lemon)); color: var(--b-cta-text, var(--ink)); border: var(--edge) solid var(--b-cta, var(--lemon)); border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); letter-spacing: var(--track-caps); text-transform: uppercase; text-decoration: none; box-shadow: var(--shadow-btn); transition: transform var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out), background var(--fast); }
.bs-btn:hover { transform: translate(-0.125rem, -0.125rem) rotate(-1deg); box-shadow: 0.375rem 0.375rem 0 var(--btn-shadow); }
.bs-btn:active { transform: translate(0.125rem, 0.125rem); box-shadow: var(--shadow-btn-press); }
.bs-btn--ghost { background: transparent; color: var(--b-text); border-color: currentColor; box-shadow: none; }
.bs-btn--ghost:hover { box-shadow: none; background: var(--b-text); color: var(--b-bg); }
.bs-btn--pop { --btn-shadow: var(--pink); background: var(--lemon); border-color: var(--lemon); color: var(--ink); }
.bs-btn.is-disabled { opacity: 0.55; box-shadow: none; pointer-events: none; cursor: not-allowed; background: transparent; color: var(--b-text); border-color: currentColor; border-style: dashed; }

/* Flyers: the bar's real art, whole and uncropped, pasted on at an angle. */
.bs-flyer { position: relative; transform: rotate(var(--tilt-b)); transition: transform var(--base) var(--ease-spring); }
.bs-band--right .bs-flyer { transform: rotate(var(--tilt-a)); }
.bs-flyer:hover, .bs-band--right .bs-flyer:hover { transform: rotate(0deg) scale(1.02); }
.bs-flyer img { width: auto; height: auto; border: var(--space-2) solid var(--paper); box-shadow: var(--shadow-hard); background: var(--paper); }
.bs-flyer--tall img { max-height: min(74vh, 40rem); }
.bs-flyer--wide img { max-width: 100%; }

/* Stickers: status, slapped on the corner. */
.bs-burst { position: absolute; top: calc(var(--space-6) * -1); right: calc(var(--space-6) * -1); width: 8.5rem; height: 8.5rem; display: grid; place-items: center; transform: rotate(10deg); font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; text-align: center; color: var(--b-pop-text); }
.bs-burst svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--b-pop); }
.bs-burst span { position: relative; max-width: 5.5rem; }
.bs-burst--solo { position: relative; top: auto; right: auto; width: 11rem; height: 11rem; font-size: var(--text-xl); }
.bs-burst--solo span { max-width: 7.5rem; }

/* The lady, as a die-cut sticker. Base is a mask so she can wear any paper. */
.bs-sticker { position: relative; display: block; aspect-ratio: 900 / 932; }
.bs-sticker img { position: relative; width: 100%; height: 100%; }
.bs-sticker__base { position: absolute; inset: 0; background: var(--paper); -webkit-mask: url("../img/logo-base.png") center / 100% 100% no-repeat; mask: url("../img/logo-base.png") center / 100% 100% no-repeat; }
.bs-sticker--head { width: 3.25rem; flex: none; }
.bs-sticker--hero { width: min(100%, 34rem); transform: rotate(var(--tilt-b)); filter: drop-shadow(0.5rem 0.5rem 0 var(--ink)); }
.bs-sticker--big { width: min(100%, 28rem); transform: rotate(var(--tilt-a)); filter: drop-shadow(0.5rem 0.5rem 0 var(--b-shade)); }

/* Paper cards pasted on top of a band. */
.bs-card { background: var(--paper); color: var(--ink); padding: var(--space-5) var(--space-6); box-shadow: var(--shadow-hard); transform: rotate(var(--tilt-a)); width: min(100%, 30rem); }
.bs-card__head { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); text-transform: uppercase; margin-bottom: var(--space-2); }
.bs-runsheet { display: grid; gap: var(--space-4); }
.bs-runsheet li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: center; }
.bs-runsheet li + li { border-top: 2px dashed var(--ink); padding-top: var(--space-4); }
.bs-runsheet time { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.5rem, 2rem + 2vw, 4rem); line-height: 1; color: var(--ink); }
.bs-runsheet b { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); letter-spacing: 0.06em; text-transform: uppercase; }

/* Hours with dot leaders, like a menu. */
.bs-hours { display: grid; gap: var(--space-1); }
.bs-hours__row { display: flex; align-items: baseline; gap: var(--space-2); font-weight: 600; }
.bs-hours__row dt { font-family: var(--font-display); letter-spacing: 0.06em; }
.bs-hours__row dd { order: 3; white-space: nowrap; }
.bs-hours__row::before { content: ""; order: 2; flex: 1; border-bottom: 2px dotted currentColor; opacity: 0.45; transform: translateY(-0.25em); }

/* Visit */
.bs-band--visit .bs-card--hours { margin-top: var(--space-6); transform: rotate(-1deg); }
.bs-map { position: relative; width: 100%; aspect-ratio: 5 / 4; background: var(--paper); color: var(--ink); border: var(--space-2) solid var(--paper); box-shadow: var(--shadow-hard); transform: rotate(var(--tilt-b)); }
.bs-map__fallback { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: var(--space-5); font-weight: 600; }
.bs-map iframe { position: relative; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.1); }

/* Contact */
.bs-bigmail { display: inline-block; margin-top: var(--space-4); font-family: var(--font-display); font-weight: 700; font-size: var(--text-mail); line-height: 1.15; overflow-wrap: anywhere; text-decoration-thickness: 0.08em; text-underline-offset: 0.12em; transition: color var(--fast); }
.bs-bigmail:hover { color: var(--b-script); }

/* Arrival: words rise once, then stay put. Stays visible without JS. */
.js .bs-rise { opacity: 0; transform: translateY(var(--space-6)); }
.js .bs-rise.is-in { opacity: 1; transform: none; transition: opacity var(--slow) var(--ease-out), transform var(--slow) var(--ease-out); }

/* --------------------------------------------------------------------------
   Ticker, section intro, past list
   -------------------------------------------------------------------------- */
.bs-ticker { overflow: hidden; background: var(--ink); color: var(--lemon); border-block: var(--edge) solid var(--lemon); font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: 0.06em; text-transform: uppercase; }
.bs-ticker__track { display: flex; width: max-content; animation: bs-ticker var(--ticker) linear infinite; }
.bs-ticker:hover .bs-ticker__track, .bs-ticker:focus-within .bs-ticker__track { animation-play-state: paused; }
.bs-ticker__run { display: flex; flex: none; }
.bs-ticker li { display: flex; align-items: center; gap: var(--space-5); padding-inline-end: var(--space-5); white-space: nowrap; }
.bs-ticker a { display: inline-flex; gap: var(--space-2); align-items: center; min-height: var(--space-8); text-decoration: none; color: var(--paper); transition: color var(--fast); }
.bs-ticker a b { font-weight: 700; color: var(--lemon); }
.bs-ticker a:hover, .bs-ticker a:hover b { color: var(--pink); }
.bs-ticker svg { flex: none; width: var(--space-4); height: var(--space-4); fill: var(--pink); }

.bs-intro { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-5); padding: var(--space-8) max(var(--gutter), calc((100vw - var(--grid)) / 2 + var(--gutter))) var(--space-7); background: var(--ink); color: var(--paper); --b-script: var(--lemon); --b-focus: var(--lemon); }
.bs-intro--page { padding-top: var(--space-9); }

.bs-past { padding: var(--space-8) max(var(--gutter), calc((100vw - var(--grid)) / 2 + var(--gutter))); background: var(--ink); color: var(--paper); }
.bs-past__head { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); text-transform: uppercase; color: var(--lemon); margin-bottom: var(--space-4); }
.bs-past li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-4); padding-block: var(--space-3); border-top: 1px solid var(--ink-soft); }
.bs-past a { font-weight: 600; text-decoration-color: var(--pink); text-underline-offset: 0.2em; }
.bs-past a:hover { color: var(--lemon); }
.bs-past span { color: var(--muted-on-ink); }
.bs-past-note { padding: var(--space-5) var(--gutter); background: var(--lemon); color: var(--ink); text-align: center; font-weight: 600; }

/* Plain pages */
.bs-page { max-width: 50rem; margin-inline: auto; padding: var(--space-8) var(--gutter); min-height: 60vh; --b-script: var(--lemon); --b-focus: var(--lemon); }
.bs-page__item + .bs-page__item { margin-top: var(--space-7); }
.bs-page__body { margin-top: var(--space-4); }
.bs-page__body > * + * { margin-top: var(--space-4); }
.bs-page__body a { color: var(--lemon); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.bs-foot { background: var(--ink); color: var(--paper); padding: var(--space-8) max(var(--gutter), calc((100vw - var(--grid)) / 2 + var(--gutter))) var(--space-9); font-size: var(--text-sm); }
.bs-foot__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7); }
.bs-foot__head { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: var(--space-3); }
.bs-foot__head::after { content: "."; color: var(--pink); }
.bs-foot p + .bs-foot__head { margin-top: var(--space-5); }
.bs-foot a { text-decoration-color: var(--pink); text-underline-offset: 0.2em; transition: color var(--fast); }
.bs-foot a:hover { color: var(--lemon); }
.bs-foot__events { display: grid; gap: var(--space-3); }
.bs-foot__events a { display: block; font-family: var(--font-display); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; }
.bs-foot__events span { color: var(--tangerine); font-size: var(--text-xs); }
.bs-foot__social { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.bs-foot__social a { display: inline-flex; align-items: center; min-height: var(--target); }
.bs-foot__legal { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--ink-soft); color: var(--muted-on-ink); font-size: var(--text-xs); }

/* --------------------------------------------------------------------------
   The door stub
   -------------------------------------------------------------------------- */
.bs-stub { position: fixed; z-index: 30; left: var(--space-4); bottom: var(--space-4); display: flex; align-items: stretch; max-width: min(30rem, calc(100vw - var(--space-6))); background: var(--b-pop); color: var(--b-pop-text); box-shadow: 0.25rem 0.25rem 0 var(--ink); font-size: var(--text-xs); line-height: 1.25; transition: background var(--base) var(--ease-out); --b-focus: var(--ink); -webkit-mask: radial-gradient(circle 0.5rem at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 0.5rem at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle 0.5rem at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 0.5rem at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; }
.bs-stub a { color: inherit; text-decoration: none; }
.bs-stub__main { display: flex; align-items: center; gap: var(--space-3); min-height: 3.25rem; padding: var(--space-1) var(--space-3) var(--space-1) var(--space-5); min-width: 0; }
.bs-stub__main:hover b { text-decoration: underline; }
.bs-stub__state { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.bs-stub__lamp { width: 0.625rem; height: 0.625rem; border-radius: 50%; border: 2px solid var(--ink); flex: none; }
.is-open .bs-stub__lamp { background: var(--ink); animation: bs-lamp var(--lamp) ease-in-out infinite; }
.bs-stub__next { display: grid; min-width: 0; padding-inline-start: var(--space-3); border-inline-start: 2px dashed currentColor; }
.bs-stub__next b, .bs-stub__next span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-stub__top { display: grid; place-items: center; width: 0; overflow: hidden; border-inline-start: 0 dashed currentColor; transition: width var(--base) var(--ease-out); }
.bs-stub__top svg { width: var(--space-5); height: var(--space-5); fill: none; stroke: currentColor; stroke-width: 2.5; flex: none; }
.bs-scrolled .bs-stub__top { width: 3.25rem; border-inline-start-width: 2px; }
.bs-stub__top:hover svg { transform: translateY(-0.125rem); }

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
@keyframes bs-ticker { to { transform: translateX(-50%); } }
@keyframes bs-drawer-in { from { transform: translateX(100%); } }
@keyframes bs-lamp { 50% { opacity: 0.35; } }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
	.bs-ticker__track { width: auto; animation: none; }
	.bs-ticker__run { flex-wrap: wrap; padding-inline: var(--gutter); }
	.bs-ticker__run[aria-hidden="true"] { display: none; }
	.js .bs-rise { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
	.bs-head__nav { display: none; }
	.bs-burger { display: block; }
	.bs-burst { right: calc(var(--space-3) * -1); width: 7rem; height: 7rem; font-size: var(--text-sm); }
}

/* No JS, no drawer: keep the links reachable in the header. */
html:not(.js) .bs-burger { display: none; }
html:not(.js) .bs-head__nav { display: block; overflow-x: auto; }

/* Phones: the words sit on flat ink at the foot, the photo gets the top. */
@media (max-width: 767px) {
	:root { --head-h: 4rem; }
	.bs-band { align-items: flex-end; }
	.bs-band__inner, .bs-band--hero .bs-band__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding-block: var(--space-7) var(--space-8); }
	.bs-band--left .bs-band__words, .bs-band--right .bs-band__words { order: 2; justify-self: start; }
	.bs-band--left .bs-band__art, .bs-band--right .bs-band__art { order: 1; }
	.bs-band--left .bs-band__scrim, .bs-band--right .bs-band__scrim { background: linear-gradient(0deg, var(--b-bg) 0%, var(--b-bg) 58%, transparent 92%); }
	.bs-band--left .bs-band__scrim::after, .bs-band--right .bs-band__scrim::after { -webkit-mask-image: linear-gradient(0deg, transparent 55%, #000 90%); mask-image: linear-gradient(0deg, transparent 55%, #000 90%); }
	.bs-band--left .bs-deco--a, .bs-band--right .bs-deco--a { top: 6%; left: auto; right: 8%; }
	.bs-band--left .bs-deco--b, .bs-band--right .bs-deco--b { top: 28%; bottom: auto; left: 6%; right: auto; }
	.bs-band--short .bs-band__art:empty { display: none; }
	.bs-band--short .bs-band__inner { padding-top: var(--space-9); }
	.bs-band--event .bs-band__art:empty { min-height: 34vh; }
	.bs-band--event:not(:has(.bs-flyer)):not(:has(.bs-burst)) .bs-band__art { min-height: 30vh; }
	.bs-sticker--hero { width: min(68%, 16rem); }
	.bs-sticker--big { width: min(70%, 18rem); }
	.bs-flyer--tall img { max-height: 58vh; }
	.bs-burst { top: calc(var(--space-4) * -1); right: calc(var(--space-2) * -1); width: 6rem; height: 6rem; font-size: var(--text-xs); }
	.bs-burst span { max-width: 4rem; }
	.bs-foot__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
	.bs-foot { padding-bottom: calc(var(--space-9) + var(--space-5)); }
	.bs-head__tag { display: none; }
	.bs-card { padding: var(--space-4) var(--space-5); }

	/* A ticket across the bottom, in thumb reach. */
	.bs-stub { left: var(--space-2); right: var(--space-2); bottom: var(--space-2); max-width: none; }
	.bs-stub__main { flex: 1; }
	.bs-stub__next span { display: block; }
}

@media (min-width: 768px) and (max-width: 1023px) {
	.bs-band__inner { gap: var(--space-5); }
}