/* The how-to pages (components/howto/HowtoPage + HowtoIllustration): a sheet hero with the question, sheet sections for the steps, the before/after and the restore line. Tokens only (SP-14.09);
   the illustrations take every colour from these classes (ink, a dimmed ink, the clay accent), none from the markup. Hebrew is never in a monospace face. */
main[data-page^="howto-"] .lead { font-size: 18px; max-width: 46rem; }
main[data-page^="howto-"] .hw-steps { margin: 0; padding-inline-start: 1.4em; }
main[data-page^="howto-"] .hw-steps li { margin-block: var(--vit-space-2); }
main[data-page^="howto-"] .hw-real { display: grid; grid-template-columns: 1fr; gap: var(--vit-space-4); }
@media (min-width: 900px) { main[data-page^="howto-"] .hw-real { grid-template-columns: repeat(3, 1fr); } }
main[data-page^="howto-"] .hw-real figure { margin: 0; border: 1.5px solid var(--vit-ink); background: var(--vit-paper); }
main[data-page^="howto-"] .hw-real img { display: block; width: 100%; height: auto; }
main[data-page^="howto-"] .hw-real figcaption { padding: 6px var(--vit-space-3); border-top: 1.5px solid var(--vit-ink); font-family: var(--vit-f-heb); font-size: 14px; font-weight: 500; background: var(--vit-paper-2); }
/* the illustration: two drawn panels and a visible caption that says it is an illustration */
.ill { margin: 0; }
.ill-pair { display: grid; grid-template-columns: 1fr; gap: var(--vit-space-4); }
@media (min-width: 600px) { .ill-pair { grid-template-columns: 1fr 1fr; } }
.ill-panel { border: 1.5px solid var(--vit-ink); background: var(--vit-paper); }
.ill-svg { display: block; width: 100%; height: auto; color: var(--vit-ink); }
.ill-label { margin: 0; padding: 6px var(--vit-space-3); border-top: 1.5px solid var(--vit-ink); font-family: var(--vit-f-heb); font-size: 14px; font-weight: 500; background: var(--vit-paper-2); }
.ill-caption { margin-top: var(--vit-space-2); font-family: var(--vit-f-heb); font-size: 14px; font-weight: 500; color: var(--vit-ink-2); }
.il-line { stroke: var(--vit-ink); fill: none; }
.il-dim { stroke: var(--vit-ink-2); fill: none; }
.il-clay { stroke: var(--vit-clay-ink); fill: none; }
.il-dash { stroke-dasharray: 5 5; }
.il-box { stroke: var(--vit-ink); stroke-width: 1.5; fill: var(--vit-paper-2); }
.il-broken { stroke-dasharray: 4 3; fill: var(--vit-paper-3); }
.il-broken-mark { stroke: var(--vit-ink-2); stroke-width: 1.5; }
.il-tick { stroke: var(--vit-ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.il-arrow { stroke: var(--vit-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.il-on { fill: var(--vit-ink); stroke: var(--vit-ink); stroke-width: 1.5; }
.il-off { fill: var(--vit-paper); stroke: var(--vit-ink); stroke-width: 1.5; }