/* tags: #demolistings #onepage — Musician demo (Neo-Brutalism style, Oct 18, 2026) */
:root {
  --bg: #FFFDF5; --ink: #111111; --muted: #3a3a3a; --panel: #FFFFFF; --line: #111111;
  --primary: #111111; --on-primary: #FFFFFF; --secondary: #FFD43B; --on-secondary: #111111; --pink: #FF6B6B;
  --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif;
  --radius: 4px; --btn-radius: 4px; --card-border: 3px solid #111; --card-shadow: 6px 6px 0 #111;
  --btn-shadow: 4px 4px 0 #111; --field-radius: 4px; --field-border: 3px solid #111; --step-radius: 4px;
  --head-border: 3px solid #111; --foot-border: 3px solid #111;
}
h1, h2 { text-transform: uppercase; letter-spacing: -.02em; }
h1 { font-size: clamp(44px, 10vw, 96px); line-height: .95; }
.logo { font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; }
.btn { box-shadow: var(--btn-shadow); }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #111; }
.btn-yellow { background: var(--secondary); color: #111; border-color: #111; }
.btn-line { background: #fff; color: #111; border-color: #111; }
.eyebrow { color: #111; display: inline-block; background: var(--secondary); border: 3px solid #111; padding: 4px 10px; letter-spacing: .08em; }
.hero { border-bottom: 3px solid #111; padding: clamp(40px, 7vw, 72px) 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.cover { aspect-ratio: 1; background: var(--pink); border: 3px solid #111; box-shadow: 8px 8px 0 #111; display: flex; align-items: flex-end; padding: 18px; position: relative; overflow: hidden; }
.cover::before { content: ''; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: var(--secondary); border: 3px solid #111; top: 10%; right: -12%; }
.cover::after { content: ''; position: absolute; width: 38%; aspect-ratio: 1; border-radius: 50%; background: #111; top: 26%; right: 4%; box-shadow: 0 0 0 10px var(--secondary), 0 0 0 13px #111; }
.cover strong { position: relative; z-index: 1; background: #fff; border: 3px solid #111; padding: 6px 10px; font-family: var(--font-display); text-transform: uppercase; }
@media (max-width: 760px) { .hero-grid { grid-template-columns: 1fr; } .cover { max-width: 340px; } }
.strip { background: #111; color: var(--secondary); border-bottom: 3px solid #111; overflow: hidden; white-space: nowrap; font: 700 18px/1 var(--font-display); text-transform: uppercase; letter-spacing: .06em; padding: 14px 0; }
.strip span { display: inline-block; padding-left: 100%; animation: marquee 22s linear infinite; }
@keyframes marquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .strip span { animation: none; padding-left: 16px; } }
.shows { display: grid; gap: 14px; }
.show { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 16px; align-items: center; background: #fff; border: 3px solid #111; box-shadow: 5px 5px 0 #111; padding: 14px 18px; border-radius: 4px; }
.show .date { font: 700 18px/1.1 var(--font-display); text-transform: uppercase; }
.show .where { color: var(--muted); }
.show .where strong { color: #111; display: block; }
@media (max-width: 560px) { .show { grid-template-columns: 1fr; } }
.release { background: #fff; }
.release .art { aspect-ratio: 1; border: 3px solid #111; margin-bottom: 14px; }
.art-a { background: repeating-linear-gradient(45deg, var(--secondary) 0 18px, #fff 18px 36px); }
.art-b { background: radial-gradient(circle at 30% 30%, var(--pink) 0 30%, transparent 31%), #111; }
.art-c { background: linear-gradient(180deg, var(--secondary) 50%, var(--pink) 50%); }
.booking { background: var(--secondary); border-top: 3px solid #111; }
.booking .form { background: #fff; border: 3px solid #111; box-shadow: 8px 8px 0 #111; padding: 24px; border-radius: 4px; }
.notfound .big { color: #111; text-shadow: 6px 6px 0 var(--secondary); }
.booking-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.booking-grid .form { max-width: none; }
@media (max-width: 760px) { .booking-grid { grid-template-columns: 1fr; } }
.facts dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
.facts dt { font-weight: 700; }
.facts dd { margin: 0; color: var(--muted); }