/* DRAFT: small reading companions within the existing field guide. */
.about-reading-spot{display:block;float:right;line-height:0;pointer-events:none}
.about-reading-spot .reading-art{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.practice-reading-spot{width:clamp(110px,13vw,165px);margin:-10px -8px 12px 24px}
.practice-example::after,.follow-reading-note::after{content:"";display:block;clear:both}
.choice-reading-spot{width:105px;margin:-16px -9px 8px 18px}
.follow-reading-spot{width:130px;margin:-8px -5px 4px 24px}
.practice-example[data-practice-state=ask] .practice-reading-spot .reading-art{transform:rotate(3deg)}
.practice-example[data-practice-state=understand] .practice-reading-spot .reading-art{transform:rotate(-2deg)}
.practice-reading-spot .reading-art{transition:transform .5s cubic-bezier(.2,.75,.25,1)}
[data-mode=organization] .about-reading-spot .reading-art{filter:grayscale(1)}
@media(max-width:800px){
 .choice-reading-spot{width:100px;margin-top:-10px}
 .practice-reading-spot{width:125px;margin-left:18px}
}
@media(max-width:520px){
 .practice-reading-spot{width:85px;margin:-8px -5px 8px 13px}
 .choice-reading-spot{width:88px;margin:-5px 0 8px 14px}
 .follow-reading-spot{width:87px;margin:-5px -5px 8px 12px}
 .practice-example>.small-label{max-width:calc(100% - 98px);line-height:1.5}
}
@media(prefers-reduced-motion:reduce){
 .practice-reading-spot .reading-art{transition:none;transform:none!important}
}