/* One artist's page in direction A (round 4, 13 Nov 2026): the home with that artist opened.
   Laptops: their rows on the left where the home's list sits, the portrait in the middle at the
   flyer's size with the bio, videos and photos under it, the roster on the right (shell.css).
   Phones: one column, then previous and next, then the other artists. */

.artist {
  display: grid;
  grid-template-columns: var(--list-w) minmax(0, 1fr) var(--list-w);
  align-items: start;
  /* The portrait's top edge sits where the home's flyer sits. */
  padding-top: calc(var(--top-r) + (100svh - var(--top-r) - var(--bot-r) - var(--fh)) / 2);
  min-height: 100svh;
}
/* Words dissolve into black as they scroll under the logo, as on the home. */
.artist::before {
  content: "";
  position: fixed;
  z-index: 25;
  top: 0; left: 0; right: 0;
  height: var(--top-r);
  /* Solid black to the logo's lower edge, then a short fade, so a photo never shows through the
     wordmark (Fable review, 13 Nov 2026). */
  background: linear-gradient(var(--ink) 80%, transparent);
  pointer-events: none;
}

/* ---------- the portrait ---------- */

.artist__portrait { grid-column: 2; grid-row: 1; justify-self: center; width: var(--fw); margin: 0; }
.artist__frame {
  position: relative;
  display: block;
  width: var(--fw);
  height: var(--fh);
  overflow: hidden;
  background: var(--ash);
  transition: transform var(--release);
}
.artist__frame:active { transform: scale(0.985); transition: transform var(--press); }
.artist__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 200ms var(--ease-out), opacity 200ms ease-in-out;
}
/* The artist's own photo gets its colour back on hover, or on a press on phones. */
@media (hover: hover) { .artist__frame:hover > .artist__img { filter: none; } }
.artist__frame:active > .artist__img, .artist__frame:focus-visible > .artist__img { filter: none; }
/* Another artist hovered in the roster: their photo over the portrait, in black and white. */
.artist__preview { position: absolute; inset: 0; pointer-events: none; }
.artist__preview .artist__img, .artist__float .artist__img { opacity: 0; filter: grayscale(1); }
.artist__preview .artist__img.is-on, .artist__float .artist__img.is-on { opacity: 1; }
/* Scrolled past the portrait, a hovered roster name shows its photo here, where the home shows
   its flyer: the centre of the screen. Invisible at rest and off phones. */
.artist__float {
  position: fixed;
  z-index: 24;
  left: 50%;
  top: calc(var(--top-r) + (100svh - var(--top-r) - var(--bot-r) - var(--fh)) / 2);
  width: var(--fw);
  height: var(--fh);
  margin-left: calc(var(--fw) / -2);
  overflow: hidden;
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-in-out;
}
.artist__float.is-on { opacity: 1; }
/* While that frame is up, the centre column goes almost dark, so the photo stands alone as the
   flyer does on the home. */
.artist__body, .artist__portrait { transition: opacity 200ms ease-in-out; }
.artist.is-floating .artist__body, .artist.is-floating .artist__portrait { opacity: 0.06; }
.artist__cap { margin: 0.7rem 0 0; color: var(--cream-dim); line-height: 1.5; }

/* ---------- the rows on the left ---------- */

.artist__info {
  grid-column: 1;
  grid-row: 1 / span 2;
  /* Pinned to the screen like the roster, so it holds still when the page bounces at its end
     (Miguel's recording, 15 Nov 2026: sticky rode the bounce, the fixed roster did not). */
  position: fixed;
  z-index: 5;
  left: 0;
  top: calc(var(--top-r) + 1rem);
  width: var(--list-w);
  max-height: calc(100svh - var(--top-r) - 1rem - var(--bot-r));
  overflow-y: auto;
  scrollbar-width: none;
  padding: 0 1rem 0 var(--gutter);
}
.artist__name { margin: 0; font: inherit; font-size: 0.8125rem; line-height: 1.35; letter-spacing: 0.12em; color: var(--cream); }
.artist__meta { display: flex; flex-wrap: wrap; gap: 0.1rem 0.9rem; margin: 0.15rem 0 0; line-height: 1.5; }
.artist__label { margin: 0 0 0.6rem; color: var(--cream-dim); opacity: var(--faint); }
.artist__meta .artist__label { margin: 0; }
.artist__links, .artist__nights ul { list-style: none; margin: 0; padding: 0; }
.artist__links { margin-top: 1.4rem; }
.artist__links li, .artist__nights li { line-height: 1.95; }
.artist__book { color: var(--cream); }
.artist__nights { margin-top: 1.6rem; }
.artist__date { color: var(--cream-dim); font-variant-numeric: tabular-nums; margin-right: 0.35rem; }
.artist__nights span { color: var(--cream-dim); }

/* ---------- under the portrait: bio, videos, photos, the ending ---------- */

.artist__body { grid-column: 2; grid-row: 2; justify-self: center; width: var(--fw); }
/* The bio starts below the bar's zone, so its first line is never half under the bar at rest. */
.artist__bio { margin-top: calc(var(--bot-r) - 1.5rem); }
/* Long text in the same mono, normal case, a little larger, for reading (Miguel, 13 Nov 2026). */
.artist__bio p {
  margin: 0 0 1.1em;
  font-size: 0.875rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--cream);
}
.artist__videos, .artist__photos, .artist__others { margin-top: 3.4rem; }
.artist__videos .video-embed + .video-embed { margin-top: 0.9rem; }
.artist__photos ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.artist__photos li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 5px); }
.artist__photo { display: block; width: 100%; transition: transform var(--release); }
.artist__photo:active { transform: scale(0.985); transition: transform var(--press); }
.artist__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1); transition: filter 200ms var(--ease-out); }
@media (hover: hover) { .artist__photo:hover img { filter: none; } }
.artist__photo:active img, .artist__photo:focus-visible img { filter: none; }

/* Previous and next, and the other artists, are the phone's way around the roster; laptops have
   the list on the right. */
.artist__pager, .artist__others { display: none; }


.artist__missing { grid-column: 2; justify-self: center; text-align: center; line-height: 2; padding-top: 20vh; }
.artist__missing p { margin: 0 0 1rem; }

/* The roster on the right marks whose page this is (shell.css draws the list). */
.roster__link[aria-current] { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- phones and tablets ---------- */

@media (max-width: 959px) {
  .artist {
    --pw: min(72vw, 22rem, calc((100svh - 12rem) * 0.8));
    display: flex;
    flex-direction: column;
    padding-top: calc(var(--top-r) + 0.6rem);
  }
  .artist::before { background: var(--ink); }
  .artist__portrait { align-self: center; width: var(--pw); }
  .artist__frame { width: var(--pw); height: calc(var(--pw) * 1.25); }
  .artist__cap { text-align: center; }

  .artist__info { position: static; width: auto; max-height: none; overflow: visible; align-self: stretch; padding: 2rem 1.25rem 0; text-align: center; }
  .artist__float { display: none; }
  .artist__name { font-size: 0.9375rem; }
  .artist__meta { justify-content: center; }
  .artist__links { margin-top: 1rem; }
  .artist__links a, .artist__nights a { padding: 0.55rem 0.25rem; }
  .artist__links li, .artist__nights li { line-height: 1.5; }
  /* The nights as one block, centred, with every date on the same left edge. */
  .artist__nights ul { display: inline-block; text-align: left; }
  .artist__nights li > span { display: inline-block; padding: 0.55rem 0.25rem; }

  .artist__body { width: 100%; padding: 0 1.25rem; }
  .artist__bio { max-width: 34rem; margin: 2.4rem auto 0; }
  .artist__photos ul { gap: 8px; }

  .artist__pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    margin-top: 3.4rem;
    color: var(--cream-dim);
  }
  .artist__pager a { min-height: 44px; line-height: 44px; }
  .artist__others { display: block; }
  .artist__others .panel__roster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .artist__frame:active, .artist__photo:active { transform: none; }
}

/* Test link only: the body already leaves room for the MODO PRUEBA bar and --top-r counts it, so
   the page takes the body's room back rather than counting the bar twice. */
.has-pb .artist { margin-top: calc(-1 * var(--pb)); }