/* Distill-style hover footnotes: <span class="fn"><button class="fn-mark">1</button><span class="fn-pop">…</span></span> */
.fn{position:relative;display:inline}
.fn-mark{appearance:none;border:0;background:none;padding:0 1px;margin:0 0 0 1px;font:600 .62em/1 var(--sans,-apple-system,sans-serif);color:var(--accent,#28627b);vertical-align:super;cursor:help}
.fn-mark:focus-visible{outline:2px solid var(--accent,#28627b);outline-offset:2px;border-radius:2px}
.fn-pop{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%) translateY(4px);width:max-content;max-width:min(300px,80vw);padding:9px 12px;background:#fff;color:#2b3538;border:1px solid #d9e0e2;border-radius:6px;box-shadow:0 6px 22px rgba(20,40,50,.12);font:400 13px/1.5 var(--sans,-apple-system,sans-serif);text-align:left;white-space:normal;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s,transform .15s,visibility .15s;z-index:40}
.fn:hover .fn-pop,.fn.fn-open .fn-pop,.fn-mark:focus-visible+.fn-pop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
@media (max-width:640px){.fn-pop{left:auto;right:-8px;transform:translateY(4px)}.fn:hover .fn-pop,.fn.fn-open .fn-pop{transform:translateY(0)}}
@media print{.fn-pop{display:none}}

/* long footnotes (the intro's note on the numbers, 2026-10-15): a wider box that scrolls instead of running off the screen */
.fn-pop{max-width:min(420px,86vw);max-height:min(62vh,560px);overflow-y:auto;overscroll-behavior:contain}
.fn.fn-open .fn-pop{pointer-events:auto}
/* beat the later open-state rule (overflow:visible, 300px) so long notes scroll inside the box */
html body .fn:hover .fn-pop,html body .fn.fn-open .fn-pop,html body .fn-mark:focus-visible+.fn-pop{max-width:min(420px,86vw);overflow-x:hidden;overflow-y:auto}