/* The hand (js/hand.js): marker and pen marks over the site. --hc is the ink (yellow by default), --hw its width. */
.hand { position: relative; display: inline-block; --hc: #F2D43A; --hw: 2.4px; }
.hand-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hand-svg path { fill: none; stroke: var(--hc); stroke-width: var(--hw); stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s cubic-bezier(.6, .1, .3, 1) .15s; }
.hand.drawn .hand-svg path { stroke-dashoffset: 0; }
.hand:not(.drawn) .hand-svg, .hand-arrow:not(.drawn):not(.drawn *) { visibility: hidden; }
/* the circle sits a little outside the word; the underline just under it */
.hand-circle .hand-svg { inset: -18% -16%; width: 132%; height: 136%; }
.hand-underline .hand-svg { top: auto; bottom: -.32em; height: .5em; }
.hand-box .hand-svg { inset: -6px -8px; width: calc(100% + 16px); height: calc(100% + 12px); }
/* a highlighter goes behind the words, wide and see-through */
.hand-highlight { z-index: 0; }
.hand-highlight .hand-svg { z-index: -1; top: -.1em; height: 1.2em; }
.hand-highlight .hand-svg path { stroke-width: .78em; opacity: .45; stroke-linecap: butt; transition-duration: .5s; }
/* a word crossed out, the correction beside it in the same hand */
s.hand-strike { text-decoration: none; opacity: .7; }
.hand-strike .hand-svg path { --hw: 2px; }
.hand-fix { font-family: var(--f-hand); font-size: 1.3em; line-height: 1; color: var(--hfix, #E8352B); margin-left: .25em; }

/* a margin note, in the editors' handwriting, with its arrow */
.hand-note { font-family: var(--f-hand); font-weight: 600; font-size: 22px; line-height: 1.05; color: var(--hc, #F2D43A); transform: rotate(var(--tilt, -3deg));
  opacity: 0; transition: opacity .5s .3s; }
.hand-note.drawn { opacity: 1; }
.hand-arrow { display: inline-block; width: 52px; height: 24px; overflow: visible; vertical-align: middle; }
.hand-arrow path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s .4s; }
.hand-arrow.drawn path, .drawn .hand-arrow path { stroke-dashoffset: 0; }

/* a page set a little crooked */
[data-tilt] { transform: rotate(var(--tilt, 0deg)); }
/* a strip of tape holding a picture */
.hand-tape { position: relative; }
.hand-tape::before { content: ''; position: absolute; z-index: 3; top: -12px; left: calc(50% - 46px); width: 92px; height: 24px; background: rgba(243, 236, 214, .62);
  transform: rotate(var(--tape, -3deg)); box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset; pointer-events: none; }
.hand-tape:nth-of-type(2n)::before { --tape: 4deg; left: calc(30% - 46px); }
.hand-tape:nth-of-type(3n)::before { --tape: -6deg; left: calc(68% - 46px); }

@media (prefers-reduced-motion: reduce) { .hand-svg path, .hand-arrow path, .hand-note { transition: none; } }

/* where the rooms use the hand */
.ch-title .hand-underline .hand-svg { bottom: -.12em; height: .22em; }
.jr-ca-note { margin: -14px 0 18px auto; width: max-content; max-width: 100%; font-size: 24px; justify-self: end; align-self: end; text-align: right; } /* on the right, over the wall it points to */
.jr-ca-note .hand-arrow { transform: rotate(18deg); }
#vision .jr-piece[data-tilt] { transform: rotate(var(--tilt)); transition: transform .3s; }
#vision .jr-piece[data-tilt]:hover { transform: rotate(0deg); }
#vision .jr-piece.hand-tape::before { top: -14px; }

@media (max-width: 760px) {  .jr-ca-note { font-size: 20px; } }

/* the Cahier d'art's note now sits on the left, its arrow before the words, pointing down at the first painting */
.jr-ca-note { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 6px;
  margin: -14px auto 18px 0; justify-self: start; text-align: left; }
.jr-ca-note .hand-arrow { transform: scaleX(-1) rotate(18deg); }