/* Portrait storybooks with one live, full-book action. The title and inset CTA
   remain translated text; the existing textured frame is extended with 9-slice. */
.storybook .story-reel {gap:46px 30px;align-items:start;}
.storybook .story-card {container-type:inline-size;display:flex;flex-direction:column;width:100%;max-width:none;min-width:0;padding:0;border:0;border-radius:0;overflow:visible;background:none;box-shadow:none;}
.storybook .story-book {position:relative;width:100%;aspect-ratio:2/3;isolation:isolate;filter:drop-shadow(0 9px 12px #10091670);--book-cta-height:clamp(44px,14cqi,60px);}
.storybook .story-book::after {content:'';position:absolute;inset:-2.7cqi -2.8cqi -3.8cqi -2.9cqi;z-index:4;pointer-events:none;border-style:solid;border-color:transparent;border-width:18.17cqi 14.86cqi 23.12cqi 14.86cqi;border-image-source:url('/art/storybook/book-frame-v14.webp');border-image-slice:220 180 280 180;border-image-repeat:stretch;}
.storybook .story-pages,.storybook .story-spine {display:none;}
.storybook .story-cover {position:absolute;inset:3.2cqi 4.3cqi 12.4cqi 10.2cqi;overflow:hidden;border-radius:5.5cqi;background:linear-gradient(180deg,#553a38,#2d1929 82%);}
.storybook .story-art {position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;margin:0;padding:0;border:0;border-radius:0;background:#392631;box-shadow:none;text-align:initial;}
.storybook .story-art::after {content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 30%,#21112308 43%,#22132642 57%,#241427cf 76%,#241427 97%);}
.storybook .story-art img {display:block;width:100%;height:88%;object-fit:cover;object-position:var(--cover-x,50%) var(--cover-y,50%);mask-image:linear-gradient(#000 75%,transparent 100%);transition:transform .3s ease;}
.storybook .story-book:hover .story-art img {transform:scale(1.018);}
.storybook .story-card[data-story-card=toby],.storybook .story-card[data-story-card=kip],.storybook .story-card[data-story-card=bridge],.storybook .story-card[data-story-card=lake],.storybook .story-card[data-story-card=rainbow],.storybook .story-card[data-story-card=lighthouse],.storybook .story-card[data-story-card=boats] {--cover-x:50%;--cover-y:50%;}
.storybook .story-card[data-story-card=dragon],.storybook .story-card[data-story-card=windmill] {--cover-x:50%;--cover-y:0%;}
.storybook .story-card[data-story-card=dragon] .story-art img,.storybook .story-card[data-story-card=windmill] .story-art img {height:90%;}
.storybook .story-card[data-story-card=rainbow] .story-art img {height:84%;}
.storybook .story-card[data-story-card=windmill] {--cover-y:15%;}
.storybook .story-reel .story-card .story-card-heading {position:absolute;z-index:2;left:0;right:0;bottom:calc(6.6cqi + var(--book-cta-height) + 4.5cqi);pointer-events:none;margin:0;padding:0 5%;font:700 clamp(14px,7.4cqi,33px)/1.12 var(--heading-font);letter-spacing:-.025em;text-align:center;color:#fffdf6;text-shadow:0 2px 2px #110a24c9,0 3px 12px #160b23b3;}
.storybook .story-card .story-title {display:block;width:100%;min-height:0;margin:0;padding:0;border:0;color:inherit;background:none;font:inherit;text-align:center;text-wrap:balance;overflow-wrap:normal;hyphens:manual;}
.storybook .story-badge {z-index:2;top:4.8%;right:4.6%;left:auto;bottom:auto;display:inline-flex;align-items:center;justify-content:center;max-width:90%;min-height:28px;padding:4px 12px;border:1.5px solid #f1bf69;border-radius:999px;background:linear-gradient(#df713c,#b24421);color:#fff5db;font:700 clamp(11px,4cqi,16px)/1.3 var(--font);letter-spacing:0;box-shadow:inset 0 1px 1px #fff4ba80,0 2px 0 #793d22,0 3px 8px #1b0c2760;white-space:nowrap;}
.storybook .story-badge.free,.storybook .story-badge.owned {background:linear-gradient(#337b48,#155b31);border-color:#efc26f;color:#fff3d1;}
/* One primary action style across the landing page and catalogue. */
.storybook .button.button-emerald,.storybook .story-card .story-card-action {display:inline-flex;flex:none;align-items:center;justify-content:center;gap:10px;max-width:100%;height:auto;min-height:60px;padding:14px 28px;border:3px solid transparent;border-radius:999px;background:radial-gradient(ellipse at 26% 0%,#d3ffa842,transparent 65%) padding-box,linear-gradient(180deg,#4b9447 0%,#2a7736 22%,#17662f 52%,#165a2a 82%,#11451f 100%) padding-box,linear-gradient(180deg,#fff0b2,#efb34d 35%,#a65c1d 65%,#fdd46c) border-box;box-shadow:inset 0 2px 2px #fff4b4a3,inset 0 -3px 1px #99c57877,0 0 0 1px #81451e,0 4px 0 #7b421f,0 7px 15px #120a2370;color:#fff4d5;font:700 18px/1.35 var(--font);letter-spacing:0;text-align:center;text-shadow:0 1px 1px #10361f80;transition:filter .18s ease,transform .18s ease;}
.storybook .story-reel .story-card .story-card-action {position:absolute;z-index:2;left:5.5%;right:5.5%;bottom:6.6cqi;display:flex;width:auto;min-height:var(--book-cta-height);height:var(--book-cta-height);margin:0;padding:8px 8px;border-width:clamp(2px,.75cqi,3px);gap:0;font-size:clamp(11.5px,4.5cqi,18px);line-height:1.15;white-space:nowrap;pointer-events:none;}
.storybook .story-book-hitarea {position:absolute;z-index:6;inset:0;display:block;width:100%;height:100%;padding:0;margin:0;border:0;border-radius:6cqi;background:transparent;color:inherit;cursor:pointer;box-shadow:none;text-decoration:none;}
.storybook .story-book-hitarea:hover,.storybook .story-book-hitarea:active {background:transparent;box-shadow:none;transform:none;}
.storybook .story-book-hitarea:focus-visible {outline:3px solid #ffe1a2;outline-offset:6px;}
.storybook .story-book:hover .story-card-action {filter:brightness(1.1);}
.storybook .story-book:active .story-card-action {filter:brightness(.95);}
.storybook .button.button-emerald:hover,.storybook .story-card .story-card-action:hover {filter:brightness(1.1);transform:translateY(-1px);color:#fff8e5;}
.storybook .button.button-emerald:active,.storybook .story-card .story-card-action:active {transform:translateY(2px);}
.storybook .button.button-emerald:focus-visible {outline:3px solid #fff0a5;outline-offset:6px;}
/* The sticky header uses the same control in a compact navigation size. */
.storybook .topbar .login-link.button-emerald {min-height:42px;padding:7px 17px;border:3px solid transparent;font:700 14px/1.35 var(--font);gap:8px;}
.storybook .story-art:focus-visible {outline:3px solid #fff0a5;outline-offset:-7px;}
.storybook .story-book:has(.story-art:focus-visible) {outline:3px solid #ffe1a2;outline-offset:5px;border-radius:7%;}
.storybook .story-card-action:focus-visible {outline:3px solid #fff0a5;outline-offset:6px;}
@media(max-width:900px) {.storybook .story-reel {gap:40px 25px;}}
@media(max-width:580px) {.storybook .story-reel {gap:32px 18px;}.storybook .story-card {width:100%;max-width:none;margin-inline:auto;}.storybook .story-reel .story-card .story-card-heading {font-size:clamp(14px,7.4cqi,23px);}.storybook .story-reel .story-card .story-card-action {min-height:var(--book-cta-height);height:var(--book-cta-height);margin:0;padding:6px 3px;font-size:clamp(11.5px,4.5cqi,16px);}.storybook .story-badge {min-height:21px;padding:3px 7px;font-size:clamp(9px,4cqi,12px);}}
@media(max-width:580px) {.storybook .topbar .login-link.button-emerald {padding-inline:10px;font-size:12px;gap:6px;}}
@media(max-width:350px) {
  .storybook .story-languages {gap:5px;}
  .storybook .story-languages .language-caption {font-size:10px;}
  .storybook .language-badges {gap:3px;}
  .storybook .language-badges li {font-size:9px;padding-inline:4px;gap:3px;}
}
@media(prefers-reduced-motion:reduce) {.storybook .story-art img,.storybook .button.button-emerald,.storybook .story-card .story-card-action {transition:none;}.storybook .story-book:hover .story-art img,.storybook .button.button-emerald:hover,.storybook .button.button-emerald:active,.storybook .story-card .story-card-action:hover,.storybook .story-card .story-card-action:active {transform:none;}}