/* ── Unholy Land — artist page ────────────────────────────────
   Same 10-column / 20px / 60px grid as the band page, but no hero row:
   the name is a column heading, level with Bands and Discography.
   Columns are 2 / 4 / 4 — portrait, band logos, releases.
   ------------------------------------------------------------ */

.body { padding-top: var(--gap); }

/* every blackletter heading on this page is accent — the name included, so the
   column headings read as one row instead of a white one and three red ones */
.body h2 { color: var(--ui-accent); }

/* combined honors count beside the name — same chip the band page wears.
   the wreath spans exactly from the heading's baseline to the top of the
   blackletter capital (Cloister Black cap height = .684em), the number sits
   on the same baseline beside it */
.artist-honors{
  margin-left: .3em;
  font-family: var(--nav-font);
  font-size: .706em;        /* Inter digit cap (.705em) = the lowercase x-height */
  font-weight: 700;
  color: var(--gold); letter-spacing: 0;
  white-space: nowrap;
}
.artist-honors img {
  height: 1.174em; width: auto; /* the capital's full ink height, feet included */
  vertical-align: -0.202em;     /* bottom sinks to the blackletter feet line */
  margin-right: .16em;
}

/* everything about the person stacks down the left; the discography, always
   the tallest block, owns the right column top to bottom */
.stack-left { grid-column: 1 / 7; }
.col-work   { grid-column: 7 / -1; align-self: start;
              padding-left: calc(var(--gap-lg) - var(--gap)); }
.left-top   { display: grid; grid-template-columns: 2fr 4fr; gap: var(--gap);
              align-items: start; }
.col-bands  { padding-left: calc(var(--gap-lg) - var(--gap)); }
/* the live log and the thread fill the ground under the portrait and bands */
.col-shows    { padding-top: var(--gap-lg); }
.col-shows[hidden] { display: none; }
.col-comments { padding-top: var(--gap-lg); }

/* one or two bands: the bands column narrows and the releases take the slack —
   the auto-fill grids grow their own extra covers per row */
.body.slim-bands .stack-left { grid-column: 1 / 5; }
.body.slim-bands .col-work   { grid-column: 5 / -1; }
.body.slim-bands .left-top   { grid-template-columns: 1fr 1fr; }
.col-shows[hidden] { display: none; }
/* on an artist page every night names the band that played it */
.show-band {
  color: var(--white); font-size: 13px; margin-left: 8px;
  font-family: var(--display-font); letter-spacing: .4px;
}
a.show-band:hover { color: var(--ui-accent); }
#shows-more {
  margin-top: 14px; padding: 7px 14px;
  background: none; border: 1px solid var(--border); border-radius: 4px;
  color: var(--muted); font: inherit; font-size: 12px; cursor: pointer;
}
#shows-more:hover { color: var(--ui-accent); border-color: var(--ui-accent); }

/* ── portrait ────────────────────────────────────────────── */
.portrait {
  position: relative;
  width: 100%; aspect-ratio: 3 / 4;
  background: #101317;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.portrait img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  filter: grayscale(1);
}
/* 59% of musicians have no photo — their main band's logo stands in */
.portrait .stand-in {
  width: 78%; height: auto; max-height: 60%;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: var(--logo-filter);
  opacity: .65;
}
.portrait .initial {
  font-family: var(--display-font);
  font-size: 96px; color: #262d38;
}

/* ── facts ───────────────────────────────────────────────── */
#facts { margin-top: var(--gap); }
.born {
  display: flex; align-items: baseline; gap: 7px;
  margin-bottom: var(--gap);
  color: var(--muted); font-size: 12px;
}
.born b {
  font-family: var(--display-font);
  font-size: 26px; font-weight: 400; letter-spacing: 1px;
  color: var(--white);
}
.fact { font-size: 12px; line-height: 1.9; }
.fact .lbl { color: var(--muted); }
.fact .val { color: var(--white); font-weight: 600; }

.known { margin-top: var(--gap); }
.known .lbl { color: var(--muted); font-size: 12px; }
.known div { color: var(--white); font-size: 12px; font-weight: 600; line-height: 1.9; }

/* ── band tiles ──────────────────────────────────────────── */
/* denser tiles keep the bands column close to the height of the portrait
   block beside it — a tall bands column leaves a hole above the live log */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--gap);
}
.tile { min-width: 0; cursor: pointer; }
.tile-art {
  position: relative; overflow: hidden;
  width: 100%; aspect-ratio: 4 / 3;
  background: #101317;
  display: flex; align-items: center; justify-content: center;
}
.tile-art img {
  width: 80%; height: 80%;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: var(--logo-filter);
  transition: transform .45s var(--ease);
}
.tile-art .initial { font-family: var(--display-font); font-size: 54px; color: #262d38; }
.tile-art::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--ui-accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .38s var(--ease);
}
.tile:hover .tile-art img { transform: scale(1.06); }
.tile:hover .tile-art::after { transform: scaleX(1); }
.tile:hover .tile-name { color: var(--ui-accent); }

.tile-name { display: block; margin-top: 10px; color: var(--white); font-size: 13px; font-weight: 600;
             transition: color .2s; }
.tile-role { display: block; margin-top: 1px; color: var(--muted); font-size: 12px; }

/* ── releases + credits ──────────────────────────────────────
   Weight runs bands → albums → credits: band tiles are 2 across, the
   discography 3, the credits 5. The tile size carries the hierarchy. */
.credits-head { margin-top: var(--gap-lg); font-size: 24px; }

.release-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--gap-lg) var(--gap);
}
.release-grid.small {
  grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
  gap: var(--gap) var(--gap);
}
.release-grid.small .rl-title { margin-top: 7px; font-size: 12px; }
.release-grid.small .rl-band  { font-size: 11px; }
.release-grid.small .rl-sub,
.release-grid.small .rl-role  { font-size: 11px; }
.release { min-width: 0; cursor: pointer; }
.rl-thumb {
  position: relative; overflow: hidden;
  width: 100%; aspect-ratio: 1 / 1;
  background: #16191e;
}
.rl-thumb.empty { background: #14171c; border: 1px solid #1c2027; }
.rl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.physical-strip {
  position: absolute; left: 7px; right: 7px; bottom: 7px; z-index: 2;
  padding: 4px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--white); background: #0b0d10d9; font-size: 9px; letter-spacing: .06em;
  text-transform: uppercase; backdrop-filter: blur(4px);
}
.rl-thumb::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--ui-accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .38s var(--ease);
}
.rl-thumb img, .rl-title { transition: transform .45s var(--ease), color .2s; }
.release:hover .rl-thumb img { transform: scale(1.07); }
.release:hover .rl-thumb::after { transform: scaleX(1); }
.release:hover .rl-title { color: var(--ui-accent); }

.rl-title { display: block; margin-top: 10px; color: var(--white); font-size: 13px; }
/* band names are always white — genre is never carried by a name */
.rl-band  { display: block; margin-top: 1px; font-size: 12px; font-weight: 600; color: var(--white); }
.rl-sub   { display: block; margin-top: 1px; color: var(--muted); font-size: 12px; }
.rl-role  { display: block; margin-top: 3px; color: var(--dim); font-size: 11px; }
.rl-guest { color: var(--ui-accent); }

.empty-note { color: var(--dim); font-size: 13px; }

@media (max-width: 1400px) {
  .left-top { grid-template-columns: 3fr 3fr; }
}
@media (max-width: 1100px) {
  /* no room for two regions — the discography drops below the left stack */
  .stack-left { grid-column: 1 / -1; }
  .col-work   { grid-column: 1 / -1; padding-left: 0; padding-top: var(--gap-lg); }
}

/* ═══ mobile ═══ */
@media (max-width: 860px) {
  .body { padding-top: 16px; }
  .left-top { grid-template-columns: 1fr; gap: 0; }
  .col-person, .col-bands, .col-work, .col-shows, .col-comments {
    padding-left: 0 !important;
    padding-top: 0;
    margin: 0 0 40px;
  }
  .portrait { max-width: 340px; }
  .hero-stats { display: none; }
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
  .release-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
  .release-grid.small { grid-template-columns: repeat(3, 1fr); }
}