/* =====================================================================
   artists.css — /artists (directory) and /artists/<slug> (profiles).
   Frames, salon hang and the viewing room come from gallery.css.
   ===================================================================== */

/* ---------------------------------------------------------------- directory */
.directory__head {
  padding-top: clamp(1.75rem, 1rem + 4vw, 5.5rem);
  padding-bottom: clamp(1.75rem, 1rem + 3vw, 4rem);
}
.directory__list { display: grid; gap: var(--section); }

.dir-entry { display: grid; gap: var(--s-6); }
.dir-entry__head { display: grid; gap: var(--s-3); align-content: start; }
.dir-entry__name { font-size: var(--fs-2xl); }
.dir-entry__bio { font-family: var(--font-display); font-style: italic; font-size: var(--fs-lg); line-height: 1.35; color: var(--ink-2); max-width: 22rem; }
.dir-entry__meta { font-size: var(--fs-sm); color: var(--muted); }
.dir-entry__head .btn { margin-top: var(--s-2); }

@media (min-width: 900px) {
  .dir-entry {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(2rem, 4vw, 5rem);
    align-items: start;
  }
  .dir-entry__head { position: sticky; top: calc(var(--header-h) + var(--s-6)); padding-top: var(--s-2); }
}

/* the single quiet line at the end */
.directory__note { margin-top: var(--section); font-size: var(--fs-sm); color: var(--muted); }
.directory__note a { color: var(--muted); }
.directory__note a:hover { color: var(--ink); }

/* ---------------------------------------------------------------- profile */
.profile__intro {
  display: grid;
  gap: var(--s-6);
  padding-top: clamp(1.75rem, 1rem + 4vw, 5.5rem);
}
.profile__text { display: grid; gap: var(--s-3); align-content: end; }
.profile__name { font-size: var(--fs-3xl); }
.profile__lead { font-family: var(--font-display); font-style: italic; font-size: var(--fs-lg); line-height: 1.35; color: var(--ink-2); }
.profile__meta { font-size: var(--fs-sm); color: var(--muted); }
.profile__portrait { background: var(--bone); }

@media (min-width: 900px) {
  .profile__intro {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(2rem, 5vw, 6rem);
    align-items: end;
  }
  .profile__text { padding-bottom: var(--s-6); }
  .profile__portrait { max-height: calc(100svh - var(--header-h) - 3rem); aspect-ratio: auto; height: min(52vw, calc(100svh - var(--header-h) - 3rem)); }
}

.profile__works { padding-top: var(--section); }
.profile__works-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
.profile__count { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }

.works-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.25rem, 1.5rem + 3vw, 5rem) clamp(0.75rem, 0.4rem + 1.5vw, 2.5rem);
}
@media (min-width: 1100px) { .works-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.works-grid__item { display: grid; gap: var(--s-4); align-content: start; }
.works-grid__item .frame { --fw: clamp(3px, 0.3vw + 1px, 7px); }
.works-grid__item .wall-label { font-size: var(--fs-xs); }
.works-grid__item .wall-label__title { font-size: var(--fs-base); }
@media (min-width: 640px) {
  .works-grid__item .wall-label { font-size: var(--fs-sm); }
  .works-grid__item .wall-label__title { font-size: var(--fs-md); }
}

.profile__about {
  padding-top: var(--section);
  display: grid;
  gap: var(--s-5);
}
.profile__about-body { display: grid; gap: var(--s-3); max-width: var(--max-text); font-size: var(--fs-md); color: var(--ink-2); }
.profile__statement { margin: var(--s-3) 0 0; font-family: var(--font-display); font-style: italic; font-size: var(--fs-lg); }
.profile__links { font-size: var(--fs-sm); margin-top: var(--s-2); }
@media (min-width: 900px) {
  .profile__about { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 6rem); }
}

/* artist without a portrait: one of their paintings, hung large */
.profile__mark { align-self: center; }
@media (min-width: 900px) {
  .profile__mark { padding-block: var(--s-6); }
  .profile__mark .frame { width: min(100%, calc((100svh - var(--header-h) - 6rem) * 1.5)); margin-left: auto; }
}