/* One documentary composition. Dates and the parallel Tao lane remain native text. */
.mp-page .mp-story-hero { max-width: none; }
.mp-story-overview { --journey-photo: 230px; --journey-head: 66px; --journey-inset: 28px; --journey-line: #73bea8; position: relative; isolation: isolate; container: story-timeline / inline-size; margin-top: 2.8rem; padding: 0 var(--journey-inset); background: #0b1010; border: 1px solid #263432; border-radius: 3px; scroll-margin-top: 6rem; }
.mp-story-overview__heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--journey-head); }
.mp-page .mp-story-overview h2 { margin: 0; color: #ebece5; font: 500 1rem/1.4 "IBM Plex Sans", sans-serif; }
.mp-story-overview__heading > span { color: #b6c4be; font: 400 .73rem/1.5 "IBM Plex Mono", monospace; }
.mp-story-overview ol { position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; }
.mp-story-overview li { position: relative; z-index: 1; min-width: 0; }
.mp-story-overview a { position: relative; display: block; height: 100%; color: #edece4; text-decoration: none; }
.mp-story-overview__photo { position: relative; display: block; height: var(--journey-photo); margin: 0 -18px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mp-story-overview__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #0b1010, transparent 35%); pointer-events: none; }
.mp-story-overview img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; border-radius: 0; }
.mp-story-overview__copy { display: block; position: relative; padding: 22px 16px 16px 0; }
.mp-story-overview__copy::before { content: ""; position: absolute; top: -4px; left: 0; width: 8px; height: 8px; border: 1px solid #9bd6c3; background: #0b1010; border-radius: 50%; box-shadow: 0 0 0 5px #0b1010; }
.mp-story-overview__date { display: block; color: #a3dac7; font: 500 .82rem/1.5 "IBM Plex Mono", monospace; }
.mp-story-overview__title { display: block; margin: .55rem 0 .9rem; font: 500 clamp(1.6rem, 2.65vw, 2.7rem)/1.07 "Source Serif 4", Georgia, serif; letter-spacing: -.035em; }
.mp-story-overview__note, .mp-story-overview__milestone { display: block; color: #c3cec8; font: 400 .87rem/1.55 "IBM Plex Sans", sans-serif; }
.mp-story-overview__milestone { margin-top: 1.3rem; padding-left: .8rem; border-left: 1px solid #55776b; }
.mp-story-overview__milestone b { display: block; margin-bottom: .3rem; color: #a3dac7; font: 400 .72rem/1.5 "IBM Plex Mono", monospace; }
.mp-story-overview ol::before { content: ""; pointer-events: none; position: absolute; left: 0; right: 0; top: var(--journey-photo); border-top: 1px solid var(--journey-line); }
.mp-story-overview__vision .mp-story-overview__date::after { content: " →"; }
.mp-story-overview ol::after { content: ""; pointer-events: none; position: absolute; top: var(--journey-photo); left: calc(75% - 3.5rem); right: 0; height: 3.5rem; border-left: 1px solid var(--journey-line); border-bottom: 1px solid var(--journey-line); border-bottom-left-radius: 2rem; }
.mp-story-overview__tao .mp-story-overview__copy { margin-top: 3.5rem; }
.mp-story-overview__footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1.5rem; margin-top: 1.8rem; padding: 1.1rem 0; border-top: 1px solid #263432; color: #a3b5ab; font: 400 .72rem/1.5 "IBM Plex Sans", sans-serif; }
.mp-story-overview a:hover .mp-story-overview__title { color: #a3dac7; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .13em; }
.mp-story-overview a:focus-visible { outline: 2px solid #a3dac7; outline-offset: 7px; border-radius: 2px; }
@media (min-width: 701px) and (max-width: 1050px) {
  .mp-story-overview { --journey-photo: 170px; --journey-inset: 22px; }
  .mp-story-overview__title { font-size: 1.7rem; }
  .mp-story-overview__date { font-size: .75rem; }
  .mp-story-overview__note, .mp-story-overview__milestone { font-size: .8rem; }
}
@media (max-width: 700px) { .mp-story-overview { --journey-inset: 18px; margin-top: 2rem; } }
@container story-timeline (max-width: 44rem) {
  .mp-story-overview__heading { display: block; padding: 1rem 0 1.1rem; min-height: 0; }
  .mp-story-overview__heading > span { display: block; margin-top: .35rem; font-size: .64rem; }
  .mp-story-overview ol { display: block; margin-left: 5px; border-left: 1px solid var(--journey-line); }
  .mp-story-overview li { padding: 0 0 1.6rem 18px; }
  .mp-story-overview a { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .mp-story-overview__photo { order: 2; flex: 1 1 5rem; min-width: 0; max-width: 24rem; height: auto; aspect-ratio: 1 / 1.15; margin: 0; mask-image: linear-gradient(90deg, transparent, #000 16%, #000 92%, transparent); }
  .mp-story-overview__photo::after { background: linear-gradient(0deg, #0b1010, transparent 20%, transparent 80%, #0b1010); }
  .mp-story-overview__copy { order: 1; flex: 1.05 1 7.5rem; padding: 6px 0; }
  .mp-story-overview__copy::before { left: -23px; top: 13px; width: 7px; height: 7px; box-shadow: 0 0 0 4px #0b1010; }
  .mp-story-overview__date { font-size: .69rem; }
  .mp-story-overview__title { font-size: 1.55rem; margin: .45rem 0 .6rem; }
  .mp-story-overview__milestone { margin-top: .8rem; padding-left: .55rem; font-size: .77rem; }
  .mp-story-overview__milestone b { font-size: .64rem; margin-bottom: .1rem; }
  .mp-story-overview__note { font-size: .78rem; }
  .mp-story-overview ol::before, .mp-story-overview ol::after { display: none; }
  .mp-story-overview .mp-story-overview__tao { margin-left: 16px; padding-left: 16px; padding-bottom: 0; border-left: 1px solid var(--journey-line); }
  .mp-story-overview__tao::before { content: ""; position: absolute; width: 17px; height: 20px; top: -20px; left: -18px; border-left: 1px solid var(--journey-line); border-bottom: 1px solid var(--journey-line); border-bottom-left-radius: 14px; }
  .mp-story-overview__tao .mp-story-overview__copy { margin-top: 0; }
  .mp-story-overview__tao .mp-story-overview__copy::before { left: -21px; }
  .mp-story-overview__tao .mp-story-overview__title { font-size: 1.45rem; }
  .mp-story-overview__footer { margin-top: 1.2rem; font-size: .65rem; }
}
@media print {
  .mp-story-overview { break-inside: avoid; background: #fff; }
  .mp-story-overview__photo { mask-image: none; }
  .mp-story-overview__photo::after { display: none; }
  .mp-story-overview a, .mp-story-overview [class] { color: #222; }
}