/* =============================================================================
   WIMB Archive — Component Styles
   Structural layout for reusable UI patterns.
   All values use custom properties from variables.css.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   BUTTONS
   ----------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  cursor: pointer;
  border: var(--border-width) solid transparent;
  transition:
    background-color var(--duration-fast) var(--easing),
    color            var(--duration-fast) var(--easing),
    border-color     var(--duration-fast) var(--easing);
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border-color: var(--color-accent);
}
.btn--primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-text-inverse);
}

.btn--secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn--secondary:hover {
  background: var(--color-bg-overlay);
  border-color: var(--color-accent);
}

/* -----------------------------------------------------------------------------
   HERO (homepage)
   ----------------------------------------------------------------------------- */
.hero {
  padding: var(--spacing-12) 0 var(--spacing-10);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-8);
}

/* Search dropdown */

.search-result {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-4);
  text-decoration: none;
  color: var(--color-text);
  transition: background var(--duration-fast) var(--easing);
}

.search-result:hover,
.search-result:focus {
  background: var(--color-bg-alt);
  outline: none;
}

.search-result__info {
  min-width: 0;
  text-align: left;
}

.search-result__title {
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result__sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -----------------------------------------------------------------------------
   CANON LIST
   ----------------------------------------------------------------------------- */
/* ── Canon page ── */

.canon-hero {
  position: relative;
  padding: 96px var(--wimb-gutter) 72px;
  overflow: hidden;
}

.canon-hero__bg {
  position: absolute;
  inset: -80px;
  background-size: cover;
  background-position: center;
  filter: blur(160px) saturate(0.4);
  opacity: 0.22;
  transform: scale(1.15);
  z-index: 0;
}

.canon-hero__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,13,13,0.4) 0%, var(--wimb-bg-0) 100%);
  z-index: 1;
}

.canon-hero__content {
  position: relative;
  z-index: 2;
}

.canon-hero__eyebrow {
  margin-bottom: 12px;
}

.canon-hero__h1 {
  margin: 0;
  font-family: var(--wimb-font-sans);
  font-weight: 400;
  font-size: clamp(3rem, 7vw, 88px);
  line-height: 0.91;
  letter-spacing: -0.020em;
  color: var(--wimb-fg-0);
}

.canon-hero__desc {
  margin: 32px 0 0;
  max-width: 640px;
  font-size: 22px;
  line-height: 30px;
  letter-spacing: -0.010em;
  color: var(--wimb-fg-2);
}

/* Ledger */
.canon-ledger {
  background: var(--wimb-bg-1);
  border-top: 1px solid var(--wimb-line);
  border-bottom: 1px solid var(--wimb-line);
  padding: 64px var(--wimb-gutter) 96px;
}

.canon-cols {
  display: grid;
  grid-template-columns: 80px 96px 1fr 120px 200px 80px;
  gap: 24px;
  padding: 12px 0;
  border-bottom: 1px solid var(--wimb-line);
  font-size: 11px;
  color: var(--wimb-fg-3);
  letter-spacing: -0.010em;
}

.canon-cols__picks { text-align: right; }

.canon-row {
  display: grid;
  grid-template-columns: 80px 96px 1fr 120px 200px 80px;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--wimb-line);
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: background 80ms ease;
}
.canon-row:hover { background: var(--wimb-bg-2); }

.canon-row__rank {
  font-weight: 400;
  font-size: 56px;
  line-height: 56px;
  letter-spacing: -0.025em;
  color: var(--wimb-fg-0);
  font-variant-numeric: tabular-nums;
}

.canon-row__cover {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--wimb-bg-2);
  flex-shrink: 0;
}
.canon-row__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.canon-row__record {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.canon-row__title {
  font-weight: 700;
  font-size: 22px;
  line-height: 24px;
  color: var(--wimb-fg-0);
  letter-spacing: 0.040px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.canon-row__artist {
  font-size: 16px;
  color: var(--wimb-fg-2);
  letter-spacing: -0.010em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.canon-row__year-genre {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.canon-row__year {
  font-size: 14px;
  color: var(--wimb-fg-1);
  font-variant-numeric: tabular-nums;
}

.canon-row__genre {
  font-size: 12px;
  color: var(--wimb-fg-3);
  letter-spacing: -0.010em;
}

.canon-row__pickers {
  display: flex;
  align-items: center;
}

.canon-row__picker-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--wimb-bg-2);
  border: 1.5px solid var(--wimb-bg-1);
  margin-left: -8px;
  position: relative;
}
.canon-row__picker-av:first-child { margin-left: 0; }
.canon-row__picker-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  display: block;
}

.canon-row__picker-mono {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
}

.canon-row__pickers-more {
  font-size: 11px;
  color: var(--wimb-fg-3);
  letter-spacing: -0.010em;
  margin-left: 8px;
  flex-shrink: 0;
}

.canon-row__picks {
  font-size: 32px;
  line-height: 32px;
  letter-spacing: -0.020em;
  color: var(--wimb-fg-0);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.canon-row__picks-x {
  font-size: 14px;
  color: var(--wimb-fg-3);
}

/* Mobile */
/* Canon rows: collapse to a compact rank · cover · title · picks row across the
   whole tablet + mobile band (raised 900→1024 so 901–1024 no longer uses the
   cramped 6-col desktop grid). Year/genre + the picker-avatar stack are hidden
   here — they're a desktop-width nicety. Desktop ≥1025px untouched. */
@media (max-width: 1024px) {
  .canon-cols { display: none; }
  .canon-row {
    grid-template-columns: 48px 64px 1fr 56px;
    gap: 16px;
  }
  .canon-row__rank { font-size: 32px; line-height: 32px; }
  .canon-row__cover { width: 64px; height: 64px; }
  .canon-row__title { font-size: 16px; }
  .canon-row__artist { font-size: 13px; }
  .canon-row__year-genre,
  .canon-row__pickers { display: none; }
  .canon-row__picks { font-size: 22px; }
  .canon-hero__desc { font-size: 18px; line-height: 26px; }
}

@media (max-width: 768px) {
  .canon-hero { padding: 56px var(--wimb-gutter) 48px; }
  .canon-ledger { padding: 48px var(--wimb-gutter) 64px; }
}

/* -----------------------------------------------------------------------------
   PICKER HERO (picker page)
   ----------------------------------------------------------------------------- */
.picker-hero {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-6);
  align-items: flex-start;
  margin-bottom: var(--spacing-8);
}

.picker-hero__meta {
  flex: 1;
  min-width: 260px;
}

.picker-hero__name {
  font-size: var(--text-4xl);
  margin-bottom: var(--spacing-2);
}

.picker-hero__role {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-2);
}

/* -----------------------------------------------------------------------------
   SEARCH
   ----------------------------------------------------------------------------- */
.search-form {
  margin-bottom: var(--spacing-8);
}

.search-form__inner {
  display: flex;
  gap: var(--spacing-3);
  max-width: 560px;
}

.search-form__inner input {
  flex: 1;
  font-size: var(--text-base);
  padding: var(--spacing-3) var(--spacing-4);
}

.search-section {
  margin-bottom: var(--spacing-10);
}

.search-section__heading {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--spacing-4);
  padding-bottom: var(--spacing-3);
  border-bottom: var(--border-width) solid var(--color-border);
}

.search-section__count {
  font-weight: var(--weight-normal);
}

.search-results {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.search-result {
  display: grid;
  grid-template-columns: var(--cover-size-sm) 1fr;
  gap: var(--spacing-4);
  align-items: center;
  padding: var(--spacing-3) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}
.search-result:first-child {
  border-top: var(--border-width) solid var(--color-border);
}
.search-result--picker {
  grid-template-columns: 1fr;
}

.search-result__art-link {
  display: block;
  text-decoration: none;
}

.search-result__art {
  width: var(--cover-size-sm);
  height: var(--cover-size-sm);
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-bg-sunken);
}

.search-result__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-result__info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.search-result__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.search-result__sub {
  font-size: var(--text-sm);
}

.search-result__meta {
  font-size: var(--text-xs);
}

/* -----------------------------------------------------------------------------
   EMPTY STATE / ERROR PAGE
   ----------------------------------------------------------------------------- */
.empty-state {
  color: var(--color-text-muted);
  padding: var(--spacing-10) 0;
}

/* Search page — mobile (≤768): full-width input + button, tighter spacing.
   The compact .search-result rows already stack cleanly; tablet keeps the
   capped 560px form. Horizontal padding comes from .site-main (--wimb-gutter). */
@media (max-width: 768px) {
  .page-header { margin-bottom: var(--spacing-6); }
  .search-form { margin-bottom: var(--spacing-6); }
  .search-form__inner {
    flex-direction: column;
    align-items: stretch;
    max-width: none;
  }
  .search-form__inner input { flex: none; width: 100%; }  /* full width; no vertical grow */
  .search-form__inner button { width: 100%; }
  .search-section { margin-bottom: var(--spacing-8); }
}

.error-page {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-4);
  padding: var(--spacing-16) 0;
}

.error-page__code {
  font-size: var(--text-5xl);
  color: var(--color-text-faint);
  line-height: 1;
}

.error-page__message {
  font-size: var(--text-xl);
  color: var(--color-text-muted);
}

/* -----------------------------------------------------------------------------
   ART TICKER (homepage scrolling album artwork strip)
   ----------------------------------------------------------------------------- */

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =============================================================================
   HOMEPAGE — WIMB Design System Sections (2026 redesign)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   SHARED UTILITIES
   ----------------------------------------------------------------------------- */

/* Inner content wrapper — constrains section content to 1100px, centred */
.wimb-inner {
  max-width: var(--max-width-content);
  margin-inline: auto;
  padding-inline: var(--wimb-gutter);
}

/* Eyebrow labels */
.wimb-eyebrow {
  font-size: var(--wimb-fs-meta);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--wimb-fg-3);
}

.wimb-eyebrow-sm {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--wimb-fg-3);
}

/* -----------------------------------------------------------------------------
   WIMB BUTTONS
   ----------------------------------------------------------------------------- */

.wimb-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--wimb-space-2);
  padding: 11px var(--wimb-space-5);
  border-radius: var(--wimb-radius-sm);
  font-family: var(--wimb-font-sans);
  font-size: var(--wimb-fs-body);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background-color var(--duration-fast) var(--easing),
    color            var(--duration-fast) var(--easing),
    border-color     var(--duration-fast) var(--easing);
  white-space: nowrap;
  line-height: 1;
}

.wimb-btn--primary {
  background: var(--wimb-fg-0);
  color: var(--wimb-bg-0);
  border-color: var(--wimb-fg-0);
}
.wimb-btn--primary:hover {
  background: var(--wimb-fg-1);
  border-color: var(--wimb-fg-1);
  color: var(--wimb-bg-0);
}

.wimb-btn--outline {
  background: transparent;
  color: var(--wimb-fg-0);
  border-color: var(--wimb-line-strong);
}
.wimb-btn--outline:hover {
  border-color: var(--wimb-fg-2);
  background: rgba(255, 255, 255, 0.04);
}

/* -----------------------------------------------------------------------------
   HERO — full-bleed tote-bag photograph (.hwb-*)
   The photo's dead-black left half is the text zone; the WIMB tote sits right.
   Bokeh dots in the bag's logo colours drift behind the dark zone and fade out
   through the editorial intro. Container queries (hwb) drive the ≤700px stack:
   photo band on top, copy + single-column intro beneath.
   ----------------------------------------------------------------------------- */

.hwb-sec {
  container-type: inline-size;
  container-name: hwb;
  position: relative;
  background: var(--wimb-bg-0);
}

.hwb-hero {
  position: relative;
  overflow: hidden;
}

/* Layer 0 — the photograph (image URL set inline from the template) */
.hwb-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--wimb-bg-0);
  background-position: 76% 38%;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Bottom melt lives inside the photo so the mobile (stacked) band inherits it */
.hwb-scrim-bottom {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(13, 13, 13, 0.30) 0%, rgba(13, 13, 13, 0) 20%,
    rgba(13, 13, 13, 0) 62%, var(--wimb-bg-0) 100%);
}

/* Desktop-only: holds type legibility over the crates bottom-left */
.hwb-scrim-left {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(13, 13, 13, 0.88) 0%, rgba(13, 13, 13, 0.42) 34%, rgba(13, 13, 13, 0) 58%);
}

.hwb-copy {
  position: relative;
  z-index: 2;
  min-height: 620px;
  padding-top: 96px;
  padding-bottom: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
}

.hwb-title {
  margin: 0;
  font-weight: 600;
  font-size: clamp(44px, 6cqw, 88px);
  line-height: 1.0;
  letter-spacing: -0.030em;
  color: var(--wimb-fg-0);
  text-shadow: 0 10px 50px rgba(0, 0, 0, 0.55);
}

.hwb-sub {
  margin: 0;
  max-width: 480px;
  font-size: clamp(17px, 1.45cqw, 21px);
  line-height: 1.5;
  letter-spacing: -0.014em;
  color: rgba(240, 236, 228, 0.86);
  text-wrap: pretty;
}
.hwb-sub a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(240, 236, 228, 0.35);
  text-underline-offset: 5px;
}

/* ── Bokeh field — absolute over the whole section (hero + intro).
     The horizontal mask keeps the dots in the dark zone (off the bag);
     the inner vertical mask fades them out before the doorways. ── */
.hwb-drift {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 26%, transparent 56%);
  mask-image: linear-gradient(90deg, #000 26%, transparent 56%);
}
.hwb-drift-fade {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 94%);
  mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 94%);
}

/* One dot. Per-dot values come from inline custom properties:
   --s size · --c colour · --b blur · --dur drift · --pdur pulse · --delay.
   The outer element drifts; the ::after disc carries gradient + blur and
   breathes. Low blur = crisp bokeh disc, high blur (--fog) = deep fog. */
.hwb-dot {
  position: absolute;
  width: var(--s);
  height: var(--s);
  margin-top: calc(var(--s) / -2);
  margin-left: calc(var(--s) / -2);
  will-change: transform;
  animation: var(--dur) ease-in-out var(--delay) infinite;
}
.hwb-dot--a { animation-name: hwb-bokeh-a; }
.hwb-dot--b { animation-name: hwb-bokeh-b; }
.hwb-dot--c { animation-name: hwb-bokeh-c; }
.hwb-dot--d { animation-name: hwb-bokeh-d; }

.hwb-dot::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c) 0%, var(--c) 60%, transparent 74%);
  filter: blur(var(--b));
  animation: hwb-bokeh-pulse var(--pdur) ease-in-out var(--delay) infinite alternate;
}
.hwb-dot--fog::after {
  background: radial-gradient(circle, var(--c) 0%, var(--c) 40%, transparent 72%);
}

@keyframes hwb-bokeh-a {
  0%   { transform: translate3d(0, 0, 0); }
  30%  { transform: translate3d(110px, -70px, 0); }
  60%  { transform: translate3d(40px, -150px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes hwb-bokeh-b {
  0%   { transform: translate3d(0, 0, 0); }
  35%  { transform: translate3d(-90px, 90px, 0); }
  70%  { transform: translate3d(-160px, 10px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes hwb-bokeh-c {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(70px, 90px, 0); }
  65%  { transform: translate3d(150px, -40px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes hwb-bokeh-d {
  0%   { transform: translate3d(0, 0, 0); }
  40%  { transform: translate3d(-60px, -110px, 0); }
  75%  { transform: translate3d(30px, -50px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes hwb-bokeh-pulse {
  from { opacity: 0.65; transform: scale(0.92); }
  to   { opacity: 1;    transform: scale(1.10); }
}

/* ── Editorial intro — two columns under a hairline that spans them ── */
.hwb-intro {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 56px 0 96px;
  max-width: 900px;
}
.hwb-intro::before {
  content: "";
  grid-column: 1 / -1;
  height: 1px;
  background: var(--wimb-line);
}
.hwb-intro p {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.010em;
  color: var(--wimb-fg-2);
  text-wrap: pretty;
}

/* ── Mobile stack (container ≤700px): the photo becomes a band up top,
     cropped to the bag; copy + intro stack beneath. Bokeh skips the photo
     band and floats behind the copy at ~60% scale so the dots still read
     as bokeh, not floodlights. ── */
@container hwb (max-width: 700px) {
  .hwb-photo {
    position: relative;
    height: 340px;
    background-position: 72% 36%;
  }
  .hwb-scrim-left { display: none; }
  .hwb-drift {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 26%, #000 38%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, transparent 26%, #000 38%, #000 100%);
  }
  .hwb-drift-fade {
    width: 167%;
    height: 167%;
    transform: scale(0.6);
    transform-origin: top left;
  }
  .hwb-copy {
    min-height: 0;
    padding-top: 30px;
    padding-bottom: 8px;
    gap: 16px;
    justify-content: flex-start;
  }
  .hwb-title {
    font-size: 44px;
    letter-spacing: -0.022em;
    text-shadow: none;
  }
  .hwb-sub { font-size: 17px; }
  .hwb-intro {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 40px 0 64px;
  }
}

/* Accessibility — the bokeh is pure ornament */
@media (prefers-reduced-motion: reduce) {
  .hwb-dot,
  .hwb-dot::after { animation: none; }
}

/* -----------------------------------------------------------------------------
   DOORWAY SECTIONS — two-column editorial blocks
   ----------------------------------------------------------------------------- */

.wimb-doorway--bg0 { background: var(--wimb-bg-0); }

/* Flip: visual preview on left, copy on right */

.wimb-doorway__title {
  font-family: var(--wimb-font-sans);
  font-size: clamp(1.5rem, 3.5vw, var(--wimb-fs-display));
  line-height: var(--wimb-lh-display);
  letter-spacing: var(--wimb-tracking-tight);
  color: var(--wimb-fg-0);
  margin: 0;
}

.wimb-doorway__blurb {
  font-size: var(--wimb-fs-body);
  color: var(--wimb-fg-2);
  line-height: var(--wimb-lh-body);
  max-width: 420px;
  margin: 0;
}

@media (max-width: 768px) {

  .wimb-doorway__blurb {
    max-width: none;
  }
}

/* -----------------------------------------------------------------------------
   FEATURED EPISODE
   ----------------------------------------------------------------------------- */

.wimb-episode {
  padding-block: var(--wimb-space-9);
  border-top: 1px solid var(--wimb-line);
}

.wimb-episode__inner {
  display: flex;
  flex-direction: column;
  gap: var(--wimb-space-7);
}

.wimb-episode__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: var(--wimb-space-4);
}

.wimb-episode__body {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--wimb-space-8);
  align-items: start;
}

/* YouTube thumbnail */
.wimb-episode__thumb-link {
  position: relative;
  display: block;
  text-decoration: none;
  border-radius: var(--wimb-radius-md);
  overflow: hidden;
  background: var(--wimb-bg-2);
  flex-shrink: 0;
}

.wimb-episode__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: opacity var(--duration-fast) var(--easing);
}
.wimb-episode__thumb-link:hover .wimb-episode__thumb {
  opacity: 0.88;
}

.wimb-episode__play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  pointer-events: none;
  transition:
    background     var(--duration-fast) var(--easing),
    border-color   var(--duration-fast) var(--easing),
    transform      var(--duration-fast) var(--easing);
}
.wimb-episode__thumb-link:hover .wimb-episode__play-btn {
  background: rgba(0, 0, 0, 0.9);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%) scale(1.1);
}

.wimb-episode__yt-chip {
  position: absolute;
  bottom: var(--wimb-space-3);
  right: var(--wimb-space-3);
  background: rgba(0, 0, 0, 0.72);
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  padding: 4px 8px;
  border-radius: var(--wimb-radius-xs);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--easing);
}
.wimb-episode__thumb-link:hover .wimb-episode__yt-chip {
  opacity: 1;
}

/* Right column: picker */
.wimb-episode__picker {
  display: flex;
  flex-direction: column;
  gap: var(--wimb-space-4);
}

.wimb-episode__picker-head {
  display: flex;
  align-items: center;
  gap: var(--wimb-space-4);
}

.wimb-episode__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--wimb-bg-2);
  border: 1px solid var(--wimb-line);
  flex-shrink: 0;
}
.wimb-episode__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
}

.wimb-episode__avatar-mono {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.9);
  font-weight: var(--weight-semibold);
  font-size: 1.25rem;
}

.wimb-episode__picker-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wimb-episode__picker-name {
  font-family: var(--wimb-font-sans);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--wimb-fg-0);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wimb-episode__role {
  font-size: var(--wimb-fs-body);
  color: var(--wimb-fg-2);
}

.wimb-episode__bio {
  font-size: var(--wimb-fs-body);
  color: var(--wimb-fg-2);
  line-height: var(--wimb-lh-body);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wimb-episode__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wimb-space-3);
  margin-top: var(--wimb-space-2);
}

/* Bag grid */
.wimb-episode__bag {
  padding-top: var(--wimb-space-6);
}

.wimb-episode__bag-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--wimb-space-5);
}

.wimb-episode__bag-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: var(--wimb-space-4);
}
/* Square art is enforced globally on .wimb-album-card__art (aspect-ratio:1 +
   absolutely-positioned img); no per-grid override needed here. */

/* Tablet: bag grid steps down from desktop 4-col to 3-col (body stays
   side-by-side here — see ≤768 below for the mobile stack) */
@media (min-width: 769px) and (max-width: 1024px) {
  .wimb-episode__bag-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .wimb-episode__body {
    grid-template-columns: 1fr;
  }
  .wimb-episode {
    padding-block: var(--wimb-space-7);
  }
  .wimb-episode__bag-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* -----------------------------------------------------------------------------
   WIMB ALBUM CARD (homepage bag picks)
   ----------------------------------------------------------------------------- */

.wimb-album-card {
  display: flex;
  flex-direction: column;
  gap: var(--wimb-space-2);
  text-decoration: none;
}

.wimb-album-card__art {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--wimb-radius-sm);
  overflow: hidden;
  background: var(--wimb-bg-2);
}
.wimb-album-card__art img {
  position: absolute;   /* out of flow so a non-square source can't inflate the
                           aspect-ratio:1 container — guarantees consistent squares */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity var(--duration-fast) var(--easing);
}
.wimb-album-card:hover .wimb-album-card__art img {
  opacity: 0.85;
}

/* Amoeba price tag overlay — full-cover overlay, same dimensions as the art beneath */
.wimb-price-tag {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}

.wimb-album-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wimb-album-card__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--wimb-fg-0);
  line-height: var(--leading-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wimb-album-card__artist {
  font-size: var(--wimb-fs-meta);
  color: var(--wimb-fg-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wimb-album-card__year {
  font-size: var(--wimb-fs-meta);
  color: var(--wimb-fg-3);
}

/* -----------------------------------------------------------------------------
   ABOUT AMOEBA
   ----------------------------------------------------------------------------- */

.wimb-about {
  padding-block: var(--wimb-space-9);
  border-top: 1px solid var(--wimb-line);
}

.wimb-about__inner {
  display: flex;
  flex-direction: column;
  gap: var(--wimb-space-9);
}

/* Intro: heading + copy side by side */
.wimb-about__intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wimb-space-8);
  align-items: start;
}

.wimb-about__title {
  font-family: var(--wimb-font-sans);
  font-size: clamp(1.5rem, 3vw, var(--wimb-fs-display));
  line-height: var(--wimb-lh-display);
  letter-spacing: var(--wimb-tracking-tight);
  color: var(--wimb-fg-0);
  margin: 0;
}

.wimb-about__copy {
  display: flex;
  flex-direction: column;
  gap: var(--wimb-space-4);
}
.wimb-about__copy p {
  font-size: var(--wimb-fs-body);
  color: var(--wimb-fg-2);
  line-height: var(--wimb-lh-body);
  margin: 0;
}
.wimb-about__copy em {
  font-style: italic;
  color: var(--wimb-fg-1);
}

/* Store grid: 3 columns */
.wimb-about__stores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wimb-space-6);
}

.wimb-about__store {
  display: flex;
  flex-direction: column;
  gap: var(--wimb-space-3);
}

.wimb-about__store-img {
  aspect-ratio: 4 / 3;
  border-radius: var(--wimb-radius-md);
  overflow: hidden;
  background: var(--wimb-bg-2);
}
.wimb-about__store-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wimb-about__store-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wimb-space-2);
}

.wimb-about__store-name {
  font-size: var(--wimb-fs-body);
  font-weight: var(--weight-semibold);
  color: var(--wimb-fg-0);
}

.wimb-about__store-year {
  font-size: var(--wimb-fs-meta);
  color: var(--wimb-fg-3);
  font-variant-numeric: tabular-nums;
}

.wimb-about__store-addr {
  font-size: var(--wimb-fs-meta);
  color: var(--wimb-fg-2);
}

.wimb-about__store-note {
  font-size: var(--wimb-fs-body);
  color: var(--wimb-fg-2);
  line-height: var(--leading-normal);
  margin: 0;
}

/* Outbound links — 3-column horizontal row */
.wimb-about__links {
  display: flex;
  flex-direction: row;
  border-top: 1px solid var(--wimb-line);
  border-bottom: 1px solid var(--wimb-line);
}

.wimb-about__link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wimb-space-4);
  padding: var(--wimb-space-6) var(--wimb-space-5);
  border-right: 1px solid var(--wimb-line);
  text-decoration: none;
  color: var(--wimb-fg-0);
  transition:
    background     var(--duration-fast) var(--easing);
}
.wimb-about__link:last-child {
  border-right: none;
}
.wimb-about__link:hover {
  background: rgba(255, 255, 255, 0.03);
}
.wimb-about__link > span {
  color: var(--wimb-fg-2);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.wimb-about__link-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wimb-about__link-sub {
  font-size: var(--wimb-fs-meta);
  color: var(--wimb-fg-3);
}

.wimb-about__link-label {
  font-size: var(--wimb-fs-body);
  font-weight: var(--weight-semibold);
  color: var(--wimb-fg-0);
  transition: color var(--duration-fast) var(--easing);
}
.wimb-about__link:hover .wimb-about__link-label {
  color: var(--wimb-fg-1);
}

/* About responsive */
@media (max-width: 768px) {
  .wimb-about__intro {
    grid-template-columns: 1fr;
    gap: var(--wimb-space-5);
  }
  .wimb-about__stores {
    grid-template-columns: 1fr;
    gap: var(--wimb-space-7);
  }
  .wimb-about {
    padding-block: var(--wimb-space-7);
  }
  /* Outbound links stack into full-width rows (3-up row jams on phones) */
  .wimb-about__links {
    flex-direction: column;
  }
  .wimb-about__link {
    border-right: none;
    border-bottom: 1px solid var(--wimb-line);
  }
  .wimb-about__link:last-child {
    border-bottom: none;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .wimb-about__stores {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =============================================================================
   ABOUT PAGE — full editorial redesign
   ============================================================================= */

/* Hero */
.wimb-about-hero {
  position: relative;
  padding: 96px var(--wimb-gutter) 72px;
  overflow: hidden;
  background: var(--wimb-bg-0);
  border-bottom: 1px solid var(--wimb-line);
}

.wimb-about-hero__bg {
  position: absolute;
  inset: -80px;
  background-size: cover;
  background-position: center;
  filter: blur(180px) saturate(0.35);
  opacity: 0.22;
  transform: scale(1.15);
  z-index: 0;
}

.wimb-about-hero__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,13,13,0.3) 0%, var(--wimb-bg-0) 100%);
  z-index: 1;
}

.wimb-about-hero__content {
  position: relative;
  z-index: 2;
}

.wimb-about-hero__title {
  margin: 12px 0 0;
  font-family: var(--wimb-font-sans);
  font-weight: 400;
  font-size: clamp(2.5rem, 7vw, 88px);
  line-height: 0.91;
  letter-spacing: var(--wimb-tracking-tight);
  color: var(--wimb-fg-0);
}

.wimb-about-hero__body {
  margin: 32px 0 0;
  max-width: 700px;
  font-size: clamp(1.1rem, 2vw, 1.375rem);
  line-height: 1.36;
  letter-spacing: -0.01em;
  color: var(--wimb-fg-2);
}

/* Shared section shell */
/* Shared h3 utility — matches picker-quotes__title */
.wimb-h3 {
  margin: 0;
  font-family: var(--wimb-font-sans);
  font-weight: 700;
  font-size: 22px;
  line-height: 36px;
  letter-spacing: -0.020em;
  color: var(--wimb-fg-0);
}

.wimb-about-sec {
  padding-block: 48px;
}

/* Restore heading-to-body spacing on the About page (no flex-gap wrapper here) */
.wimb-about-sec .wimb-h3 {
  margin-bottom: 20px;
}

/* Divider between sections — adjacent sibling avoids a line before the first or after the last */
.wimb-about-sec + .wimb-about-sec {
  border-top: 1px solid var(--wimb-line);
}

/* single-column layout */

.wimb-about-sec__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.wimb-about-sec__body p {
  margin: 0;
  font-size: var(--wimb-fs-body);
  line-height: 1.625;
  letter-spacing: -0.01em;
  color: var(--wimb-fg-2);
}

.wimb-about-sec__body a {
  color: var(--wimb-fg-0);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wimb-about-sec__body a:hover {
  color: var(--wimb-fg-1);
}

/* By the numbers */

/* Colophon */

/* Continue CTA */

/* Mobile */
@media (max-width: 768px) {
  /* Hero: lighter padding (title/body already clamp down) */
  .wimb-about-hero { padding: 56px var(--wimb-gutter) 40px; }
  .wimb-about-hero__body { margin-top: 20px; }
  .wimb-about-sec {
    padding-block: 32px;
  }
}

/* =============================================================================
   PICKER DETAIL PAGE
   ============================================================================= */

/* Breadcrumb */
.picker-breadcrumb {
  position: sticky;
  top: 65px;
  z-index: 8;
  background: var(--wimb-bg-1);
  border-bottom: 1px solid var(--wimb-line);
}

.nav--compact + .site-main .picker-breadcrumb {
  top: 41px;
}

.picker-breadcrumb__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 12px;
}

.picker-breadcrumb__back {
  font-size: 12px;
  color: var(--wimb-fg-2);
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: color var(--duration-fast) var(--easing);
}

.picker-breadcrumb__back:hover {
  color: var(--wimb-fg-0);
}

.picker-breadcrumb__sep {
  font-size: 12px;
  color: var(--wimb-fg-3);
}

.picker-breadcrumb__current {
  font-size: 12px;
  color: var(--wimb-fg-3);
  letter-spacing: -0.01em;
}

/* Hero */
.picker-hero {
  position: relative;
  padding: 96px var(--wimb-gutter) 80px;
  overflow: hidden;
  background: var(--wimb-bg-0);
}

.picker-hero__bg {
  display: none;
}

.picker-hero__fade {
  display: none;
}

.picker-hero__content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 64px;
  align-items: start;
}

.picker-hero__portrait {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--wimb-line);
  box-shadow: 0 24px 56px rgba(0,0,0,0.5);
}

.picker-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}

.picker-hero__mono {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wimb-font-sans);
  font-size: 96px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: rgba(255,255,255,0.9);
}

.picker-hero__info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  max-width: 700px;
  padding-top: 16px;
}

.picker-hero__name {
  margin: 0;
  font-family: var(--wimb-font-sans);
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--wimb-fg-0);
}

.picker-hero__role {
  font-size: clamp(1rem, 2vw, 1.375rem);
  color: var(--wimb-fg-2);
  letter-spacing: -0.01em;
}

.picker-hero__meta {
  font-size: 14px;
  color: var(--wimb-fg-3);
  letter-spacing: -0.01em;
}

.picker-hero__bio {
  margin: 8px 0 0;
  font-size: var(--wimb-fs-body);
  line-height: 1.625;
  letter-spacing: -0.01em;
  color: var(--wimb-fg-2);
  max-width: 640px;
}

.picker-bio-wrap { display: flex; flex-direction: column; gap: 8px; }
.picker-hero__bio--clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.picker-bio__toggle {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--wimb-font-sans);
  font-size: 14px;
  letter-spacing: -0.010em;
  color: var(--wimb-fg-1);
  text-decoration: underline;
  text-decoration-color: var(--wimb-line-strong);
  text-underline-offset: 4px;
  cursor: pointer;
}

/* Episode section */
.picker-episode {
  background: var(--wimb-bg-1);
  border-top: 1px solid var(--wimb-line);
  border-bottom: 1px solid var(--wimb-line);
  padding-block: 96px;
}

.picker-episode__inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: center;
}

.picker-episode__left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.picker-episode__title {
  margin: 0;
  font-family: var(--wimb-font-sans);
  font-weight: 700;
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.020em;
  color: var(--wimb-fg-0);
}

/* YouTube thumbnail */
.picker-episode__thumb-link {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--wimb-line);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  text-decoration: none;
  color: inherit;
}

.picker-episode__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.picker-episode__thumb-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,13,13,0) 0%, rgba(13,13,13,0.55) 100%);
  pointer-events: none;
}

.picker-episode__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13,13,13,0.3);
  transition: background var(--duration-fast) var(--easing);
}

.picker-episode__thumb-link:hover .picker-episode__play {
  background: rgba(13,13,13,0.5);
}

.picker-episode__play-btn {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(13,13,13,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wimb-fg-0);
}

.picker-episode__play svg {
  width: 24px;
  height: 24px;
  margin-left: 4px;
}

.picker-episode__yt-chip {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(13,13,13,0.85);
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--wimb-fg-0);
  letter-spacing: -0.01em;
  pointer-events: none;
}

/* Bag grid */
.picker-bag {
  padding-block: 96px;
  background: var(--wimb-bg-1);
  border-top: 1px solid var(--wimb-line);
  border-bottom: 1px solid var(--wimb-line);
}

.picker-bag__header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 48px;
}

.picker-bag__sub {
  font-size: 11px;
  color: var(--wimb-fg-3);
  letter-spacing: -0.010em;
}

.picker-bag__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  column-gap: 24px;
  row-gap: 48px;
}

/* Picker page: what they said */
.picker-quotes {
  margin-top: 96px;
  padding-top: 64px;
  border-top: 1px solid var(--wimb-line);
}
.picker-quotes__head {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 32px;
}
.picker-quotes__title {
  margin: 0; font-weight: 700; font-size: 22px; line-height: 36px;
  letter-spacing: -0.020em; color: var(--wimb-fg-0);
  font-family: var(--wimb-font-sans);
}
.picker-quotes__sub {
  font-size: 11px; color: var(--wimb-fg-3); letter-spacing: -0.010em;
}

/* ── Picker quote carousel ── */

/* LEFT column: the large quote + watch button */

/* Override centering from .alb-quote context — keep text left-aligned here */

/* RIGHT column: cover art + album info */

/* Nav row: ← 1 / 4 → */

.picker-episode__epline {
  font-size: 16px; color: var(--wimb-fg-2); letter-spacing: -0.010em;
}

/* Other pickers */
.picker-related {
  padding: 96px var(--wimb-gutter);
}
.picker-related__head {
  display: flex; align-items: baseline; gap: 16px; margin-bottom: 32px;
}
.picker-related__sub { font-size: 11px; color: var(--wimb-fg-3); letter-spacing: -0.010em; }
.picker-related__all {
  margin-left: auto; font-size: 14px; color: var(--wimb-fg-1);
  letter-spacing: -0.010em; text-decoration: none;
}
.picker-related__all:hover { color: var(--wimb-fg-0); }
.picker-related__grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px;
}
.picker-related__card {
  display: flex; flex-direction: column; gap: 12px;
  text-decoration: none; color: inherit;
}
.picker-related__avatar {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 50%;
  overflow: hidden; border: 1px solid var(--wimb-line);
}
.picker-related__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.picker-related__mono {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: clamp(18px, 5cqi, 56px);
  letter-spacing: -0.015em; line-height: 1; color: rgba(255,255,255,0.8);
}
.picker-related__info { display: flex; flex-direction: column; gap: 2px; }
.picker-related__name {
  font-weight: 700; font-size: 14px; line-height: 18px;
  color: var(--wimb-fg-0); letter-spacing: -0.010em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.picker-related__meta { font-size: 11px; color: var(--wimb-fg-3); letter-spacing: -0.010em; }
.picker-related__card:hover .picker-related__name { color: var(--wimb-fg-2); }

/* Continue in the archive */
.picker-continue {
  padding: 96px var(--wimb-gutter);
  border-top: 1px solid var(--wimb-line);
}
.picker-continue__inner {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; text-align: center;
}
.picker-continue__label { font-size: 11px; color: var(--wimb-fg-3); letter-spacing: -0.010em; }
.picker-continue__head {
  margin: 0; font-weight: 400; font-family: var(--wimb-font-sans);
  font-size: 56px; line-height: 60px;
  letter-spacing: -0.020em; color: var(--wimb-fg-0);
}
.picker-continue__body {
  margin: 0; max-width: 480px; font-size: 16px; line-height: 24px;
  letter-spacing: -0.010em; color: var(--wimb-fg-2);
}
.picker-continue__ctas { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; justify-content: center; }
.picker-continue__btn {
  display: inline-flex; align-items: center; height: 44px; padding: 0 24px;
  border-radius: 9999px; font-family: var(--wimb-font-sans); font-size: 14px;
  font-weight: 700; letter-spacing: -0.010em; text-decoration: none;
  transition: opacity 120ms ease;
}
.picker-continue__btn:hover { opacity: 0.8; }
.picker-continue__btn--primary {
  background: var(--wimb-fg-0); color: var(--wimb-bg-0); border: none;
}
.picker-continue__btn--secondary {
  background: transparent; color: var(--wimb-fg-0); border: 1px solid var(--wimb-line);
}

/* Tablet (769–1024): smaller portrait + tighter gaps; bag 3-col, related 4-col.
   Desktop ≥1025px untouched. */
@media (min-width: 769px) and (max-width: 1024px) {
  .picker-hero__content { grid-template-columns: 220px 1fr; gap: 40px; }
  .picker-hero__portrait { width: 220px; height: 220px; }
  .picker-episode__inner { gap: 40px; }
  .picker-bag__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .picker-related__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Mobile (≤768): stack everything, lighter vertical padding. Horizontal
   padding stays on the --wimb-gutter scale. */
@media (max-width: 768px) {
  /* Hero: full-bleed portrait photo, name/role/bio stacked below it.
     The photo breaks past both the hero padding and the .wimb-inner wrapper
     (max-width + gutter), then the gutter is restored on the info only. */
  .picker-hero { padding: 0 0 40px; }
  .picker-hero__content {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: none;       /* override .wimb-inner max-width */
    padding-inline: 0;     /* override .wimb-inner gutter so the photo is full bleed */
  }
  .picker-hero__portrait {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;   /* portrait, rectangular */
    border-radius: 0;      /* drop the circular crop */
    border: none;
    box-shadow: none;
  }
  /* .picker-hero__img already fills with object-fit:cover (object-position
     50% 20% keeps faces in frame) */
  .picker-hero__info {
    padding-top: 0;
    padding-inline: var(--wimb-gutter);   /* gutter for the text below the full-bleed photo */
  }

  /* Episode: text over thumbnail, smaller title */
  .picker-episode { padding-block: 56px; }
  .picker-episode__inner { grid-template-columns: 1fr; gap: 32px; }
  .picker-episode__title { font-size: 30px; line-height: 34px; }

  /* What they said: tighten section spacing (per-quote padding comes from the
     shared .alb-quote ≤768 rule; quote text already clamps down) */
  .picker-quotes { margin-top: 56px; padding-top: 40px; }

  /* Bag grid: 2-col on phones */
  .picker-bag { padding-block: 56px; }
  .picker-bag__header { flex-wrap: wrap; margin-bottom: 28px; }
  .picker-bag__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Related curators: 3-col; header wraps so the "See all" link doesn't crowd */
  .picker-related { padding-block: 56px; }
  .picker-related__head { flex-wrap: wrap; margin-bottom: 24px; }
  .picker-related__grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }

  /* Continue CTA */
  .picker-continue { padding-block: 56px; }
  .picker-continue__head { font-size: 36px; line-height: 40px; }
}

/* =============================================================================
   ALBUM DETAIL PAGE — immersive hero redesign
   ============================================================================= */

/* Hero */

/* Shared section styles */

/* Pickers list */

/* Related albums grid */

/* Mobile */

/* ============================================================
   Albums Browse (/albums)
   ============================================================ */

/* Hero */
.albums-hero {
  position: relative;
  padding: 96px var(--wimb-gutter) 72px;
  overflow: hidden;
}

.albums-hero__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,13,13,0.3) 0%, var(--wimb-bg-0) 100%);
  z-index: 1;
}

.albums-hero__content {
  position: relative;
  z-index: 2;
}

.albums-hero__eyebrow {
  margin-bottom: 12px;
}

.albums-hero__headline {
  margin: 0;
  font-family: var(--wimb-font-sans);
  font-weight: 400;
  font-size: clamp(64px, 9vw, 120px);
  line-height: 0.9;
  letter-spacing: var(--wimb-tracking-tight);
  color: var(--wimb-fg-0);
}

.albums-hero__sub {
  margin: 32px 0 0;
  max-width: 720px;
  font-size: 22px;
  line-height: 30px;
  letter-spacing: -0.010em;
  color: var(--wimb-fg-2);
}

.albums-hero__stats {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 64px;
  border-top: 1px solid var(--wimb-line);
  padding-top: 24px;
}

.albums-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.albums-hero__stat-value {
  font-weight: 700;
  font-size: 32px;
  color: var(--wimb-fg-0);
  letter-spacing: -0.015em;
  line-height: 1.1;
}

/* Featured Record */

/* Sleeve + vinyl wrapper */

/* All Albums section */
.albums-all {
  background: var(--wimb-bg-1);
  border-top: 1px solid var(--wimb-line);
  border-bottom: 1px solid var(--wimb-line);
}

.albums-all__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  /* no padding-inline: let wimb-inner supply the horizontal gutter */
}

/* Filter bar */
.albums-filter-bar {
  position: sticky;
  top: 65px;
  z-index: 8;
  background: var(--wimb-bg-1);
  border-top: 1px solid var(--wimb-line);
  border-bottom: 1px solid var(--wimb-line);
}

.nav--compact + .site-main .albums-filter-bar {
  top: 41px;
}

.albums-filter-bar__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
  padding-bottom: 16px;
  /* no padding-inline: let wimb-inner supply the horizontal gutter */
  flex-wrap: wrap;
}

.albums-filter-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.albums-filter-chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 9999px;
  background: transparent;
  color: var(--wimb-fg-1);
  border: 1px solid var(--wimb-line);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.010em;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}

.albums-filter-chip:hover {
  border-color: var(--wimb-fg-3);
  color: var(--wimb-fg-0);
}

.albums-filter-chip--on {
  background: var(--wimb-fg-0);
  color: var(--wimb-bg-0);
  border-color: transparent;
}

.albums-filter-chip--on:hover {
  background: var(--wimb-fg-0);
  color: var(--wimb-bg-0);
}

/* Genre overflow panel */
.albums-genre-more-wrap {
  position: relative;
}

.albums-genre-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 9;
  min-width: 220px;
  background: var(--wimb-bg-2);
  border: 1px solid var(--wimb-line);
  border-radius: var(--wimb-radius-md);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.40);
  padding: 8px 0;
}

.albums-genre-panel--open {
  display: block;
}

.albums-genre-panel__item {
  display: block;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--wimb-fg-1);
  text-decoration: none;
  letter-spacing: -0.010em;
  white-space: nowrap;
  transition: background 100ms ease, color 100ms ease;
}

.albums-genre-panel__item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--wimb-fg-0);
}

.albums-genre-panel__item--on {
  color: var(--wimb-fg-0);
  font-weight: 700;
}

/* Filter progressive disclosure — desktop shows the chip groups inline; at
   ≤1024px they collapse behind a "Filters" toggle so the sticky bar stays
   compact (chips were wrapping into a tall sticky header on small screens). */
.albums-filter-toggle { display: none; }       /* desktop: no toggle */
.albums-filter-groups { display: contents; }   /* desktop: wrapper transparent, chips inline */

@media (max-width: 1024px) {
  .albums-filter-bar__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .albums-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    height: 38px;
    padding: 0 16px;
    border-radius: 9999px;
    background: transparent;
    color: var(--wimb-fg-0);
    border: 1px solid var(--wimb-line);
    font-family: var(--wimb-font-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.010em;
    cursor: pointer;
  }
  .albums-filter-toggle__active {
    color: var(--wimb-fg-2);
    font-weight: 400;
  }
  .albums-filter-toggle__chev {
    margin-left: 2px;
    transition: transform 160ms ease;
  }
  .albums-filter-bar.is-filters-open .albums-filter-toggle__chev {
    transform: rotate(180deg);
  }

  /* Collapsed by default; expands into a stacked panel when open */
  .albums-filter-groups { display: none; }
  .albums-filter-bar.is-filters-open .albums-filter-groups {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 4px;
  }
}

/* Floating search bar */
.albums-float-bar {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}

.albums-float-bar--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.albums-float-bar__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  background: rgba(20, 20, 20, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--wimb-line);
  border-radius: var(--wimb-radius-pill);
  min-width: 300px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

.albums-float-bar__icon {
  color: var(--wimb-fg-3);
  flex-shrink: 0;
}

.albums-float-bar__input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--wimb-fg-0);
  font-family: var(--wimb-font-sans);
  font-size: 14px;
  letter-spacing: -0.010em;
  min-width: 0;
}

.albums-float-bar__input::placeholder {
  color: var(--wimb-fg-3);
}

.albums-float-bar__clear {
  background: transparent;
  border: 0;
  color: var(--wimb-fg-3);
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  transition: color 120ms ease;
  display: none;
  flex-shrink: 0;
}

.albums-float-bar__clear:hover {
  color: var(--wimb-fg-0);
}

.albums-float-bar--has-query .albums-float-bar__clear {
  display: block;
}

/* Album grid — cards use wimb-album-card (same component as homepage bag picks) */
.albums-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  column-gap: 24px;
  row-gap: 48px;
  padding: 32px 0 0;
}

/* author display:flex beats UA [hidden]; restore expected hide behaviour */
.albums-grid .wimb-album-card[hidden] { display: none !important; }

/* Pagination */
.albums-pagination {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: center;
  padding: 64px 0 96px;
}

.albums-pagination__btn {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  border-radius: 9999px;
  border: 1px solid var(--wimb-line);
  background: transparent;
  color: var(--wimb-fg-0);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.010em;
  text-decoration: none;
  transition: border-color 120ms ease;
}

.albums-pagination__btn:hover {
  border-color: var(--wimb-fg-3);
}

.albums-pagination__btn--off {
  opacity: 0.3;
  pointer-events: none;
}

.albums-pagination__info {
  font-size: 12px;
  color: var(--wimb-fg-3);
  letter-spacing: -0.010em;
  font-variant-numeric: tabular-nums;
}

.albums-empty {
  padding: 64px 0;
  font-size: 22px;
  color: var(--wimb-fg-3);
  letter-spacing: -0.010em;
}

/* Albums CTA */
.albums-cta {
  padding: 96px var(--wimb-gutter);
}

.albums-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.albums-cta__headline {
  margin: 0;
  font-family: var(--wimb-font-sans);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.0;
  letter-spacing: var(--wimb-tracking-tight);
  color: var(--wimb-fg-0);
}

.albums-cta__sub {
  margin: 0;
  max-width: 460px;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.010em;
  color: var(--wimb-fg-2);
}

.albums-cta__btns {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

/* Mobile */
/* Albums grid: 4-col desktop → 3-col tablet → 2-col mobile */
@media (min-width: 769px) and (max-width: 1024px) {
  .albums-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .albums-hero__stats { grid-template-columns: repeat(2, max-content); gap: 32px 48px; }
}

@media (max-width: 768px) {
  .albums-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Float search bar goes full-width (edge gutters) instead of a centred pill */
  .albums-float-bar { left: var(--wimb-gutter); right: var(--wimb-gutter); transform: translateY(10px); }
  .albums-float-bar--visible { transform: translateY(0); }
  .albums-float-bar__inner { min-width: 0; width: 100%; }
}

/* ============================================================
   Pickers Browse (/pickers)
   ============================================================ */

/* Author CSS overrides UA [hidden] for elements that have an explicit display value.
   This restores the expected HTML behaviour for every filterable element on this page. */
.pickers-bento__tile[hidden],
.pickers-row[hidden],
.pickers-letter[hidden] { display: none !important; }

/* Hero */
.pickers-hero {
  position: relative;
  padding: 96px var(--wimb-gutter) 72px;
  overflow: hidden;
}

.pickers-hero__bg {
  position: absolute;
  inset: -80px;
  background-size: cover;
  background-position: center 20%;
  filter: blur(180px) saturate(0.35);
  opacity: 0.28;
  transform: scale(1.15);
  z-index: 0;
}

.pickers-hero__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,13,13,0.3) 0%, var(--wimb-bg-0) 100%);
  z-index: 1;
}

.pickers-hero__content {
  position: relative;
  z-index: 2;
}

.pickers-hero__eyebrow {
  margin-bottom: 12px;
}

.pickers-hero__headline {
  margin: 0;
  font-family: var(--wimb-font-sans);
  font-weight: 400;
  font-size: clamp(64px, 9vw, 120px);
  line-height: 0.9;
  letter-spacing: var(--wimb-tracking-tight);
  color: var(--wimb-fg-0);
}

.pickers-hero__sub {
  margin: 32px 0 0;
  max-width: 720px;
  font-size: 22px;
  line-height: 30px;
  letter-spacing: -0.010em;
  color: var(--wimb-fg-2);
}

.pickers-hero__stats {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 64px;
  border-top: 1px solid var(--wimb-line);
  padding-top: 24px;
}

.pickers-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pickers-hero__stat-value {
  font-weight: 700;
  font-size: 32px;
  color: var(--wimb-fg-0);
  letter-spacing: -0.015em;
  line-height: 1.1;
}

/* All Curators section */
.pickers-all {
  background: var(--wimb-bg-1);
  border-top: 1px solid var(--wimb-line);
  border-bottom: 1px solid var(--wimb-line);
  padding-bottom: 96px;
}

.pickers-all__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  /* no padding-inline: let wimb-inner supply the horizontal gutter */
}

/* Filter bar */
.pickers-filter-bar {
  position: sticky;
  top: 65px;
  z-index: 8;
  background: var(--wimb-bg-1);
  border-top: 1px solid var(--wimb-line);
  border-bottom: 1px solid var(--wimb-line);
}

.nav--compact + .site-main .pickers-filter-bar {
  top: 41px;
}

.pickers-filter-bar__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
  padding-bottom: 16px;
  /* no padding-inline: let wimb-inner supply the horizontal gutter */
  flex-wrap: wrap;
}

.pickers-filter-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pickers-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: 9999px;
  background: transparent;
  color: var(--wimb-fg-1);
  border: 1px solid var(--wimb-line);
  font-size: 12px;
  font-weight: 700;
  font-family: var(--wimb-font-sans);
  letter-spacing: -0.010em;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  white-space: nowrap;
  appearance: none;
}

.pickers-filter-chip:hover {
  border-color: var(--wimb-fg-3);
  color: var(--wimb-fg-0);
}

.pickers-filter-chip--on {
  background: var(--wimb-fg-0);
  color: var(--wimb-bg-0);
  border-color: transparent;
}

.pickers-filter-chip--on:hover {
  background: var(--wimb-fg-0);
  color: var(--wimb-bg-0);
}

.pickers-filter-chip__n {
  font-size: 10px;
  font-family: var(--wimb-font-mono, monospace);
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

/* Search */
.pickers-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 260px;
  height: 32px;
  padding: 0 8px 0 14px;
  background: var(--wimb-bg-2);
  border: 1px solid var(--wimb-line);
  border-radius: 9999px;
  flex-shrink: 0;
}

/* A-Z strip */
.pickers-az-wrap {
  background: var(--wimb-bg-1);
  border-top: 1px solid var(--wimb-line);
  border-bottom: 1px solid var(--wimb-line);
}

.pickers-az {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 16px;
  padding-bottom: 16px;
  /* no padding-inline: let wimb-inner supply the horizontal gutter */
}

.pickers-az__label {
  font-size: 11px;
  color: var(--wimb-fg-3);
  letter-spacing: -0.010em;
  margin-right: 8px;
}

.pickers-az__btn {
  background: transparent;
  border: none;
  padding: 4px 2px;
  font-family: var(--wimb-font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.010em;
  color: var(--wimb-fg-0);
  cursor: pointer;
  transition: color 120ms ease;
}

.pickers-az__btn:hover:not([disabled]) {
  color: var(--wimb-fg-4);
}

.pickers-az__btn--off,
.pickers-az__btn[disabled] {
  opacity: 0.25;
  cursor: default;
}

.pickers-az__btn--active {
  color: var(--wimb-fg-4);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Letter group */
.pickers-list {
  padding-top: 32px;
}

.pickers-letter {
  display: block;
  padding: 32px 0;
  scroll-margin-top: 196px;
}

.pickers-letter__char {
  font-family: var(--wimb-font-sans);
  font-weight: 400;
  font-size: 64px;
  line-height: 64px;
  letter-spacing: -0.020em;
  color: var(--wimb-fg-0);
  margin-bottom: 16px;
}

.pickers-letter__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 48px;
}

.pickers-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--wimb-line);
  text-decoration: none;
  color: inherit;
  transition: background 120ms ease;
}

.pickers-row:hover {
  background: rgba(255,255,255,0.02);
}

.pickers-row__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--wimb-line);
  margin-left: 16px;
}

.pickers-row__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  display: block;
}

.pickers-row__mono {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wimb-font-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.010em;
  line-height: 1;
  user-select: none;
  background: var(--wimb-bg-2);
}

/* Monogram palette — applied via data-color attribute (no inline styles) */
.pickers-row__mono[data-color="0"] { background: #7B5EA7; }
.pickers-row__mono[data-color="1"] { background: #5E8C61; }
.pickers-row__mono[data-color="2"] { background: #A07850; }
.pickers-row__mono[data-color="3"] { background: #4E7BA0; }
.pickers-row__mono[data-color="4"] { background: #A05E6E; }
.pickers-row__mono[data-color="5"] { background: #7BA04E; }
.pickers-row__mono[data-color="6"] { background: #A09050; }
.pickers-row__mono[data-color="7"] { background: #5E9090; }

.pickers-row__info {
  flex: 1;
  min-width: 0;
}

.pickers-row__name {
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -0.015em;
  color: var(--wimb-fg-0);
}

.pickers-row__role {
  font-size: 11px;
  color: var(--wimb-fg-3);
  letter-spacing: -0.010em;
}

.pickers-empty {
  padding: 64px 0;
  font-size: 22px;
  color: var(--wimb-fg-3);
  letter-spacing: -0.010em;
}

/* ── View toggle pill ── */
.pickers-all__spacer { flex: 1; }

.pickers-all__head {
  align-items: center; /* override baseline so pill aligns with text */
}

.pickers-view-toggle {
  display: inline-flex;
  background: var(--wimb-bg-2);
  border: 1px solid var(--wimb-line);
  border-radius: 9999px;
  padding: 2px;
  flex-shrink: 0;
}

.pickers-view-toggle__btn {
  height: 30px;
  padding: 0 16px;
  border-radius: 9999px;
  background: transparent;
  color: var(--wimb-fg-1);
  border: none;
  cursor: pointer;
  font-family: var(--wimb-font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.010em;
  transition: background 120ms ease, color 120ms ease;
}

.pickers-view-toggle__btn--on {
  background: var(--wimb-fg-0);
  color: var(--wimb-bg-0);
}

/* Lazy image fade-in */
.pickers-lazy {
  opacity: 0;
  transition: opacity 280ms ease;
}
.pickers-lazy.pickers-img--loaded {
  opacity: 1;
}

/* ── Floating search bar ── */
.pickers-float-bar {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}

.pickers-float-bar--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.pickers-float-bar__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  background: rgba(20, 20, 20, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--wimb-line);
  border-radius: var(--wimb-radius-pill);
  min-width: 300px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

.pickers-float-bar__icon {
  color: var(--wimb-fg-3);
  flex-shrink: 0;
}

.pickers-float-bar__input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--wimb-fg-0);
  font-family: var(--wimb-font-sans);
  font-size: 14px;
  letter-spacing: -0.010em;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

.pickers-float-bar__input::-webkit-search-cancel-button,
.pickers-float-bar__input::-webkit-search-decoration {
  display: none;
}

.pickers-float-bar__input::placeholder {
  color: var(--wimb-fg-3);
}

.pickers-float-bar__clear {
  background: transparent;
  border: 0;
  color: var(--wimb-fg-3);
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  transition: color 120ms ease;
  display: none;
  flex-shrink: 0;
}

.pickers-float-bar__clear:hover {
  color: var(--wimb-fg-0);
}

.pickers-float-bar--has-query .pickers-float-bar__clear {
  display: block;
}

/* ── Bento mosaic view ── */
/* Monogram tile background on the bento tile itself (no photo) */
.pickers-bento__tile[data-color="0"] { background: #7B5EA7; }
.pickers-bento__tile[data-color="1"] { background: #5E8C61; }
.pickers-bento__tile[data-color="2"] { background: #A07850; }
.pickers-bento__tile[data-color="3"] { background: #4E7BA0; }
.pickers-bento__tile[data-color="4"] { background: #A05E6E; }
.pickers-bento__tile[data-color="5"] { background: #7BA04E; }
.pickers-bento__tile[data-color="6"] { background: #A09050; }
.pickers-bento__tile[data-color="7"] { background: #5E9090; }

.pickers-bento {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: 1fr;
  grid-auto-flow: dense;
  gap: 1px;
  background: var(--wimb-line);
  border-top: 1px solid var(--wimb-line);
  border-bottom: 1px solid var(--wimb-line);
}

.pickers-bento__tile {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: block;
  text-decoration: none;
  grid-column: span 1;
  grid-row: span 1;
  cursor: pointer;
}

.pickers-bento__tile--hero {
  grid-column: span 2;
  grid-row: span 2;
}

.pickers-bento__tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  display: block;
  transition: transform 600ms cubic-bezier(0.2, 0, 0.2, 1);
}

.pickers-bento__tile:hover .pickers-bento__tile-img {
  transform: scale(1.04);
  filter: brightness(0.8);
}

.pickers-bento__tile-mono {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wimb-font-sans);
  font-weight: 700;
  font-size: min(34%, 56px);
  letter-spacing: -0.015em;
  line-height: 1;
  user-select: none;
  color: rgba(255, 255, 255, 0.85);
}

.pickers-bento__tile--hero .pickers-bento__tile-mono {
  font-size: min(28%, 96px);
}

.pickers-bento__tile-grad {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 75%;
  background: linear-gradient(180deg, rgba(13,13,13,0) 0%, rgba(13,13,13,0.95) 100%);
  pointer-events: none;
}

.pickers-bento__tile--hero .pickers-bento__tile-grad {
  height: 70%;
}

/* Profession — hidden at rest, fades in at the bottom on hover */
.pickers-bento__tile-role {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 14px;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: -0.010em;
  color: var(--wimb-fg-0);
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
}

.pickers-bento__tile--hero .pickers-bento__tile-role {
  padding: 20px 24px;
  font-size: 13px;
}

.pickers-bento__tile:hover .pickers-bento__tile-role {
  opacity: 1;
  transform: translateY(0);
}

/* Name — always visible, slides up on hover to make room for profession */
.pickers-bento__tile-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 14px;
  font-family: var(--wimb-font-sans);
  font-weight: 700;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: -0.012em;
  color: var(--wimb-fg-0);
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  word-break: break-word;
  transform: translateY(0);
  transition: transform 200ms ease;
  pointer-events: none;
}

.pickers-bento__tile--hero .pickers-bento__tile-caption {
  font-size: 22px;
  line-height: 26px;
  padding: 20px 24px;
}

.pickers-bento__tile:hover .pickers-bento__tile-caption {
  transform: translateY(-24px);
}

.pickers-bento__tile--hero:hover .pickers-bento__tile-caption {
  transform: translateY(-28px);
}

/* Bento mosaic: 8-col desktop → 6-col tablet → 4-col mobile → 3-col small phone */
@media (min-width: 769px) and (max-width: 1024px) {
  .pickers-bento { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 768px) {
  .pickers-bento { grid-template-columns: repeat(4, 1fr); }

  /* Filter chips scroll horizontally rather than wrapping into a tall sticky bar */
  .pickers-filter-bar__inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .pickers-filter-bar__inner::-webkit-scrollbar { display: none; }
  .pickers-filter-chips { flex-wrap: nowrap; }

  /* Letter index: larger tap targets (~44px row), tighter gap */
  .pickers-az { gap: 4px 6px; }
  .pickers-az__btn { padding: 10px 8px; min-width: 34px; text-align: center; }

  /* Lighter section padding */
  .pickers-all { padding-bottom: 56px; }
  .pickers-cta { padding-block: 56px; }

  /* Float search bar full-width (edge gutters) instead of a centred pill */
  .pickers-float-bar { left: var(--wimb-gutter); right: var(--wimb-gutter); transform: translateY(10px); }
  .pickers-float-bar--visible { transform: translateY(0); }
  .pickers-float-bar__inner { min-width: 0; width: 100%; }
}
@media (max-width: 480px) {
  .pickers-bento { grid-template-columns: repeat(3, 1fr); }
}

/* CTA */
.pickers-cta {
  padding: 96px var(--wimb-gutter);
}

.pickers-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.pickers-cta__headline {
  margin: 0;
  font-family: var(--wimb-font-sans);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.0;
  letter-spacing: var(--wimb-tracking-tight);
  color: var(--wimb-fg-0);
}

.pickers-cta__sub {
  margin: 0;
  max-width: 480px;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.010em;
  color: var(--wimb-fg-2);
}

.pickers-cta__btns {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

/* Mobile */
@media (max-width: 900px) {
  .pickers-letter__grid { grid-template-columns: 1fr; }
  .pickers-letter__char { font-size: 40px; line-height: 40px; }
  .pickers-hero__stats { grid-template-columns: repeat(2, max-content); gap: 32px 48px; }
}

@media (max-width: 640px) {
  .pickers-letter__char { font-size: 32px; }
}

/* Ghost button alias */
.wimb-btn--ghost {
  background: transparent;
  color: var(--wimb-fg-0);
  border-color: var(--wimb-line);
}
.wimb-btn--ghost:hover {
  border-color: var(--wimb-fg-3);
  background: rgba(255,255,255,0.04);
}

/* Clear filter chip */

/* ============================================================
   ALBUM DETAIL PAGE — .alb-* components
   ============================================================ */

/* ── Sticky breadcrumb ── */
.alb-crumb {
  position: sticky;
  top: 65px;
  z-index: 9;
  background: var(--wimb-bg-1);
  border-bottom: 1px solid var(--wimb-line);
  padding: 14px var(--wimb-gutter);
  transition: padding 220ms cubic-bezier(0.2,0,0.2,1);
}

.nav--compact + .site-main .alb-crumb {
  top: 41px;
}

.alb-crumb__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--wimb-fg-3);
  letter-spacing: -0.010em;
  min-width: 0;
}

.alb-crumb--scrolled {
  padding: 6px var(--wimb-gutter);
}

.alb-crumb--scrolled .alb-crumb__inner {
  font-size: 11px;
}

.alb-crumb--scrolled .alb-crumb__title {
  font-weight: 700;
  color: var(--wimb-fg-0);
}

.alb-crumb__back,
.alb-crumb__nav {
  color: var(--wimb-fg-2);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  flex-shrink: 0;
}
.alb-crumb__back:hover,
.alb-crumb__nav:hover { color: var(--wimb-fg-0); }

.alb-crumb__sep { color: var(--wimb-fg-4); flex-shrink: 0; }

.alb-crumb__artist {
  color: var(--wimb-fg-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
}

.alb-crumb__title {
  color: var(--wimb-fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
}

.alb-crumb__now {
  color: var(--wimb-fg-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
}

.alb-crumb__spacer { flex: 1; }

/* ── Hero ── */
.alb-hero {
  position: relative;
  overflow: hidden;
  padding: 80px var(--wimb-gutter) 96px;
}

.alb-hero__bg {
  position: absolute;
  inset: -80px;
  background-size: cover;
  background-position: center;
  filter: blur(120px) saturate(0.5);
  opacity: 0.35;
  transform: scale(1.15);
  z-index: 0;
}

.alb-hero__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(13,13,13,0.5) 0%, var(--wimb-bg-0) 100%);
  z-index: 1;
}

.alb-hero__row {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 80px;
  align-items: flex-start;
}

/* Left column — sleeve + transport */
.alb-hero__left {
  display: flex;
  flex-direction: column;
  gap: 32px;
  flex-shrink: 0;
  align-items: center;
}

.alb-hero__sleeve-wrap {
  position: relative;
  width: fit-content;   /* constrain to cover image so price tag positions relative to art, not the wider flex column */
}

.alb-hero__cover {
  display: block;
  width: 360px;
  height: 360px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: var(--wimb-shadow-vinyl, 0 24px 64px rgba(0,0,0,0.6));
  position: relative;
  z-index: 1;
}

/* Vinyl record — slides out from behind the cover on play */
.alb-vinyl-wrap {
  position: absolute;
  /* 90% of the 360px cover, centred on it */
  width: 90%;
  height: 90%;
  top: 5%;
  left: 5%;
  pointer-events: none;
  z-index: 0;           /* behind the cover (z-index: 1) */
  transform: translateX(0);
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.alb-vinyl {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

@keyframes alb-vinyl-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.alb-vinyl--spinning {
  animation: alb-vinyl-spin 3.6s linear infinite;
}

/* Transport control block */
.alb-transport {
  width: 360px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.alb-transport__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.alb-transport__skip {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--wimb-line);
  color: var(--wimb-fg-1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 120ms ease, color 120ms ease;
}
.alb-transport__skip:hover {
  border-color: var(--wimb-fg-3);
  color: var(--wimb-fg-0);
}
.alb-transport__skip:disabled {
  opacity: 0.35;
  cursor: default;
}

.alb-transport__play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--wimb-fg-0);
  color: var(--wimb-bg-0);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 160ms cubic-bezier(0.2,0,0.2,1);
}
.alb-transport__play:hover { transform: scale(1.05); }

/* Scale the play/pause glyph inside the circle to 150% */
.alb-transport__play #ht-play-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: scale(1.5);
  transform-origin: center;
}

/* Right column — metadata */
.alb-hero__right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding-top: 8px;
}

.alb-hero__title {
  margin: 0;
  font-family: var(--wimb-font-sans);
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--wimb-fg-0);
}

.alb-hero__artist {
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.020em;
  color: var(--wimb-fg-2);
}

/* Genre + year line below the artist */
.alb-hero__meta {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;   /* match the tracklist metadata (.alb-tracklist__sub / .alb-track__dur) */
  letter-spacing: -0.010em;
}
.alb-hero__meta-link {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid var(--wimb-line);
  border-radius: 9999px;
  color: var(--wimb-fg-1);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.alb-hero__meta-link:hover {
  border-color: var(--wimb-line-strong);
  color: var(--wimb-fg-0);
  background: var(--wimb-bg-2);
}
.alb-hero__meta-year {
  color: var(--wimb-fg-3);
}

.alb-hero__bio {
  margin: 0;
  max-width: 520px;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.010em;
  color: var(--wimb-fg-2);
}

/* Pickers — "Picked by" row */
.alb-hero__pickers {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.alb-hero__pickers-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wimb-fg-3);
}

.alb-hero__pickers-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.alb-hero__picker-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  border: 1px solid var(--wimb-line);
  border-radius: 9999px;
  text-decoration: none;
  color: var(--wimb-fg-1);
  transition: border-color 120ms ease, color 120ms ease;
}
.alb-hero__picker-chip:hover {
  border-color: var(--wimb-line-strong);
  color: var(--wimb-fg-0);
}

.alb-hero__picker-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--wimb-line);
}
.alb-hero__picker-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.alb-hero__picker-mono {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}

.alb-hero__picker-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.012em;
  white-space: nowrap;
}

/* Bio wrap + show more toggle */
.alb-bio-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.alb-hero__bio--clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.alb-bio__toggle {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--wimb-font-sans);
  font-size: 14px;
  letter-spacing: -0.010em;
  color: var(--wimb-fg-2);
  cursor: pointer;
  line-height: 1;
}
.alb-bio__toggle:hover { color: var(--wimb-fg-0); }

/* ── Body: tracklist + info ── */
.alb-body {
  background: var(--wimb-bg-1);
  border-top: 1px solid var(--wimb-line);
  border-bottom: 1px solid var(--wimb-line);
  padding: 96px var(--wimb-gutter);
}

.alb-body__grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 80px;
  align-items: flex-start;
}

/* ── Tracklist ── */
.alb-tracklist {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.alb-tracklist__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.alb-tracklist__sub {
  font-size: 12px;
  color: var(--wimb-fg-3);
  letter-spacing: -0.010em;
}

.alb-tracks {
  border-top: 1px solid var(--wimb-line);
}

.alb-tracks__disc {
  padding: 12px 12px 8px;
  font-size: 11px;
  color: var(--wimb-fg-4);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.alb-track {
  display: grid;
  grid-template-columns: 44px 1fr 80px 60px;
  align-items: center;
  gap: 16px;
  padding: 16px 12px;
  border-bottom: 1px solid var(--wimb-line);
  cursor: pointer;
  background: transparent;
  transition: background 120ms ease;
  border-radius: 3px;
  margin-left: -12px;
  margin-right: -12px;
}

.alb-track:hover,
.alb-track--hover,
.alb-track--active {
  background: var(--wimb-bg-2);
}

.alb-track__num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--wimb-line);
  color: var(--wimb-fg-2);
  font-size: 11px;
  font-family: var(--wimb-font-mono, monospace);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.alb-track--active .alb-track__num {
  background: var(--wimb-fg-0);
  border-color: var(--wimb-fg-0);
  color: var(--wimb-bg-0);
}

.alb-track__title {
  font-size: 16px;
  letter-spacing: -0.010em;
  color: var(--wimb-fg-1);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 120ms ease, font-weight 120ms ease;
}

.alb-track--active .alb-track__title {
  color: var(--wimb-fg-0);
  font-weight: 700;
}

.alb-track__meter {
  width: 60px;
  height: 2px;
  background: var(--wimb-bg-0);
  border-radius: 1px;
  overflow: hidden;
  margin-left: auto;
}

.alb-track__meter-fill {
  height: 100%;
  width: 0%;
  background: var(--wimb-fg-2);
  transition: width 250ms linear;
}

.alb-track--playing .alb-track__meter-fill {
  background: var(--wimb-fg-0);
}

.alb-track__dur {
  font-size: 12px;
  color: var(--wimb-fg-3);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.alb-tracks__footer {
  margin-top: 8px;
}

.alb-tracks__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid var(--wimb-line);
  border-radius: 6px;
  color: var(--wimb-fg-1);
  cursor: pointer;
  font-family: var(--wimb-font-sans);
  font-size: 14px;
  letter-spacing: -0.010em;
  transition: border-color 120ms ease;
}
.alb-tracks__toggle:hover { border-color: var(--wimb-fg-3); }

.alb-tracks__toggle-more {
  color: var(--wimb-fg-3);
}

/* ── Equalizer bars (playing indicator) ── */
.alb-eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}

.alb-eq i {
  display: block;
  width: 2px;
  background: currentColor;
  border-radius: 1px;
  height: 4px;
}

.alb-eq i:nth-child(1) { animation: alb-eq 0.60s ease-in-out 0.00s infinite; }
.alb-eq i:nth-child(2) { animation: alb-eq 0.75s ease-in-out 0.10s infinite; }
.alb-eq i:nth-child(3) { animation: alb-eq 0.90s ease-in-out 0.20s infinite; }
.alb-eq i:nth-child(4) { animation: alb-eq 0.68s ease-in-out 0.05s infinite; }

@keyframes alb-eq {
  0%, 100% { height: 4px; }
  50%       { height: 14px; }
}

/* ── Release info (sticky aside) ── */
.alb-info {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 88px;
}

.alb-info__table {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--wimb-line);
  display: flex;
  flex-direction: column;
}

.alb-info__row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--wimb-line);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.010em;
}

.alb-info__row dt {
  font-weight: 400;
  color: var(--wimb-fg-3);
}

.alb-info__row dd {
  margin: 0;
  color: var(--wimb-fg-0);
}

.alb-info__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.alb-info__link {
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* Personnel field: allow wrapping for long lists */
.alb-info__dd--wrap {
  white-space: normal;
  line-height: 18px;
}

/* When tracklist is absent, info aside spans full width */

/* ── Picked by (picks ledger) ── */

/* ── What they said v3 — liner-note display ── */
.alb-quotes {
  padding: var(--wimb-space-9) 0;
}

.alb-quotes__list {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.alb-quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 72px 0;
  border-top: 1px solid var(--wimb-line);
  gap: 28px;
}

.alb-quote--first {
  padding-top: 0;
  border-top: none;
}

.alb-quote__text {
  margin: 0;
  max-width: 860px;
  font-family: var(--wimb-font-sans);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.27;
  letter-spacing: -0.022em;
  color: var(--wimb-fg-0);
  text-wrap: balance;
  font-style: normal;
  border-left: none;
  padding-left: 0;
}

.alb-quote__attr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.alb-quote__byline {
  display: flex;
  align-items: center;
  gap: 12px;
}

.alb-quote__avatar-link {
  display: block;
  flex-shrink: 0;
}

.alb-quote__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--wimb-line);
}

.alb-quote__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Album-art variant used on picker page — matches wimb-album-card__art sizing */
.alb-quote__album-art {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: var(--wimb-radius-sm);
  overflow: hidden;
  background: var(--wimb-bg-2);
}
.alb-quote__album-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.alb-quote__avatar-mono {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.alb-quote__name {
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: -0.012em;
  color: var(--wimb-fg-0);
  text-decoration: none;
}

.alb-quote__name:hover {
  text-decoration: underline;
}

.alb-quote__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.010em;
  color: var(--wimb-fg-3);
}

.alb-quote__dot {
  opacity: 0.5;
}

.alb-quote__watch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--wimb-line);
  border-radius: 9999px;
  color: var(--wimb-fg-1);
  text-decoration: none;
  margin-top: 4px;
  transition: border-color 120ms ease, color 120ms ease;
}

.alb-quote__watch:hover {
  border-color: var(--wimb-line-strong);
  color: var(--wimb-fg-0);
}

.alb-quote__yt-icon {
  display: block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.alb-quote__watch-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.010em;
}

.alb-quote__timestamp {
  font-size: 11px;
  color: var(--wimb-fg-3);
  font-variant-numeric: tabular-nums;
  padding-left: 8px;
  border-left: 1px solid var(--wimb-line);
}

/* ── Episode bag ── */

.alb-bag__see-all {
  font-size: 14px;
  color: var(--wimb-fg-1);
  letter-spacing: -0.010em;
  text-decoration: none;
  flex-shrink: 0;
}
.alb-bag__see-all:hover { color: var(--wimb-fg-0); }

/* ── Related albums ── */
.alb-related {
  padding: 96px var(--wimb-gutter);
}

.alb-related__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 48px;
}

.alb-related__sub {
  font-size: 16px;
  color: var(--wimb-fg-3);
  letter-spacing: -0.010em;
}

.alb-related__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 32px;
}

/* ── Closing strip ── */
.alb-closing {
  background: var(--wimb-bg-0);
  border-top: 1px solid var(--wimb-line);
  border-bottom: 1px solid var(--wimb-line);
  padding: 96px var(--wimb-gutter);
}

.alb-closing__inner {
  position: relative;
}

.alb-closing__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  margin-bottom: 64px;
}

.alb-closing__headline {
  margin: 0;
  font-family: var(--wimb-font-sans);
  font-weight: 400;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.07;
  letter-spacing: -0.020em;
  color: var(--wimb-fg-0);
}

.alb-closing__sub {
  margin: 8px auto 0;
  max-width: 480px;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.010em;
  color: var(--wimb-fg-2);
}

.alb-closing__nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 64px;
  align-items: center;
}

.alb-closing__cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  min-width: 240px;
}

.alb-closing__secondary {
  font-size: 12px;
  color: var(--wimb-fg-2);
  letter-spacing: -0.010em;
  text-decoration: none;
}
.alb-closing__secondary:hover { color: var(--wimb-fg-0); }

/* Prev/Next nav cards */
.alb-nav-card {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 20px;
  border-radius: 6px;
  text-decoration: none;
}

.alb-nav-card--right {
  justify-content: flex-end;
}

.alb-nav-card__img {
  width: 80px;
  height: 80px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
}

.alb-nav-card__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.alb-nav-card__info--right {
  text-align: right;
}

.alb-nav-card__label {
  font-size: 11px;
  color: var(--wimb-fg-3);
  letter-spacing: -0.010em;
  margin-bottom: 2px;
}

.alb-nav-card__title {
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  color: var(--wimb-fg-0);
  letter-spacing: -0.010em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alb-nav-card__artist {
  font-size: 14px;
  color: var(--wimb-fg-2);
  letter-spacing: -0.010em;
}

/* ── Sticky now-playing bar ── */
.alb-nowplaying {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--wimb-bg-1);
  border-top: 1px solid var(--wimb-line);
  padding: 12px var(--wimb-gutter);
  display: flex;
  align-items: center;
  gap: 24px;
  transform: translateY(120%);
  transition: transform 280ms cubic-bezier(0.2,0,0.2,1);
  box-sizing: border-box;
}

.alb-nowplaying--visible {
  transform: translateY(0);
}

.alb-np__thumb {
  width: 48px;
  height: 48px;
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--wimb-bg-2);
}

.alb-np__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.alb-np__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
}

.alb-np__track {
  font-weight: 700;
  font-size: 14px;
  color: var(--wimb-fg-0);
  letter-spacing: -0.010em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alb-np__album {
  font-size: 12px;
  color: var(--wimb-fg-2);
  letter-spacing: -0.010em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Now-playing marquee — JS wraps the title / album·artist text in
   .alb-np__scroll and adds --marquee when it overflows its container.
   At rest the span ellipsises; when overflowing it ping-pongs smoothly. */
.alb-np__scroll {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
.alb-np__scroll--marquee {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  animation: alb-np-marquee var(--marquee-time, 10s) ease-in-out infinite alternate;
}
.alb-nowplaying:hover .alb-np__scroll--marquee {
  animation-play-state: paused;
}
@keyframes alb-np-marquee {
  0%, 14%   { transform: translateX(0); }
  86%, 100% { transform: translateX(var(--marquee-shift, 0)); }
}
@media (prefers-reduced-motion: reduce) {
  .alb-np__scroll--marquee {
    animation: none;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.alb-np__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 16px;
  flex-shrink: 0;
}

.alb-np__skip {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--wimb-line);
  color: var(--wimb-fg-1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 120ms ease;
}
.alb-np__skip:hover { border-color: var(--wimb-fg-3); }

.alb-np__play {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--wimb-fg-0);
  border: none;
  color: var(--wimb-bg-0);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 120ms ease;
}
.alb-np__play:hover { transform: scale(1.06); }

.alb-np__scrubber {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.alb-np__time,
.alb-np__dur {
  font-size: 11px;
  color: var(--wimb-fg-3);
  font-variant-numeric: tabular-nums;
  min-width: 32px;
  flex-shrink: 0;
}

.alb-np__dur { text-align: right; }

.alb-np__bar {
  flex: 1;
  height: 4px;
  background: var(--wimb-bg-2);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.alb-np__fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--wimb-fg-0);
  transition: width 250ms linear;
}

.alb-np__source {
  font-size: 11px;
  color: var(--wimb-fg-3);
  letter-spacing: -0.010em;
  margin-left: 12px;
  flex-shrink: 0;
}

.alb-np__links {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.alb-np__link {
  font-size: 11px;
  font-weight: 600;
  color: var(--wimb-fg-2);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -0.010em;
  padding: 4px 10px;
  border: 1px solid var(--wimb-line);
  border-radius: 4px;
  transition: color 120ms ease, border-color 120ms ease;
}

.alb-np__link:hover {
  color: var(--wimb-fg-0);
  border-color: var(--wimb-line-strong);
}

/* ── Album page mobile ── */
@media (max-width: 1100px) {
  .alb-body__grid { grid-template-columns: 1fr; gap: 48px; }
  .alb-info { position: static; }
  .alb-closing__nav { grid-template-columns: 1fr; gap: 32px; }
  .alb-closing__cta { order: -1; }
}

/* Hero stacks across the whole tablet + mobile band (raised 900→1024 so the
   901–1024 band drops the cramped fixed sleeve). Desktop ≥1025px untouched.
   The base .alb-hero__left is already align-items:center, so the album art
   (+ revealing vinyl) and transport controls centre in the stacked hero;
   metadata below stays left-aligned. Album art ≈360px on tablet. */
@media (max-width: 1024px) {
  .alb-hero__row { flex-direction: column; gap: 40px; align-items: stretch; }
  .alb-hero__cover { width: 360px; height: 360px; }
  .alb-transport { width: 360px; }
}

/* Tablet: related / "more genre" grids step down from desktop 4-col to 3-col */
@media (min-width: 769px) and (max-width: 1024px) {
  .alb-related__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

/* Now-playing bar wraps when tight; the streaming links drop to their own row
   instead of overflowing off-screen. Source label hidden ≤900. */
@media (max-width: 900px) {
  .alb-nowplaying { gap: 12px; flex-wrap: wrap; row-gap: 8px; }
  .alb-np__info { min-width: 120px; }
  .alb-np__links { margin-left: 0; }
  .alb-np__source { display: none; }
}

/* Phone: album art ≈280px, lighter vertical padding, 2-col grids, smaller
   artist, breadcrumb dropped. Horizontal padding stays on the --wimb-gutter
   scale (16px ≤640 / 24px ≥640) — only vertical values are tuned here. */
@media (max-width: 768px) {
  .alb-crumb { display: none; }
  .alb-hero { padding: 48px var(--wimb-gutter) 56px; }
  .alb-hero__cover { width: 280px; height: 280px; }
  .alb-transport { width: 280px; }
  .alb-hero__artist { font-size: 24px; }
  .alb-body { padding: 56px var(--wimb-gutter); }
  .alb-related,
  .alb-closing { padding: 64px var(--wimb-gutter); }
  .alb-related__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .alb-quotes { padding: var(--wimb-space-7) 0; }
  .alb-quote { padding: 40px 0; }
  /* Picker chips: cap width + ellipsise long names so a chip can't overflow */
  .alb-hero__picker-chip { max-width: 100%; }
  .alb-hero__picker-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .alb-np__links { flex-wrap: wrap; }
}

@media (max-width: 640px) {
  .alb-hero { padding: 40px var(--wimb-gutter) 48px; }
  .alb-body { padding: 48px var(--wimb-gutter); }
  .alb-related,
  .alb-closing { padding: 56px var(--wimb-gutter); }
  .alb-related__grid { gap: 12px; }
  .alb-track { grid-template-columns: 40px 1fr 40px; }
  .alb-track__meter { display: none; }
  /* Compact mini-player on phones: info shrinks, scrubber drops out, the
     streaming links wrap onto their own row below the controls. */
  .alb-np__info { min-width: 0; flex: 1; }
  .alb-np__scrubber { display: none; }
}

/* =============================================================================
   FEATURE ILLUSTRATIONS — animated homepage sections
   Albums · Riffle  |  Curators · Promotion  |  Canon · Parallel Orbits
   ============================================================================= */

/* ── Section shell ── */
.wimb-feature {
  border-top: 1px solid var(--wimb-line);
}
.wimb-feature--bg0 { background: var(--wimb-bg-0); }
.wimb-feature--bg1 { background: var(--wimb-bg-1); }

.wimb-feature__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: var(--wimb-space-9) var(--wimb-gutter);
}

/* Illustration on left: push the illo column to the front */
.wimb-feature--illo-left .wimb-feature__illo { order: -1; }

.wimb-feature__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 460px;
  align-items: flex-start;
}

.wimb-feature__illo {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Shared illustration stage */
.il-stage {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

/* ── Shared cover element ── */
.il-cover {
  position: relative;
  overflow: hidden;
  background: var(--wimb-bg-2);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.02);
  flex-shrink: 0;
}
.il-cover img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  user-select: none; -webkit-user-drag: none;
}

/* ── Shared portrait element ── */

.il-portrait--mono {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wimb-font-sans);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--wimb-fg-1);
}

/* ───────────────────────────────────────────────────────────
   F · ALBUMS RIFFLE
   At rest: 5 covers fanned in a tight stack.
   On section hover (.is-hover): each card slides outward in
   its own direction; the top card lifts straight up.
   ─────────────────────────────────────────────────────────── */
.il-riffle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 24px;
}
.il-riffle-hand {
  position: relative;
  width: 460px; height: 320px;
}
.il-riffle-card {
  position: absolute;
  left: 50%; top: 80px;
  margin-left: -60px;
  width: 120px; height: 120px;
  transform-origin: 50% 50%;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.55));
  will-change: transform;
}
.il-riffle-top {
  position: absolute;
  left: 50%; top: 80px;
  margin-left: -60px;
  width: 120px; height: 120px;
  z-index: 10;
  transform-origin: 50% 50%;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 18px 26px rgba(0,0,0,0.6));
  pointer-events: none;
}
.il-riffle-card .il-cover,
.il-riffle-top  .il-cover {
  width: 120px; height: 120px;
  border-radius: 3px;
}
.is-hover .il-riffle-card { transform: var(--spread) !important; }
.is-hover .il-riffle-top  { transform: translate(0, -110px) scale(1.08); }
/* Link resets for illustration <a> elements */
a.il-riffle-card,
a.il-riffle-top  { text-decoration: none; }
a.il-riffle-top  { pointer-events: auto; } /* override pointer-events: none */
a.il-prom-slot   { text-decoration: none; }
a.il-orbs-scaler { text-decoration: none; }

/* ───────────────────────────────────────────────────────────
   F · CURATORS PROMOTION
   One portrait sits in a featured center slot; the others
   orbit around a dashed ring. Every 3.5 s the center yields
   and an orbiter takes its place. Smooth cubic-bezier morph.
   ─────────────────────────────────────────────────────────── */
.il-prom {
  display: flex;
  align-items: center;
  justify-content: center;
}
.il-prom-wrap {
  position: relative;
  width: 440px; height: 380px;
}
.il-prom-ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 320px; height: 320px;
  transform: translate(-50%, -50%);
  border: 1px dashed var(--wimb-line);
  border-radius: 50%;
  pointer-events: none;
}
.il-prom-slot {
  position: absolute;
  left: 50%; top: 50%;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--wimb-line);
  transition:
    transform    1100ms cubic-bezier(0.22, 1, 0.36, 1),
    width        1100ms cubic-bezier(0.22, 1, 0.36, 1),
    height       1100ms cubic-bezier(0.22, 1, 0.36, 1),
    margin-top   1100ms cubic-bezier(0.22, 1, 0.36, 1),
    margin-left  1100ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow    700ms ease;
}
.il-prom-slot.center {
  z-index: 5;
  box-shadow: 0 0 0 1px var(--wimb-line), 0 14px 32px rgba(0,0,0,0.55);
}
/* Children fill the slot regardless of size */
.il-prom-slot img,
.il-prom-slot .il-portrait--mono {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Suppress transitions during initial snap */
.il-prom-slot--init { transition: none !important; }

.il-prom-name {
  position: absolute;
  left: 50%; top: calc(50% + 80px);
  transform: translate(-50%, 12px);
  font-family: var(--wimb-font-sans);
  font-weight: 700;
  font-size: 14px;
  color: var(--wimb-fg-1);
  white-space: nowrap;
  letter-spacing: -0.01em;
  pointer-events: none;
  opacity: 0;
}
.il-prom-name--show {
  animation: prom-name-in 600ms ease forwards;
}
@keyframes prom-name-in {
  from { opacity: 0; transform: translate(-50%, 18px); }
  to   { opacity: 1; transform: translate(-50%, 12px); }
}

/* ───────────────────────────────────────────────────────────
   G · CANON PARALLEL ORBITS
   Three concentric rings, each carrying 3 album covers.
   All covers are equal weight — no #1 revealed.
   Hover: rings slow to ~3× duration; covers scale up 1.55×.
   ─────────────────────────────────────────────────────────── */
.il-orbs {
  display: flex;
  align-items: center;
  justify-content: center;
}
.il-orbs-wrap {
  position: relative;
  width: 440px; height: 380px;
}
.il-orbs-ring {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--wimb-line);
  border-radius: 50%;
  opacity: 0.6;
  transition:
    width  700ms cubic-bezier(0.22, 1, 0.36, 1),
    height 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.il-orbs-ring.r1 { width: 110px; height: 110px; }
.il-orbs-ring.r2 { width: 230px; height: 230px; }
.il-orbs-ring.r3 { width: 350px; height: 350px; }
.is-hover .il-orbs-ring.r1 { width: 100px;  height: 100px;  }
.is-hover .il-orbs-ring.r2 { width: 200px;  height: 200px;  }
.is-hover .il-orbs-ring.r3 { width: 310px;  height: 310px;  }

.il-orbs-rotator {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
}
.il-orbs-rotator.r1 { animation: orbs-spin     22s linear infinite; }
.il-orbs-rotator.r2 { animation: orbs-spin-rev 34s linear infinite; }
.il-orbs-rotator.r3 { animation: orbs-spin     48s linear infinite; }
.is-hover .il-orbs-rotator.r1 { animation-duration:  70s; }
.is-hover .il-orbs-rotator.r2 { animation-duration: 105s; }
.is-hover .il-orbs-rotator.r3 { animation-duration: 150s; }
@keyframes orbs-spin     { from { transform: rotate(0deg);    } to { transform: rotate(360deg);    } }
@keyframes orbs-spin-rev { from { transform: rotate(0deg);    } to { transform: rotate(-360deg);   } }

.il-orbs-arm { position: absolute; left: 0; top: 0; }
.il-orbs-up  { position: relative; }

.il-orbs-rotator.r1 .il-orbs-up { animation: orbs-counter      22s linear infinite; }
.il-orbs-rotator.r2 .il-orbs-up { animation: orbs-counter-rev  34s linear infinite; }
.il-orbs-rotator.r3 .il-orbs-up { animation: orbs-counter      48s linear infinite; }
.is-hover .il-orbs-rotator.r1 .il-orbs-up { animation-duration:  70s; }
.is-hover .il-orbs-rotator.r2 .il-orbs-up { animation-duration: 105s; }
.is-hover .il-orbs-rotator.r3 .il-orbs-up { animation-duration: 150s; }
@keyframes orbs-counter     { from { transform: translate(-50%,-50%) rotate(0deg);    } to { transform: translate(-50%,-50%) rotate(-360deg);   } }
@keyframes orbs-counter-rev { from { transform: translate(-50%,-50%) rotate(0deg);    } to { transform: translate(-50%,-50%) rotate(360deg);    } }

/* Separate scaler so scale/filter survive the counter-rotation */
.il-orbs-scaler {
  position: relative;
  display: inline-block;
  transition:
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
    filter    700ms ease;
  transform: scale(1);
  filter: brightness(0.9);
}
.is-hover .il-orbs-scaler {
  transform: scale(1.55);
  filter: brightness(1.1);
}
.il-orbs-cover {
  width: 50px; height: 50px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--wimb-bg-2);
  flex-shrink: 0;
}
.il-orbs-cover img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.il-orbs-rank {
  position: absolute;
  right: -20px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--wimb-font-sans);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--wimb-fg-3);
  letter-spacing: 0.06em;
  pointer-events: none;
}

/* ── Responsive ──
   Collapse to one column across the whole tablet+mobile band (≤1024px), not
   just ≤900px — otherwise 901–1024px keeps the 2-col grid and the fixed-px
   illustration overflows its half-width column. Desktop ≥1025px untouched. */
@media (max-width: 1024px) {
  .wimb-feature__inner {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-block: var(--wimb-space-7);
  }
  .wimb-feature--illo-left .wimb-feature__illo { order: 0; }
  /* Centre the illustration and clip any hover bleed to its own box */
  .wimb-feature__illo {
    overflow: clip;
  }
  .il-riffle-hand, .il-prom-wrap, .il-orbs-wrap {
    width: 100%;
    max-width: 360px;
  }
}

/* Illustrations stay visible on phones too — the IntersectionObserver in
   index.html fires their animation on scroll-into-view (hover doesn't work on
   touch), and overflow:clip (above) keeps the fixed-px geometry contained. */

/* Full-width CTA buttons inside feature copy on mobile */
@media (max-width: 768px) {
  .wimb-feature__copy .wimb-btn {
    width: 100%;
    justify-content: center;
  }
}

/* =============================================================================
   MOBILE NAV — hamburger menu for mobile + tablet (≤1024px)
   Desktop (≥1025px) is unaffected: the burger stays display:none and the nav
   links render in their normal right-aligned flex row.
   ============================================================================= */

/* Hamburger button — hidden on desktop, shown ≤1024px (see media block) */
.wimb-nav__burger {
  display: none;
  margin-left: auto;          /* push to the top-right once links go absolute */
  width: 44px;                /* 44px tap target */
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  z-index: 2;                 /* stays above the dropdown panel */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.wimb-nav__burger-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--wimb-fg-0);
  transition: transform 200ms var(--easing), opacity 160ms var(--easing);
}

@media (max-width: 1024px) {
  /* Keep the bar ~64px tall despite the 44px burger (sticky offsets assume it) */
  .site-nav { padding-block: 10px; }
  .site-nav.nav--compact { padding-block: 6px; }

  .wimb-nav__burger { display: flex; }

  /* Links collapse into a full-width dropdown panel below the bar */
  .site-nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--wimb-bg-1);
    border-bottom: var(--border-width) solid var(--wimb-line);
    padding: var(--wimb-space-2) var(--wimb-gutter) var(--wimb-space-4);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 180ms var(--easing),
                transform 180ms var(--easing),
                visibility 180ms var(--easing);
  }

  .site-nav.is-menu-open .site-nav__links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Full-width link rows, ≥44px tap targets */
  .site-nav__links a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: var(--wimb-space-3) 0;
    font-size: var(--wimb-fs-body);
    color: var(--wimb-fg-2);
    border-bottom: var(--border-width) solid var(--wimb-line);
  }
  .site-nav__links a:last-child { border-bottom: 0; }

  /* Burger → X when open (bar centres are 7px apart: 2px bar + 5px gap) */
  .site-nav.is-menu-open .wimb-nav__burger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .site-nav.is-menu-open .wimb-nav__burger-bar:nth-child(2) {
    opacity: 0;
  }
  .site-nav.is-menu-open .wimb-nav__burger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wimb-nav__burger-bar,
  .site-nav__links { transition: none; }
}

/* =============================================================================
   ACCESSIBILITY — 44px minimum touch targets (WCAG 2.5.5)
   Only the hit area / height grows; text + icons stay visually centred via the
   existing flex centering, so the components look the same, just a touch taller.
   (The nav uses a 44px hamburger + 48px dropdown links; canon rows are full-row
   <a> links — both already meet the target size.)
   ============================================================================= */

/* Filter chips (albums + pickers) */
.albums-filter-chip,
.pickers-filter-chip { min-height: 44px; }

/* Pagination */
.albums-pagination__btn { min-height: 44px; }

/* A–Z letter index */
.pickers-az__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 44px;
}

/* Pickers list/bento view toggle */
.pickers-view-toggle__btn { min-height: 44px; }

/* Album hero transport + now-playing icon buttons */
.alb-transport__skip,
.alb-np__skip,
.alb-np__play { width: 44px; height: 44px; }

/* Now-playing streaming-link pills */
.alb-np__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ============================================================
   PICKER HEADER — "Wide Screen" hero  (design handoff direction A)
   Full-bleed photographic header for /picker/:id: one widescreen
   photo, a dominant-colour wash + legibility scrims, and the name
   set huge and overlaid bottom-left. Container-query driven so it
   collapses to the mobile layout on its OWN width.
   The wash/scrim palette defaults to a warm-graphite wash (the
   handoff's documented B&W / no-hue fallback); a per-picker palette
   sampled from the photo can override the --pha-* custom properties
   inline on .pha-hero once that pipeline exists.
   ============================================================ */
.pha-sec {
  position: relative;
  background: var(--wimb-bg-0);
  container-type: inline-size;
  container-name: pha;
}

.pha-hero {
  position: relative;
  height: 800px;
  overflow: hidden;
  /* Default palette — warm graphite. Override per picker via inline
     style="--pha-m1:…;--pha-m2:…;--pha-m3:…;--pha-melt:…;--pha-accent:…;--pha-focal:…" */
  --pha-m1: rgba(120, 116, 110, 0.20);
  --pha-m2: rgba(44, 42, 40, 0.44);
  --pha-m3: #121110;
  --pha-melt: 16, 15, 14;
  --pha-accent: #d8d2c8;
  --pha-focal: center 22%;
}

/* Layer 1 — full-bleed photograph (focal point keeps the face above the scrim) */
.pha-hero__photo {
  position: absolute; inset: 0;
  background-position: var(--pha-focal);
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--wimb-bg-2);
}
/* Layer 2 — dominant-colour multiply wash */
.pha-hero__wash {
  position: absolute; inset: 0; mix-blend-mode: multiply;
  background: linear-gradient(180deg, var(--pha-m1) 0%, var(--pha-m2) 55%, var(--pha-m3) 100%);
}
/* Layer 3 — bottom legibility scrim, melting into the page background */
.pha-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(var(--pha-melt), 0.05) 0%, rgba(var(--pha-melt), 0) 30%,
    rgba(var(--pha-melt), 0.45) 66%, rgba(13, 13, 13, 0.96) 94%, var(--wimb-bg-0) 100%);
}
/* Layer 4 — left scrim so the type holds over bright photos */
.pha-hero__leftscrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(13,13,13,0.6) 0%, rgba(13,13,13,0.14) 40%, rgba(13,13,13,0) 64%);
}

/* Overlaid type sits in the app's centered .wimb-inner column (so it lines up
   with the rest of the page, not the prototype's fixed 270px gutter). */
.pha-hero__inner { position: absolute; left: 0; right: 0; bottom: 52px; }
.pha-type { display: flex; flex-direction: column; gap: 16px; }

.pha-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pha-accent);
}
.pha-eyebrow__num  { font-variant-numeric: tabular-nums; }
.pha-eyebrow__dot  { width: 3px; height: 3px; border-radius: 50%; background: var(--pha-accent); opacity: 0.75; flex: none; }
.pha-eyebrow__date { color: rgba(240, 236, 228, 0.8); }
.pha-eyebrow__date time { color: inherit; }

.pha-name {
  margin: 0; font-weight: 600;
  font-size: 124px; line-height: 0.92; letter-spacing: -0.035em;
  color: var(--wimb-fg-0); text-shadow: 0 16px 60px rgba(0, 0, 0, 0.45);
  text-wrap: balance;
}
.pha-meta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
.pha-role { font-size: 23px; color: var(--wimb-fg-0); letter-spacing: -0.015em; }
.pha-divider { width: 1px; height: 16px; background: rgba(240, 236, 228, 0.4); transform: translateY(2px); }
.pha-metalabel { font-size: 16px; color: rgba(240, 236, 228, 0.78); letter-spacing: -0.010em; }
.pha-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pha-iconbtn {
  width: 40px; height: 40px; flex: none; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(13, 13, 13, 0.42); border: 1px solid rgba(240, 236, 228, 0.35);
  color: var(--wimb-fg-0); backdrop-filter: blur(2px);
  transition: background 120ms ease, border-color 120ms ease;
}
.pha-iconbtn:hover { background: rgba(13, 13, 13, 0.62); border-color: rgba(240, 236, 228, 0.6); opacity: 1; }
.pha-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: 9999px;
  background: rgba(240, 236, 228, 0.96); color: var(--wimb-bg-0);
  font-size: 14px; font-weight: 700; letter-spacing: -0.010em; white-space: nowrap;
}
.pha-cta:hover { background: #fff; color: var(--wimb-bg-0); opacity: 1; }

/* Bio lede, directly under the photo (uses .wimb-inner for horizontal alignment) */
.pha-belowfold { padding-top: 8px; padding-bottom: 40px; }
.pha-bio {
  margin: 0; max-width: 760px;
  font-size: 21px; line-height: 31px; letter-spacing: -0.015em;
  color: var(--wimb-fg-1); text-wrap: pretty;
}

/* Responsive — reacts to the hero's own width (real mobile or narrow embed) */
@container pha (max-width: 640px) {
  .pha-hero { height: 460px; }
  .pha-hero__inner { bottom: 26px; }
  .pha-type { gap: 12px; }
  .pha-eyebrow { font-size: 11px; gap: 8px; }
  .pha-name { font-size: 44px; line-height: 0.98; letter-spacing: -0.02em; }
  .pha-meta-row { gap: 10px 14px; }
  .pha-role { font-size: 16px; }
  .pha-metalabel { font-size: 13px; }
  .pha-actions { margin-left: 0; margin-top: 6px; width: 100%; gap: 10px; }
  .pha-iconbtn { width: 44px; height: 44px; }
  .pha-cta { height: 44px; flex: 1; }
  .pha-bio { font-size: 16px; line-height: 25px; }
}