/* A light editorial pause in long articles; all content exists without JS. */
.article-visual {
  --av-accent: #386d5d;
  --av-tint: #dce9df;
  min-width: 0;
  margin: 12px 0 68px;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid #fff7;
  border-radius: 18px;
  color: #282d29;
  background: #f2f1eb;
  box-shadow: 0 24px 60px #00000018;
}
.article-visual--amber { --av-accent: #8a5a29; --av-tint: #ede0c9; }
.article-visual--plum { --av-accent: #76516f; --av-tint: #e9dfe6; }
.article-visual-heading { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 24px; }
.article-visual-mark { flex: 0 0 9px; width: 9px; height: 9px; margin-top: 10px; border-radius: 50%; background: var(--av-accent); box-shadow: 0 0 0 5px var(--av-tint); }
.content-prose .article-visual h3, .article-visual h3 {
  margin: 0;
  color: #252b27;
  font-size: clamp(23px, 2.3vw, 31px);
  font-weight: 550;
  line-height: 1.18;
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
  hyphens: auto;
  text-wrap: balance;
}
.article-visual-layout { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.article-visual-media { min-width: 0; margin: 0; }
.article-visual-media > img { display: block; width: 100%; height: auto; border-radius: 10px; }
.article-visual-media > figcaption { margin-top: 11px; color: #697069; font-size: 10px; line-height: 1.55; }
.article-visual-trace { display: flex; align-items: center; padding: 25px 7px 5px; }
.article-visual-trace > span { display: grid; place-items: center; flex: 0 0 47px; width: 47px; height: 47px; border: 1px solid #bec7bb; border-radius: 12px; color: var(--av-accent); background: #fafaf5; box-shadow: 0 3px 0 #c7cebf5c; }
.article-visual-trace > span:last-child { background: var(--av-tint); border-color: transparent; }
.article-visual-trace svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.article-visual-trace > i { height: 1px; min-width: 12px; flex: 1 1 auto; background: #b9c2b7; position: relative; }
.article-visual-trace > i::after { content: ""; width: 5px; height: 5px; border-top: 1px solid #9ca897; border-right: 1px solid #9ca897; position: absolute; right: 2px; top: -2px; transform: rotate(45deg); }
.article-visual-steps { list-style: none; padding: 0; margin: 0; min-width: 0; }
.content-prose .article-visual-steps > li, .article-visual-steps > li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 0 0 23px; margin: 0; color: #384239; font-size: 13px; line-height: 1.65; }
.article-visual-steps > li:not(:last-child)::before { content: ""; position: absolute; top: 31px; bottom: 5px; left: 13px; width: 1px; background: #c5cebf; }
.article-visual-steps > li:last-child { padding-bottom: 0; }
.article-visual-number { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--av-tint); color: var(--av-accent); font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.article-visual-steps h4 { margin: 2px 0 7px; color: #263129; font-size: 16px; line-height: 1.4; font-weight: 650; letter-spacing: -.018em; overflow-wrap: anywhere; hyphens: auto; }
.content-prose .article-visual-steps p, .article-visual-steps p { margin: 0; color: #566157; font-size: 13px; line-height: 1.75; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 1150px) and (min-width: 1001px) {
  .article-visual-layout { grid-template-columns: 1fr; gap: 25px; }
  .article-visual-trace { max-width: 290px; padding-top: 18px; }
  .article-visual-media > img { max-height: 320px; object-fit: cover; }
}
@media (max-width: 700px) {
  .article-visual { padding: 20px; margin-bottom: 48px; border-radius: 13px; }
  .article-visual-heading { margin-bottom: 21px; }
  .article-visual-layout { grid-template-columns: 1fr; gap: 26px; }
  .article-visual-trace { max-width: 310px; padding-top: 19px; }
  .content-prose .article-visual-steps p, .article-visual-steps p { font-size: 14px; line-height: 1.75; }
  .article-visual-steps h4 { font-size: 17px; }
}