/* Bio page — two layout variations
   Shared tokens from colors_and_type.css
   ============================================================ */

.q-bio { background: var(--qd-paper-50); }

/* --- Preview switcher (dev only) --- */
.q-bio-controls {
  display: flex; gap: 24px; flex-wrap: wrap;
  padding: 14px 40px; background: var(--qd-paper-100);
  border-bottom: 1px solid var(--qd-paper-300);
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
}
.q-bio-controls .group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.q-bio-controls .label { color: var(--fg-3); font-weight: 500; }
.q-bio-controls button {
  background: transparent; border: 1px solid var(--qd-paper-300);
  padding: 6px 12px; border-radius: 4px; color: var(--qd-navy-900);
  font-size: 11px; letter-spacing: .12em; font-weight: 500; text-transform: uppercase;
  cursor: pointer; transition: all var(--dur-fast) var(--ease-out);
}
.q-bio-controls button:hover { border-color: var(--qd-navy-900); }
.q-bio-controls button.active { background: var(--qd-navy-900); color: var(--fg-inverse); border-color: var(--qd-navy-900); }

/* --- Crumbs --- */
.q-bio-crumbs {
  padding-top: 48px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-3); display: flex; gap: 10px; align-items: center;
}
.q-bio-crumbs a { color: var(--fg-3); cursor: pointer; transition: color var(--dur-fast); }
.q-bio-crumbs a:hover { color: var(--qd-navy-900); }
.q-bio-crumbs .sep { opacity: 0.5; }

/* ============================================================
   Layout A — Image-forward
   ============================================================ */

.q-bio-a-hero { padding: 48px 0 72px; }
.q-bio-a-grid {
  display: grid; grid-template-columns: 460px 1fr; gap: 72px;
  align-items: end;
}
@media (max-width: 900px) {
  .q-bio-a-grid { grid-template-columns: 1fr; gap: 32px; }
}
.q-bio-a-portrait {
  margin: 0; aspect-ratio: 4/5;
  background: var(--qd-paper-100);
  border: 1px solid var(--qd-paper-300);
  overflow: hidden; position: relative;
}
.q-bio-a-portrait img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
  display: block;
}
.q-bio-a-head { padding-bottom: 8px; }
.q-bio-name {
  margin: 18px 0 28px;
  font-family: var(--font-sans);
  font-weight: 300; line-height: 0.94; letter-spacing: -.035em;
  color: var(--fg-1);
  font-size: clamp(3rem, 7.2vw, 6rem);
  text-wrap: balance;
}
.q-bio-name .first { display: block; }
.q-bio-name .last { display: block; font-weight: 600; }
.q-bio-lede {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.45; font-weight: 400; color: var(--fg-1);
  margin: 0; max-width: 36ch; text-wrap: pretty;
}

/* Body — prose + aside */
.q-bio-body { padding: 24px 0 96px; }
.q-bio-cols {
  display: grid; grid-template-columns: 460px 1fr; gap: 72px;
  padding-top: 48px; border-top: 1px solid var(--qd-paper-300);
}
@media (max-width: 900px) {
  .q-bio-cols { grid-template-columns: 1fr; gap: 32px; }
}
.q-bio-aside { display: flex; flex-direction: column; gap: 22px; font-size: 13px; position: sticky; top: 100px; align-self: start; }
@media (max-width: 900px) {
  .q-bio-aside { position: static; top: auto; }
}
.q-bio-aside-block { display: flex; flex-direction: column; gap: 4px; }
.q-bio-aside-block dt { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); margin: 0; }
.q-bio-aside-block dd { margin: 0; font-size: 14px; color: var(--fg-1); font-weight: 500; }
.q-bio-aside-block dd a { color: var(--fg-1); border-bottom: 1px solid var(--qd-paper-300); transition: border-color var(--dur-fast); }
.q-bio-aside-block dd a:hover { border-bottom-color: var(--qd-navy-900); }

.q-bio-prose { max-width: 62ch; }
.q-bio-prose p { margin: 0 0 22px; font-size: 18px; line-height: 1.75; color: var(--fg-1); font-weight: 400; }

.q-bio-current {
  margin-top: 40px; padding: 24px 0 0;
  border-top: 1px solid var(--qd-paper-300);
}
.q-bio-current .label {
  display: block; font-size: 11px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--qd-brass-700); margin-bottom: 10px;
}
.q-bio-current p {
  margin: 0; font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.1rem, 1.6vw, 1.375rem); line-height: 1.4;
  color: var(--fg-1); max-width: 48ch; text-wrap: balance;
}

/* ============================================================
   Layout B — Text-forward
   ============================================================ */

.q-bio-b-hero { padding: 48px 0 56px; }
.q-bio-b-name {
  margin: 20px 0 24px;
  font-family: var(--font-sans);
  font-weight: 300; line-height: 0.92; letter-spacing: -.04em;
  color: var(--fg-1);
  font-size: clamp(3.5rem, 11vw, 9.5rem);
  text-wrap: balance;
}
.q-bio-b-name .ws { display: inline-block; width: 0.25em; }
.q-bio-b-name > span:last-child { font-weight: 600; }
.q-bio-b-sub {
  display: flex; gap: 40px; align-items: baseline;
  padding-top: 20px; border-top: 1px solid var(--qd-paper-300);
  flex-wrap: wrap;
}
.q-bio-b-sub .role {
  font-size: 18px; font-weight: 500; color: var(--fg-1); letter-spacing: -.005em;
}
.q-bio-b-sub .loc {
  font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-3); margin-left: auto;
}

.q-bio-b-body { padding: 32px 0 96px; }
.q-bio-b-grid {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 88px;
  align-items: start;
}
@media (max-width: 900px) {
  .q-bio-b-grid { grid-template-columns: 1fr; gap: 40px; }
}
.q-bio-b-prose { max-width: 62ch; }
.q-bio-b-prose .q-bio-lede {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1.45; font-weight: 400; color: var(--fg-1);
  margin: 0 0 32px; max-width: none; text-wrap: pretty;
}
.q-bio-b-prose p { margin: 0 0 22px; font-size: 18px; line-height: 1.75; color: var(--fg-1); font-weight: 400; }

.q-bio-b-contact {
  margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--qd-paper-300);
  display: flex; gap: 24px; align-items: baseline;
}
.q-bio-b-contact dt { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); margin: 0; }
.q-bio-b-contact dd { margin: 0; font-size: 15px; color: var(--fg-1); font-weight: 500; }
.q-bio-b-contact dd a { color: var(--fg-1); border-bottom: 1px solid var(--qd-paper-300); transition: border-color var(--dur-fast); }
.q-bio-b-contact dd a:hover { border-bottom-color: var(--qd-navy-900); }

.q-bio-b-portrait {
  margin: 0; position: sticky; top: 100px;
}
.q-bio-b-portrait img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center 22%;
  background: var(--qd-paper-100); border: 1px solid var(--qd-paper-300);
  display: block;
}
.q-bio-b-portrait figcaption {
  margin-top: 14px; font-size: 12px; letter-spacing: .1em;
  color: var(--fg-3); text-transform: uppercase; font-weight: 500;
}

/* ============================================================
   Footer nav — shared
   ============================================================ */

.q-bio-foot {
  background: var(--qd-paper-100);
  border-top: 1px solid var(--qd-paper-300);
  padding: 48px 0;
}
.q-bio-foot-grid {
  display: grid; grid-template-columns: auto 1fr 1fr; gap: 40px;
  align-items: center;
}
@media (max-width: 900px) {
  .q-bio-foot-grid { grid-template-columns: 1fr; gap: 20px; }
  .q-bio-foot-link--next { text-align: left; }
}
.q-bio-foot-link {
  display: flex; flex-direction: column; gap: 6px; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.q-bio-foot-link .label {
  font-size: 11px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--fg-3);
}
.q-bio-foot-link .target {
  font-size: 18px; font-weight: 500; color: var(--qd-navy-900);
  letter-spacing: -.005em;
}
.q-bio-foot-link .target .role {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  color: var(--fg-3); font-size: 0.85em;
}
.q-bio-foot-link:hover .target { color: var(--qd-navy-600); }
.q-bio-foot-link--next { text-align: right; }
.q-bio-foot-link--back .target::before { content: "← "; color: var(--qd-brass-700); margin-right: 6px; }
.q-bio-foot-link--next .target::after { content: " →"; color: var(--qd-brass-700); margin-left: 6px; }

@media (max-width: 900px) {
  .q-bio-foot-link--next { text-align: left; }
}