/* Tools page. Loads after home.css and reuses its tokens. */

main.tools { padding-top: 7vh; }
.tools-head { padding-bottom: 8px; }

.tool { padding: 44px 0; border-top: 1px solid var(--line); }
.tools-head + .tool { margin-top: 44px; }
.tool-name { color: var(--faint); font-size: 14px; }
.tool h2 { margin: 6px 0 12px; font: 400 clamp(23px, 4vw, 28px)/1.2 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.tool-copy > p { color: var(--ink-2); text-wrap: pretty; }
.tool-copy .tool-why { margin-top: 10px; color: var(--muted); font-size: 15px; }
.tool-why b { margin-right: 6px; font-weight: 500; }
.tool-link { display: inline-block; margin-top: 16px; color: var(--accent-ink); font-size: 15px; text-underline-offset: 3px; }

/* illustrations: plain type, no frames */
.tool-art { margin-bottom: 26px; }
.tool-art b { font-weight: 400; }

.art-say { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; align-items: baseline; margin: 0; }
.art-say dt { color: var(--faint); font-size: 14px; }
.art-say dd { margin: 0; font: 400 22px/1.3 var(--serif); }
.art-say dd:last-child { color: var(--accent-ink); }

.art-list, .art-bars, .art-scale { margin: 0; padding: 0; list-style: none; }
.art-list li { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); }
.art-list li:last-child { border-bottom: 0; }
.art-list b { font: 400 19px var(--serif); }
.art-list span { color: var(--muted); font-size: 15px; }

.art-page { color: var(--ink-2); font: 400 21px/1.6 var(--serif); }
.art-page mark { padding: 0 2px; background: var(--mark); color: inherit; }
.art-pop { display: block; margin-top: 4px; color: var(--accent-ink); font: 400 15px var(--sans); }

.art-bars li { display: grid; grid-template-columns: 120px 1fr 28px; align-items: center; gap: 12px; padding: 6px 0; }
.art-bars b { font: 400 17px var(--serif); }
.art-bars i { width: var(--w); height: 2px; background: var(--ink); }
.art-bars span { color: var(--muted); font-size: 13px; text-align: right; }

.art-scale { display: flex; gap: 22px; font-size: 17px; }
.art-scale li { color: var(--faint); }
.art-scale li.is-on { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }

.art-convert p { margin: 0; color: var(--muted); font: 400 19px/1.4 var(--serif); }
.art-convert p.is-easy { margin-top: 8px; color: var(--ink); }
.art-convert small { display: inline-block; width: 34px; color: var(--faint); font: 400 13px var(--sans); }

.tools-end { padding-top: 8px; border-top: 1px solid var(--line); }