/* Illustrated Pitchooun identity. Layout and interaction rules stay in site.css. */
:root {
  --ink: #244e4c;
  --muted: #687975;
  --teal: #287e7d;
  --teal-dark: #205f5d;
  --cream: #fffbf0;
  --line: #e6e9dc;
  --coral: #b84d3c;
}
body {font-family: 'Nunito Sans', 'Trebuchet MS', sans-serif; background: #fffefa;}
h1, h2, h3 {font-family: 'Fredoka', 'Trebuchet MS', sans-serif; font-weight: 500; letter-spacing: -.025em;}
button, input, textarea, select {font-family: inherit;}
.site-header {background: #fffefbea; border-bottom: 1px solid #ede9dc;}
.header-inner {min-height: 112px; gap: 25px;}
.brand {position: relative;}
.brand img {width: 235px; height: auto;}
.navigation {gap: 27px; font-size: 15px; font-weight: 800;}
.navigation>a:not(.button) {padding-block: 12px;}
.button {border-radius: 17px 17px 17px 6px; font-weight: 800; box-shadow: 0 4px 0 #1b565619;}
.button:hover {box-shadow: 0 5px 0 #1b565619;}
.button.youtube {background: #fff0e5; color: #9c4734; border-radius: 15px; box-shadow: none;}
.text-link {font-weight: 800;}
.eyebrow {font-size: 12px; letter-spacing: .11em; color: #567469;}
.hero {padding: 58px 0 78px; background: #fffbef;}
.hero::before {display: none;}
.hero::after {
  content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 28px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='28' viewBox='0 0 160 28'%3E%3Cpath d='M0 15Q40-3 80 15T160 15V28H0Z' fill='%23fffefa'/%3E%3C/svg%3E") repeat-x bottom;
}
.hero-grid {grid-template-columns: 1fr 1.14fr; gap: 34px;}
.hero-copy {position: relative; z-index: 1;}
.hero-copy .eyebrow {display: inline-block; background: #fff1cd; padding: 8px 13px; border-radius: 22px; font-size: 11px; color: #795a25; margin-bottom: 22px;}
.hero-copy h1 {font-size: clamp(42px, 4.8vw, 65px); line-height: 1.08; margin-bottom: 24px;}
.hero-copy h1 span {color: var(--coral); text-decoration: none; position: relative; white-space: nowrap;}
.hero-copy h1 span::after {content: ''; position: absolute; bottom: -6px; left: 1px; right: 0; height: 7px; border-radius: 50%; background: #f3c465; transform: rotate(-2deg);}
.hero-copy>p {font-size: 18px; line-height: 1.8; color: #657870; max-width: 460px;}
.hero-note {font-size: 12px; line-height: 1.6; color: #6b7b6e; max-width: 410px;}
.tiny-star {font-size: 23px; color: #c08a25;}
.hero-scene {position: relative; min-width: 0; padding: 19px 0 0;}
.storybook-illustration {position: relative; width: 100%; height: auto; object-fit: contain;}
.scene-note {position: absolute; z-index: 2; top: -5px; right: 12px; transform: rotate(5deg); border-radius: 19px 19px 5px 19px; background: #ffdf96; color: #705124; padding: 9px 20px; font-family: 'Fredoka', sans-serif; font-size: 19px; box-shadow: 0 3px 0 #b77f2410;}
.scene-note span {font-size: 17px; margin-left: 10px;}
.featured-story {position: relative; display: flex; align-items: center; gap: 15px; width: 88%; margin: -9px auto 0; background: #fffefb; padding: 13px; border: 1px solid #e7e2d0; border-radius: 18px; box-shadow: 0 8px 26px #6c795913; transform: rotate(-2deg);}
.featured-story>img {width: 84px; height: 57px; object-fit: cover; border-radius: 11px; flex-shrink: 0;}
.featured-story small {font-size: 10px; color: #73816e; display: block; margin-bottom: 3px;}
.featured-story strong {font-family: 'Fredoka', sans-serif; font-size: 18px; font-weight: 500; line-height: 1.3; display: block;}
.featured-story:hover {border-color: #b5cdb7;}
.featured-play {display: grid; place-items: center; margin-left: auto; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: #f3c968; color: #675124; font-size: 11px;}
.explore {gap: 20px; margin-top: 32px;}
.universe {border-radius: 24px; padding: 24px 20px; gap: 16px; border: 1px solid #e4e7dc; box-shadow: 0 4px 0 #8eac8910;}
.universe-blue {background: #edf6f5;}
.universe-peach {background: #fff0e7; border-color: #f6e1ce;}
.universe-green {background: #f1f5e7; border-color: #e7ebd8;}
.universe-icon {width: 53px; height: 53px; flex-shrink: 0; color: #5c8c90;}
.universe-icon svg {display: block; width: 100%; height: 100%;}
.universe-peach .universe-icon {color: #bd795e;}
.universe-green .universe-icon {color: #7d9768;}
.universe strong {font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 18px; line-height: 1.25;}
.universe div>span {font-size: 12px; margin-top: 6px; color: #62796d;}
.universe>b {width: 24px; flex-shrink: 0; color: #7f947d;}
.section {padding-top: 70px;}
.section-heading h2 {font-size: 39px; font-weight: 500;}
.section-heading .eyebrow {font-size: 10px; color: #9a6a3f;}
.story-grid {gap: 26px; align-items: stretch;}
.story-card {display: flex; flex-direction: column; border: 1px solid #e9e7db; border-radius: 25px; background: #fffefb; box-shadow: 0 5px 0 #e8ebdf70;}
.story-card:hover {box-shadow: 0 8px 24px #6b7e581b;}
.card-image {margin: 8px 8px 0; border-radius: 19px; flex-shrink: 0;}
.card-copy {display: flex; flex-direction: column; flex: 1; padding: 23px 24px;}
.card-copy .label {align-self: flex-start; border-radius: 9px; font-size: 10px; padding: 5px 10px; font-weight: 800; margin-bottom: 15px;}
.card-copy h3 {font-size: 23px; line-height: 1.28; font-weight: 500; margin-bottom: 13px;}
.card-copy p {font-size: 14px; line-height: 1.75; margin-bottom: 23px; color: #728176;}
.card-copy>.text-link {margin-top: auto; font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; align-self: flex-start;}
.play {width: 42px; height: 42px; background: #fffdf5f0; color: #347e7d; box-shadow: 0 3px 8px #0001;}
.book-section {position: relative; margin-top: 73px; background: #f8efd9; border: 1px solid #f1e4bf; border-radius: 37px 37px 12px 37px; overflow: hidden;}
.book-section::before {content: '✦'; position: absolute; font-size: 92px; color: #eac47a; right: 27px; top: -20px; transform: rotate(10deg); pointer-events: none;}
.book-copy {position: relative;}
.book-copy .eyebrow {font-size: 10px; color: #917340;}
.book-copy h2 {font-size: 41px; max-width: 460px;}
.book-copy p {color: #6e7869;}
.book-art>img {transform: rotate(-6deg); filter: drop-shadow(0 13px 12px #97743222);}
.together {max-width: 740px; position: relative; padding-bottom: 95px;}
.together h2 {font-size: 40px; line-height: 1.17;}
.together>p {font-size: 16px; color: #6b7c70; line-height: 1.9;}
.together .eyebrow {font-size: 10px; color: #9d7854;}
.search {border-radius: 19px; border-color: #dbe4d3; background: #fffefb;}
.search input {font-size: 14px;}
.search button {background: #eaf2e3; color: #52734b; font-weight: 800;}
.site-footer {background: #f0f5e9; border-top: 1px solid #e2ead6; position: relative; padding-top: 49px;}
.footer-main .brand img {width: 210px; margin-bottom: 18px;}
.footer-main strong {font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 20px; color: #4f7250;}
.footer-main p {font-size: 14px; color: #6c7c64;}
.footer-main>div>a:not(.brand) {font-size: 14px; line-height: 1.6; padding-block: 4px;}
.footer-bottom {border-color: #dce6cd;}
.page-heading h1 {font-weight: 500; line-height: 1.16;}
.page-heading>p {line-height: 1.8;}
.filters a {border: 1px solid #dfe7d6; background: #f1f6e9; color: #52734f;}
.article-heading h1 {font-weight: 500;}
.article-text {color: #425b53;}
.article-text h2 {font-weight: 500; font-size: 31px; color: #2c625e;}
.article-text h3 {font-weight: 500; color: #456e61;}
.article-text blockquote {background: #fff8e7; border-color: #ecc56c;}
.video-launch, .youtube-frame {border-radius: 25px;}
.video-launch>span {border-radius: 17px; color: #946033; font-weight: 800;}
.video-launch>span b {color: #c26446;}
.article-cta {background: #eef5e7; border: 1px solid #e1eacf; border-radius: 24px;}
.panel-form {border-radius: 25px; background: #fffefb;}
.menu-toggle {background: #fffefb; border-color: #e3e7d8; color: #3c6860; font-weight: 800; border-radius: 13px; min-height: 44px; min-width: 76px;}
.hero-actions .text-link {display: inline-flex; align-items: center; min-height: 44px;}
@media(max-width:1100px) {
  .header-inner {gap: 18px; min-height: 112px;}
  .brand img {width: 210px;}
  .navigation {font-size: 13px; gap: 17px;}
  .hero-grid {gap: 15px;}
  .hero-copy h1 {font-size: 56px;}
  .hero-copy>p {font-size: 17px;}
  .universe {padding: 21px 15px; gap: 11px;}
  .universe-icon {width: 43px; height: 43px;}
  .universe strong {font-size: 17px;}
  .universe>b {display: none;}
}
@media(max-width:900px) {
  .header-inner {min-height: 100px;}
  .brand img {width: 215px;}
  .navigation {font-size: 16px; border-radius: 21px; border-color: #e5e9d9; background: #fffefb;}
  .hero {padding: 47px 0 58px;}
  .hero-copy h1 {font-size: 46px;}
  .hero-copy .eyebrow {font-size: 10px; padding: 7px 10px; letter-spacing: .1em;}
  .hero-copy>p {font-size: 16px;}
  .hero-note {font-size: 12px;}
  .scene-note {font-size: 15px; top: 0; padding: 8px 13px;}
  .featured-story {width: 97%; padding: 10px; gap: 10px;}
  .featured-story>img {width: 66px; height: 47px;}
  .featured-story strong {font-size: 16px;}
  .featured-story small {font-size: 9px;}
  .featured-play {width: 30px; height: 30px; font-size: 10px;}
  .explore {gap: 12px; margin-top: 24px;}
  .universe {padding: 17px 13px; gap: 9px;}
  .universe-icon {width: 35px; height: 35px;}
  .universe strong {font-size: 15px;}
  .universe div>span {font-size: 12px;}
  .book-copy h2 {font-size: 34px;}
  .footer-main .brand img {width: 190px;}
}
@media(max-width:650px) {
  .header-inner {min-height: 86px; gap: 8px;}
  .brand img {width: 185px;}
  .menu-toggle {padding: 10px 12px; font-size: 13px;}
  .hero {padding: 30px 0 48px;}
  .hero-grid {grid-template-columns: 1fr; gap: 31px;}
  .hero-copy h1 {font-size: clamp(40px, 9.5vw, 49px); line-height: 1.08; max-width: 400px; margin-bottom: 25px;}
  .hero-copy .eyebrow {font-size: 10px; margin-bottom: 22px; padding: 7px 11px; letter-spacing: .09em;}
  .hero-copy>p {font-size: 16px; line-height: 1.8; max-width: 470px;}
  .hero-copy h1 span::after {bottom: -5px; height: 5px;}
  .hero-actions {gap: 19px;}
  .hero-actions .button {font-size: 14px; padding: 14px 19px;}
  .hero-actions .text-link {font-size: 13px;}
  .hero-note {margin-top: 20px; font-size: 12px; max-width: 320px;}
  .hero-scene {max-width: 480px; width: 100%; margin-inline: auto; padding-top: 12px;}
  .scene-note {top: -7px; right: 6px; font-size: 16px; padding: 8px 15px;}
  .featured-story {width: calc(100% - 8px); margin-top: -2px; padding: 11px; border-radius: 17px; transform: rotate(-1deg);}
  .featured-story>img {width: 69px; height: 49px; border-radius: 9px;}
  .featured-story strong {font-size: 16px;}
  .featured-story small {font-size: 10px; margin-bottom: 4px;}
  .featured-play {width: 30px; height: 30px;}
  .explore {gap: 13px; margin-top: 21px;}
  .universe {padding: 19px 20px; gap: 18px; border-radius: 21px;}
  .universe-icon {width: 45px; height: 45px;}
  .universe strong {font-size: 19px;}
  .universe div>span {font-size: 12px; margin-top: 5px;}
  .universe>b {display: block; font-size: 23px;}
  .section {padding-top: 46px;}
  .section-heading {gap: 17px; align-items: end;}
  .section-heading h2 {font-size: 31px;}
  .section-heading .eyebrow {font-size: 10px; letter-spacing: .12em;}
  .section-heading>a {max-width: 87px; font-size: 12px; white-space: normal; text-align: right; line-height: 1.6;}
  .card-copy h3 {font-size: 24px;}
  .card-copy p {font-size: 14px;}
  .story-grid {gap: 25px;}
  .book-section {margin-top: 41px; padding: 26px 23px 30px; border-radius: 28px 28px 9px 28px;}
  .book-section::before {font-size: 66px; right: 18px; top: -14px;}
  .book-copy h2 {font-size: 33px;}
  .book-copy .eyebrow {font-size: 9px; line-height: 1.7;}
  .book-copy p {font-size: 15px;}
  .together h2 {font-size: 32px;}
  .together .eyebrow {font-size: 9px;}
  .together>p {font-size: 15px;}
  .together {padding-bottom: 57px;}
  .site-footer {padding-top: 32px;}
  .footer-main .brand img {width: 195px; margin-bottom: 20px;}
  .footer-main strong {font-size: 19px;}
  .footer-main>div>a:not(.brand) {font-size: 13px;}
  .article-heading h1 {font-size: 31px; line-height: 1.23;}
  .article-text h2 {font-size: 27px;}
  .article-text h3 {font-size: 23px;}
}
@media(max-width:350px) {
  .brand img {width: 174px;}
  .menu-toggle {font-size: 12px; padding: 9px 10px; gap: 7px;}
  .hero-copy h1 {font-size: 40px;}
  .featured-story {gap: 8px;}
  .featured-story>img {width: 56px; height: 44px;}
  .featured-story strong {font-size: 16px;}
  .featured-story small {font-size: 10px;}
  .featured-play {width: 27px; height: 27px;}
  .universe {padding: 18px 15px; gap: 13px;}
  .universe-icon {width: 41px; height: 41px;}
  .universe strong {font-size: 18px;}
  .universe div>span {font-size: 11px;}
}