/* /about: what the place is, then the rules, set as a short list you can read in one breath. */
.about .lede { color: var(--strong); font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.about p { text-wrap: pretty; }
.about h2 { margin: 56px 0 22px; font-size: 13px; font-weight: 500; color: var(--faint); }
.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; counter-reset: rule; }
.rules li { position: relative; padding-inline-start: 34px; text-wrap: pretty; }
/* Each rule hangs off its own hand-drawn icon: rough grey lines that warm to the logo's heat, glow and redraw
   themselves when you point at the rule. */
.rules li { padding-inline-start: 46px; }
.rule-icon { position: absolute; inset-inline-start: 0; inset-block-start: -3px; inline-size: 30px; block-size: 30px; overflow: visible; fill: none; stroke: var(--text); stroke-width: 1.05; stroke-linecap: round; stroke-linejoin: round; filter: url(#scribble); transition: transform 300ms var(--ease-out); }
.rule-icon path { stroke-dasharray: 1; }
.rule-icon .over { opacity: .5; }
.rules li:is(:hover, :focus-within) .rule-icon { stroke: url(#heat-stroke); filter: url(#scribble) drop-shadow(0 0 6px #ff6a1f99); transform: rotate(-5deg) scale(1.08); }
.rules li:is(:hover, :focus-within) .rule-icon path { animation: redraw 900ms cubic-bezier(.23, 1, .32, 1) both; }
@keyframes redraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .rule-icon { transition: none; } .rules li:is(:hover, :focus-within) .rule-icon { transform: none; } .rules li:is(:hover, :focus-within) .rule-icon path { animation: none; } }
.svg-defs { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.rules b { font-weight: 500; color: var(--strong); }
.about .sign-off { margin-block-start: 28px; color: var(--faint); }
.note-mark { margin-inline-start: 2px; color: #ff5a4f; font-weight: 600; }
.about .footnote { margin-block-start: 10px; font-size: 14px; color: var(--faint); }
.about .about-head { margin: 56px 0 18px; scroll-margin-block-start: 110px; }
.about .about-head h2 { margin: 0; font-size: 20px; font-weight: 500; color: var(--strong); }