/* ==========================================================================
   Curators page — page-local styles, prefixed .cs-
   ========================================================================== */

/* The hero is light, so the fixed nav sits on solid brown on this page */
.page-curators .nav { background: var(--c-brown); }

[id] { scroll-margin-top: 96px; }

/* Round portrait (same treatment as curator.html's avatars) --------------- */
.cs-avatar {
  position: relative;
  display: block;
  flex-shrink: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--c-white);
  border-radius: var(--r-round);
  background: var(--c-beige);
  box-shadow: var(--shadow-card);
  isolation: isolate;
}
.cs-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--shadow-card-inset);
  pointer-events: none;
}
.cs-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  transform: scale(var(--zoom, 1));
  transform-origin: var(--focus, 50% 50%);
  transition: transform var(--zoom-duration) var(--ease-zoom), filter var(--zoom-duration) var(--ease-zoom);
}

/* Hero -------------------------------------------------------------------- */
.cs-hero {
  padding-top: calc(97px + var(--s-60));
  padding-bottom: var(--s-60);
  gap: var(--s-30);
}
.cs-hero__head { max-width: 980px; }
.cs-hero__lede { max-width: 620px; margin-inline: auto; color: var(--c-brown-80); }

.cs-hero__faces { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s-30); }
.cs-face { display: flex; flex-direction: column; align-items: center; gap: var(--s-10); border-radius: var(--r-5); }
.cs-face__avatar { width: 88px; box-shadow: none; border-color: var(--c-brown); }
.cs-face__avatar::after { display: none; }
.cs-face__label { color: var(--c-brown-60); transition: color 0.25s var(--ease); }
.cs-face:hover .cs-face__avatar img { transform: scale(calc(var(--zoom, 1) * 1.08)); filter: var(--zoom-filter); }
.cs-face:hover .cs-face__label { color: var(--c-brown); }

/* Grid -------------------------------------------------------------------- */
.cs-grid-section { padding-top: var(--s-60); padding-bottom: var(--s-60); }
.cs-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-15);
  width: 100%;
}

.cs-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-20);
  min-width: 0;
  padding: var(--s-30) var(--s-20) var(--s-20);
  border: 1px solid var(--c-brown);
  border-radius: var(--r-5);
  background: var(--c-white);
  text-align: center;
}
.cs-card__avatar { width: min(180px, 70%); }
.cs-card:hover .cs-card__avatar img { transform: scale(calc(var(--zoom, 1) * 1.06)); filter: var(--zoom-filter); }
.cs-card__head { display: flex; flex-direction: column; gap: var(--s-10); }
.cs-card__regions { line-height: 1.5; }

.cs-facts {
  display: grid;
  gap: var(--s-10);
  width: 100%;
  padding: var(--s-15) 0;
  border-block: 0.75px solid var(--c-brown-60);
  text-align: left;
}
.cs-facts .meta-row { gap: var(--s-10); line-height: 1.4; }
.cs-facts .icon { width: 18px; height: 18px; }

/* Specialties: quiet text labels, not buttons */
.cs-specialties {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.3;
  color: var(--c-brown-80);
}

.cs-card__bio { line-height: 1.6; color: var(--c-brown-80); text-align: left; }
.cs-card__actions { display: flex; flex-direction: column; gap: var(--s-10); width: 100%; margin-top: auto; }
.cs-card__actions .btn { white-space: normal; padding-inline: var(--s-15); }
.cs-card__primary { --btn-fg: var(--c-white); background: var(--c-brown); --btn-hover-bg: var(--c-white); --btn-hover-fg: var(--c-brown); }

/* Rendered cards fade in with a slight stagger */
.cs-in { opacity: 0; transform: translateY(24px); transition: opacity 1.2s var(--ease-zoom), transform 1.4s var(--ease-zoom); transition-delay: calc(var(--i, 0) * 90ms); }
.cs-in.is-visible { opacity: 1; transform: none; }

/* Inline profiles ---------------------------------------------------------- */
.cs-profiles { display: block; }
.cs-profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-60);
  padding-block: var(--s-60);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s var(--ease-zoom), transform 1s var(--ease-zoom);
}
.cs-profile[hidden] { display: none; }
.cs-profile.is-open { opacity: 1; transform: none; }
.cs-profile:focus { outline: none; }
.cs-profile__intro { display: flex; flex-direction: column; gap: var(--s-20); }
.cs-profile__intro > .t-body { line-height: 1.6; }
.cs-profile__avatar { width: 140px; }
.cs-profile__side { display: flex; flex-direction: column; gap: var(--s-30); }
.cs-profile__block { display: flex; flex-direction: column; gap: var(--s-15); }
.cs-favs { display: flex; flex-direction: column; }
.cs-fav { display: flex; flex-direction: column; gap: 6px; padding: var(--s-15) 0; border-top: 0.75px solid var(--c-brown-60); }
.cs-fav:last-child { border-bottom: 0.75px solid var(--c-brown-60); }
.cs-fav .t-sub { font-size: clamp(24px, 2.1vw, 30px); }
.cs-fav .t-small { line-height: 1.5; }
.cs-quote { display: flex; flex-direction: column; gap: var(--s-10); padding: var(--s-20); background: var(--c-white); border-radius: var(--r-5); }
.cs-quote blockquote { font-size: 24px; line-height: 1.3; }
.cs-profile__actions { display: flex; flex-wrap: wrap; gap: var(--s-15); }
.cs-profile__actions .btn { flex: 1 1 200px; }

/* How it works ------------------------------------------------------------ */
.cs-how { padding-top: var(--s-60); padding-bottom: var(--s-60); }
.cs-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-30); counter-reset: none; }
.cs-step { display: flex; flex-direction: column; gap: var(--s-15); padding-top: var(--s-20); border-top: 1px solid var(--c-brown); }
.cs-step__num { font-size: var(--fs-sub); color: var(--c-brown-60); }
.cs-step .t-body { line-height: 1.6; color: var(--c-brown-80); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1100px) {
  .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-20); }
  .cs-profile { gap: var(--s-30); }
}

@media (max-width: 800px) {
  .cs-profile { grid-template-columns: 1fr; }
  .cs-steps { grid-template-columns: 1fr; gap: var(--s-20); }
}

@media (max-width: 900px) {
  .cs-hero { padding-top: calc(72px + var(--s-30)); }
  [id] { scroll-margin-top: 84px; }
}

@media (max-width: 600px) {
  .cs-hero { padding-bottom: var(--s-30); }
  .cs-hero__faces { gap: var(--s-15); }
  .cs-face__avatar { width: 64px; }
  .cs-grid-section,
  .cs-how { padding-top: var(--s-30); padding-bottom: var(--s-30); }
  .cs-grid { grid-template-columns: 1fr; }
  .cs-card__avatar { width: 160px; }
  .cs-profile { padding-block: var(--s-30); }
  .cs-quote blockquote { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-in, .cs-profile { opacity: 1; transform: none; }
}

/* Align avatar / name / facts / specialties / bio / actions across a row of cards */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 601px) {
    .cs-card {
      display: grid;
      grid-row: span 6;
      grid-template-rows: subgrid;
      justify-items: center;
      align-content: start;
      row-gap: var(--s-20);
    }
    .cs-card__head { align-self: start; }
    .cs-facts { align-self: start; }
    .cs-card__actions { align-self: end; }
  }
}