@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Azeret+Mono:wght@300;400;500&display=swap');

/* ─────────────────────────── TOKENS ─────────────────────────── */
:root {
  --bg:     #0e0c0a;
  --cream:  #e8e2d8;
  --warm:   #a09484;
  --gold:   #c8a85c;
  --ember:  #d4522a;
  --deep:   #161412;
  --panel:  #1a1816;
  --border: #2a2520;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --mono:  'Azeret Mono', ui-monospace, monospace;

  --nav-h: 52px;
}

/* ─────────────────────────── RESET ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding-top: var(--nav-h);
  padding-bottom: 80px;              /* space reserved for a future player bar */
  background: var(--bg);
  color: var(--cream);
  font-family: var(--serif);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--gold); text-decoration: none; transition: color .3s ease; }
a:hover { color: var(--cream); }

button { font-family: inherit; }

::selection { background: var(--gold); color: var(--bg); }

/* Scrollbar — thin and dark */
* { scrollbar-width: thin; scrollbar-color: var(--border) var(--bg); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--warm); }

/* ─────────────────────────── TAB NAV ─────────────────────────── */
.tabnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 28px;
  background: rgba(14, 12, 10, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.logo {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--cream);
  white-space: nowrap;
  cursor: pointer;
}
.logo:hover { color: var(--gold); }

.tabs { display: flex; align-items: center; gap: 4px; }

.tab {
  background: none;
  border: none;
  padding: 8px 14px;
  color: var(--warm);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: color .3s ease;
}
.tab:hover { color: var(--cream); }
.tab.active { color: var(--gold); }
.tab.active::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 1px;
  background: var(--gold);
}

/* ─────────────────────────── PANELS ─────────────────────────── */
.panel { display: none; }
.panel.active { display: block; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.wrap-narrow { max-width: 760px; }

.page-head { padding: 90px 0 56px; text-align: center; }
.page-title {
  font-family: var(--serif);
  font-size: clamp(38px, 6vw, 62px);
  font-weight: 300;
  letter-spacing: .02em;
  margin: 0 0 12px;
  color: var(--cream);
}
.page-sub {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--warm);
  margin: 0;
}

/* ─────────────────────────── HERO ─────────────────────────── */
.hero {
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 28px 0;
  position: relative;
}

.hero-inner { max-width: 900px; }

.hero-title {
  font-family: var(--serif);
  font-size: clamp(52px, 12vw, 132px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: .01em;
  margin: 0 0 26px;
  color: var(--cream);
}

.hero-sub {
  font-family: var(--mono);
  font-size: clamp(10px, 1.5vw, 13px);
  font-weight: 300;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
}

.hero-loc {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--warm);
  margin: 0;
}

.scroll-cue {
  position: absolute;
  bottom: 42px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.scroll-cue-line { width: 1px; height: 46px; background: linear-gradient(to bottom, transparent, var(--warm)); }
.scroll-cue-arrow {
  font-size: 15px;
  color: var(--warm);
  animation: cue 2.4s ease-in-out infinite;
}
@keyframes cue {
  0%, 100% { transform: translateY(0);   opacity: .45; }
  50%      { transform: translateY(7px); opacity: 1;   }
}

/* ─────────────────── FEATURED ARTWORK SECTIONS ─────────────────── */
.featured {
  display: flex;
  align-items: center;
  gap: 68px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 110px 28px;
}
/* Alternation is driven by an explicit .flip class set in app.js, not
   :nth-of-type — the featured blocks share a parent with the interstitial
   and mosaic divs, so a type-based selector would count those too. */
.featured.flip { flex-direction: row-reverse; }

.featured-img {
  flex: 1 1 52%;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
/* Paintings render at their own proportions. width/height stay auto so the
   intrinsic size of the photograph decides the shape; the two maximums only
   bound it. No aspect-ratio and no object-fit here — either one would crop
   or stretch a canvas that isn't the shape the box expects. */
.featured-img img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 75vh;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .62);
}

.featured-text { flex: 1 1 48%; min-width: 0; }

.featured-title {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 300;
  line-height: 1.12;
  margin: 0 0 8px;
  color: var(--cream);
}

.featured-year {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .24em;
  color: var(--gold);
  margin: 0 0 18px;
}

.featured-meta {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--warm);
  margin: 0 0 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.featured-story {
  font-size: 18px;
  line-height: 1.78;
  color: var(--cream);
  opacity: .88;
  margin: 0 0 32px;
  white-space: pre-line;
}

.actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ─────────────────────── ACTION BUTTONS ─────────────────────── */
.action {
  display: inline-block;
  padding: 11px 20px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--warm);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .3s ease, color .3s ease, background .3s ease;
}
.action:hover { border-color: var(--gold); color: var(--gold); }

/* "Preview hi-res" on the featured sections — the ember accent the free
   download used to carry, now on the piece's most inviting free action. */
.action.preview { border-color: rgba(212, 82, 42, .55); color: var(--ember); }
.action.preview:hover { border-color: var(--ember); color: var(--bg); background: var(--ember); }

.action.avail { border-color: rgba(200, 168, 92, .55); color: var(--gold); }
.action.avail:hover { border-color: var(--gold); color: var(--bg); background: var(--gold); }

/* ─────────────────────────── MOSAIC ─────────────────────────── */
.mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  max-width: 1420px;
  margin: 40px auto;
  padding: 0 3px;
}

.tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--deep);
  cursor: pointer;
}
.tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .7, .3, 1), filter .5s ease, opacity .5s ease;
  filter: grayscale(18%);
}
.tile:hover img { transform: scale(1.06); filter: grayscale(0%); }

.tile-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px;
  text-align: center;
  background: rgba(14, 12, 10, .76);
  opacity: 0;
  transition: opacity .4s ease;
}
.tile:hover .tile-overlay { opacity: 1; }

.tile-title {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--cream);
}
.tile-year {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--gold);
}

/* ────────────────────── INTERSTITIAL QUOTE ────────────────────── */
.interstitial {
  max-width: 780px;
  margin: 0 auto;
  padding: 130px 28px;
  text-align: center;
}
.interstitial p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.45;
  color: var(--warm);
  margin: 0;
}

/* ─────────────────────────── MERCH ─────────────────────────── */
.merch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding-bottom: 30px;
}

.merch-card {
  border: 1px solid var(--border);
  background: var(--panel);
  padding: 46px 24px;
  text-align: center;
  transition: border-color .35s ease, background .35s ease, transform .35s ease;
}
.merch-card:hover {
  border-color: var(--gold);
  background: var(--deep);
  transform: translateY(-3px);
}

.merch-icon { font-size: 26px; color: var(--gold); margin-bottom: 16px; line-height: 1; }
.merch-name {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 400;
  margin: 0 0 8px;
  color: var(--cream);
}
.merch-price {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--warm);
  margin: 0;
}

.notify {
  border-top: 1px solid var(--border);
  margin-top: 30px;
  padding: 56px 0 90px;
  text-align: center;
}
.notify-copy {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--warm);
  margin: 0 0 26px;
}
.notify-form {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.notify-input {
  background: var(--deep);
  border: 1px solid var(--border);
  color: var(--cream);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 300;
  padding: 13px 16px;
  width: 320px;
  max-width: 100%;
  outline: none;
  transition: border-color .3s ease;
}
.notify-input::placeholder { color: #5f574e; }
.notify-input:focus { border-color: var(--gold); }

.notify-btn {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 13px 26px;
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.notify-btn:hover:not(:disabled) { background: var(--gold); color: var(--bg); }
.notify-btn:disabled { opacity: .5; cursor: default; }

.notify-msg {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  margin: 18px 0 0;
  min-height: 17px;
  color: var(--warm);
}
.notify-msg.ok  { color: var(--gold); }
.notify-msg.err { color: var(--ember); }

/* ───────────────────────── COMMISSION ───────────────────────── */
.commission-examples {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 76px;
}
.commission-example { margin: 0; overflow: hidden; background: var(--deep); }
.commission-example img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .7, .3, 1);
}
.commission-example:hover img { transform: scale(1.04); }

.cform { max-width: 640px; margin: 0 auto; padding-bottom: 100px; }
.cfield { margin-bottom: 26px; }

.clabel {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--warm);
  margin-bottom: 9px;
}

.cinput {
  width: 100%;
  background: var(--deep);
  border: 1px solid var(--border);
  color: var(--cream);
  font-family: var(--serif);
  font-size: 17px;
  padding: 13px 15px;
  outline: none;
  transition: border-color .3s ease;
}
.cinput::placeholder { color: #5f574e; font-style: italic; }
.cinput:focus { border-color: var(--gold); }
.ctextarea { resize: vertical; min-height: 150px; line-height: 1.65; }

.cbtn {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 15px 42px;
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.cbtn:hover { background: var(--gold); color: var(--bg); }

/* ─────────────────────────── ABOUT ─────────────────────────── */
.about-head { text-align: center; padding: 90px 0 44px; }
/* Full studio shot, uncropped — the source is a wide environmental photo
   (subject seated at right, painting behind), so any square/circular crop
   either cuts the subject or loses the work. Shown whole at a modest width. */
.about-photo {
  width: 260px;
  height: auto;
  margin: 0 auto 28px;
  border: 1px solid var(--border);
  filter: grayscale(18%);
}
.about-name {
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 300;
  margin: 0 0 8px;
  color: var(--cream);
}
.about-loc {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}

.about-bio p {
  font-size: 19px;
  line-height: 1.85;
  color: var(--cream);
  opacity: .9;
  margin: 0 0 26px;
}

.about-feature { text-align: center; padding: 22px 0 74px; }

.shows { border-top: 1px solid var(--border); padding-top: 48px; }
.shows-title {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 26px;
}
.shows-list { list-style: none; margin: 0 0 70px; padding: 0; }
.show {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 26px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(42, 37, 32, .55);
}
.show-venue { font-size: 18px; color: var(--cream); opacity: .9; }
.show-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--warm);
  white-space: nowrap;
  text-align: right;
}
.show-meta i { font-style: italic; opacity: .75; }

.contact { border-top: 1px solid var(--border); padding: 48px 0 110px; }
.contact-line { margin: 0 0 12px; font-size: 18px; }

/* ─────────────────────── FADE-IN ANIMATION ─────────────────────── */
.fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.2, .7, .3, 1), transform .9s cubic-bezier(.2, .7, .3, 1);
}
.fade-in.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-in { opacity: 1; transform: none; transition: none; }
  .scroll-cue-arrow { animation: none; }
  .tile img, .commission-example img { transition: none; }
}

/* ─────────────────── WATERMARK PLACEHOLDERS ───────────────────
   An image waiting on the watermark pass holds a 1×1 transparent GIF and
   its artwork aspect-ratio, so the slot is reserved at final size and
   nothing reflows when the real pixels arrive. */
/* While pending the src is a 1×1 transparent GIF, so intrinsic sizing would
   collapse it to nothing. Force full width here only — combined with the
   inline aspect-ratio (set from the photo's pixel dimensions) this reserves
   exactly the space the real image will occupy. Both are dropped on swap. */
img.wm-pending {
  width: 100%;
  background: var(--deep);
  box-shadow: none;
  opacity: .55;
}
.featured-img img { transition: opacity .5s ease; }

/* ─────────────────────── LOADING / ERROR ─────────────────────── */
.art-status {
  text-align: center;
  padding: 90px 28px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--warm);
}
.art-status.err { color: var(--ember); }

/* ─────────────────────────── RESPONSIVE ─────────────────────────── */
@media (max-width: 768px) {
  body { font-size: 17px; }

  .tabnav { padding: 0 14px; gap: 10px; }
  .logo { font-size: 17px; }
  /* Tab bar scrolls horizontally rather than wrapping */
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 8px 10px; font-size: 10px; letter-spacing: .12em; }
  .tab.active::after { left: 10px; right: 10px; }

  .wrap { padding: 0 18px; }
  .page-head { padding: 60px 0 38px; }

  .hero { padding: 30px 18px 0; }
  .hero-sub { letter-spacing: .2em; }
  .hero-loc { font-size: 17px; }
  .scroll-cue { bottom: 30px; }
  .scroll-cue-line { height: 34px; }

  /* Featured sections stack vertically */
  .featured,
  .featured.flip {
    flex-direction: column;
    gap: 30px;
    padding: 62px 18px;
  }
  .featured-img, .featured-text { flex: 1 1 auto; width: 100%; }
  .featured-story { font-size: 17px; margin-bottom: 26px; }
  .action { padding: 10px 15px; font-size: 9px; letter-spacing: .14em; }

  /* 2-column mosaic */
  .mosaic { grid-template-columns: repeat(2, 1fr); gap: 2px; padding: 0 2px; margin: 26px auto; }
  .tile-title { font-size: 17px; }

  .interstitial { padding: 78px 18px; }

  .merch-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .merch-card { padding: 34px 14px; }
  .merch-name { font-size: 21px; }
  .notify-input { width: 100%; }
  .notify-form { flex-direction: column; align-items: stretch; }

  .commission-examples { grid-template-columns: 1fr; gap: 10px; margin-bottom: 48px; }

  .about-head { padding: 56px 0 32px; }
  .about-photo { width: 200px; }
  .about-name { font-size: 33px; }
  .about-bio p { font-size: 17px; line-height: 1.8; }

  /* Show rows stack so long venue names don't crush the meta column */
  .show { flex-direction: column; gap: 3px; }
  .show-meta { text-align: left; }
}

@media (max-width: 420px) {
  .merch-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   LUMPYLP PLAYER
   Fixed to the bottom, outside the tab panels, so audio survives
   tab switches. Collapsed 56px; expands to 380px.
   ══════════════════════════════════════════════════════════════ */

.lp-wrap {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 800;
  height: 56px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: height .42s cubic-bezier(.2, .7, .3, 1);
}
.lp-wrap.open { height: 380px; }

/* ── expanded panel ─────────────────────────────────────────── */
.lp-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  background: var(--panel);
  border-top: 1px solid var(--border);
  /* Collapsed, this box is 0px tall. Without its own clip the sidebar's
     132px album art overflows downward and paints across the bar. */
  overflow: hidden;
}

.lp-list { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.lp-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--warm);
  flex-shrink: 0;
}
.lp-list-head a { color: var(--gold); white-space: nowrap; }
.lp-list-head a:hover { color: var(--cream); }

.lp-rows { flex: 1 1 auto; overflow-y: auto; min-height: 0; }

.lp-row {
  width: 100%;
  display: grid;
  grid-template-columns: 34px 1fr 1fr 52px;
  align-items: center;
  gap: 14px;
  padding: 9px 20px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(42, 37, 32, .45);
  text-align: left;
  cursor: pointer;
  transition: background .2s ease;
}
.lp-row:hover { background: var(--deep); }

.lp-row-n {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--warm);
  opacity: .6;
}
.lp-row-t {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--cream);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp-row-a {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--warm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp-row-d {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--warm);
  opacity: .7;
  text-align: right;
}

.lp-row.playing { background: rgba(200, 168, 92, .10); }
.lp-row.playing .lp-row-t,
.lp-row.playing .lp-row-n,
.lp-row.playing .lp-row-d { color: var(--gold); }
.lp-row.playing .lp-row-a { color: var(--gold); opacity: .8; }

/* ── now-playing sidebar ────────────────────────────────────── */
.lp-side {
  width: 280px;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

.lp-art {
  width: 132px; height: 132px;
  flex-shrink: 0;
  margin-bottom: 14px;
  background: var(--deep);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .6);
  overflow: hidden;
}
.lp-art img { width: 100%; height: 100%; object-fit: cover; }
.lp-art.lp-art-empty {
  background: linear-gradient(135deg, var(--gold) 0%, var(--ember) 55%, var(--deep) 100%);
  opacity: .8;
}

.lp-side-title {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.25;
  color: var(--cream);
  max-height: 50px;
  overflow: hidden;
}
.lp-side-artist {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--gold);
  margin-bottom: 8px;
}
.lp-side-src {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--warm);
  opacity: .75;
  margin-top: auto;
}
.lp-side-cta {
  margin-top: 12px;
  padding: 9px 20px;
  border: 1px solid var(--ember);
  color: var(--ember);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background .3s ease, color .3s ease;
}
.lp-side-cta:hover { background: var(--ember); color: var(--bg); }

/* ── collapsed bar ──────────────────────────────────────────── */
.lp-bar {
  flex: 0 0 56px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  background: #111;
  border-top: 1px solid var(--border);
}

.lp-btn {
  background: none;
  border: none;
  color: var(--warm);
  font-size: 13px;
  line-height: 1;
  padding: 7px 8px;
  cursor: pointer;
  transition: color .25s ease;
}
.lp-btn:hover { color: var(--gold); }
.lp-play { color: var(--cream); font-size: 15px; }
.lp-toggle { font-size: 11px; }

.lp-transport { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }

/* ── EQ bars ────────────────────────────────────────────────── */
.lp-eq {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
  width: 30px;
  flex-shrink: 0;
}
.lp-eq i {
  display: block;
  width: 3px;
  height: 3px;
  background: var(--gold);
  animation: lp-bounce .9s ease-in-out infinite;
  animation-play-state: paused;   /* only runs while actually playing */
  opacity: .5;
}
.lp-wrap.playing .lp-eq i { animation-play-state: running; opacity: 1; }
.lp-eq i:nth-child(1) { animation-delay: 0s;    }
.lp-eq i:nth-child(2) { animation-delay: .18s;  }
.lp-eq i:nth-child(3) { animation-delay: .36s;  }
.lp-eq i:nth-child(4) { animation-delay: .54s;  }
.lp-eq i:nth-child(5) { animation-delay: .72s;  }

@keyframes lp-bounce {
  0%, 100% { height: 3px;  }
  50%      { height: 14px; }
}

/* ── progress ───────────────────────────────────────────────── */
.lp-progress {
  flex: 1 1 auto;
  min-width: 60px;
  height: 4px;
  background: #222;
  cursor: pointer;
  position: relative;
}
.lp-progress-fill {
  height: 100%;
  width: 0;
  background: var(--gold);
  position: relative;
  transition: width .12s linear;
}
.lp-dot {
  position: absolute;
  right: -4px; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cream);
  opacity: 0;
  transition: opacity .2s ease;
}
.lp-progress:hover .lp-dot { opacity: 1; }

.lp-time {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .06em;
  color: var(--warm);
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* ── track info ─────────────────────────────────────────────── */
.lp-info {
  width: 190px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.35;
  min-width: 0;
}
.lp-info-t,
.lp-info-a {
  font-family: var(--mono);
  font-size: 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp-info-t { color: var(--cream); }
.lp-info-a { color: var(--warm); letter-spacing: .08em; }

/* ── badge ──────────────────────────────────────────────────── */
.lp-badge {
  flex-shrink: 0;
  padding: 5px 13px;
  border: 1px solid var(--ember);
  border-radius: 999px;
  color: var(--ember);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background .3s ease, color .3s ease;
}
.lp-badge:hover { background: var(--ember); color: var(--bg); }

/* ── responsive ─────────────────────────────────────────────────
   The collapsed bar keeps its 56px but splits it: a 12px strip at the top
   carrying the progress hairline, then one 44px row of controls. Nothing
   here changes the markup, so the desktop bar is untouched.

   Cut from the collapsed bar on mobile — all of it still reachable, just
   not competing for ~360px of width:
     prev / next  → the expanded tracklist (tap any row to jump)
     EQ bars      → decoration
     artist name  → the expanded panel's now-playing sidebar
     clock        → the progress hairline reads position at a glance
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .lp-wrap.open { height: 340px; }
  .lp-side { display: none; }          /* tracklist goes full width */

  /* 56px total = 1px border + an 11px progress strip + a 44px control row.
     The border counts: at 12px padding the row lands on 43px and every
     "44px" target is really 43. */
  .lp-bar {
    position: relative;                /* anchor for the progress hairline */
    gap: 8px;
    padding: 11px 12px 0;
  }

  /* Pulled out of the flex row entirely so it spans edge to edge instead of
     splitting the remaining width with the controls. */
  .lp-progress {
    position: absolute;
    top: 0; left: 0; right: 0;
    flex: none;
    width: auto;
    min-width: 0;
    height: 3px;
  }
  /* The line is 3px; the tap area is the whole 11px strip above the control
     row, so scrubbing stays possible without covering the play button. */
  .lp-progress::before {
    content: '';
    position: absolute;
    inset: 0 0 -8px 0;
  }
  .lp-dot { display: none; }           /* an 8px handle on a 3px line */

  #lp-prev, #lp-next,
  .lp-eq,
  .lp-time,
  .lp-info-a { display: none; }

  /* Play left, title centred, expand + badge right. 44px minimum on every
     tap target. */
  .lp-transport { order: 1; gap: 0; }
  .lp-play {
    width: 44px; height: 44px;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
  }

  .lp-info {
    order: 2;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 44px;
  }
  .lp-info-t { font-size: 11px; text-align: center; }

  .lp-toggle {
    order: 3;
    width: 44px; height: 44px;
    padding: 0;
    font-size: 12px;
  }

  .lp-badge {
    order: 4;
    position: relative;
    display: flex;
    align-items: center;
    padding: 4px 9px;
    font-size: 8px;
    letter-spacing: .1em;
  }
  /* Keep the pill small without shrinking the thing you have to hit. Height
     is pinned to 44px centred on the pill rather than grown by a symmetric
     inset: the pill is already centred in the 44px control row, so this
     fills the row exactly and never reaches up into the progress strip. */
  .lp-badge::after {
    content: '';
    position: absolute;
    left: -6px; right: -6px;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
  }

  .lp-row { grid-template-columns: 24px 1fr 46px; gap: 10px; padding: 9px 14px; }
  .lp-row-a { display: none; }
  .lp-list-head { padding: 12px 14px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-wrap { transition: none; }
  .lp-eq i { animation: none; height: 8px; }
  .lp-progress-fill { transition: none; }
}

/* Inline failure message under the featured action buttons. */
.action-error {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--ember);
  margin: 12px 0 0;
  min-height: 14px;
}

/* ══════════════════════════════════════════════════════════════
   LIGHTBOX
   z-index sits above the player (800) so the overlay covers it.
   ══════════════════════════════════════════════════════════════ */

.lb {
  position: fixed;
  inset: 0;
  z-index: 900;
  /* Spec called for rgba(10,8,6,.92), but at 8% transparency the page behind
     reads straight through — the hero headline and the next artwork's title
     collide with this one's, and backdrop-filter does not composite reliably
     enough to rescue it. Raised until the overlay is legible over any
     background. Revert this one value to .92 if the lighter veil is wanted. */
  background: rgba(10, 8, 6, .985);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Bottom padding clears the 56px player bar — without it the action row
     wraps straight on top of the transport controls. */
  padding: 40px 28px 96px;
  overflow-y: auto;
  opacity: 0;
  transition: opacity .22s ease;
}
.lb.open { opacity: 1; }
.lb[hidden] { display: none; }

.lb-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 1100px;
  width: 100%;
  margin: auto;
}

.lb-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  max-width: 100%;
}

.lb-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 90vw;
  /* 85vh is the ceiling, but the title and the action row have to stay above
     the fold — the buttons are the point of the overlay. On anything shorter
     than roughly 1100px the second term wins and the artwork yields. */
  max-height: min(85vh, calc(100vh - 330px));
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
}
/* Artwork and its loupe caption stack as one column inside the stage. */
.lb-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 100%;
}

/* While the loupe is armed the pointer is a sampling tool, not a link. */
.lb.loupe-on .lb-img { cursor: crosshair; }

.lb-loupe-cap {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  margin: 0;
  max-width: 90vw;
  line-height: 1.7;
}
.lb-loupe-cap[hidden] { display: none; }

.lb-info { text-align: center; max-width: 720px; }
.lb-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.15;
  margin: 0 0 6px;
  color: var(--cream);
}
.lb-year {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .24em;
  color: var(--gold);
  margin: 0 0 10px;
}
.lb-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--warm);
  margin: 0 0 22px;
}

.lb-actions { justify-content: center; }

/* "Preview hi-res" reads as an ordinary action until it is armed; armed it
   takes the gold so the viewer can see the mode is live. */
.action.loupe.on { border-color: var(--gold); color: var(--gold); }
.action.loupe.on:hover { border-color: var(--gold); color: var(--bg); background: var(--gold); }

.lb-close {
  position: fixed;
  top: 14px; right: 18px;
  z-index: 2;
  width: 46px; height: 46px;
  background: none;
  border: none;
  color: var(--cream);
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  opacity: .75;
  transition: opacity .25s ease, color .25s ease;
}
.lb-close:hover { opacity: 1; color: var(--gold); }

@media (max-width: 768px) {
  .lb { padding: 44px 14px 76px; align-items: flex-start; }
  /* Sized so the title and action row clear the fold without a scroll. */
  .lb-img { max-width: 95vw; max-height: 46vh; }
  .lb-stage { flex-direction: column; gap: 18px; }
  .lb-actions { flex-wrap: wrap; justify-content: center; }
  .lb-close { top: 8px; right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .lb { transition: none; }
}

/* Featured artwork is clickable into the lightbox (tiles already are). */
.featured-img img { cursor: zoom-in; }
.featured-img img.wm-pending { cursor: default; }

/* ══════════════════════════════════════════════════════════════
   HI-RES LOUPE
   The circle lives on <body>, not inside .lb — the overlay's
   backdrop-filter would otherwise become its containing block and
   re-anchor it on every scroll. Hence a z-index above the overlay's 900.
   Diameter is mirrored in LOUPE_D in js/app.js; change both together.
   ══════════════════════════════════════════════════════════════ */

.lb-loupe {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 960;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background-color: var(--deep);
  background-repeat: no-repeat;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .68), 0 0 0 1px rgba(0, 0, 0, .5);
  /* Never intercept the pointer — the circle sits under the cursor, and
     swallowing the move events would freeze its own tracking. */
  pointer-events: none;
  will-change: transform;
}
.lb-loupe[hidden] { display: none; }

@media (max-width: 768px) {
  /* Matched by LOUPE_D staying 180 — the circle is deliberately not scaled
     down on touch, where a finger already covers part of it. */
  .lb-loupe { box-shadow: 0 10px 26px rgba(0, 0, 0, .68), 0 0 0 1px rgba(0, 0, 0, .5); }
}