/* ============ SITE TOOLTIP — one shared component (tooltip.css + tooltip.js) ============
   ONE tooltip pattern for the whole site (today: About's seven disabled book-flow CTAs and
   Nav's audio toggle). Type is one step DOWN the scale from the 14/20 chip: Nohemi 12/16
   REGULAR (400). Fill is the tooltip blue token --color-tooltip-bg (#4894F1) with site-black
   text (#242424 on #4894F1 passes WCAG AA at small regular text; white does not). Dimensions
   ride the tokens: padding --space-2/--space-3, corner --radius-md, caret --space-3 (12px,
   sized up from 10 and matching the fill exactly, with a soft drop-shadow so it reads
   against busy artwork like About's books). Max-width 240px; multi-line copy left-aligns.
   Behavior (WAI-ARIA tooltip, owned by tooltip.js): ~400ms hover intent, instant hide on
   pointer leave, instant show on keyboard focus / hide on blur, Escape dismisses, placed
   above the trigger and auto-flipped below when the viewport has no room (never clips),
   touch tap toggles it (auto-hide ~3s / tap-elsewhere). Motion is WAAPI (immune to the
   blanket RM floor): enter translateY(4px)->0 + fade 200ms on --ease-out-quint, exit fade
   120ms; reduced motion is fade-only. One tooltip visible at a time; pointer-events:none so
   it never blocks surrounding content; z-index sits below the curtain overlay's 2147483000.
   role="tooltip", linked from each trigger via aria-describedby; triggers carry
   data-cursor="pointer" (set by tooltip.js) so the shared cursor tier gives them the hand.
   Do NOT hand-roll page tooltips — attach via window.SiteTip.attach(). Linked after
   buttons.css. */
:root{--color-tooltip-bg:#4894F1}
.sitetip{position:fixed;left:0;top:0;z-index:2147482800;box-sizing:border-box;max-width:240px;padding:var(--space-2,8px) var(--space-3,12px);background:var(--color-tooltip-bg,#4894F1);color:#242424;font:400 12px/16px 'Nohemi','Nohemi Fallback',Helvetica,Arial,sans-serif;letter-spacing:.01em;border-radius:var(--radius-md,8px);box-shadow:0 4px 16px rgba(0,0,0,.18);pointer-events:none;text-wrap:pretty;text-align:left}
.sitetip .scaret{position:absolute;width:var(--space-3,12px);height:var(--space-3,12px);background:var(--color-tooltip-bg,#4894F1);transform:rotate(45deg);border-radius:1px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.16))}