/* The Thinking Team — optional illustration enhancement for existing article design. */
.tt-editorial-figure { margin: clamp(24px, 5vw, 48px) auto; width: min(100%, 960px); }
.tt-editorial-figure img { display: block; width: 100%; height: auto; aspect-ratio: 12/7; border-radius: 18px; border: 1px solid var(--line, #dedbd5); background: var(--paper, #fbf8f4); }
.tt-editorial-figure figcaption { margin: 10px 2px 0; color: var(--muted, #6c6660); font-size: clamp(12px, 1.5vw, 14px); line-height: 1.55; }
/* Hover only on devices that really support hover. Movement is under 4px and avoids reflow. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tt-editorial-figure img { transition: transform 280ms ease-out; }
  .tt-editorial-figure:hover img { transform: translateY(-3px); }
}
/* Optional fade-in for below-the-fold illustrations only: apply .tt-editorial-figure--reveal on 2-3 per page maximum.
   No JS required, nothing loops. Never apply to the likely LCP/above-fold image. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  @keyframes tt-editorial-enter { from { transform: translateY(5px); opacity: .84; } to { transform: translateY(0); opacity: 1; } }
  .tt-editorial-figure--reveal { animation: tt-editorial-enter 480ms ease-out both; }
}
@media (prefers-reduced-motion: reduce) { .tt-editorial-figure *, .tt-editorial-figure { transition: none !important; animation: none !important; } }