/* Stories · wondermaths.app — approved mockups 02.10.2026. stories-fix 20261002
   White base, navy #174A7E, soft turquoise #D2F9F6, Poppins Black headings,
   Fredoka body. Every rule is scoped to .st-* / .stories-page so the shared
   portal chrome (assets/portal-chrome.css, loaded last) is never touched. */

@font-face{font-family:"Poppins Black";src:url(../poppins-black-latin.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins Black";src:url(../poppins-black-latin-ext.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:Fredoka;src:url(../portal-fredoka-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Fredoka;src:url(../portal-fredoka-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

.stories-page{--st-navy:#174A7E;--st-navy-dark:#123A63;--st-mint:#D2F9F6;--st-ink:#17324F;--st-quiet:#4A6484;--st-line:rgba(23,74,126,.16);--st-gut:clamp(18px,4vw,48px);margin:0;background:#fff!important;color:var(--st-ink)!important;font-family:Fredoka,system-ui,"Segoe UI",sans-serif!important;font-size:17px;line-height:1.6}
.stories-page *,.stories-page *::before,.stories-page *::after{box-sizing:border-box}
.stories-page img{max-width:100%}
.stories-page :is(a,button,input,select,summary):focus-visible{outline:3px solid var(--st-navy);outline-offset:3px;border-radius:8px}
.stories-page .sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.st-wrap{width:100%;max-width:1400px;margin:0 auto;padding:0 var(--st-gut)}
.stories-page h1,.stories-page h2,.stories-page h3{font-family:"Poppins Black",Poppins,system-ui,sans-serif;font-weight:900;line-height:1.06;letter-spacing:-.01em;color:var(--st-navy);margin:0}
.stories-page h1{font-size:clamp(52px,7.4vw,90px)}
.stories-page h2{font-size:clamp(32px,4.4vw,56px)}
.stories-page h3{font-size:clamp(19px,2vw,23px);line-height:1.2}
.stories-page p{margin:0}

/* ---------- buttons ---------- */
.st-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 30px;border-radius:999px;border:2px solid transparent;font-family:Fredoka,system-ui,"Segoe UI",sans-serif;font-size:19px;font-weight:600;line-height:1;text-decoration:none;cursor:pointer;background:#fff;color:var(--st-navy)}
.st-btn-primary{background:var(--st-navy);color:#fff}
.st-btn-primary:hover{background:var(--st-navy-dark)}
.st-btn-ghost{background:#fff;border-color:var(--st-navy);color:var(--st-navy)}
.st-btn-ghost:hover{background:var(--st-mint)}
.st-link{color:var(--st-navy);font-weight:600;text-underline-offset:4px}

/* ---------- hero ---------- */
.st-hero{padding:clamp(12px,2.2vw,30px) 0 clamp(38px,5.4vw,68px);background:#fff}
.st-hero-inner{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:clamp(18px,2.6vw,44px);align-items:center;min-height:clamp(460px,46vw,660px)}
.st-hero-copy{max-width:520px}
.st-hero-tagline{margin-top:16px;font-size:clamp(20px,2.2vw,27px);line-height:1.3;color:var(--st-navy);max-width:420px}
.st-hero-actions{display:flex;flex-wrap:wrap;gap:16px 18px;margin-top:28px;align-items:flex-start}
.st-hero-actions>.st-btn{flex:0 0 auto}
.st-hero-sample{flex:1 1 240px;min-width:230px}
.st-hero-art{position:relative;min-height:clamp(320px,44vw,600px)}
.st-hero-muva{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:right bottom}

/* ---------- open book (real reader pages) ---------- */
.st-book{display:grid;grid-template-columns:1fr 1fr;position:relative;border-radius:12px;background:#fbf7ef;box-shadow:0 26px 50px rgba(23,74,126,.26),0 2px 0 rgba(23,74,126,.12);transform-origin:50% 100%}
.st-book::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:4.5%;transform:translateX(-50%);z-index:3;pointer-events:none;background:linear-gradient(90deg,rgba(23,74,126,.55),rgba(23,74,126,.05) 45%,rgba(23,74,126,.55))}
.st-book::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(23,74,126,.18)}
.st-book-page{overflow:hidden;position:relative;margin:0}
.st-book-page:first-child{border-radius:12px 0 0 12px}
.st-book-page:last-child{border-radius:0 12px 12px 0}
.st-book-page img{display:block;width:100%;height:auto}
.st-book-hero{position:absolute;left:0;bottom:1%;width:min(98%,700px);z-index:4;transform:perspective(1500px) rotateX(5deg)}

/* ---------- featured ---------- */
.st-featured{padding:clamp(48px,7vw,96px) 0;background:#fff}
.st-featured-inner{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(26px,4vw,64px);align-items:center}
.st-featured-book{width:100%}
.st-featured-copy{max-width:430px}
.st-label{color:var(--st-navy);font-size:19px;font-weight:600;opacity:.85}
.st-featured-copy h2{margin-top:10px}
.st-question{margin-top:16px;font-size:clamp(20px,2.1vw,25px);line-height:1.35;color:var(--st-navy)}
.st-age{margin-top:14px;font-size:19px;font-weight:600;color:var(--st-quiet)}
.st-featured-actions{margin-top:26px;display:grid;gap:18px;justify-items:start}

/* ---------- sample players ---------- */
.st-sample{display:grid;gap:10px}
.st-sample-row{display:flex;align-items:center;gap:14px}
.st-play{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;border:0;background:var(--st-navy);color:#fff;cursor:pointer}
.st-play:hover{background:var(--st-navy-dark)}
.st-play-icon{display:inline-block;width:0;height:0;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff;margin-left:4px}
.st-play.is-playing .st-play-icon,.st-sample-toggle.is-playing .st-play-icon{width:16px;height:20px;border:0;margin-left:0;background:linear-gradient(90deg,#fff 0 5px,transparent 5px 11px,#fff 11px 16px)}
.st-sample-toggle{min-height:52px;background:#fff;border-color:var(--st-navy);color:var(--st-navy)}
.st-sample-toggle:hover{background:var(--st-mint)}
.st-sample-toggle .st-play-icon{border-color:transparent transparent transparent var(--st-navy)}
.st-sample-toggle.is-playing .st-play-icon{background:linear-gradient(90deg,var(--st-navy) 0 5px,transparent 5px 11px,var(--st-navy) 11px 16px)}
.st-sample-label{font-weight:600}
.st-progress{display:block;width:100%;height:10px;border:0;border-radius:999px;overflow:hidden;background:#E4EDF6;appearance:none}
.st-progress::-webkit-progress-bar{background:#E4EDF6;border-radius:999px}
.st-progress::-webkit-progress-value{background:var(--st-navy);border-radius:999px}
.st-progress::-moz-progress-bar{background:var(--st-navy);border-radius:999px}
.st-sample-note{font-size:15px;color:var(--st-quiet)}
.st-sample-error{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:16px;color:#8A2B2B}
.st-sample-error[hidden]{display:none}
.st-retry{min-height:44px;padding:0 16px;border-radius:999px;border:2px solid #8A2B2B;background:#fff;color:#8A2B2B;font-family:inherit;font-size:16px;font-weight:600;cursor:pointer}

/* ---------- catalog ---------- */
.st-catalog{padding:clamp(48px,7vw,96px) 0 clamp(40px,6vw,80px);background:#fff}
.st-catalog h2{margin-bottom:26px}
.st-chips{display:flex;flex-wrap:wrap;gap:14px}
.st-chip{min-height:52px;padding:0 28px;border-radius:999px;border:2px solid var(--st-navy);background:#fff;color:var(--st-navy);font-family:Fredoka,system-ui,sans-serif;font-size:19px;font-weight:600;cursor:pointer}
.st-chip:hover{background:var(--st-mint)}
.st-chip[aria-pressed="true"]{background:var(--st-navy);color:#fff}
.st-filters{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,280px) auto;gap:16px;align-items:end;margin-top:22px}
.st-field{display:grid;gap:6px;font-size:16px;font-weight:600;color:var(--st-navy)}
.st-search-input,.st-world-select{width:100%;min-height:56px;padding:0 18px;border:2px solid var(--st-line);border-radius:14px;background:#fff;font-family:Fredoka,system-ui,sans-serif;font-size:18px;color:var(--st-ink)}
.st-search-input{border-radius:999px}
.st-clear{min-height:56px;padding:0 24px;white-space:nowrap}
.st-clear[hidden]{display:none}
.st-count{margin-top:22px;font-size:17px;color:var(--st-quiet)}

/* ---------- story frames: nine-slice so the white hole stays bigger than the art ---------- */
.st-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,34px);margin-top:24px;list-style:none;padding:0;align-items:stretch}
.st-card{position:relative;display:flex;flex-direction:column;aspect-ratio:auto;background:#fff;padding:2px 1px 0;border-style:solid;border-width:clamp(30px,3.8vw,52px);border-image-slice:15.6% 20.3% 18.1% 19%;border-image-width:1;border-image-repeat:stretch;border-image-outset:0}
.st-card[hidden]{display:none!important}
.st-card-frame-magic{border-image-source:url(frame-magic.webp)}
.st-card-frame-forest{border-image-source:url(frame-forest.webp)}
.st-card-frame-sky{border-image-source:url(frame-sky.webp)}
.st-cover{flex:0 0 auto;display:block;border-radius:8px;overflow:hidden;box-shadow:0 8px 18px rgba(23,74,126,.22)}
.st-cover img{display:block;width:100%;height:auto}
.st-card-body{display:flex;flex-direction:column;gap:4px;flex:1 1 auto;min-height:auto;padding:6px 2px 0}
.stories-page .st-card-title{font-size:clamp(18px,1.6vw,23px);line-height:1.18;color:var(--st-navy);overflow-wrap:break-word}
.st-card-meta,.st-card-formats{font-size:15px;line-height:1.3;color:var(--st-quiet)}
.st-card-meta{font-weight:600}
.st-card-actions{margin-top:auto;padding-top:8px;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.st-action-group{display:inline-flex;align-items:center;gap:6px;min-width:0}
.st-action-icon{width:clamp(46px,3.9vw,56px);height:auto;flex:0 0 auto}
.st-action{min-height:44px;padding:0 14px;border-radius:999px;border:0;background:var(--st-navy);color:#fff;font-family:Fredoka,system-ui,sans-serif;font-size:16px;font-weight:600;line-height:1;text-decoration:none;display:inline-flex;align-items:center;cursor:pointer;white-space:nowrap}
.st-action:hover{background:var(--st-navy-dark)}

/* audio-only cards: the real headphones art, never another book cover */
.st-card-audio .st-cover{flex:1 1 auto;display:grid;place-items:center;background:transparent;box-shadow:none;border-radius:0}
.st-card-audio .st-cover img{width:min(78%,190px);height:auto;filter:drop-shadow(0 10px 18px rgba(23,74,126,.22))}

.st-empty{margin-top:26px;font-size:18px;color:var(--st-navy)}
.st-empty[hidden]{display:none}
.st-more{margin-top:34px}
.st-more[hidden]{display:none}

/* ---------- closing + wave ---------- */
.st-closing{padding:clamp(48px,7vw,96px) 0 0;text-align:center;background:#fff}
.st-closing-inner{max-width:820px;margin:0 auto}
.st-closing p{margin-top:16px;font-size:clamp(18px,2vw,22px);color:var(--st-quiet)}
.st-closing .st-link{display:inline-block;margin-top:22px;font-size:19px}
.st-wave{display:block;width:100%;height:clamp(48px,7vw,92px);margin-top:clamp(34px,5vw,60px);fill:#174A7E}

/* ---------- audio dialog ---------- */
.st-dialog{width:min(520px,92vw);padding:24px;border:0;border-radius:22px;box-shadow:0 30px 70px rgba(23,74,126,.35);background:#fff;color:var(--st-ink);font-family:Fredoka,system-ui,sans-serif}
.st-dialog::backdrop{background:rgba(12,38,63,.45)}
.st-dialog h2{font-size:clamp(22px,3vw,28px)}
.st-dialog p{margin-top:8px;color:var(--st-quiet)}
.st-dialog audio{width:100%;margin-top:16px}
.st-dialog .st-sample-error{margin-top:12px}
.st-dialog-actions{margin-top:18px;display:flex;justify-content:flex-end}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .st-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .st-hero-inner{grid-template-columns:minmax(0,1fr);min-height:0}
  .st-hero-copy{max-width:none}
  .st-hero-art{order:2;min-height:clamp(320px,52vw,560px)}
  .st-book-hero{width:min(88%,620px);bottom:0}
  .st-featured-inner{grid-template-columns:minmax(0,1fr)}
  .st-featured-copy{max-width:none}
}
@media (max-width:719px){
  .stories-page{font-size:16px}
  .st-hero{padding-top:10px}
  .st-hero-actions{gap:12px}
  .st-hero-actions>.st-btn{width:100%}
  .st-hero-sample{flex:1 1 100%;width:100%}
  .st-hero-sample .st-sample-toggle{width:100%}
  .st-hero-art{min-height:clamp(250px,60vw,360px)}
  .st-book-hero{width:min(84%,420px)}
  .st-filters{grid-template-columns:minmax(0,1fr)}
  .st-grid{grid-template-columns:minmax(0,1fr)}
  .st-card{max-width:460px;width:100%;margin:0 auto}
  .st-chip{flex:1 1 auto;padding:0 16px;font-size:17px}
  .st-action-icon{width:48px}
  .st-action{padding:0 12px;font-size:15px}
  .st-featured-actions{justify-items:stretch}
  .st-featured-actions .st-btn{width:100%}
}
@media (max-width:420px){
  .stories-page h1{font-size:46px}
  .st-card-actions{gap:8px 10px}
}
@media (max-height:640px) and (min-width:720px){
  .st-hero-inner{min-height:0}
  .st-hero-art{min-height:clamp(260px,32vw,380px)}
}
@media (prefers-reduced-motion:reduce){
  .stories-page *,.stories-page *::before,.stories-page *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}