/* GRIDS
   The home hero, the controls above a listing, and the two
   grids the listing screens all reuse: artists, and works. */

/* ---------- hero (home) ---------- */
.hero {
  position: relative; height: 330px; overflow: hidden;
  border-bottom: 1px solid var(--hair);
}
.hero > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%; opacity: .92;
}
.hero .scrim-x, .hero .scrim-y { position: absolute; inset: 0; }
.hero .scrim-x {
  background: linear-gradient(90deg, rgba(23,19,16,.97) 0%, rgba(23,19,16,.72) 30%,
              rgba(23,19,16,.18) 62%, rgba(23,19,16,.55) 100%);
}
.hero .scrim-y {
  background: linear-gradient(0deg, rgba(23,19,16,.55) 0%, rgba(23,19,16,0) 30%);
}
.hero-in {
  position: relative; max-width: 1560px; margin: 0 auto; padding: 0 48px;
  height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 11px;
}
.hero-eyebrow {
  font: 600 10px var(--sans); letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold);
}
.hero-title {
  font: italic 400 30px/1.25 var(--serif); color: var(--display);
  max-width: 560px; text-wrap: pretty;
}
.hero-title:hover { color: #fff; }
.hero-meta { font: 400 13px var(--sans); color: #b3a48b; }
.hero-cta {
  font: 400 12px var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); margin-top: 6px;
}

/* ---------- search / sort controls ---------- */
.searchbox {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--hair-strong); padding: 9px 14px; width: 230px;
}
.searchbox .mag { color: var(--off); font-size: 13px; line-height: 1; }
.searchbox input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  font: 400 12.5px var(--sans); color: var(--text);
}
.searchbox input::placeholder { color: var(--off); }
.searchbox:focus-within { border-color: var(--gold-line2); }
.sortctl {
  font: 400 12px var(--sans); color: var(--dim);
  border: 1px solid var(--hair-strong); padding: 9px 14px; cursor: pointer;
  background: none; appearance: none;
}
.sortctl:hover { border-color: var(--gold-line); }
.sortctl:focus { outline: none; border-color: var(--gold-line2); }

/* ---------- artist grid ---------- */
.artist-grid {
  display: grid; gap: 46px 30px;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}
.artist-card { display: flex; flex-direction: column; gap: 13px; color: var(--text); }
.artist-card .cover {
  display: block; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--raised3); border: 1px solid var(--mat);
}
.artist-card .cover img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.97); transition: transform .5s ease, filter .4s ease;
}
.artist-card:hover .cover img { transform: scale(1.035); filter: brightness(1.06); }
.artist-card .meta { display: block; }
.artist-card .name { display: block; font: 400 17.5px var(--serif); color: var(--text); }
.artist-card .sub {
  display: block; margin-top: 4px; font: 400 11.5px var(--sans);
  letter-spacing: .03em; color: var(--dim2);
}
.add-card .cover {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed rgba(216,192,150,.22); background: none;
}
.add-card .cover span { font: 400 34px var(--serif); color: var(--faint); }
.add-card:hover .cover { border-color: var(--gold-line); }
.add-card:hover .cover span { color: var(--gold); }

/* ---------- works grid ---------- */
/* A masonry that reads like text — item 1 top-left, 2 top-centre, 3 top-right,
   4 under 1 — so a one-column phone shows the very same order straight down.
   CSS multi-columns fill each column top-to-bottom before the next, which is the
   wrong order; so the grid is a flex row of equal columns and the works are dealt
   across them round-robin in JS (layoutMasonry). --mcol-min is the only knob the
   count is figured from, kept here so the breakpoints live in the CSS. */
.masonry { display: flex; align-items: flex-start; gap: 26px; --mcol-min: 300px; }
.mcol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.work { margin: 0 0 38px; cursor: pointer; display: block; }
.wimg {
  position: relative; display: block; line-height: 0;
  border: 1px solid var(--mat); overflow: hidden; background: var(--raised3);
}
.work img {
  width: 100%; height: auto; min-height: 60px;
  filter: brightness(.97); transition: transform .5s ease, filter .4s ease;
}
.work:hover img { transform: scale(1.03); filter: brightness(1.06); }
.wdim {
  display: none; position: absolute; right: 8px; bottom: 8px; z-index: 2;
  background: rgba(13,11,8,.72); color: rgba(236,227,210,.9);
  font: 400 10.5px var(--sans); line-height: 1; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; padding: 4px 7px; pointer-events: none;
}
/* Hangs in the museum walk. Rendered only on the source box (workFigure). */
.wstar {
  display: none; position: absolute; left: 8px; top: 8px; z-index: 2;
  background: rgba(13,11,8,.72); color: var(--gold);
  font: 400 11px/1 var(--sans); padding: 4px 6px; pointer-events: none;
}
/* Both pills belong to the artist page's grid alone. */
.show-dims .wdim, .show-dims .wstar { display: block; }
/* Select mode's checkmark takes the same corner; the star yields to it. */
.masonry.selecting .wstar { display: none; }
.work figcaption { padding: 13px 2px 0; display: flex; align-items: flex-start; gap: 10px; }
.work .wtext { flex: 1; min-width: 0; }
.work .wt {
  font: italic 400 16px/1.3 var(--serif); color: var(--text); text-wrap: pretty;
}
.work .wm { font: 400 11.5px var(--sans); color: var(--dim2); margin-top: 5px; }
/* the "i" — only rendered when the piece actually has a description to read */
.winfo {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; padding: 0;
  border: 1px solid var(--hair-strong); background: none; color: var(--dim2);
  font: italic 400 12px/1 var(--serif); cursor: pointer;
  transition: border-color .25s ease, color .25s ease;
}
.winfo:hover { border-color: var(--gold-line); color: var(--gold); }

/* select mode */
.worktools { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; min-height: 34px; }
#selctl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.work .checkmark { display: none; }
.masonry.selecting .work .checkmark {
  display: block; position: absolute; top: 10px; left: 10px; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid rgba(236,227,210,.8); background: rgba(13,11,8,.5);
}
.work.selected .wimg { outline: 1px solid var(--gold); outline-offset: 2px; }
.work.selected .checkmark { background: var(--gold); border-color: var(--gold); }
.work.selected .checkmark::after {
  content: "✓"; position: absolute; inset: 0; color: var(--bg);
  font: 700 13px/20px var(--sans); text-align: center;
}