/* Band storefront template ("MySpace for merch") · local prototype 2026-09-29.
   Reusable by every band: the band supplies DATA only (themes/<slug>.json) mirrored as inline vars on
   <main class="band-zone" style="--band-1:…; --band-1-text:…; --band-2:…; --band-3:…; --band-3-text:…;
   --band-font:…; --band-stripe:…; --band-field:…"> plus one <span class="band-texture" style="background-image:url(…)"> in the hero.
   RULES (design/BAND_STOREFRONT_DIRECTION.md): frame (nav, logo, footer, player shell, prices, buttons,
   gold) never reads --band-*. Band zone reads only --band-* plus lux neutrals. No gold in band UI. */

.band-zone {
  --band-1: #3a3d44; --band-1-text: #c9c4bc; --band-2: #5a5e66; --band-3: #5a5e66; --band-3-text: #c9c4bc;
  --band-font: var(--font-display); --band-field: #08080A;
  --band-stripe: linear-gradient(90deg, var(--band-1) 0 25%, var(--band-2) 25% 50%, var(--band-3) 50% 75%, var(--band-1) 75% 100%);
  background: var(--lux-bg);
  color: var(--lux-muted);
}
.band-zone .band-font, .page-lux .band-zone .band-font { font-family: var(--band-font), var(--font-display); font-weight: 400; letter-spacing: 0.01em; }

/* ---------- Hero / banner (21:9 desktop, stacked mobile) ---------- */
.band-hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(560px, calc(100vw * 9 / 21));
  display: flex; align-items: center;
  background: linear-gradient(115deg, var(--lux-bg) 0%, var(--lux-bg) 35%, var(--band-field) 100%);
  border-top: 1px solid var(--img-gold-dim, rgba(201,169,98,.28)); /* frame edge hairline */
}
/* Band texture ≤ 12% (hero only). Set as an inline background-image on .band-texture in the page markup
   (url() inside a custom property would resolve against this stylesheet, not the page). */
.band-texture { position: absolute; inset: -40px; z-index: -2; pointer-events: none; background: center / cover no-repeat; opacity: 0.12; filter: saturate(1.1); }
.band-hero::after { /* vignette into #08080A */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 80% 90% at 70% 50%, transparent 30%, rgba(8,8,10,.65) 100%),
              linear-gradient(to top, rgba(8,8,10,.6) 0%, transparent 30%);
}
.band-hero__grid { display: grid; grid-template-columns: 55fr 45fr; gap: 32px; align-items: center; width: 100%; padding-top: 36px; padding-bottom: 42px; }
.band-hero__tagline { margin: 0 0 14px; font: 600 0.82rem/1.3 var(--font-body); letter-spacing: 0.22em; text-transform: uppercase; color: var(--band-1-text); }
.band-hero h1 { margin: 0 0 14px; font-size: clamp(3rem, 6.4vw, 5.4rem); line-height: 0.98; color: var(--lux-cream); }
.band-hero__show { margin: 0 0 26px; color: rgba(245,242,235,.78); font-size: 1.05rem; }
.band-hero__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.band-play {
  display: inline-flex; align-items: center; gap: 14px; cursor: pointer;
  background: none; border: 0; padding: 0; color: var(--lux-cream); font: 600 1rem var(--font-body); text-align: left;
}
.band-play__disc {
  width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  background: var(--band-2); color: #08080A; box-shadow: 0 10px 30px rgba(0,0,0,.45);
  transition: transform .2s ease, box-shadow .2s ease;
}
.band-play:hover .band-play__disc { transform: scale(1.05); }
.band-play:focus-visible { outline: 2px solid var(--lux-gold); outline-offset: 6px; border-radius: 40px; }
.band-play small { display: block; font-weight: 400; font-size: .78rem; color: var(--lux-muted); margin-top: 2px; }
.band-hero__shop { color: rgba(245,242,235,.8) !important; font-size: .95rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--band-1-text); }
.band-hero__art { position: relative; aspect-ratio: 1 / 1; max-height: 500px; justify-self: center; width: 100%; }
.band-hero__art img { width: 100%; height: 100%; object-fit: contain; padding: 4%; box-sizing: border-box; filter: drop-shadow(0 24px 50px rgba(0,0,0,.6)); }
.band-hero .pending-tag { margin-bottom: 18px; }
.band-stripe { height: 6px; background: var(--band-stripe); }

/* ---------- Section heads ---------- */
.band-section { padding: 64px 0 0; }
.band-h2 { margin: 0 0 22px; font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--lux-cream); text-transform: uppercase; }
.band-h2 em { font-style: normal; color: var(--band-2); }

/* ---------- Profile (MySpace-style) ---------- */
.band-profile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 22px; }
.band-card { background: var(--lux-panel); border: 1px solid rgba(255,255,255,.06); border-radius: var(--img-radius, 8px); padding: 22px; }
.band-card--top { border-top: 2px solid var(--band-1); }
.band-profile__photo { aspect-ratio: 1 / 1; margin-bottom: 16px; }
.band-facts { list-style: none; margin: 0; padding: 0; }
.band-facts li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.06); font-size: .92rem; }
.band-facts span:first-child { color: var(--lux-muted); }
.band-facts span:last-child { color: var(--lux-cream); text-align: right; }
.band-about h2 { margin: 0 0 14px; font-size: clamp(1.4rem, 2.6vw, 1.9rem); text-transform: uppercase; color: var(--lux-cream); }
.band-about h2 em { font-style: normal; color: var(--band-2); }
.band-about p { color: rgba(245,242,235,.84); line-height: 1.7; margin: 0 0 12px; }
.band-now { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.06); font-size: .9rem; color: var(--band-1-text); }

/* ---------- Placeholders ---------- */
.band-ph {
  display: grid; place-items: center; text-align: center; padding: 14px; box-sizing: border-box;
  border-radius: var(--img-radius, 8px); border: 1px dashed rgba(245,242,235,.2);
  background: repeating-linear-gradient(135deg, #111317 0 14px, #15171c 14px 28px);
  color: rgba(245,242,235,.6); font: 600 .72rem/1.5 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
}
.band-ph b { display: block; color: #f0b4b4; letter-spacing: .06em; margin-top: 6px; font-size: .7rem; }

/* ---------- Top 8 ---------- */
.band-top8 { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
.band-top8__tile { display: block; text-decoration: none; color: inherit; }
.band-top8__media { aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; background: var(--lux-bg); border-top: 2px solid var(--band-1); position: relative; }
.band-top8__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.band-top8__media--contain img { object-fit: contain; padding: 8%; box-sizing: border-box; }
.band-top8__media.band-ph { border-top: 2px solid var(--band-1); font-size: .62rem; letter-spacing: .1em; }
.band-top8__media--show { display: grid; place-items: center; text-align: center; padding: 10px; background: var(--lux-panel-2); color: var(--lux-cream); font-size: .8rem; line-height: 1.35; }
.band-top8__media--cta { display: grid; place-items: center; background: var(--lux-panel-2); color: var(--band-2); font: 400 .9rem var(--band-font), var(--font-display); text-transform: uppercase; }
.band-top8__label { display: block; margin-top: 8px; font-size: .82rem; color: var(--lux-cream); }
.band-top8__tile:hover .band-top8__media, .band-top8__tile:focus-visible .band-top8__media { box-shadow: 0 0 0 1px color-mix(in srgb, var(--band-1-text) 55%, transparent); }
.band-top8__tile:focus-visible { outline: 2px solid var(--lux-gold); outline-offset: 3px; border-radius: 6px; }

/* ---------- Photos ---------- */
.band-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.band-photos figure { margin: 0; }
.band-photos .media { aspect-ratio: 4 / 5; }
.band-photos .media > img { object-position: center 42%; }
.band-photos .band-ph { aspect-ratio: 4 / 5; }
.band-photos figcaption { margin-top: 8px; font-size: .86rem; color: var(--lux-muted); }

/* ---------- Merch (KR components, band accents only on chips/hover) ---------- */
.band-merch { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.band-product {
  display: flex; flex-direction: column; background: var(--lux-panel);
  border: 1px solid rgba(201,169,98,.14); border-radius: var(--img-radius, 8px); overflow: hidden;
  transition: transform .2s ease, border-color .2s ease;
}
.band-product:hover, .band-product:focus-within { transform: translateY(-2px); border-color: color-mix(in srgb, var(--band-1-text) 55%, transparent); }
.band-product__media { aspect-ratio: 1 / 1; border-radius: 0; }
.band-product__media.band-ph { border: 0; border-bottom: 1px dashed rgba(245,242,235,.14); border-radius: 0; }
.band-product__body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.band-product h3 { margin: 0; font: 600 1rem/1.3 var(--font-body); color: var(--lux-cream); }
.band-product__spec { margin: 0; font-size: .86rem; color: var(--lux-muted); }
.band-chip { align-self: flex-start; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--band-1-text); color: var(--band-1-text); font: 600 .64rem/1.6 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.band-product__row { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 6px; }
.kr-price { color: var(--lux-gold); font: 600 .95rem var(--font-body); }
.kr-btn-sm {
  display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--lux-gold); color: var(--lux-gold) !important; background: transparent;
  font: 600 .82rem var(--font-body); text-decoration: none; transition: background .2s ease, color .2s ease;
}
.kr-btn-sm:hover, .kr-btn-sm:focus-visible { background: var(--lux-gold); color: #08080A !important; }
.band-merch-note { margin: 16px 0 0; font-size: .86rem; color: var(--lux-muted); text-align: center; }

/* ---------- Links + wall ---------- */
.band-links { display: flex; flex-wrap: wrap; gap: 10px; }
.band-links .band-ph { padding: 10px 16px; font-size: .68rem; }
.band-wall { display: grid; place-items: center; text-align: center; color: var(--lux-muted); font-size: .9rem; border-style: dashed; }

/* ---------- KR frame: docked player shell (always visible, KR colors only) ---------- */
body.has-kr-player { padding-bottom: 76px; }
.kr-player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: rgba(12, 12, 14, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(201, 169, 98, 0.28); color: var(--lux-cream);
  font-family: var(--font-body);
}
.kr-player__bar { display: flex; align-items: center; gap: 14px; max-width: var(--max, 1200px); margin: 0 auto; padding: 10px 20px; min-height: 64px; box-sizing: border-box; }
.kr-player__art { width: 44px; height: 44px; border-radius: 6px; object-fit: contain; background: #08080A; flex: none; }
.kr-player__meta { min-width: 0; flex: 1; }
.kr-player__title { display: block; font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kr-player__sub { display: block; font-size: .76rem; color: var(--lux-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kr-player__btn {
  flex: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid rgba(201,169,98,.55); background: transparent; color: var(--lux-gold);
  border-radius: 999px; padding: 8px 14px; font: 600 .82rem var(--font-body);
}
.kr-player__btn:hover { background: rgba(201,169,98,.12); }
.kr-player__btn:focus-visible { outline: 2px solid var(--lux-gold); outline-offset: 3px; }
.kr-player__btn--icon { padding: 8px; width: 38px; height: 38px; justify-content: center; }
.kr-player__panel { border-top: 1px solid rgba(201,169,98,.14); }
.kr-player__panel[hidden] { display: none; }
.kr-player__embed { max-width: var(--max, 1200px); margin: 0 auto; padding: 14px 20px 16px; box-sizing: border-box; }
.kr-player__slot {
  min-height: 120px; display: grid; place-items: center; text-align: center; padding: 16px;
  border: 1px dashed rgba(201,169,98,.4); border-radius: 8px; background: #0b0d10;
  color: rgba(245,242,235,.78); font-size: .9rem; line-height: 1.5;
}
.kr-player__slot b { color: #f0b4b4; }
.kr-player__fine { margin: 8px 0 0; font-size: .72rem; color: var(--lux-muted); text-align: center; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .band-merch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band-top8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .band-hero { min-height: 0; }
  .band-hero__grid { grid-template-columns: 1fr; gap: 8px; padding-top: 24px; }
  .band-hero__art { order: -1; max-width: 300px; }
  .band-hero h1 { font-size: clamp(2.6rem, 13vw, 3.6rem); }
  .band-profile { grid-template-columns: 1fr; }
  .band-top8 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .band-top8__tile { flex: 0 0 42%; scroll-snap-align: start; }
  .band-photos { grid-template-columns: 1fr 1fr; }
  .band-merch { grid-template-columns: 1fr; }
  .band-section { padding-top: 48px; }
  .kr-player__bar { padding: 8px 12px; gap: 10px; min-height: 56px; }
  .kr-player__art { width: 38px; height: 38px; }
  .kr-player__btn .kr-player__btn-label { display: none; }
  .kr-player__btn { padding: 8px; width: 38px; height: 38px; justify-content: center; }
  body.has-kr-player { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .kr-player { padding-bottom: env(safe-area-inset-bottom); }
  .proto-chip { bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .band-play__disc, .band-product { transition: none; }
  .band-play:hover .band-play__disc, .band-product:hover { transform: none; }
}

/* ---------- artists.html: cards preview each band's look (same card size) ---------- */
.artist-card--themed .artist-card__media { position: relative; background: linear-gradient(135deg, #08080A 30%, var(--band-field, #08080A)); isolation: isolate; }
.artist-card--themed .band-texture { inset: 0; z-index: -1; }
.artist-card--themed .artist-card__media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--band-stripe); transition: height .3s ease; }
.artist-card--themed .artist-card__media img { transition: transform .4s ease; }
.artist-card--themed h3 { font-family: var(--band-font), var(--font-display); font-weight: 400; font-size: 1.7rem; text-transform: uppercase; }
.artist-card--themed:hover, .artist-card--themed:focus-visible { border-color: color-mix(in srgb, var(--band-1-text) 55%, transparent); }
.artist-card--themed:hover .artist-card__media::after, .artist-card--themed:focus-visible .artist-card__media::after { height: 8px; }
.artist-card--themed:hover .artist-card__media img, .artist-card--themed:focus-visible .artist-card__media img { transform: scale(1.03); }
.artist-card:focus-visible { outline: 2px solid var(--lux-gold); outline-offset: 3px; }
.artist-swatches { display: inline-flex; gap: 5px; margin-left: 8px; vertical-align: middle; }
.artist-swatches i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.artist-chip-music { display: inline-block; margin: 0 0 10px; padding: 2px 9px; border-radius: 999px; border: 1px solid rgba(245,242,235,.22); color: rgba(245,242,235,.75); font-size: .72rem; letter-spacing: .06em; }
@media (prefers-reduced-motion: reduce) {
  .artist-card--themed:hover, .artist-card--themed:focus-visible { transform: none; }
  .artist-card--themed .artist-card__media img, .artist-card--themed .artist-card__media::after { transition: none; }
  .artist-card--themed:hover .artist-card__media img { transform: none; }
}
@media (max-width: 760px) { .band-profile__photo { max-width: 220px; margin-left: auto; margin-right: auto; } }
.band-product__micro { margin: 0; font-size: .78rem; font-style: italic; color: rgba(245,242,235,.62); }