/* rangooo fx2: name letters, spring on grid cards, larger touch targets */
.fx2-n{position:relative;display:inline-block}
.fx2-n i{display:inline-block;font-style:normal;will-change:transform}
.fx2-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.fx2-st{position:absolute;left:50%;top:50%;width:.34em;height:.34em;margin:-.17em 0 0 -.17em;pointer-events:none;text-decoration:none;
  background:linear-gradient(135deg,#ffd43b,#f08c00);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  animation:fx2st .75s cubic-bezier(.2,.8,.3,1) both}
@keyframes fx2st{0%{opacity:0;transform:translate(0,0) scale(.2) rotate(0)}25%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1) rotate(160deg)}}

:root{--fx2-spring:cubic-bezier(.2,.9,.3,1.2)}
@supports (transition-timing-function:linear(0,1)){:root{--fx2-spring:linear(0,.55 14%,1.08 34%,.97 52%,1.01 70%,1)}}
/* individual transform properties, so the cover tilt (which uses transform) keeps working */
#storyGrid .story{transition:translate .38s var(--fx2-spring),scale .38s var(--fx2-spring)}
@media (hover:hover) and (pointer:fine){#storyGrid .story:hover{translate:0 -6px;scale:1.02}}
#storyGrid .story:active{scale:.97}

@media (max-width:700px){
  .frow .chip{min-height:52px;padding-inline:18px}
  #prevPage,#nextPage{min-height:52px}
}
html[data-fx-tier="C"] .fx2-st{display:none}
@media (prefers-reduced-motion:reduce){#storyGrid .story{transition:none}#storyGrid .story:hover{translate:none;scale:none}.fx2-st{display:none}}