.prose .article-figure {
  --figure-border: #bcc6c8;
  --figure-dark: #0f1e30;
  --figure-gold: #f6be71;
  margin: 2.5rem 0 2.8rem;
  padding: clamp(1rem, 4vw, 2.15rem);
  border: 1px solid var(--figure-border);
  border-top: 3px solid #956129;
  border-radius: 6px;
  background: #e8e7e0;
  color: #172b3b;
  font: .875rem/1.5 system-ui, sans-serif;
}
.article-figure-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 1.2rem;
  row-gap: .4rem;
  margin-bottom: 1.15rem;
  color: #51636f;
  font-size: .69rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.article-figure-title {
  display: block;
  margin-bottom: 1.35rem;
  font: 400 clamp(1.45rem, 4vw, 2rem)/1.2 Georgia, serif;
}
.article-figure figcaption {
  margin-top: 1.25rem;
  padding-top: .85rem;
  border-top: 1px solid var(--figure-border);
  color: #415563;
  line-height: 1.6;
}
.article-figure figcaption a { display: inline-block; margin-left: .25em; }
.article-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.article-flow li { position: relative; display: grid; align-content: start; gap: .45rem; background: #f1efe9; border: 1px solid var(--figure-border); padding: .9rem; }
.article-flow li:not(:last-child)::after { content: "→"; position: absolute; inset: 50% auto auto 100%; width: 1.25rem; color: #80531e; text-align: center; transform: translateY(-50%); }
.article-flow strong { color: #172b3b; }
.article-flow-index { color: #80531e; font-weight: 700; letter-spacing: .06em; }
.prose .article-figure-provenance { --figure-border: #40546b; background: var(--figure-dark); color: #f1efe9; border-top-color: var(--figure-gold); }
.article-figure-provenance .article-figure-meta { color: #adbacb; }
.article-figure-provenance figcaption { color: #d2dce6; }
.prose .article-figure-provenance a { color: var(--figure-gold); }
.article-provenance-origin { width: fit-content; margin: auto; padding: .5rem 1rem; color: var(--figure-gold); border: 1px solid #b98d56; border-radius: 3px; text-align: center; }
.article-provenance-graph { display: block; width: 100%; height: 3.6rem; overflow: visible; }
.article-provenance-graph path { fill: none; stroke: #c99c63; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.article-provenance-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.article-provenance-posts span { display: grid; place-items: center; min-height: 2.9rem; padding: .4rem; border: 1px solid var(--figure-border); border-radius: 3px; background: #192a3e; text-align: center; }
.article-percent-chart { display: grid; gap: .65rem; }
.article-percent-row { display: grid; grid-template-columns: 3rem 1fr 3rem; align-items: center; gap: .75rem; }
.article-percent-row strong { text-align: right; white-space: nowrap; }
.article-percent-track { height: .8rem; background: #d1d4ce; border-radius: 2px; }
.article-percent-track i { display: block; width: var(--article-level); height: 100%; background: #84603b; border-radius: inherit; transform-origin: left center; }
.article-percent-row:nth-child(2) i { background: #1e3c53; }
.article-percent-scale { display: block; margin-left: 3.75rem; color: #51636f; }
.article-percent-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 1.25rem 0 0; }
.article-percent-metrics div { border-left: 2px solid #956129; padding: 0 0 0 .7rem; }
.article-percent-metrics dt { color: #415563; }
.article-percent-metrics dd { margin: .25rem 0 0; color: #172b3b; font-weight: 700; }
@media (max-width: 520px) {
  .article-flow { grid-template-columns: 1fr; }
  .article-flow li { grid-template-columns: 1.5rem 1fr; column-gap: .5rem; }
  .article-flow li > :last-child { grid-column: 2; }
  .article-flow li:not(:last-child)::after { inset: 100% auto auto 50%; height: 1.25rem; transform: translateX(-50%) rotate(90deg); }
  .article-provenance-graph { height: 2.8rem; }
  .article-provenance-posts span { font-size: .75rem; }
  .article-percent-row { gap: .35rem; }
  .article-percent-scale { margin-left: 3.35rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .figure-entered .article-flow-index { animation: article-flow-accent .55s ease-out 1; }
  .figure-entered .article-flow li:nth-child(2) .article-flow-index { animation-delay: .1s; }
  .figure-entered .article-flow li:nth-child(3) .article-flow-index { animation-delay: .2s; }
  .figure-entered .article-provenance-graph path { stroke-dasharray: 1; animation: article-trace .7s ease-out 1; }
  .figure-entered .article-percent-track i { animation: article-fill .55s ease-out 1; }
}
@keyframes article-flow-accent { 45% { color: #b16b22; } }
@keyframes article-trace { from { stroke-dashoffset: .85; } to { stroke-dashoffset: 0; } }
@keyframes article-fill { from { transform: scaleX(.82); } to { transform: scaleX(1); } }