/* =============================
   ARTIST PAGE (page-scoped)
   ============================= */

/* Main artist grid (labels + biography layout) */
.artist-grid{
  display:grid;
  grid-template-columns: 23% minmax(0,1fr); /* label | content */
  column-gap: clamp(2.5rem, 5vw, 3.75rem);
  row-gap:1rem;
  padding-block: 2rem 3rem;
}

.muted-label{
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-nav);
  font-size: var(--fs-nav);
  margin:0;
}

.artist-name{
  margin:0 0 .25rem;
  font-size: clamp(1.75rem, 3vw, var(--fs-hero-title));
  letter-spacing:.06875rem;
  color: var(--color-dark);
  font-weight:500;
}
.artist-name .life-dates{
  display:block; margin-top:.25rem;
  font-size: clamp(1rem, 2vw, var(--fs-hero-date));
  color: var(--color-muted); font-weight:400;
}

.artist-grid .lead{
  font-size: var(--fs-body);
  line-height:1.5;
  letter-spacing:.0625rem;
  margin:.75rem 0 0;
}

/* =============================
   BIOGRAPHY TOGGLE (Safari-safe)
   - summary contains a short-preview (its own style)
   - p.lead contains full text (its own style)
   - summary remains visible when open so the user can close again
   ============================= */
.bio{ margin-top:.75rem; }

.bio-toggle{
  cursor:pointer;
  list-style:none;
  display:block;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-nav);
  font-size: var(--fs-nav);
  padding:.25rem 0;
}
.bio-toggle::-webkit-details-marker{ display:none; }

/* The preview text INSIDE summary (styled independently from .lead) */
.bio-toggle .preview{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;  /* 2–3 lines preview; adjust if needed */
          line-clamp:3;
  overflow:hidden;
  /* You can tweak preview typography here without touching .lead */
  text-transform:none;
  letter-spacing:.02em;
  color: var(--color-dark);
  font-size: var(--fs-body);
  line-height:1.5;
  margin: .25rem 0 0;
}

/* Toggle labels inside summary */
.toggle-more{ display:inline; }
.toggle-less{ display:none; }

/* CLOSED: show summary preview, hide full paragraph */
.bio:not([open]) .lead{ display:none; }
.bio:not([open]) .toggle-more{ display:inline; }
.bio:not([open]) .toggle-less{ display:none; }

/* OPEN: show full paragraph, keep summary visible as the toggle control */
.bio[open] .lead{
  display:block;
  -webkit-line-clamp:unset; line-clamp:unset;
  max-height:none;
}
.bio[open] .toggle-more{ display:none; }
.bio[open] .toggle-less{ display:inline; }
/* Optionally hide preview line when open (so only “view less” shows) */
.bio[open] .preview{ display:none; }

/* =============================
   WORKS GRID
   ============================= */
.artist-works{ padding-block: 2rem 3rem; }
.works-heading{ margin:0 0 .9rem; }

.artist-works .grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr)); /* 2 per row */
  column-gap: clamp(1rem, 3vw, 2rem);
  row-gap: clamp(1rem, 2vw, 1.5rem);
}
@media (max-width: 640px){
  .artist-works .grid{ grid-template-columns:1fr; }
}

.card{
  transition: transform .12s ease, box-shadow .12s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}
.card .thumb{
  display:block;
  width:100%;
  object-fit: contain; /* contain artwork inside frame (your preference) */
}
.card-body{ padding:.9rem 1rem 1.1rem; }
.card h3{
  margin:.1rem 0 .25rem;
  font-size:1.05rem;
  letter-spacing:-.01em;
  font-weight:500;
  text-align: center;
}
.meta{
  color: var(--color-muted);
  font-size:.925rem;
  line-height:1.4;
}

/* ==================================
   BIOGRAPHY TYPOGRAPHY UNIFIED STYLE
   ================================== */
.bio-toggle,
details.bio[open] .bio-toggle,
details.bio p {
  font-family: 'Gantari', sans-serif;
  font-size: 1.5rem;     /* 24px = 1.5rem (assuming root 16px) */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 1px;
  color: var(--color-muted);
}