/* V04: a story-first home, using the approved V03.1 character artwork. */
:root{--story-rose:#e8c9b7;--story-olive:#596a48;--story-soft:#eee6d7}
html{scroll-padding-top:116px}.site-header nav{gap:clamp(16px,2.5vw,38px)}.site-header nav a{min-height:44px;display:flex;flex-direction:column;justify-content:center}.header-tools button{min-height:28px}.story-pill{display:inline-flex;align-items:center;gap:8px;border:1px dashed #64726788;border-radius:99px;padding:6px 13px;font-size:10px;letter-spacing:.5px;background:#f5f0e6c9}.story-pill:before{content:'';width:6px;height:6px;background:#7a8b5f;border-radius:50%}.story-home .hero-logo-friends{min-height:760px;padding-top:12px}.story-home .brand-stage{max-width:650px}.story-home .hero-copy{max-width:760px}.story-home .brand-tagline{font-size:clamp(25px,3.2vw,43px);margin-top:14px;line-height:1.15}.story-home .hero-lead{max-width:500px;margin-top:14px}.hero-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;pointer-events:auto}.hero-actions .secondary{background:#f5f0e6c9}.story-home .hero-family{margin-top:10px}.story-home .hero-note{font-size:10px}.story-strip{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px var(--pad);border-block:1px dashed #64726755;font:400 18px/1.35 Jua,sans-serif;background:#dce6d366}.story-strip span:last-child{font:11px/1.5 -apple-system,BlinkMacSystemFont,Arial,sans-serif;color:var(--muted)}.story-feature{padding-bottom:55px}.story-feature .section-heading h2{max-width:660px}.story-feature .section-heading>p{max-width:320px}.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.story-card{min-width:0;display:block}.story-cover{height:340px;border-radius:22px;overflow:hidden;position:relative;isolation:isolate;border:1px solid #293d3320;transition:transform .3s}.story-card:hover .story-cover{transform:translateY(-5px)}.cover-read{background:#e8c9b7;padding:30px;display:grid;grid-template-columns:1.1fr .9fr;grid-template-rows:1fr 1fr;gap:9px;transform:rotate(-1deg)}.cover-read .comic-panel{background:#f8f3e8;border:1px solid #293d3344;overflow:hidden;display:grid;place-items:center;position:relative}.comic-panel:first-of-type{grid-row:span 2}.comic-panel img{width:100%;height:100%;object-fit:contain;max-height:275px;padding:8px}.comic-panel:nth-of-type(2) img{max-height:124px;transform:rotate(8deg)}.comic-panel:nth-of-type(3) img{max-height:124px;transform:rotate(-8deg)}.cover-watch{background:#d9e1cb url('/media/bot/interior_day.jpg') center/cover}.cover-watch:before{content:'';position:absolute;inset:0;background:linear-gradient(#f2efde99,#52614642)}.film-friends{position:absolute;inset:60px 20px 30px;display:flex;align-items:end;justify-content:center;gap:2px}.film-friends img{height:100%;width:35%;object-fit:contain;filter:drop-shadow(0 12px 8px #293d3326)}.film-friends img:nth-child(2){height:88%;transform:rotate(5deg)}.cover-caption{position:absolute;left:18px;top:16px;border-radius:99px;padding:6px 11px;background:#f9f5e9ed;font-size:9px;font-weight:700;letter-spacing:1.8px;z-index:3}.play-outline{position:absolute;right:20px;bottom:18px;display:grid;place-items:center;border:1px solid #f5f0e6b3;color:#fff;width:44px;height:44px;border-radius:50%;background:#293d3388;font-size:16px}.story-card-meta{display:flex;justify-content:space-between;gap:20px;padding:22px 2px 8px;align-items:start}.story-card h3{font:400 28px/1.2 Jua,sans-serif;letter-spacing:-.3px}.story-card p{font-size:12px;color:var(--muted);max-width:430px;margin:10px 0 0}.story-card-meta>span{border-radius:99px;padding:4px 11px;white-space:nowrap;border:1px dashed #64726766;font-size:10px}.story-card-link{display:inline-flex;gap:22px;align-items:center;font-size:12px;border-bottom:1px solid #64726788;padding-bottom:4px;margin-top:16px}.story-note{display:flex;gap:25px;align-items:center;margin-top:35px;border-top:1px dashed #64726766;padding-top:20px;font-size:11px;color:var(--muted)}.story-note>span{font:400 28px/1 Jua,sans-serif;white-space:nowrap;color:var(--ink)}.story-paths{padding-top:20px}.story-paths .product-path{min-height:310px}.story-paths .section-heading>p{max-width:340px}.channel-section{margin:0 var(--pad) 80px;padding:38px 40px;background:#e5deec;border:1px dashed #84738b77;border-radius:22px;display:flex;align-items:center;gap:35px;justify-content:space-between}.channel-section h2{font-size:clamp(25px,3vw,38px);margin:10px 0}.channel-section p{font-size:13px;max-width:550px;color:var(--muted)}.channel-section>img{width:140px;height:150px;object-fit:contain;transform:rotate(6deg)}.channel-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}.channel-links:empty{display:none}.channel-links a{font-size:12px;text-decoration:underline;text-underline-offset:5px}.story-intro{padding-top:65px;padding-bottom:45px;position:relative;isolation:isolate}.story-intro:before{content:'';position:absolute;inset:0 0 -10px;background:radial-gradient(ellipse at 85% 100%,#dce6d3,transparent 55%);z-index:-1}.story-intro h1{font:400 clamp(44px,6vw,80px)/1.1 Jua,sans-serif;letter-spacing:-1.2px;max-width:1000px;margin:20px 0}.story-intro>p:not(.eyebrow){font-size:15px;max-width:650px;color:var(--muted)}.story-intro .story-pill{margin-top:24px}.story-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;border-bottom:1px dashed #64726755;padding-bottom:22px;margin-bottom:32px}.story-filters button{padding:10px 23px;border:1px solid #293d3333;border-radius:99px;font-size:12px;background:transparent;min-height:44px}.story-filters button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}.story-filters>p{font-size:11px;margin-left:auto;color:var(--muted)}.story-library{padding-top:5px}.story-card[hidden]{display:none}.library-empty{padding:60px 0;font-size:14px}.story-breadcrumb{display:inline-flex;gap:15px;font-size:12px;color:var(--muted);margin-bottom:24px}.episode-layout{padding-top:40px}.episode-head{max-width:900px;margin:auto;text-align:center}.episode-head h1{font:400 clamp(37px,5vw,65px)/1.15 Jua,sans-serif;margin:20px 0;letter-spacing:-1px}.episode-head>p:not(.eyebrow){color:var(--muted);font-size:14px;max-width:600px;margin:0 auto 20px}.episode-formats{display:flex;justify-content:center;gap:8px;margin:30px auto 22px}.episode-formats button{padding:12px 25px;border:1px solid var(--line);border-radius:99px;min-height:46px;font-size:13px}.episode-formats button[aria-selected=true]{background:var(--ink);color:var(--paper)}.episode-panel{max-width:1000px;margin:auto}.episode-panel[hidden]{display:none}.production-stage{position:relative;display:grid;place-items:center;min-height:360px;border-radius:22px;overflow:hidden;background:#e9d8c7;padding:35px;text-align:center}.production-stage:before{content:'';position:absolute;inset:16px;border:1px dashed #64726777;border-radius:12px;pointer-events:none}.production-stage>div{position:relative;z-index:1}.production-stage img{width:180px;height:210px;object-fit:contain;margin:auto}.production-stage h2{font-size:32px;margin-top:14px}.production-stage p{font-size:13px;color:#4c5e50;max-width:530px;margin:13px auto 0}.production-stage.stage-film{background:#e1e7d6 url('/media/bot/interior_day.jpg') center/cover}.stage-film:after{content:'';position:absolute;inset:0;background:#f5f0e6d6}.episode-panel-caption{display:flex;justify-content:space-between;gap:25px;font-size:11px;color:var(--muted);padding:18px 2px;border-bottom:1px dashed #64726755}.episode-after{display:flex;justify-content:space-between;gap:20px;max-width:1000px;margin:30px auto 0;font-size:12px}.episode-after a{border-bottom:1px solid #64726799;padding-bottom:4px}.webtoon-panels{max-width:760px;margin:auto;background:#fff}.webtoon-panels img{width:100%;height:auto}.webtoon-panels figure{margin:0}.webtoon-panels figcaption{padding:10px 22px;font-size:12px}.episode-video{display:block;width:100%;max-height:70svh;background:#17251b;border-radius:18px}.site-footer .story-footer-link{margin-top:10px;font-size:12px;text-decoration:underline;text-underline-offset:5px}.no-motion{scroll-behavior:auto}.no-motion .cover-read,.no-motion .story-card:hover .story-cover{transform:none}
@media(min-width:1200px){.story-home .hero-logo-friends{display:grid;grid-template-columns:1fr .9fr;align-content:center;align-items:center;padding:38px var(--pad) 28px;gap:0 30px;min-height:710px;max-height:850px}.story-home .brand-stage{grid-column:1;margin:0;width:100%;max-width:680px}.story-home .hero-copy{grid-column:2;grid-row:1;padding:0;max-width:540px;text-align:left}.story-home .hero-lead{margin-left:0;max-width:380px;font-size:14px}.story-home .brand-tagline{font-size:clamp(36px,3.6vw,56px)}.story-home .brand-tagline>span{display:block}.story-home .hero-actions{justify-content:start}.story-home .hero-family{grid-column:1/-1;height:165px;margin:0 auto;gap:35px}.story-home .hero-friend img{height:160px}.story-home .hero-friend.morang img{height:130px}.story-home .hero-friend.sobok img{height:153px}}
@media(max-width:1000px){.site-header nav{gap:17px}.site-header nav b{font-size:12px}.story-cover{height:270px}.cover-read{padding:25px}.comic-panel img{max-height:218px}.comic-panel:nth-of-type(2) img,.comic-panel:nth-of-type(3) img{max-height:100px}.story-card h3{font-size:25px}}
@media(max-width:760px){html{scroll-padding-top:148px}.site-header{height:auto;min-height:125px;padding:12px 22px;gap:10px;display:grid;grid-template-columns:1fr auto}.site-header .wordmark{font-size:26px}.site-header .wordmark img{width:150px}.site-header nav{grid-column:1/-1;grid-row:2;justify-content:space-between;gap:10px;overflow:visible}.site-header nav b{font-size:11px}.site-header nav small{font-size:8px;margin-top:3px}.header-tools{grid-column:2;grid-row:1;max-width:150px;gap:5px}.header-tools .volume{display:none}.header-tools .motion-toggle{margin-top:-7px;min-height:20px}.story-home .hero-logo-friends{min-height:690px;padding:22px 18px 35px}.story-home .brand-stage{max-width:450px}.story-home .hero-copy{padding:0;max-width:520px}.story-home .brand-tagline{font-size:30px;line-height:1.18;max-width:350px;margin:20px auto 0}.story-home .brand-tagline>span{display:block}.story-home .hero-lead{font-size:12px;max-width:330px;margin-top:12px}.story-home .hero-actions .button{min-height:46px;font-size:11px;gap:20px}.story-home .hero-family{height:110px;margin-top:18px}.story-home .hero-friend img{height:106px}.story-home .hero-friend.morang img{height:87px}.story-home .hero-friend.sobok img{height:102px}.story-strip{align-items:start;padding:20px 24px;flex-direction:column;gap:7px;font-size:19px}.story-strip span:last-child{font-size:10px}.story-grid{grid-template-columns:1fr;gap:38px}.story-feature{padding-top:55px;padding-bottom:40px}.story-feature .section-heading{gap:18px}.story-feature .section-heading h2{font-size:34px;max-width:370px}.story-feature .section-heading>p{max-width:370px}.story-cover{height:300px}.cover-read{padding:28px}.comic-panel img{max-height:245px}.comic-panel:nth-of-type(2) img,.comic-panel:nth-of-type(3) img{max-height:112px}.story-card h3{font-size:27px}.story-card-meta{gap:12px}.story-card-meta>span{font-size:9px;padding-inline:9px}.story-note{gap:18px;align-items:start;font-size:11px;line-height:1.7}.story-note>span{font-size:23px}.story-paths .product-path{min-height:285px}.channel-section{margin-bottom:55px;padding:25px;gap:5px;align-items:start}.channel-section p{font-size:12px}.channel-section>img{width:75px;height:120px}.channel-section h2{font-size:27px}.story-intro{padding-top:45px;padding-bottom:35px}.story-intro h1{font-size:49px;letter-spacing:-1px}.story-intro>p:not(.eyebrow){font-size:13px}.story-filters{gap:7px}.story-filters button{padding:8px 18px}.story-filters>p{flex-basis:100%;margin:6px 0 0}.episode-layout{padding-top:25px}.episode-head h1{font-size:38px}.episode-head>p:not(.eyebrow){font-size:13px}.episode-formats{margin-top:24px}.episode-formats button{padding:10px 24px}.production-stage{padding:26px 22px;min-height:390px}.production-stage img{width:160px;height:180px}.production-stage h2{font-size:27px}.production-stage p{font-size:12px;line-height:1.8}.episode-panel-caption{display:block;font-size:10px;line-height:1.8}.episode-panel-caption span{display:block}.episode-after{font-size:11px;gap:15px}}
@media(max-width:360px){.site-header{padding-inline:16px}.site-header .wordmark img{width:120px}.site-header nav b{font-size:10px}.site-header nav small{font-size:7px}.story-home .hero-logo-friends{min-height:660px}.story-home .brand-tagline{font-size:27px}.story-home .hero-lead{max-width:280px}.story-cover{height:245px}.cover-read{padding:22px}.comic-panel img{max-height:201px}.comic-panel:nth-of-type(2) img,.comic-panel:nth-of-type(3) img{max-height:92px}.story-card-meta{display:block}.story-card-meta>span{display:inline-block;margin-top:11px}.story-note>span{font-size:20px}.channel-section{padding:22px}.channel-section>img{width:50px}.story-intro h1{font-size:42px}.episode-head h1{font-size:33px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.story-card:hover .story-cover,.cover-read{transform:none}}