/* ==========================================================================
   Member profile (member.php) - page-specific styles.
   Every selector scoped under .page-member.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero (navy): meta row, name + blurb + actions, plate + facts grid
   -------------------------------------------------------------------------- */

.page-member .member-hero {
  padding: clamp(36px, 4vw, 60px) 0 0;
}

.page-member .hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(var(--paper-rgb), 0.28);
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.page-member .hero-meta a { color: var(--accent-soft); }
.page-member .hero-meta a:hover { color: var(--paper); }

.page-member .hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(28px, 3.5vw, 64px);
  padding: clamp(30px, 3.5vw, 52px) 0 clamp(34px, 4vw, 56px);
  align-items: center;
}

.page-member .hero-title {
  margin: 0;
  max-width: 18ch;
  font: 500 clamp(34px, 4.6vw, 62px)/1.02 var(--font-serif);
  letter-spacing: -0.03em;
  color: var(--paper);
  text-wrap: balance;
}

.page-member .hero-blurb {
  margin: 22px 0 0;
  max-width: 56ch;
  font: 400 clamp(17px, 1.4vw, 20px)/1.6 var(--font-sans);
  color: rgba(var(--paper-rgb), 0.86);
  text-wrap: pretty;
}

.page-member .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.page-member .hero-actions .btn { padding: 15px 22px; }

.page-member .hero-side { justify-self: stretch; }

.page-member .hero-plate {
  display: block;
  max-width: 460px;
}
.page-member .hero-plate .plate {
  border-color: rgba(var(--paper-rgb), 0.3);
}

/* Facts grid attaches under the plate. The 1px gap over an rgba(paper)
   background renders the hairlines between cells in both directions,
   whatever the cell count (sparse records drop cells, the grid holds). */
.page-member .hero-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  margin: 0;
  max-width: 460px;
  background: rgba(var(--paper-rgb), 0.22);
  border: 1px solid rgba(var(--paper-rgb), 0.22);
  border-top: 0;
}
.page-member .hero-facts > div {
  padding: 14px 16px;
  background: var(--dark);
}
.page-member .hero-facts dt {
  font: 500 9.5px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--paper-rgb), 0.7);
}
.page-member .hero-facts dd {
  margin: 9px 0 0;
  font: 400 15px/1.3 var(--font-sans);
  color: var(--paper);
}
.page-member .hero-facts dd.is-status { color: var(--accent-soft); }

/* --------------------------------------------------------------------------
   Commitment + submitted record (paper)
   -------------------------------------------------------------------------- */

.page-member .member-record {
  padding: clamp(40px, 4.5vw, 72px) 0;
}

.page-member .record-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(28px, 3.5vw, 64px);
  align-items: start;
}

.page-member .record-title {
  margin: 14px 0 0;
  max-width: 22ch;
  font: 500 clamp(24px, 2.6vw, 34px)/1.1 var(--font-serif);
  letter-spacing: -0.02em;
  color: var(--ink);
}

.page-member .record-note {
  margin: 18px 0 0;
  max-width: 52ch;
  font: 400 16px/1.62 var(--font-sans);
  color: var(--ink2);
  text-wrap: pretty;
}

/* Sparse-record callout: rendered only when the optional narrative is empty. */
.page-member .record-min {
  margin: 22px 0 0;
  max-width: 52ch;
  padding: 16px 18px;
  background: var(--band);
  border-left: 2px solid var(--accent);
  font: 400 14.5px/1.6 var(--font-sans);
  color: var(--ink2);
}

.page-member .about-head {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ink);
}
.page-member .about-title {
  margin: 0;
  font: 500 clamp(20px, 2vw, 26px)/1.22 var(--font-serif);
  color: var(--ink);
}
.page-member .about-desc {
  margin: 12px 0 0;
  max-width: 64ch;
  font: 400 16px/1.62 var(--font-sans);
  color: var(--ink2);
  text-wrap: pretty;
}

/* Optional narrative (trusted rich HTML from full_description). */
.page-member .about-extra { padding-top: 20px; }
.page-member .about-extra > * { max-width: 64ch; }
.page-member .about-extra h2,
.page-member .about-extra h3 {
  margin: 20px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font: 500 19px/1.3 var(--font-serif);
  letter-spacing: 0;
  color: var(--ink);
}
.page-member .about-extra p {
  margin: 10px 0 0;
  font: 400 15.5px/1.62 var(--font-sans);
  color: var(--ink2);
  text-wrap: pretty;
}
.page-member .about-extra ul,
.page-member .about-extra ol {
  margin: 10px 0 0;
  padding-left: 20px;
}
.page-member .about-extra li {
  margin-top: 6px;
  font: 400 15.5px/1.62 var(--font-sans);
  color: var(--ink2);
}
.page-member .about-extra strong { font-weight: 600; color: var(--ink); }
.page-member .about-extra a {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-member .about-extra a:hover { color: var(--ink); }
.page-member .about-extra img { width: 100%; border: 1px solid var(--rule); }
.page-member .about-extra > :first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* External profiles row, closing the record column on a strong rule. */
.page-member .member-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--ink);
}
.page-member .member-links a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  padding: 12px 18px;
  font: 500 13.5px/1 var(--font-sans);
  min-height: 44px;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.page-member .member-links a:hover { background: var(--band); color: var(--ink); }
.page-member .member-links .link-arrow { font-family: var(--font-mono); }

/* --------------------------------------------------------------------------
   Other members (band)
   -------------------------------------------------------------------------- */

.page-member .member-others {
  padding: clamp(40px, 4.5vw, 72px) 0;
}

.page-member .others-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ink);
}
.page-member .others-title {
  margin: 0;
  font: 500 clamp(22px, 2.4vw, 32px)/1.1 var(--font-serif);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.page-member .others-all {
  font: 500 14px/1 var(--font-sans);
  color: var(--dark);
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 5px;
}
.page-member .others-all:hover {
  color: var(--accent-text);
  border-bottom-color: var(--accent-text);
}

.page-member .others-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 14px;
  margin-top: 22px;
}

.page-member .others-card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--rule);
  text-decoration: none;
  transition: border-color 0.15s;
}
.page-member .others-card:hover { border-color: var(--ink); }
.page-member .others-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--rule);
}
.page-member .others-name {
  font: 500 13px/1.3 var(--font-sans);
  color: var(--ink);
}
.page-member .others-cat {
  font: 400 9px/1.3 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink3);
  white-space: nowrap;
}