/* Compact navigation is an enhancement: the original links remain if script fails. */
.mobile-menu-toggle,.mobile-menu-panel,.mobile-language-value {display:none;}
.mobile-menu-panel[hidden] {display:none!important;}
@media(max-width:1024px) {
  /* It leaves with the page, then slides back on a small upward scroll. */
  .storybook .topbar.mobile-scroll-header {transform:translate3d(0,var(--mobile-header-offset,0px),0);transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;}
  .storybook .topbar.mobile-scroll-header.header-revealing {transition:transform .24s cubic-bezier(.2,.7,.2,1),background .2s ease,border-color .2s ease,box-shadow .2s ease;}
  .storybook .topbar.mobile-scroll-header.header-out-of-view {box-shadow:none;pointer-events:none;}
  .storybook .topbar.has-mobile-navigation .header-inner {display:flex;flex-wrap:nowrap;align-items:center;gap:8px;width:calc(100% - 24px);min-height:62px;padding-block:6px;}
  .storybook .topbar.has-mobile-navigation .desktop-navigation {display:none!important;}
  .storybook .topbar.has-mobile-navigation .compact-brand {display:block!important;flex:none;width:100px;height:auto;opacity:1!important;visibility:visible!important;margin:0;transform:none;}
  .storybook .topbar.has-mobile-navigation .compact-brand img {display:block;width:100%;height:auto;max-height:48px;object-fit:contain;}
  .storybook .topbar.has-mobile-navigation .header-tools {display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0;flex:1;margin-left:auto;grid-column:auto;grid-row:auto;}
  .storybook .topbar .mobile-menu-toggle {display:flex;flex:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;margin:0;padding:10px;border:1px solid #f0cc9670;border-radius:12px;background:#332238c9;color:#fff0d0;box-shadow:inset 0 1px 0 #ffe7b325;cursor:pointer;}
  .mobile-menu-toggle>span {display:block;width:21px;height:2px;border-radius:1px;background:currentColor;transition:transform .18s,opacity .18s;}
  .mobile-menu-toggle[aria-expanded=true]>span:nth-child(1) {transform:translateY(7px) rotate(45deg);}
  .mobile-menu-toggle[aria-expanded=true]>span:nth-child(2) {opacity:0;}
  .mobile-menu-toggle[aria-expanded=true]>span:nth-child(3) {transform:translateY(-7px) rotate(-45deg);}
  .mobile-menu-toggle:focus-visible,.mobile-menu-panel a:focus-visible {outline:3px solid #ffe19a;outline-offset:3px;}
  .storybook .topbar .mobile-menu-panel {display:block;position:absolute;z-index:60;top:calc(100% + 4px);left:12px;right:12px;padding:12px;border:1px solid #e8c286a1;border-radius:17px;background:linear-gradient(125deg,#422d47,#261a30);box-shadow:0 16px 40px #0e071b80,inset 0 1px 0 #f5d8a324;max-height:calc(100dvh - var(--header-height,62px) - 24px);overflow:auto;overscroll-behavior:contain;}
  .mobile-menu-links {display:grid;grid-template-columns:1fr;gap:2px;}
  .storybook .mobile-menu-links a {display:flex!important;align-items:center;min-height:44px;padding:9px 14px;border-radius:9px;color:#fff1d6;font:600 15px/1.35 var(--font);text-decoration:none;overflow-wrap:anywhere;}
  .storybook .mobile-menu-links a:hover,.storybook .mobile-menu-links a:focus-visible {background:#d9b47420;color:#ffe4ac;}
  .mobile-menu-open {overflow:hidden;}
  .storybook .topbar.has-mobile-navigation .language-picker {position:relative;flex:none;display:block;width:64px;min-height:44px;margin:0;}
  .storybook .topbar.has-mobile-navigation .language-picker select {position:absolute;inset:0;z-index:2;opacity:0;width:100%;height:100%;min-width:0;min-height:44px;padding:0;cursor:pointer;}
  .storybook .topbar.has-mobile-navigation .mobile-language-value {display:flex;align-items:center;justify-content:center;width:64px;min-height:44px;padding:8px 23px 8px 10px;border:1px solid #e5ccba75;border-radius:999px;background:#2d1f35a8;color:#fff4df;font:600 13px/1 var(--font);}
  .storybook .topbar.has-mobile-navigation .language-picker::after {right:12px;top:17px;pointer-events:none;}
  .storybook .topbar.has-mobile-navigation .language-picker:focus-within {outline:3px solid #ffe19a;outline-offset:3px;border-radius:999px;}
  .storybook .topbar.has-mobile-navigation .login-link.button-emerald {min-width:0;max-width:150px;min-height:44px;padding:7px 11px;gap:6px;font-size:13px;}
  .storybook .topbar.has-mobile-navigation .login-link [data-account-label] {max-width:110px;}
  .storybook .story-reel {grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 18px;}
  .storybook .story-card {width:100%;max-width:none;min-width:0;margin:0;}
  .storybook .story-card .story-card-heading {padding:0 6% 7.5%;font-size:clamp(14px,9.4cqi,26px);line-height:1.1;}
  .storybook .story-badge {min-height:21px;padding:2px 7px;font-size:clamp(9px,6cqi,12px);border-width:1px;}
  .storybook .story-card .story-card-action {min-height:54px;height:54px;margin-top:11px;padding:7px 7px;gap:5px;border-width:2px;font-size:clamp(14px,8.8cqi,16px);line-height:1.2;}
  .storybook .parents-grid>* {min-width:0;max-width:100%;}
  .storybook .parent-benefits {min-width:0;grid-template-columns:minmax(0,1fr);}
  .storybook .parent-benefits article {min-width:0;}
  .storybook .parent-benefits h3,.storybook .parent-benefits p {overflow-wrap:anywhere;}
}
@media(min-width:581px) and (max-width:1024px) {
  .mobile-menu-links {grid-template-columns:repeat(2,minmax(0,1fr));}
  .storybook .topbar.has-mobile-navigation .compact-brand {width:112px;}
}
@media(max-width:580px) {
  .storybook .parents-grid {grid-template-columns:minmax(0,1fr);}
  .storybook .topbar.has-mobile-navigation .compact-brand {width:90px;}
  .storybook .topbar.has-mobile-navigation .login-link.button-emerald {max-width:118px;padding-inline:9px;font-size:12px;gap:5px;}
  .storybook .topbar.has-mobile-navigation .login-link [data-account-label] {max-width:78px;}
  .storybook .story-reel {gap:30px 12px;}
  .storybook .story-section .story-reel.shell {width:calc(100% - 28px);}
}
@media(max-width:350px) {
  .storybook .topbar.has-mobile-navigation .header-inner {gap:6px;}
  .storybook .topbar.has-mobile-navigation .compact-brand {width:64px;}
  .storybook .topbar.has-mobile-navigation .login-link.button-emerald {max-width:102px;padding-inline:7px;}
  .storybook .topbar.has-mobile-navigation .login-link [data-account-label] {max-width:62px;}
  .storybook .story-card .story-card-heading {font-size:14px;}
}
@media(max-width:1024px) and (orientation:landscape) and (max-height:520px) {
  .storybook .topbar.has-mobile-navigation .header-inner {min-height:52px;padding-block:3px;}
  .storybook .topbar.has-mobile-navigation .compact-brand {width:88px;}
  .storybook .topbar .mobile-menu-panel {padding:8px;}
  .mobile-menu-links {grid-template-columns:repeat(3,minmax(0,1fr));gap:0 8px;}
  .storybook .mobile-menu-links a {padding-block:7px;}
}
@media(max-width:1024px) and (orientation:landscape) and (max-height:360px) {
  .mobile-menu-links {grid-template-columns:repeat(3,minmax(0,1fr));}
  .storybook .mobile-menu-links a {font-size:13px;padding-inline:9px;}
}
/* The book fills a portrait screen before the explanation, without cropping its central cast. */
@media(max-width:1024px) and (orientation:portrait) {
  .storybook #how {display:flex;flex-direction:column;padding-top:0;}
  .storybook #how>.learning-book-stage {order:0;width:100%;height:clamp(362px,113vw,1200px);margin:0 0 34px;overflow:hidden;}
  .storybook #how>.learning-book-stage img {width:100%;height:100%;object-fit:cover;object-position:50% 50%;}
  .storybook #how>.shell:first-child {order:1;}
  .storybook #how>.shell:last-child {order:2;}
  .storybook #how .chapter-heading {padding-top:0;margin-top:0;}
  .storybook #how .learning-plaques {margin-top:22px;}
  .storybook .closing-copy .button.button-emerald {display:flex;width:100%;}
}
@media(prefers-reduced-motion:reduce) {.mobile-menu-toggle>span,.storybook .topbar.mobile-scroll-header,.storybook .topbar.mobile-scroll-header.header-revealing {transition:none;}}