/* Story rails (see rails.js). Transform/opacity only; hover effects only where hover exists. */
body.k-rails #shelfWrap,body.k-rails #storyGrid,body.k-rails .k-allhead,body.k-rails #noStories{display:none!important}
.krails{display:none;flex-direction:column;gap:6px;margin-top:4px}
body.k-rails .krails{display:flex}
.kr-row{position:relative;opacity:0;transform:translateY(26px);transition:opacity .6s var(--ease),transform .6s var(--ease);min-height:210px}
.kr-row.in{opacity:1;transform:none}
.kr-row:focus-within{z-index:4}
@supports selector(:has(a)){.kr-row:has(.kr-card:hover){z-index:4}}
@supports not selector(:has(a)){.kr-row:hover{z-index:4}}
.kr-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 2px}
.kr-head h2{margin:0;font:500 clamp(20px,2.4vw,26px)/1.2 var(--head);color:var(--ink);display:flex;align-items:center;gap:10px}
.kr-head h2 i{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.kr-more{display:inline-flex;align-items:center;gap:2px;border:0;background:none;color:var(--accent);font:600 13px var(--ui);padding:6px 4px;opacity:.8;transition:opacity .2s,gap .25s var(--ease)}
.kr-more:hover,.kr-more:focus-visible{opacity:1;gap:7px}
.kr-wrap{position:relative}
.kr-scroll{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x proximity;padding:46px 4px 190px;margin:-28px -4px -172px;}
.kr-scroll::-webkit-scrollbar{display:none}
.kr-ph{flex:0 0 clamp(128px,15vw,184px);aspect-ratio:3/4;border-radius:14px;background:linear-gradient(100deg,#EEF0EC 30%,#F8F9F6 50%,#EEF0EC 70%);background-size:220% 100%;animation:krsh 1.4s linear infinite}
@keyframes krsh{to{background-position:-120% 0}}

.kr-card{position:relative;flex:0 0 clamp(128px,15vw,184px);scroll-snap-align:start;display:flex;flex-direction:column;gap:8px;padding:0;border:0;background:none;text-align:left;color:var(--ink);font:inherit;cursor:pointer;
  transition:transform .38s var(--ease);animation:krIn .55s var(--ease) backwards;animation-delay:calc(var(--i) * 60ms);-webkit-tap-highlight-color:transparent}
@keyframes krIn{from{opacity:0;transform:translateX(46px) rotateY(-28deg) scale(.9)}}
.kr-scroll{perspective:1000px}
/* alive: slow push-in on the art, a passing light on the glass, floating rank numbers (only rows on screen) */
@media (hover:none){
.kr-row.kr-vis .kr-art svg{animation:krKB 14s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -2.2s)}
@keyframes krKB{from{scale:1;translate:0 0}to{scale:1.1;translate:-2% -1.5%}}
.kr-art::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-70%;width:45%;pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.4),rgba(255,255,255,0));transform:translateX(0) skewX(-16deg);opacity:0}
.kr-row.kr-vis .kr-art::after{animation:krGlint 7s ease-in-out infinite;animation-delay:calc(var(--i) * .7s + 1.5s)}
}
@keyframes krGlint{0%,62%{opacity:0;transform:translateX(0) skewX(-16deg)}66%{opacity:1}100%{opacity:1;transform:translateX(480%) skewX(-16deg)}}
.kr-row.kr-vis .kr-num{animation:krFloat 5s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.8s)}
@keyframes krFloat{from{transform:translateY(0)}to{transform:translateY(-9px)}}
.kr-card:active .kr-art{transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(.97)}
.kr-head h2{animation:krH .7s var(--ease) backwards}
@keyframes krH{from{opacity:0;transform:translateX(-18px)}}
.kr-art{display:block;position:relative;width:100%;align-self:flex-start;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(22,32,44,.08),0 10px 24px rgba(22,32,44,.12);
  transition:transform .38s var(--ease),box-shadow .38s;transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.kr-art svg{display:block;width:100%;height:100%;transition:transform 5s linear}
.kr-art{border:3px solid #fff;background:#fff}
.kr-gl{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.5),rgba(255,255,255,0) 52%),
  linear-gradient(115deg,rgba(255,255,255,0) 18%,rgba(255,95,150,.30) 36%,rgba(255,214,90,.30) 44%,rgba(90,225,205,.30) 52%,rgba(125,145,255,.30) 60%,rgba(255,255,255,0) 78%);
  background-size:100% 100%,280% 100%;background-position:0 0,calc(50% + var(--mx,0) * 45%) 0;background-repeat:no-repeat}
.kr-card.k-hot .kr-gl{opacity:1}
/* depth: number behind, title in front, they slide against the tilting cover */
.kr-card.k-hot .kr-t{transform:translate3d(calc(var(--mx,0) * -5px),calc(var(--my,0) * -3px),0);transition:transform .2s}
.kr-num{translate:calc(var(--mx,0) * -16px) calc(var(--my,0) * -9px);transition:translate .25s}
.kr-t{font:600 13.5px/1.3 var(--ui);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding:0 2px;min-height:2.6em}
.kr-info{display:none}
.kr-num{position:absolute;left:-2px;bottom:34px;z-index:0;font:700 96px/1 var(--head);color:transparent;-webkit-text-stroke:2px rgba(22,32,44,.28);pointer-events:none;opacity:.9}
.kr-row .kr-num+.kr-art{z-index:1;margin-left:62px;width:calc(100% - 62px)}
.kr-row .kr-num~.kr-t{margin-left:62px}
.kr-row .kr-card:has(.kr-num){flex-basis:clamp(200px,20vw,250px)}

.kr-nav{display:none}

@media (hover:hover) and (pointer:fine){
  .kr-nav{position:absolute;top:46px;bottom:200px;width:46px;z-index:6;display:flex;align-items:center;justify-content:center;border:0;color:#fff;background:linear-gradient(90deg,rgba(20,92,99,.55),rgba(20,92,99,0));opacity:0;transition:opacity .25s;cursor:pointer}
  .kr-nav.prev{left:-6px;border-radius:14px 0 0 14px}
  .kr-nav.next{right:-6px;background:linear-gradient(270deg,rgba(20,92,99,.55),rgba(20,92,99,0));border-radius:0 14px 14px 0}
  .kr-nav svg{filter:drop-shadow(0 1px 3px rgba(0,0,0,.4));transition:transform .2s}
  .kr-nav:hover svg{transform:scale(1.25)}
  .kr-wrap:hover .kr-nav,.kr-nav:focus-visible{opacity:1}
  .kr-row.at-start .kr-nav.prev,.kr-row.at-end .kr-nav.next,.kr-row.no-scroll .kr-nav{opacity:0!important;pointer-events:none}
  .kr-card:hover,.kr-card:focus-visible{z-index:5;transform:scale(1.2) translateY(-8px);transition-delay:.1s;outline:none}
  .kr-card:hover .kr-art,.kr-card:focus-visible .kr-art{box-shadow:0 2px 4px rgba(22,32,44,.1),0 28px 50px rgba(22,32,44,.30);transition-delay:.1s}
  .kr-card:hover .kr-art svg,.kr-card:focus-visible .kr-art svg{transform:scale(1.07);transition-delay:.2s}
  .kr-card:hover .kr-gl{opacity:1}
  .kr-card:focus-visible .kr-art{outline:3px solid #E8590C;outline-offset:3px}
  .kr-card:hover ~ .kr-card{transform:translateX(30px)}
  .kr-card:has(~ .kr-card:hover){transform:translateX(-30px)}
  .kr-info{display:flex;position:absolute;left:0;right:0;top:100%;margin-top:2px;flex-direction:column;gap:8px;padding:10px 10px 12px;background:#fff;border-radius:0 0 14px 14px;
    box-shadow:0 18px 30px rgba(22,32,44,.22);opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .25s,transform .3s var(--ease)}
  .kr-card:hover .kr-info,.kr-card:focus-visible .kr-info{opacity:1;transform:none;transition-delay:.18s}
  .kr-pill{align-self:flex-start;font:600 11px var(--ui);padding:3px 8px;border-radius:999px}
  .kr-info .tmeta{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:3px;font:500 11.5px var(--ui);color:var(--muted)}
  .kr-go{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;border-radius:999px;background:var(--accent);color:#fff;font:600 13px var(--ui)}
}
@media (max-width:700px){
  .kr-scroll{gap:11px;scroll-snap-type:x mandatory;padding:6px 16px 8px;margin:0 -20px;scroll-padding-left:16px}
  .kr-row{min-height:0}
  .kr-card,.kr-ph{flex-basis:132px}
  .kr-row .kr-card:has(.kr-num){flex-basis:188px}
  .kr-row .kr-num+.kr-art{margin-left:52px;width:calc(100% - 52px)}.kr-row .kr-num~.kr-t{margin-left:52px}
  .kr-num{font-size:78px;bottom:30px}
  .kr-head h2{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  .kr-row{opacity:1!important;transform:none!important;transition:none!important}
  .kr-card{animation:none!important;transition:none!important}
  .kr-art svg,.kr-art::after,.kr-num{animation:none!important}
  .kr-art,.kr-art svg{transition:none!important;transform:none!important}
  .kr-ph{animation:none}
}

/* ===== desktop: larger covers; the details panel sits on the cover (aligned, never over the next row) ===== */
@media (min-width:1100px) and (hover:hover) and (pointer:fine){
  .kr-card,.kr-ph{flex-basis:clamp(170px,12.4vw,270px)}
  .kr-row .kr-card:has(.kr-num){flex-basis:clamp(250px,18vw,380px)}
  .kr-num{font-size:clamp(110px,8vw,170px)}
  .kr-row .kr-num+.kr-art{margin-left:clamp(70px,5vw,110px);width:calc(100% - clamp(70px,5vw,110px))}
  .kr-row .kr-num~.kr-t{margin-left:clamp(70px,5vw,110px)}
  .kr-head h2{font-size:clamp(24px,1.9vw,36px)}
  .kr-info{z-index:3;top:auto;bottom:3.4em;margin:0;left:0;right:0;border-radius:0 0 14px 14px;padding:12px 12px 12px;gap:7px;
    background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.94) 38%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:none;transform:translateY(10px)}
  .kr-row .kr-card:has(.kr-num) .kr-info{left:clamp(70px,5vw,110px)}
  .kr-card:hover .kr-info,.kr-card:focus-visible .kr-info{transform:none}
  .kr-go{height:38px;font-size:14px;box-shadow:0 6px 16px rgba(20,92,99,.28)}
}

/* ===== desktop hover: no motion, no extra text. Only a Start-a-book button, centred on the cover ===== */
@media (hover:hover) and (pointer:fine){
  .kr-card:hover,.kr-card:focus-visible,.kr-card:hover ~ .kr-card,.kr-card:has(~ .kr-card:hover){transform:none!important;transition-delay:0s!important}
  .kr-art,.kr-card:hover .kr-art,.kr-card:focus-visible .kr-art{transform:none!important;transition-delay:0s!important}
  .kr-card:hover .kr-art{box-shadow:0 1px 2px rgba(22,32,44,.1),0 12px 28px rgba(22,32,44,.2)}
  .kr-card:hover .kr-art svg,.kr-card:focus-visible .kr-art svg{transform:none!important}
  .kr-gl,.kr-card:hover .kr-gl{display:none}
  .kr-card.k-hot .kr-t{transform:none}
  .kr-num{translate:none}
  .kr-pill,.kr-info .tmeta{display:none!important}
  .kr-info{background:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important;transform:none!important;
    top:auto!important;bottom:58px!important;left:15px!important;right:15px!important;padding:0!important;border-radius:0}
  .kr-row .kr-card:has(.kr-num) .kr-info{left:calc(clamp(70px,5vw,110px) + 15px)!important}
  .kr-go{width:100%;box-sizing:border-box;height:42px;font-size:14.5px;box-shadow:0 8px 20px rgba(20,92,99,.38),0 0 0 2px rgba(255,255,255,.9)}
}
/* sharper, truer colour on every thumbnail */
.kr-art{filter:saturate(1.14) contrast(1.05)}

.kr-head{position:relative;z-index:7}

/* two-digit ranks (10) shrink to fit the number gutter instead of sliding under the cover */
.kr-num.w2{scale:.58;transform-origin:0 100%;letter-spacing:-.06em}