/* #speaker · S7 teacher · paper · v7.1 redesign (owner, 12 Nov 2026).
   Owner: the photo was black and white and on phones only his head showed (the name sat over his body).
   Now: a white profile card with the WHOLE colour photo (head to waist), name + role + 3 stats under the photo,
   then the answer to the H2 (手动 vs 量化, 4 rows), a pull quote with his face, a compact timeline.
   Phone: head → card → vs → quote → timeline. ≥ 960: card left (sticky), everything else right.
   Colour: neutral; green (--ds-up) only for the ✓ 量化 column and the timeline dots (tested = green). No red (no loss here).
   Motion: only the ds.js count-ups on the stats (final values are in the HTML). */

#speaker .spk { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "card" "main"; row-gap: var(--ds-s6); }
#speaker .spk > * { min-width: 0; }
#speaker .spk-head { grid-area: head; }
#speaker .spk-card { grid-area: card; }
#speaker .spk-main { grid-area: main; display: grid; gap: var(--ds-s6); }
#speaker .spk-h .l { display: block; }

/* ---------- profile card ---------- */
#speaker .spk-card { margin: 0; background: var(--ds-white); border-radius: var(--ds-r-l); box-shadow: var(--ds-shadow-lift);
  overflow: hidden; border: 1px solid rgba(20, 22, 26, .06); }
/* the studio photo has a near-white backdrop, so it melts into the white card. Aspect 4:5 = head to waist. */
#speaker .spk-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 20%, #fdfdfc 0, #f1f1ef 100%); }
#speaker .spk-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* soft fade at the foot of the photo into the card (only the background, never over his face/body) */
#speaker .spk-photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18%; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--ds-white)); }
#speaker .spk-chip { position: absolute; left: var(--ds-s4); top: var(--ds-s4); padding: 4px 10px; border-radius: 999px;
  background: var(--ds-ink); color: var(--ds-text-d); font: 700 var(--ds-fs-tag)/1.5 var(--ds-zh); letter-spacing: .04em; }

#speaker .spk-id { display: grid; gap: 2px; padding: var(--ds-s2) var(--ds-s5) 0; }
#speaker .spk-name { margin: 0; font: 800 34px/1.05 var(--ds-num); font-stretch: 88%; letter-spacing: -.02em; color: var(--ds-text); }
#speaker .spk-role { font: 700 var(--ds-fs-small)/1.5 var(--ds-zh); color: var(--ds-text-2); }

#speaker .spk-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--ds-s5) 0 0;
  border-top: 1px solid var(--ds-line); }
#speaker .spk-stat { display: grid; gap: 2px; align-content: start; padding: var(--ds-s4) var(--ds-s2) var(--ds-s5) var(--ds-s4); }
#speaker .spk-stat + .spk-stat { border-left: 1px solid var(--ds-line); padding-left: var(--ds-s3); }
#speaker .spk-stat dd { margin: 0; white-space: nowrap; font: 800 clamp(19px, 5.6vw, 26px)/1 var(--ds-num); font-stretch: 88%; font-variant-numeric: tabular-nums; color: var(--ds-text); }
#speaker .spk-stat dt { font: 700 13px/1.4 var(--ds-zh); color: var(--ds-mute); }
#speaker .spk-stat--lead dd { color: var(--ds-up); }

/* ---------- 手动 vs 量化 ---------- */
#speaker .spk-vs-k { margin: 0 0 var(--ds-s4); }
#speaker .spk-vs { display: grid; border-radius: var(--ds-r-l); overflow: hidden; border: 1px solid var(--ds-line); background: var(--ds-white); }
#speaker .spk-vs-head, #speaker .spk-vs-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
#speaker .spk-vs-head span { padding: var(--ds-s3) var(--ds-s4); font: 900 var(--ds-fs-small)/1.4 var(--ds-zh); letter-spacing: .04em; }
#speaker .spk-vs-head .spk-vs-l { color: var(--ds-mute); background: rgba(20, 22, 26, .03); }
#speaker .spk-vs-head .spk-vs-r { color: var(--ds-up-t); background: rgba(33, 131, 88, .08); }
#speaker .spk-vs-row span { display: flex; word-break: keep-all; align-items: flex-start; gap: var(--ds-s2); padding: var(--ds-s4); border-top: 1px solid var(--ds-line);
  font: 700 15px/1.45 var(--ds-zh); }
#speaker .spk-vs-row .ds-ico { flex: none; margin-top: 3px; width: 14px; height: 14px; }
#speaker .spk-vs-row .spk-vs-l { color: var(--ds-mute); background: rgba(20, 22, 26, .03); font-weight: 400; }
#speaker .spk-vs-row .spk-vs-r { color: var(--ds-text); background: rgba(33, 131, 88, .05); }
#speaker .spk-vs-row .spk-vs-r .ds-ico { color: var(--ds-up); }

/* ---------- pull quote ---------- */
#speaker .spk-q { margin: 0; padding: var(--ds-s5) 0 0 var(--ds-s5); border-left: 3px solid var(--ds-text); padding-top: 0; }
#speaker .spk-q-t { margin: 0; font: 900 clamp(24px, 6.6vw, 34px)/1.3 var(--ds-zh); color: var(--ds-text); word-break: keep-all; text-wrap: balance; }
#speaker .spk-q-t::before { content: "\300C"; margin-left: -.5em; }
#speaker .spk-q-t::after { content: "\300D"; }
#speaker .spk-q-by { display: flex; align-items: center; gap: var(--ds-s2); margin-top: var(--ds-s4);
  font: 600 var(--ds-fs-tag)/1.5 var(--ds-mono); letter-spacing: .04em; color: var(--ds-mute); }
#speaker .spk-q-by img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

/* ---------- timeline: compact rail ---------- */
#speaker .spk-tl-k { margin: 0 0 var(--ds-s4); }
#speaker .spk-tl { list-style: none; margin: 0; padding: 0; display: grid; }
#speaker .spk-tl-i { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--ds-s3);
  padding: 0 0 var(--ds-s4) 24px; }
#speaker .spk-tl-i:last-child { padding-bottom: 0; }
#speaker .spk-tl-i::after { content: ""; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--ds-paper); box-shadow: inset 0 0 0 2px var(--ds-up); }
#speaker .spk-tl-i::before { content: ""; position: absolute; left: 4px; top: 18px; bottom: 2px; width: 2px; background: var(--ds-line); }
#speaker .spk-tl-i:last-child::before { content: none; }
#speaker .spk-tl-i--now::after { background: var(--ds-up); box-shadow: 0 0 0 4px rgba(33, 131, 88, .16); }
#speaker .spk-tl-y { font: 600 var(--ds-fs-small)/1.6 var(--ds-mono); font-variant-numeric: tabular-nums; color: var(--ds-text-2); white-space: nowrap; }
#speaker .spk-tl-t { margin: 0; font: 700 var(--ds-fs-body)/1.5 var(--ds-zh); color: var(--ds-text); }
#speaker .spk-tl-t small { font: 400 var(--ds-fs-small)/1.5 var(--ds-zh); color: var(--ds-mute); }
#speaker .spk-fine { margin: 0; }

@media (max-width: 360px) {
  #speaker .spk-stat { padding-left: var(--ds-s4); }
  #speaker .spk-stat dd { font-size: 19px; }
  #speaker .spk-vs-row span { font-size: 14px; padding: var(--ds-s3); }
}

/* ---------- tablet: card and photo side by side inside the card ---------- */
@media (min-width: 640px) and (max-width: 959px) {
  #speaker .spk-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto; }
  #speaker .spk-photo { grid-row: 1 / span 2; aspect-ratio: auto; min-height: 420px; }
  #speaker .spk-id { align-self: end; padding: var(--ds-s6) var(--ds-s5) 0; }
  #speaker .spk-stats { grid-template-columns: 1fr; border-top: 0; margin-top: var(--ds-s4); }
  #speaker .spk-stat, #speaker .spk-stat + .spk-stat { border-left: 0; border-top: 1px solid var(--ds-line); padding: var(--ds-s3) var(--ds-s5); }
}

/* ---------- desktop: card left (sticky while the right column scrolls), story right ---------- */
@media (min-width: 960px) {
  #speaker .spk { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--ds-s8); row-gap: 0;
    grid-template-areas: "card head" "card main"; align-items: start; }
  #speaker .spk-card { position: sticky; top: var(--ds-s6); }
  #speaker .spk-name { font-size: 40px; }
  #speaker .spk-stat dd { font-size: 30px; }
  #speaker .spk-main { margin-top: var(--ds-s6); gap: var(--ds-s7); }
  #speaker .spk-vs-row span { font-size: 17px; padding: var(--ds-s4) var(--ds-s5); }
  #speaker .spk-vs-head span { padding: var(--ds-s3) var(--ds-s5); }
  #speaker .spk-q-t { font-size: 36px; }
  #speaker .spk-tl { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--ds-s5); }
  #speaker .spk-tl-i { grid-template-columns: minmax(0, 1fr); padding: 24px 0 0; }
  #speaker .spk-tl-i::after { top: 0; }
  #speaker .spk-tl-i::before { left: 14px; right: calc(-1 * var(--ds-s5)); top: 4px; bottom: auto; width: auto; height: 2px; }
  #speaker .spk-tl-y { margin-bottom: var(--ds-s1); }
}
@media (min-width: 960px) {
  #speaker .spk-tl-t { word-break: keep-all; }
  #speaker .spk-tl-t small { display: block; margin-top: 2px; }
}

/* ---------- v9 mobile polish (12 Nov 2026): phones only ---------- */
@media (max-width: 959px) {
  /* nothing under 13px on a phone */
  #speaker .spk-chip { font-size: var(--ds-fs-fine); }
  #speaker .spk-q-by { font-size: var(--ds-fs-fine); }
  /* timeline: a sub-label never breaks inside a word (360 left 量化研究公 / 司) */
  #speaker .spk-tl-t, #speaker .spk-tl-t small { word-break: keep-all; line-break: strict; }
}