/* ==========================================
   EIGHTLEGGED - site visuals (11 Oct 2026)
   Pictures placed in a page by App_Code\SiteFigure.vb (or written by hand in the same shape):
   <figure class="site-figure ..."><picture><source media="(max-width: 600px)" ...><img width height ...></picture>
   <figcaption>...</figcaption></figure>. The pictures are code-made (Z:\_ops\site-visuals) in each page's own
   palette, with a phone copy swapped in below 600px. Link this file on any page that carries one.
   ========================================== */

.site-figure { margin: 2.5rem 0 0; }
.site-figure picture, .site-figure img { display: block; }
.site-figure img { width: 100%; height: auto; }
.site-figure figcaption { margin-top: 0.75rem; font-size: 0.85rem; line-height: 1.5; color: var(--gray-400, #9ca3af); }

/* Page pictures placed by the master page from /page-figures.json (App_Code\PageFigures.vb): each sits just
   above a heading, so it closes the section before it. Centred, never wider than a comfortable reading frame. */
.page-figure { max-width: 960px; margin: 2rem auto 2.5rem; }
.page-figure figcaption { text-align: center; font-size: 0.85rem; color: var(--theme-text-muted, var(--theme-muted, var(--theme-text-dim, #9ca3af))); }
@media (max-width: 600px) { .page-figure { margin: 1.5rem auto 2rem; } }

/* Care: warm paper, ink, one orange rule */
.theme-care .care-figure figcaption { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--care-muted); }
.theme-care .care-figure-hero { margin-top: 3rem; }
.theme-care .care-figure-dark figcaption { color: #94a3b8; }
.theme-care .care-figure-report { max-width: 60rem; margin-top: 3rem; }

/* What We Do: amber schematic */
.theme-whatwedo .whatwedo-figure { max-width: 960px; margin: var(--space-8, 2rem) auto 0; }
.theme-whatwedo .whatwedo-figure-narrow { max-width: 800px; }
.theme-whatwedo .whatwedo-figure figcaption { font-family: var(--font-mono); font-size: 0.75rem; color: var(--theme-text-muted); text-align: center; }

/* Cyber: terminal */
.theme-cyber .cyber-figure { margin: 2rem 0 2.25rem; }
.theme-cyber .cyber-figure figcaption { font-family: 'Share Tech Mono', var(--font-mono); font-size: 0.85rem; color: rgba(34, 197, 94, 0.6); }