@font-face { font-family: StoryHand; src: url("fonts/PatrickHand-Regular.ttf") format("truetype"); font-weight: 400 900; font-display: swap; }
/* Flowing layouts for the four alternate themes. Artwork is independent of live UI. */
body.responsive { display: block; place-items: normal; min-height: 100vh; height: auto; overflow: auto; background: var(--field); }
body.responsive img { display: block; }
.responsive a:focus-visible, .responsive button:focus-visible, .responsive summary:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.responsive a { text-decoration: none; }
.theme-header { position: relative; z-index: 5; }
.theme-header-row { display: flex; align-items: center; gap: clamp(16px,2.5vw,48px); width: 100%; }
.theme-header .logo { display: block; flex-shrink: 0; height: auto; }
.theme-header .logo img { width: 100%; height: auto; }
.theme-nav { display: flex; align-items: center; justify-content: center; gap: clamp(16px,2.8vw,54px); margin-left: auto; font-weight: 800; white-space: nowrap; }
.theme-nav a { padding: 12px 0; }
.theme-nav [aria-current=page] { text-decoration: underline; text-underline-offset: 6px; }
.header-cta, .theme-button { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 12px; background: var(--yellow); color: var(--deep); font: inherit; font-weight: 800; padding: .65em 1em; cursor: pointer; box-shadow: 0 4px 7px #002e3330; line-height: 1.15; }
.theme-button img { width: 1.4em; height: 1.4em; object-fit: contain; }
.theme-button.outline { background: transparent; border: 2px solid white; color: white; }
.theme-status { display: inline-block; background: var(--yellow); color: var(--deep); font-weight: 800; line-height: 1.1; border-radius: 9px; padding: .25em .6em; }
.theme-footer { text-align: center; margin-top: 50px; padding: 25px 10px; }
.theme-footer p { font-weight: 800; }
.theme-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; }
.theme-footer a { padding: 8px 0; text-decoration: underline; text-underline-offset: 5px; font-weight: 700; }
/* Storybook: real paper/ribbon slices surround independent art and live chapters. */
body.responsive.storybook { font-family: SunnyCards, Sunny, sans-serif; background: #05747a url('art/storybook/doodle-texture.jpg') repeat; }
.story-header { height: 210px; padding-top: 0; }
.story-header .logo { position: relative; width: 35.703125vw; max-width: 686px; margin: -18px auto -20px; z-index: 2; }
.story-header .theme-nav { position: relative; width: 65%; margin: 0 auto; display: grid; grid-template-columns: 161fr 227fr 188fr 196fr; gap: 16px; height: 46px; z-index: 3; font-size: clamp(22px,2.1875vw,42px); }
.story-ribbons a, .story-start { background: url('art/storybook/ribbon-gold.png') center/100% 100% no-repeat; text-align: center; text-shadow: 0 1px 1px #00373b; }
.story-header .theme-nav a { padding: 3px 12px; }
.story-ribbons a:nth-child(3) { background-image: url('art/storybook/ribbon-olive.png'); }
.story-ribbons a:nth-child(4) { background-image: url('art/storybook/ribbon-orange.png'); }
.story-crayon, .story-cloud-left, .story-cloud-right, .story-header-star { position: absolute; pointer-events: none; }
.story-crayon.green { width: 7.2%; left: 3%; top: 68px; }
.story-crayon.blue { width: 4.5%; left: 11%; top: 28px; }
.story-crayon.red { width: 7%; right: 4%; top: 74px; }
.story-cloud-left { width: 7.8%; left: 18.5%; top: 32px; }
.story-cloud-right { width: 8%; right: 20%; top: 27px; }
.story-header-star { width: 27px; left: 27%; top: 26px; }
.story-home { width: 100%; max-width: 1920px; margin: auto; padding: 0 4%; }
.storybook-book { position: relative; padding: 7px 3.9% 20px; background: #efe8d4 url('art/storybook/paper-texture-soft.png') repeat; border-radius: 4px 8px 4px 4px; box-shadow: 0 0 0 7px #044f52,0 6px 0 12px #064a4c; }
.storybook-book::before, .storybook-book::after { content: ''; position: absolute; pointer-events: none; top: 0; bottom: 0; width: 22px; background: url('art/storybook/book-left-edge.png') center/100% 100%; }
.storybook-book::before { left: -8px; }
.storybook-book::after { right: -8px; background-image: url('art/storybook/book-right-edge.png'); }
.book-hero { display: grid; grid-template-columns: minmax(0,1.72fr) minmax(0,1fr); align-items: stretch; }
.story-scene img { width: 100%; height: auto; }
.story-copy { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #075a60 url('art/storybook/teal-paper-texture.png') repeat; padding: 25px 10px 15px; text-align: center; }
.story-copy h1 { font-size: clamp(30px,3.4375vw,66px); margin: 0 0 14px; line-height: 1.08; font-weight: 700; white-space: nowrap; }
.story-copy p { font-size: clamp(22px,2.1875vw,42px); line-height: 1.1; margin: 0 0 23px; }
.story-start, .story-watch { display: flex; align-items: center; justify-content: center; min-height: 44px; width: 60%; font-size: clamp(21px,2.1875vw,42px); font-weight: 700; }
.story-start { color: #075156; text-shadow: none; margin-bottom: 14px; }
.story-watch { border: 1px solid #f5f1e8; border-radius: 7px; min-height: 45px; }
.chapter-grid { display: grid; grid-template-columns: 238fr 256fr 232fr 276fr; gap: 12px; margin-top: 0; }
.chapter-card { min-width: 0; height: 132px; background: #075b60 url('art/storybook/teal-paper-texture.png') repeat; border: 2px solid #ede4cb; border-radius: 16px; display: flex; flex-direction: column; align-items: center; padding: 7px 12px 8px; text-align: center; }
.chapter-heading { display: block; font-size: 21px; line-height: 1; font-weight: 700; }
.chapter-content { display: flex; width: 100%; flex: 1; min-height: 0; align-items: center; justify-content: space-around; gap: 9px; }
.chapter-content img { width: auto; height: 72px; max-width: 45%; object-fit: contain; }
.chapter-content .theme-status { background: #f5e7bf url('art/storybook/paper-texture-soft.png'); border: 1px solid #6d6654; border-radius: 4px; padding: 6px 8px; font-size: 18px; transform: rotate(-4deg); }
.chapter-4 .chapter-content img { max-width: 100%; height: 78px; }
/* Saturday: independent cast/episode art, live headline, CTA and episode tiles. */
body.responsive.saturday { font-family: SunnyCards, Sunny, sans-serif; background: #008994 url('art/saturday/field-texture.jpg') repeat; }
.saturday .theme-header-row { height: 83px; padding: 0 2.35% 0 3.90625%; background: #003e46; }
.saturday .theme-header .logo { width: 19.53125vw; }
.saturday .theme-nav { font-size: clamp(18px,1.875vw,36px); }
.saturday .header-cta { font-size: clamp(18px,1.875vw,36px); border-radius: 18px; padding: .4em .7em; }
.show-home { max-width: 1920px; margin: auto; padding: 20px 2.35% 24px; }
.show-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; align-items: start; }
.show-title-row { position: relative; min-height: 73px; }
.show-title-row h1 { position: relative; margin: 0 0 0 74px; font-family: Nunito,sans-serif; font-size: clamp(38px,5vw,96px); line-height: 1.15; font-weight: 1000; letter-spacing: -.06em; white-space: nowrap; transform: rotate(-3deg); text-shadow: -3px -3px #003e46,3px -3px #003e46,-3px 3px #003e46,3px 3px #003e46,0 6px #ffd447; z-index: 2; }
.show-tv { position: absolute; left: -12px; top: 0; width: 83px; }
.show-cast { position: relative; }
.show-left .show-cast { width: calc(100% + 30px); margin-left: -30px; margin-top: -5px; }
.show-cast > img { width: 100%; height: auto; }
.show-watch { position: absolute; left: 14.3302%; top: 73.5484%; width: 38.162%; height: 22.5806%; display: flex; align-items: center; justify-content: center; color: #00484e; background: url('art/saturday/watch-button.png') center/100% 100%; font-family: SunnyCards,sans-serif; font-size: clamp(24px,3.125vw,60px); font-weight: 800; line-height: 1; }
.show-video { display: block; margin-top: 14px; border: 6px solid #ffd447; border-radius: 22px; overflow: hidden; box-shadow: 0 5px 8px #003e4650; }
.show-video img { width: 100%; height: auto; }
.latest-title { font-size: clamp(28px,2.65625vw,51px); margin: 0 0 0 12px; line-height: 1.18; }
.episode-grid { display: grid; grid-template-columns: 336fr 330fr 344fr 144fr; gap: 16px; margin-left: 8px; }
.episode-card, .episode-coloring { display: flex; flex-direction: column; min-width: 0; background: #003e46; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 5px #003e4630; }
.episode-card > img { width: 100%; aspect-ratio: 2.5; object-fit: cover; }
.episode-caption { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 39px; padding: 0 12px; font-size: clamp(20px,2.03125vw,39px); line-height: 1.1; }
.episode-caption .theme-status { font-size: .78em; white-space: nowrap; border-radius: 12px; }
.episode-coloring { align-items: center; text-align: center; justify-content: center; padding: 10px; font-size: clamp(18px,1.71875vw,33px); line-height: 1.05; }
.episode-coloring img { width: 58%; max-height: 75px; object-fit: contain; margin-bottom: 8px; }
/* Storefront: repeatable awning, independent cover and truck, live catalog cards. */
body.responsive.storefront { font-family: Nunito,sans-serif; background: #008a97 url('art/storefront/texture.jpg') repeat; }
.storefront .theme-header-row { height: 70px; padding: 0 10% 0 6.25%; background: #004049; gap: 25px; }
.storefront .theme-header .logo { width: 16.5625vw; }
.storefront .theme-nav { font-size: clamp(14px,1.172vw,22.5px); gap: 30px; }
.header-cart { display: block; width: 36px; flex-shrink: 0; margin-left: 10%; }
.header-cart img { width: 100%; height: auto; }
.shop-awning { height: 38px; background: url('art/storefront/awning-tile.png') left top/79px 38px repeat-x; }
.store-home { max-width: 1920px; margin: auto; padding: 0 0 14px; }
.store-hero { display: grid; grid-template-columns: minmax(0,42fr) minmax(0,31fr) minmax(0,27fr); min-height: 350px; }
.store-book { padding-left: 18px; }
.store-book img { width: 100%; height: auto; }
.store-copy { position: relative; padding: 31px 0 0 20px; z-index: 2; }
.store-copy h1 { margin: 0; font-size: clamp(30px,3.90625vw,75px); line-height: 1.12; font-weight: 900; letter-spacing: -.04em; white-space: nowrap; }
.store-copy > p { font-size: clamp(19px,1.875vw,36px); line-height: 1.2; margin: 8px 0 0; font-weight: 800; white-space: nowrap; }
.store-actions { display: flex; gap: 10px; margin-top: 30px; align-items: start; }
.store-actions .theme-button { font-size: clamp(15px,1.40625vw,27px); min-height: 48px; padding: .65em .75em; border-radius: 12px; white-space: nowrap; }
.store-actions .outline { font-family: SunnyCards,sans-serif; font-size: clamp(16px,1.5625vw,30px); min-height: 44px; padding: .5em; border-radius: 8px; }
.store-seal { position: absolute; width: 115px; left: 275px; top: 168px; }
.store-truck { align-self: start; margin-top: 29px; overflow: hidden; }
.store-truck img { width: 100%; height: auto; }
.store-copy .release-note { position: absolute; top: 270px; left: 20px; max-width: 340px; z-index: 4; background: #fff4c9; color: #075156; white-space: normal; border-radius: 12px; padding: 12px 16px; font-size: 17px; box-shadow: 0 3px 12px #003e4660; }
.shop-title { font-size: clamp(24px,2.03125vw,39px); font-weight: 900; margin: 0 0 0 6.1%; line-height: 1.18; }
.product-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.home-products { grid-template-columns: repeat(4,minmax(0,1fr)) minmax(0,.35fr); gap: 10px; margin: 0 5.5% 0 5.7%; }
.product-card, .product-kids { display: flex; flex-direction: column; align-items: center; background: #004f57; border-radius: 12px; min-width: 0; overflow: hidden; text-align: center; }
.product-card { padding: 9px 8px 8px; }
.product-card > img { width: 100%; height: 156px; object-fit: contain; }
.product-card h2 { font-family: SunnyCards,Sunny,sans-serif; font-size: 25px; margin: 0; line-height: 1.05; }
.product-card .theme-status { font-family: SunnyCards,Sunny,sans-serif; margin-top: 2px; font-size: 17px; line-height: 1; padding: 3px 12px; border-radius: 12px; }
.product-kids { align-self: start; justify-content: center; height: 227px; margin-top: -12px; padding: 15px 5px; font-family: SunnyCards,Sunny,sans-serif; }
.product-kids img { width: 60px; height: 60px; object-fit: contain; margin-bottom: 12px; }
.product-kids strong { font-size: 25px; line-height: 1; }
.product-kids > span { font-size: 20px; line-height: 1; margin-top: 20px; }
/* Modern: the original crew silhouette and independent category discs. */
body.responsive.modern { font-family: Nunito,sans-serif; background: #018591 url('art/modern/texture.jpg') repeat; }
.modern .theme-header-row { height: 100px; padding: 0 2.65% 0 2.89%; gap: 28px; }
.modern .theme-header .logo { width: 20.859375vw; }
.modern .theme-nav { font-size: clamp(15px,1.40625vw,27px); gap: 38px; }
.modern .header-cta { border-radius: 30px; font-size: clamp(16px,1.5625vw,30px); padding: .35em .9em; }
.modern-home { max-width: 1920px; margin: auto; padding: 0 3.9% 28px; }
.modern-hero { display: grid; grid-template-columns: minmax(0,41fr) minmax(0,59fr); align-items: center; }
.modern-copy h1 { margin: 0; font-size: clamp(46px,6.875vw,132px); font-weight: 900; line-height: 1; letter-spacing: -.035em; }
.modern-copy p { font-size: clamp(18px,1.875vw,36px); line-height: 1.18; font-weight: 700; margin: 18px 0 27px; }
.modern-copy .theme-button { font-size: clamp(18px,1.71875vw,33px); border-radius: 40px; }
.modern-art { position: relative; margin-top: -20px; }
.modern-art > img:first-child { width: 100%; height: auto; }
.modern-sparkle { position: absolute; width: 30px; right: 9%; top: 6%; }
.modern-links { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 8px 2.9% 0 1.5%; text-align: center; }
.modern-links a { display: flex; flex-direction: column; align-items: center; }
.modern-links img { width: clamp(70px,7.1875vw,138px); height: auto; }
.modern-links strong { margin-top: 4px; font-size: clamp(22px,2.1875vw,42px); line-height: 1.2; font-weight: 900; }
.modern-links span { font-size: clamp(14px,1.25vw,24px); min-height: 1.4em; }
/* Destinations retain the same theme header, palette, source artwork and card language. */
.theme-page { max-width: 1440px; width: 100%; margin: auto; padding: 50px 4% 26px; }
.page-intro { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 36px; }
.page-intro > img { width: 100px; max-height: 120px; object-fit: contain; margin-right: 3%; }
.home-link { text-decoration: underline !important; text-underline-offset: 4px; font-size: 18px; font-weight: 700; }
.responsive.inner .page-intro h1 { font-size: clamp(42px,6vw,84px); line-height: 1.05; margin: 10px 0; font-weight: 900; }
.responsive.inner .page-intro p { font-size: clamp(20px,2.1vw,30px); font-weight: 700; margin: 12px 0 0; }
.page-feature { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 42px; align-items: center; }
.inner-scene { min-width: 0; }
.inner-scene > img { width: 100%; height: auto; border-radius: 24px; }
.inner-scene .show-watch { font-size: clamp(25px,3vw,44px); }
.theme-panel { min-width: 0; background: #004f55; border-radius: 26px; padding: clamp(24px,3vw,42px); box-shadow: 0 5px 0 #003e4620; }
.responsive.inner .theme-panel h2 { font-size: clamp(28px,3vw,42px); line-height: 1.1; margin: 16px 0; }
.responsive.inner .theme-page p { font-size: 21px; line-height: 1.45; }
.theme-panel .theme-button { font-size: 21px; margin-top: 12px; }
.theme-panel .theme-status { font-size: 18px; }
.up-next { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin-top: 32px; }
.book-cover { text-align: center; padding: 26px; background: #ffda58; border-radius: 28px; transform: rotate(-2deg); }
.book-cover > img { width: auto; max-width: 100%; max-height: 510px; margin: auto; box-shadow: 8px 12px 16px #002e3340; }
.coloring-feature { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 60px; }
.theme-panel details { margin: 26px 0; border: 2px solid #ffffff70; border-radius: 14px; padding: 16px; }
.theme-panel summary { cursor: pointer; font-size: 21px; font-weight: 700; }
.book-subtitle { color: var(--yellow); font-weight: 800; }
.crew-scene { max-width: 960px; margin: auto auto 38px; }
.crew-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.crew-grid .theme-panel { padding: 26px; }
.crew-grid .theme-status { font-size: 16px; }
.theme-page .product-card > img { height: auto; aspect-ratio: 1.3; }
.theme-page .product-card { padding: 18px; }
.theme-page .product-card h2 { font-size: 30px; margin: 12px 0; }
.theme-page .product-card .theme-status { font-size: 19px; }
.storybook .theme-page { max-width: 1180px; background: #f4ecdf url('art/storybook/paper-texture-soft.png'); border-radius: 8px; color: #193f40; margin-top: 8px; padding-top: 30px; box-shadow: 0 0 0 6px #054d52; }
.storybook .theme-panel, .storybook .product-card { background: #075b60 url('art/storybook/teal-paper-texture.png'); color: #f9f3df; border: 2px solid #e8d8ba; border-radius: 14px; }
.storybook .theme-panel .theme-button { background: #ffd447 url('art/storybook/ribbon-gold.png') center/100% 100%; border-radius: 0; }
.storybook .theme-footer a:focus-visible, .storybook .home-link:focus-visible { outline-color: #075156; }
.saturday .theme-panel, .saturday .product-card { background: #003e46; border: 3px solid #ffd447; border-radius: 22px; }
.saturday .theme-page { padding-top: 35px; }
.saturday .theme-page .show-cast { max-width: 642px; }
.saturday .theme-page .show-watch { font-size: 34px; }
.storefront .theme-panel { border-radius: 14px; }
.storefront .book-cover { border: 6px solid #ffd447; background: #075156; }
.modern .theme-panel { border-radius: 34px; background: #006874; }
.modern .theme-button { border-radius: 40px; }
@media (min-width: 1600px) {
 .theme-header-row { min-height: 6.5vw; }
 .story-header { height: 16.40625vw; }
 .story-header .logo { margin-top: -1.40625vw; margin-bottom: -1.5625vw; }
 .story-header .theme-nav { height: 3.59375vw; }
 .chapter-card { height: 10.3125vw; }
 .chapter-heading { font-size: 1.64vw; }
 .chapter-content img { height: 5.625vw; }
 .chapter-content .theme-status { font-size: 1.4vw; }
 .story-start, .story-watch { min-height: 3.5vw; }
 .store-hero { min-height: 27.35vw; }
 .store-copy { padding-top: 2.4vw; }
 .store-seal { width: 9vw; left: 21.5vw; top: 13.1vw; }
 .home-products .product-card > img { height: 12.1875vw; }
 .home-products .product-card h2 { font-size: 1.95vw; }
 .home-products .product-card .theme-status { font-size: 1.33vw; }
 .show-title-row { min-height: 5.7vw; }
}
@media (max-width: 1100px) {
 .theme-header-row { height: auto !important; min-height: 78px; padding: 10px 4% !important; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; }
 .theme-header .logo { width: 260px !important; max-width: 65%; }
 .theme-nav { order: 3; width: 100%; margin: 0; justify-content: space-around; gap: 12px !important; font-size: 18px !important; }
 .header-cta { font-size: 20px !important; }
 .header-cart { margin-left: 0; }
 .story-header { height: auto; min-height: 160px; padding-bottom: 16px; }
 .story-header .logo { max-width: none; width: 350px !important; margin: -10px auto -10px; }
 .story-header .theme-nav { width: 90%; height: auto; min-height: 40px; font-size: 24px !important; gap: 9px !important; }
 .story-header .theme-nav a { padding: 6px 8px; }
 .story-crayon.green { top: 20px; }
 .story-crayon.red { top: 20px; }
 .story-cloud-left,.story-cloud-right,.story-header-star { display: none !important; }
 .story-home { padding: 0 3%; }
 .storybook-book { padding: 10px 2% 18px; }
 .book-hero { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); }
 .story-copy { padding: 20px 8px; }
 .story-copy h1 { font-size: 30px; white-space: normal; }
 .story-copy p { font-size: 22px; }
 .story-start,.story-watch { width: 90%; font-size: 21px; }
 .chapter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 14px; }
 .chapter-card { height: 145px; }
 .chapter-heading { font-size: 25px; }
 .chapter-content img { height: 78px; }
 .show-title-row h1 { font-size: 4.6vw; margin-left: 45px; }
 .show-tv { width: 55px; }
 .show-title-row { min-height: 50px; }
 .show-left .show-cast { margin-left: -18px; width: calc(100% + 18px); }
 .show-home { padding-top: 18px; }
 .show-watch { font-size: 3.4vw; }
 .show-video { margin-top: 0; border-width: 4px; border-radius: 16px; }
 .episode-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; margin: 0; }
 .latest-title { margin: 12px 0; font-size: 30px; }
 .episode-caption { font-size: 24px; }
 .episode-coloring { font-size: 24px; min-height: 160px; }
 .episode-coloring img { max-width: 90px; }
 .store-hero { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; padding: 20px 3%; gap: 20px; min-height: 0; }
 .store-book { padding: 0; }
 .store-copy { padding: 0; }
 .store-copy h1 { font-size: 3.7vw; }
 .store-copy > p { font-size: 20px; white-space: normal; }
 .store-actions { margin-top: 24px; flex-wrap: wrap; }
 .store-actions .theme-button { font-size: 17px; }
 .store-truck { display: none; }
 .store-seal { position: static; width: 85px; margin-top: 18px; }
 .store-copy .release-note { top: 190px; left: 0; font-size: 16px; }
 .shop-title { margin-left: 4%; font-size: 28px; }
 .home-products { grid-template-columns: repeat(2,minmax(0,1fr)); margin: 10px 4%; gap: 16px; }
 .product-kids { margin: 0; height: auto; min-height: 180px; grid-column: 1 / -1; flex-direction: row; gap: 25px; }
 .product-kids strong,.product-kids > span { font-size: 24px; margin: 0; }
 .modern-home { padding-top: 20px; }
 .modern-copy h1 { font-size: 6.3vw; }
 .modern-copy p { font-size: 18px; }
 .modern-copy .theme-button { font-size: 17px; }
 .modern-art { margin-top: 0; }
 .modern-links { margin-top: 20px; }
 .modern-links strong { font-size: 24px; }
 .page-feature,.coloring-feature { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
 .product-grid:not(.home-products) { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .crew-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
 .theme-header-row { padding: 8px 5% !important; gap: 6px 12px; }
 .theme-header .logo { width: min(62vw,250px) !important; }
 .theme-nav { gap: 4px 12px !important; flex-wrap: wrap; font-size: 15px !important; }
 .theme-nav a { padding: 8px 0; }
 .header-cta { font-size: 17px !important; padding: .5em .75em !important; }
 .header-cart { width: 30px; }
 .story-header .logo { width: min(76vw,350px) !important; margin: -10px auto -5px; }
 .story-header .theme-nav { width: 94%; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px !important; font-size: 21px !important; }
 .story-header .theme-nav a { min-height: 35px; }
 .story-crayon.green,.story-crayon.blue { width: 30px; top: 18px; left: 2%; }
 .story-crayon.blue { left: auto; right: 2%; }
 .story-crayon.red { display: none !important; }
 .story-home { padding: 0 3% 20px; }
 .storybook-book { padding: 10px 3% 18px; }
 .book-hero { grid-template-columns: minmax(0,1fr); }
 .story-copy { padding: 26px 12px; }
 .story-copy h1 { font-size: 36px; }
 .story-copy p { font-size: 25px; }
 .story-start,.story-watch { width: 80%; font-size: 24px; }
 .chapter-grid { gap: 8px; }
 .chapter-card { height: auto; min-height: 180px; padding: 12px 6px; }
 .chapter-heading { font-size: 21px; }
 .chapter-content { flex-direction: column; gap: 5px; padding-top: 10px; }
 .chapter-content img { height: 65px; max-width: 100%; }
 .chapter-content .theme-status { font-size: 15px; }
 .chapter-4 .chapter-content img { height: auto; max-height: 90px; width: 100%; }
 .show-home { padding: 24px 5%; }
 .show-hero { grid-template-columns: minmax(0,1fr); gap: 24px; }
 .show-title-row h1 { font-size: 8.6vw; margin-left: 50px; }
 .show-tv { width: 58px; left: -10px; top: -4px; }
 .show-title-row { min-height: 55px; }
 .show-left .show-cast { margin-left: -5%; width: 105%; }
 .show-watch { font-size: 6vw; }
 .latest-title { margin: 24px 0 14px; }
 .episode-grid { gap: 12px; }
 .episode-caption { flex-direction: column; justify-content: center; gap: 6px; padding: 10px 7px; text-align: center; font-size: 20px; min-height: 74px; }
 .episode-coloring { font-size: 20px; }
 .store-hero { grid-template-columns: minmax(0,1fr); padding: 24px 5%; gap: 25px; }
 .store-book { max-width: 450px; margin: auto; }
 .store-copy { text-align: center; }
 .store-copy h1 { font-size: clamp(30px,8.4vw,48px); white-space: normal; }
 .store-copy > p { font-size: 22px; }
 .store-actions { justify-content: center; }
 .store-seal { width: 80px; margin: 20px auto 0; }
 .store-copy .release-note { position: static; margin: 16px auto 0; }
 .shop-title { font-size: 28px; margin-left: 5%; }
 .home-products { margin: 12px 5%; gap: 12px; }
 .product-card > img { height: 118px; }
 .product-card h2 { font-size: 23px; }
 .product-card .theme-status { font-size: 15px; }
 .product-kids { min-height: 120px; gap: 20px; }
 .product-kids img { width: 50px; height: 50px; margin: 0; }
 .product-kids strong,.product-kids > span { font-size: 23px; }
 .modern-home { padding: 28px 5%; }
 .modern-hero { grid-template-columns: minmax(0,1fr); gap: 22px; }
 .modern-copy h1 { font-size: clamp(44px,12vw,72px); line-height: 1.03; }
 .modern-copy p { font-size: 20px; margin: 18px 0 24px; }
 .modern-copy p br { display: none; }
 .modern-copy .theme-button { font-size: 19px; }
 .modern-art { margin: 0 -2%; }
 .modern-sparkle { width: 23px; }
 .modern-links { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 12px; margin: 15px 0 0; }
 .modern-links img { width: 78px; }
 .modern-links strong { font-size: 23px; }
 .modern-links span { font-size: 14px; }
 .theme-page { padding: 30px 5% 24px; }
 .page-intro { gap: 10px; margin-bottom: 28px; }
 .page-intro > img { width: 65px; max-height: 85px; margin: 0; }
 .responsive.inner .page-intro h1 { font-size: 40px; }
 .responsive.inner .page-intro p { font-size: 20px; }
 .responsive.inner .theme-page p { font-size: 19px; }
 .page-feature,.coloring-feature { grid-template-columns: minmax(0,1fr); gap: 28px; }
 .up-next { grid-template-columns: minmax(0,1fr); gap: 18px; }
 .book-cover { padding: 24px; margin: 0 8px; }
 .book-cover > img { max-height: 420px; }
 .theme-page .product-card { padding: 10px; }
 .theme-page .product-card h2 { font-size: 23px; }
 .theme-page .product-card .theme-status { font-size: 16px; }
 .theme-footer { margin-top: 32px; }
 .theme-footer nav { gap: 8px 18px; }
 .storybook .theme-page { width: 94%; padding: 28px 5%; }
 .saturday .theme-page .show-watch { font-size: 6vw; }
}
@media (prefers-reduced-motion: no-preference) {
 .chapter-card,.episode-card,.product-card,.modern-links a { transition: transform .15s ease; }
 .chapter-card:hover,.episode-card:hover,.product-card:hover,.modern-links a:hover { transform: translateY(-3px); }
}

/* Desktop fidelity corrections from the first same-viewport comparisons. */
.story-header { display: flow-root; }
@media (min-width: 1101px) {
 .chapter-grid { margin: 0 17px 0 15px; gap: 16px; }
 .chapter-heading { font-size: 22px; }
 .chapter-3 .chapter-content img { height: 88px; }
 .chapter-4 { position: relative; }
 .chapter-4 .chapter-heading { width: 100%; padding-left: 50px; position: relative; z-index: 1; }
 .chapter-4 .chapter-content { position: absolute; left: 25px; bottom: 2px; width: 210px; height: 120px; display: block; }
 .chapter-4 .chapter-content img { width: 210px; height: 120px; max-width: none; }
 .show-title-row h1 { font-size: clamp(38px,5.3vw,102px); }
 .store-book { margin-top: -3px; }
 .store-book img { max-width: 512px; }
 .store-copy > p { font-weight: 700; }
 .home-products .product-card { height: 218px; padding: 8px; }
 .home-products .product-card h2 { font-size: 24px; line-height: 25px; }
 .home-products .product-card .theme-status { font-size: 17px; line-height: 17px; padding: 1.5px 12px; margin-top: 1px; }
 .modern-copy { padding-top: 40px; }
 .modern-copy h1 span { display: block; width: max-content; white-space: nowrap; transform-origin: left center; }
 .modern-copy h1 span:last-child { transform: scaleX(.92); }
 .modern-art { width: calc(100% + 10px); }
 .modern-links { margin-top: 11px; }
}
@media (max-width: 1100px) { .modern-copy h1 span { display: block; } }
body.responsive.saturday { background: #008994 url('art/saturday/burst-background.jpg') center top/cover no-repeat fixed; }

body.responsive.storybook { font-family: StoryHand, SunnyCards, sans-serif; }
.modern-copy h1 { font-weight: 800; }
.modern-copy p { font-weight: 600; }
.modern-links strong { font-weight: 800; }
.store-copy h1 { font-weight: 800; }
body.responsive.storybook { background-image: url('art/storybook/doodle-texture-soft.jpg'); background-size: 1280px 960px; }
.story-cloud-left, .story-cloud-right { visibility: hidden; }

.story-extra-star { position: absolute; width: 27px; pointer-events: none; }
.story-extra-star.star-1 { left: 23.5%; top: 101px; }
.story-extra-star.star-2 { right: 25.5%; top: 107px; width: 24px; }
.story-extra-star.star-3 { right: 12.5%; top: 119px; }
.story-extra-star.star-4 { right: 2.3%; top: 146px; width: 33px; }
@media (max-width: 1100px) { .story-extra-star { display: none !important; } }

body.responsive.modern { background: #018591 url('art/modern/background.jpg') center top/cover no-repeat fixed; }
.modern-sparkle, .modern-sparkle-a, .modern-sparkle-c { position: absolute; pointer-events: none; }
.modern-sparkle { width: 4.67%; left: 86.85%; right: auto; top: .7%; }
.modern-sparkle-a { width: 3.68%; left: 16.55%; top: 8.89%; }
.modern-sparkle-c { width: 3.1%; left: 92.22%; top: 12%; }
@media (min-width: 1101px) { .modern-art { margin-top: 16px; } }

@media (min-width: 1101px) {
 .story-copy { padding-top: 45px; }
 .story-copy h1 { font-size: 3.28125vw; margin-right: 16px; }
 .story-copy p { margin-right: 34px; margin-bottom: 27px; }
 .story-start, .story-watch { width: 230px; margin-right: 46px; white-space: nowrap; }

}
.book-bottom-edge { position: absolute; left: -8px; bottom: -3px; width: calc(100% + 16px); max-width: none; height: clamp(10px,1.64vw,24px); pointer-events: none; }
.responsive .theme-header .logo { height: auto; }
@media (max-width: 640px) {
 .responsive:not(.storybook) .theme-header .logo { max-width: 58%; }
}
@media (max-width: 360px) {
 .responsive.inner .page-intro h1 { font-size: 32px; }
 .page-intro > img { width: 50px; }
 .page-intro > div { min-width: 0; }
}

@media (max-width: 640px) {
 .storefront .theme-nav, .modern .theme-nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px 12px !important; text-align: center; }
 .storefront .theme-nav a, .modern .theme-nav a { padding: 6px 0; }
}

.saturday .header-cta { gap: 8px; }
.saturday .header-cta img { width: 1.28em; height: 1.28em; }
@media (min-width: 1101px) { .saturday .header-cta { width: 145px; height: 42px; padding: 0; } }
/* Keep source-measured components proportional on larger desktop viewports. */
@media (min-width: 1101px) {
 .story-start, .story-watch { width: min(17.96875vw,345px); margin-right: min(3.59375vw,69px); }
 .story-copy p { margin-right: min(2.65625vw,51px); }
 .story-copy h1 { margin-right: min(1.25vw,24px); }
 .chapter-grid { margin-left: min(1.171875vw,22.5px); margin-right: min(1.328125vw,25.5px); gap: min(1.25vw,24px); }
 .chapter-heading { font-size: min(1.71875vw,33px); }
 .chapter-3 .chapter-content img { height: min(6.875vw,132px); }
 .chapter-4 .chapter-heading { padding-left: min(3.90625vw,75px); }
 .chapter-4 .chapter-content { left: min(1.953125vw,37.5px); bottom: min(.15625vw,3px); width: min(16.40625vw,315px); height: min(9.375vw,180px); }
 .chapter-4 .chapter-content img { width: 100%; height: 100%; }
 .store-book img { max-width: min(40vw,768px); }
 .home-products .product-card { height: min(17.03125vw,327px); padding: min(.625vw,12px); }
 .home-products .product-card > img { height: min(12.1875vw,234px); }
 .home-products .product-card h2 { font-size: min(1.875vw,36px); line-height: min(1.953125vw,37.5px); }
 .home-products .product-card .theme-status { font-size: min(1.328125vw,25.5px); line-height: min(1.328125vw,25.5px); padding: min(.1171875vw,2.25px) min(.9375vw,18px); margin-top: min(.078125vw,1.5px); }
 .home-products .product-kids { height: min(17.734375vw,340.5px); margin-top: max(-.9375vw,-18px); }
 .home-products .product-kids img { width: min(4.6875vw,90px); height: min(4.6875vw,90px); }
 .home-products .product-kids strong { font-size: min(1.953125vw,37.5px); }
 .home-products .product-kids > span { font-size: min(1.5625vw,30px); margin-top: min(1.5625vw,30px); }
}

.show-cast > .show-note { position: absolute; left: 90.1869%; top: -1.9355%; width: 7.4766%; height: auto; pointer-events: none; }
/* Every header contains its complete logo with deliberate top/bottom clearance. */
body:is(.home,.inner).sunny .bar { height: auto; min-height: 0; padding-top: 8px; padding-bottom: 8px; }
body:is(.home,.inner).sunny .bar .logo { width: clamp(220px,19vw,270px); height: auto; margin: 0; transform: none; }
.responsive .theme-header-row { height: auto !important; min-height: 0; padding-top: 12px !important; padding-bottom: 12px !important; }
.responsive .theme-header .logo { height: auto; margin: 0; transform: none; }
.saturday .theme-header .logo { width: clamp(220px,19.53125vw,300px); }
.storefront .theme-header .logo { width: clamp(190px,16.5625vw,260px); }
.modern .theme-header .logo { width: clamp(220px,20.859375vw,300px); }
.story-header { height: auto; min-height: 0; padding: 14px 0 16px; }
.story-header .logo { width: clamp(280px,35.703125vw,457px); max-width: 76vw; margin: 0 auto 8px !important; }
@media (max-width: 640px) {
 body:is(.home,.inner).sunny .bar { padding-top: 10px; padding-bottom: 10px; }
 body:is(.home,.inner).sunny .bar .logo { width: min(58vw,240px); max-width: 60%; }
 .responsive:not(.storybook) .theme-header .logo { max-width: 58%; }
}

/* Sunny Watch button: a spark travels around the pill border and sparks fly off it. */
body:is(.home,.inner).sunny .spark-pill { position: relative; isolation: isolate; }
body:is(.home,.inner).sunny .spark-pill .spark-svg { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); pointer-events: none; overflow: visible; }
body:is(.home,.inner).sunny .spark-line { fill: none; x: 4px; y: 4px; width: calc(100% - 8px); height: calc(100% - 8px); rx: 20px; stroke: #fff; stroke-width: 5px; stroke-linecap: round; stroke-dasharray: 0.1 99.9; animation: sunny-spark-travel 3.5s linear infinite, sunny-spark-crackle .09s steps(2) infinite alternate; }
body:is(.home,.inner).sunny .spark-dot { position: absolute; top: 0; left: 0; width: 3px; height: 3px; border-radius: 50%; background: #fff3b0; box-shadow: 0 0 6px #ffaa00, 0 0 10px #ff4500; pointer-events: none; offset-path: inset(0 round 20px); offset-rotate: auto; animation: sunny-spark-follow 3.5s linear infinite, sunny-spark-shoot .45s ease-out infinite; }
body:is(.home,.inner).sunny .spark-p1 { animation-delay: 0s, .05s; --fly-x: -12px; --fly-y: -26px; }
body:is(.home,.inner).sunny .spark-p2 { animation-delay: 0s, .18s; --fly-x: -18px; --fly-y: 18px; }
body:is(.home,.inner).sunny .spark-p3 { animation-delay: 0s, .31s; --fly-x: -6px; --fly-y: -32px; }
body:is(.home,.inner).sunny .spark-p4 { animation-delay: 0s, .42s; --fly-x: -22px; --fly-y: -14px; }
body:is(.home,.inner).sunny .spark-p5 { animation-delay: 0s, .56s; --fly-x: -10px; --fly-y: 24px; }
body:is(.home,.inner).sunny .spark-p6 { animation-delay: 0s, .69s; --fly-x: -15px; --fly-y: -20px; }
@keyframes sunny-spark-travel { 0% { stroke-dashoffset: 100; } 100% { stroke-dashoffset: 0; } }
@keyframes sunny-spark-crackle {
  0% { stroke: #ffdd77; stroke-width: 3px; filter: drop-shadow(0 0 3px #ffaa00) drop-shadow(0 0 8px #ff4500); }
  50% { stroke: #fff; stroke-width: 6.5px; filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 14px #ffbb00) drop-shadow(0 0 24px #ff3300); }
  100% { stroke: #fff2cc; stroke-width: 4.5px; filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 12px #ff8800) drop-shadow(0 0 20px #ff2200); }
}
@keyframes sunny-spark-follow { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }
@keyframes sunny-spark-shoot {
  0% { transform: translate(0, 0) scale(1); opacity: 1; background: #fff; }
  60% { background: #ff9900; }
  100% { transform: translate(var(--fly-x), var(--fly-y)) scale(0); opacity: 0; background: #ff2200; }
}
@media (prefers-reduced-motion: reduce) {
  body:is(.home,.inner).sunny .spark-line, body:is(.home,.inner).sunny .spark-dot { animation: none; }
  body:is(.home,.inner).sunny .spark-line { opacity: 0; }
  body:is(.home,.inner).sunny .spark-dot { display: none; }
}

/* Sunny header: a bouncing NEW above Coloring Books, one letter after another. */
body:is(.home,.inner).sunny .nav-first { position: relative; }
body:is(.home,.inner).sunny .new-tag { position: absolute; left: 50%; bottom: 100%; transform: translateX(calc(-50% - 4px)); display: flex; gap: .06em; margin-bottom: -4px; font-size: .8em; font-weight: 900; line-height: 1; letter-spacing: .04em; color: #ffd447; text-shadow: 0 2px 0 #00373b; pointer-events: none; white-space: nowrap; }
body:is(.home,.inner).sunny .new-tag span { display: inline-block; animation: sunny-new-bounce 1.2s ease-in-out infinite; }
body:is(.home,.inner).sunny .new-tag span:nth-child(2) { animation-delay: .15s; }
body:is(.home,.inner).sunny .new-tag span:nth-child(3) { animation-delay: .3s; }
@keyframes sunny-new-bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-.45em); } }
@media (prefers-reduced-motion: reduce) { body:is(.home,.inner).sunny .new-tag span { animation: none; } }

/* Sunny header links: yellow on hover; the current page stays yellow with a yellow underline. */
body:is(.home,.inner).sunny .nav a { transition: color .15s ease; }
body:is(.home,.inner).sunny .nav a:hover,
body:is(.home,.inner).sunny .nav a[aria-current="page"] { color: #ffd447; }
body:is(.home,.inner).sunny .nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: #ffd447; text-decoration-thickness: 3px; text-underline-offset: .25em; }