/* The Salon — layout and components.
 *
 * THE SIGNATURE ELEMENT is the platemark. An intaglio plate is smaller than its sheet, so pressing
 * it leaves a debossed rectangle in the paper with the image inside and a blank margin around it.
 * Below that margin the printmaker inscribes, in pencil: edition fraction on the left, title in the
 * centre, signature on the right. Every artwork here is rendered exactly that way, because it is
 * the true artifact of the medium and it carries real information — which edition, what it is, who
 * pulled it.
 *
 * Everything else is deliberately quiet so the platemark is the thing you remember.
 */

/* ---- shell -------------------------------------------------------------------------------- */

.wrap { max-width: 78rem; margin: 0 auto; padding: 0 var(--gutter); }

.masthead {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) 1.25rem;
  border-bottom: var(--rule);
}

.wordmark { margin: 0; font-family: var(--face-display); font-weight: 400; line-height: 0.86; }
.wordmark b {
  display: block; font-size: var(--step-4); font-weight: 400;
  letter-spacing: -0.03em; color: var(--rag);
}
/* The domain sits under the name in mono, the way a plate is stamped rather than titled. */
.wordmark small {
  display: block; margin-top: 0.55rem;
  font-family: var(--face-mono); font-size: var(--step--1);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--wipe);
}

.masthead nav { display: flex; gap: 1.5rem; font-family: var(--face-mono); font-size: var(--step--1); }
.masthead nav a {
  color: var(--wipe); text-decoration: none;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding-bottom: 0.3rem; border-bottom: 1px solid transparent;
}
.masthead nav a:hover, .masthead nav a[aria-current='page'] { color: var(--burr); border-bottom-color: var(--burr); }

/* ---- the thesis --------------------------------------------------------------------------- */
/* A market whose entire premise is that no artist is complete should open by naming what you
   lack, not by selling itself. The gap IS the product. */

.thesis { padding-block: clamp(3rem, 2rem + 6vw, 7rem) clamp(2rem, 1.5rem + 3vw, 4rem); }
.thesis p.eyebrow {
  margin: 0 0 1.25rem; font-family: var(--face-mono); font-size: var(--step--1);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--burr-dim);
}
.thesis h2 {
  margin: 0; max-width: 24ch;
  font-family: var(--face-display); font-weight: 400; font-size: var(--step-3);
  line-height: 1.02; letter-spacing: -0.02em; color: var(--rag);
}
/* The clause naming the missing skill is the only thing on the page allowed to be gold at this
   size — it is the answer to why the visitor is here. */
.thesis h2 em { font-style: italic; color: var(--burr); }
.thesis .sub { margin: 1.5rem 0 0; max-width: 46ch; color: var(--wipe); font-size: var(--step-1); }

/* ---- section furniture -------------------------------------------------------------------- */

.band { padding-block: clamp(2rem, 1.5rem + 3vw, 4rem); border-top: var(--hairline); }
.band > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem 1.5rem; margin-bottom: 2rem; }
.band h3 {
  margin: 0; font-family: var(--face-display); font-weight: 400;
  font-size: var(--step-2); letter-spacing: -0.01em;
}
.band header .count { font-family: var(--face-mono); font-size: var(--step--1); color: var(--wipe); }

/* ---- THE PLATEMARK ------------------------------------------------------------------------ */

.hang {
  display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.impression { display: flex; flex-direction: column; gap: 0.85rem; }

/* The sheet of rag paper. Floated off the wall by a soft drop — this is a hang, not a card grid. */
.sheet {
  background: var(--rag);
  padding: 1.15rem 1.15rem 0.9rem;
  box-shadow: var(--hang);
  color: var(--ink);
  /* Rag is torn, not cut. A hair of asymmetry stops it reading as a rounded-rect UI card. */
  border-radius: 1px 2px 1px 2px;
}

/* The debossed rectangle itself. This is the whole idea. */
.platemark {
  position: relative;
  background: var(--rag-deep);
  box-shadow: var(--press-deep);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  /* Pressed on load: the plate comes down. One orchestrated moment, nothing else moves. */
  animation: press 420ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation-delay: var(--press-delay, 0ms);
}
.platemark > svg, .platemark > img { display: block; width: 100%; height: 100%; object-fit: cover; }

@keyframes press {
  from { box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); transform: scale(0.994); }
  to   { box-shadow: var(--press-deep); transform: none; }
}

/* The margin inscription. Pencil, below the platemark: fraction | title | signature.
   Italic serif rather than a script face — it reads as inscribed without pretending to be
   handwriting, and no script face is reliably present without a webfont. */
.inscription {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
  gap: 0.75rem; margin-top: 0.85rem;
  font-size: var(--step--1); color: color-mix(in srgb, var(--ink) 62%, var(--rag));
}
.inscription .edition { font-family: var(--face-mono); letter-spacing: 0.02em; }
.inscription .title { font-style: italic; text-align: center; }
.inscription .signed { font-style: italic; white-space: nowrap; }
/* A unique impression is not an edition. Say so rather than printing 1/1. */
.inscription .edition[data-unique='true'] { color: var(--alarm); font-style: normal; }

/* Price hangs on the WALL, below the paper — a gallery label, never printed on the work. */
.label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-family: var(--face-mono); font-size: var(--step--1);
}
.label .price { color: var(--rag); }
.label .price b { font-weight: 400; color: var(--burr); }
.label .state { color: var(--wipe); letter-spacing: 0.08em; text-transform: uppercase; }
.label .state[data-state='minted'] { color: var(--acid); }
.label .state[data-state='destroyed'] { color: var(--alarm); }

/* ---- the roster --------------------------------------------------------------------------- */
/* An artist is not a picture, so it does not get a picture's treatment. This is a hiring-hall
   roster: name, chain identity, body of work, and what it can actually do. */

.roster { display: flex; flex-direction: column; }
.artist {
  display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 2rem;
  padding-block: 1.4rem; border-bottom: var(--hairline);
  text-decoration: none; color: inherit;
}
.artist:hover { background: var(--plate-lift); }
.artist h4 {
  grid-column: 1; margin: 0;
  font-family: var(--face-display); font-weight: 400; font-size: var(--step-2);
  letter-spacing: -0.01em; color: var(--rag);
}
.artist .ask { grid-column: 2; grid-row: 1; font-family: var(--face-mono); color: var(--burr); }
.artist .facts {
  grid-column: 1 / -1; margin: 0;
  font-family: var(--face-mono); font-size: var(--step--1); color: var(--wipe);
}
.artist .facts span + span::before { content: ' · '; color: var(--tarnish); }

/* Skills are the reason anyone is here, so they are the loudest thing in the row after the name. */
.skills { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.4rem 0.55rem; margin-top: 0.35rem; }
.skills li { list-style: none; }
.skills b {
  display: inline-block; padding: 0.15rem 0.5rem;
  font-family: var(--face-mono); font-size: var(--step--1); font-weight: 400;
  color: var(--wipe); border: var(--hairline);
}
/* Mastery is worth twice the grains, so it is worth marking. The filled lozenge is the mark. */
.skills b[data-mastered='true'] {
  color: var(--plate); background: var(--burr); border-color: var(--burr);
}
.skills .more { align-self: center; font-family: var(--face-mono); font-size: var(--step--1); color: var(--wipe); }

/* ---- search ------------------------------------------------------------------------------- */

.seek { display: flex; gap: 0.6rem; align-items: stretch; flex-wrap: wrap; }
.seek label { flex: 1 1 16rem; display: flex; flex-direction: column; gap: 0.4rem; }
.seek span {
  font-family: var(--face-mono); font-size: var(--step--1);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--wipe);
}
.seek input {
  font: inherit; font-family: var(--face-mono); font-size: var(--step-0);
  color: var(--rag); background: var(--plate-lift);
  border: var(--rule); border-radius: 0; padding: 0.6rem 0.75rem;
}
.seek input::placeholder { color: var(--tarnish); }
.seek button {
  font-family: var(--face-mono); font-size: var(--step--1);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--plate); background: var(--burr); border: 1px solid var(--burr);
  border-radius: 0; padding: 0.6rem 1.4rem; cursor: pointer; align-self: end;
}
.seek button:hover { background: var(--rag); border-color: var(--rag); }

/* ---- empty + foot ------------------------------------------------------------------------- */

.empty { padding: 3rem 0; color: var(--wipe); max-width: 44ch; }
.empty b { display: block; font-family: var(--face-display); font-size: var(--step-2); color: var(--rag); font-weight: 400; margin-bottom: 0.5rem; }

.foot {
  margin-top: 4rem; padding-block: 2rem 3rem; border-top: var(--rule);
  font-family: var(--face-mono); font-size: var(--step--1); color: var(--wipe);
  display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between;
}
.foot a { color: var(--wipe); }

@media (max-width: 34rem) {
  .artist { grid-template-columns: 1fr; }
  .artist .ask { grid-column: 1; grid-row: auto; }
}