/* "Look inside" call-out on the end-chapter cover (replaces the old distressed .lstamp).
   Two options, switched by data-li on #cover (default in index.html, or ?li=label / ?li=arrow): both sit OUTSIDE the cover
   (left of it on desktop, above it on phones) so the cover title is never covered. Both are inside the cover link, so a click opens Look Inside. */
.li{position:absolute;z-index:2;pointer-events:auto;display:none}
.li-label{right:calc(100% + 22px);top:26px;white-space:nowrap;font:600 15px/1 Oswald,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:#FFF4EA;background:var(--hot);border:2px solid var(--ink);padding:10px 14px 9px 16px;box-shadow:4px 4px 0 var(--ink);animation:li-bob 2.4s ease-in-out infinite}
.li-label::after{content:"";position:absolute;left:100%;top:50%;margin:-9px 0 0 2px;border:9px solid transparent;border-left:12px solid var(--ink)}
.li-arrow{right:calc(100% + 14px);top:-12px;width:clamp(230px,21vw,320px);animation:li-nudge 1.7s ease-in-out infinite}
.li-arrow svg{display:block;width:100%;height:auto;overflow:visible}
.li-arrow .li-sh{fill:var(--hot);transform:translate(7px,7px)}
.li-arrow .li-ar{fill:#FFD502;stroke:var(--ink);stroke-width:5;stroke-linejoin:round}
.li-arrow text{font:700 19px Oswald,sans-serif;letter-spacing:.07em;fill:var(--ink)}
.lookcover[data-li="label"] .li-label,.lookcover[data-li="arrow"] .li-arrow{display:block}
.lookcover:hover .li-label,.lookcover:focus-visible .li-label{background:var(--ink);border-color:var(--hot);box-shadow:4px 4px 0 var(--hot)}
.lookcover:hover .li-arrow .li-ar,.lookcover:focus-visible .li-arrow .li-ar{fill:#FFE14D}
@keyframes li-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes li-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(9px)}}
/* phones: no room beside the cover, so the arrow falls back to the label, centred just above the cover's top edge */
@media (max-width:760px){
  .lookcover[data-li] .li-label{display:block;right:auto;left:50%;top:auto;bottom:calc(100% + 7px);transform:translateX(-50%);
    font-size:12px;letter-spacing:.14em;padding:5px 10px 4px 12px;box-shadow:3px 3px 0 var(--ink);animation-name:li-bob-m}
  .lookcover[data-li] .li-label::after{left:50%;top:100%;margin:1px 0 0 -6px;border:6px solid transparent;border-top:7px solid var(--ink)}
  .lookcover[data-li] .li-arrow{display:none}
  /* short phones: only ~27px between the robot band and the cover top, so a slimmer label and no bob */
  @media (max-height:740px){.lookcover[data-li] .li-label{bottom:calc(100% + 3px);font-size:11px;padding:4px 9px 3px 11px;animation:none}
    .lookcover[data-li] .li-label::after{border-width:5px;border-top-width:5px;margin:0 0 0 -5px}}
  @keyframes li-bob-m{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-3px)}}
}
@media (prefers-reduced-motion:reduce){.li-label,.li-arrow,.lookcover[data-li] .li-label{animation:none}}
/* End scene: the book stands alone with the arrow first; the end card then rises from below the space window.
   --rise is set by js/v7.js (1 = fully below, 0 = in place). No press/scale animation on this card, so it simply slides up. */
.c6{transform:translate3d(0,calc(var(--rise,1) * 100%),0);will-change:transform}
.c6.on .card{animation:none}
@media (prefers-reduced-motion:reduce){.c6{transform:none}}
/* side arrow a little lower (was top:-12px), still left of the cover and pointing straight at it */
.li-arrow{top:14%}