/* hand-pain.html only: the whole page's layout, drawings and motion.
Loaded after site.css. Nothing here is shared with another page. */
/* On the root, because scroll-padding is read from it: a jump to a section,
and a Tab to anything further up the page, both stop below the sticky
header and the bar instead of under them. */
:root {
--hp-nav: 70px; /* the sticky site header; hand-pain.js keeps it measured */
--hp-index: 56px; /* the bar under it */
scroll-padding-top: calc(var(--hp-nav) + var(--hp-index) + 14px);
}
.hp-page {
--hp-ease: var(--ease-out-expo);
--hp-accent: var(--accent-blue);
--hp-ice: var(--accent-ice);
}
/* Parts waiting to slide in must not make the page scroll sideways. */
.hp-page main { overflow-x: clip; }
/* colors_and_type.css caps every bare at 42rem and underlines every .
Text here fills the column it sits in, and each link that should be
underlined says so itself. */
.hp-page main p { max-width: none; }
.hp-page main a:not(.btn) { border-bottom: 0; }
/* A long heading breaks between its halves, never inside one. */
.hp-page main h1 > span, .hp-page main h2 > .h-lead, .hp-page main h2 > em { display: inline-block; }
/* A jump moves focus to the heading it lands on: ringed for a keyboard, quiet for a mouse. */
.hp-page main [tabindex="-1"]:focus { outline: none; }
.hp-page main [tabindex="-1"]:focus-visible { outline: 2px solid var(--hp-accent); outline-offset: 6px; border-radius: 4px; }
.hp-sec--dark [tabindex="-1"]:focus-visible { outline-color: var(--hp-ice); }
.hp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* ---------- the hand's bones (hero, close-ups, treatment drawing) ----------
Colours come through custom properties, which a