:root {
  --ink: #27352d; --muted: #6d796f; --green: #2f6b4f; --green-dark: #1f4937;
  --sage: #dfe9d9; --cream: #fbf6eb; --peach: #f3c59d; --orange: #d8753e;
  --yellow: #f4d77e; --line: #e5e2d7; --white: #fffdf8; --shadow: 0 18px 45px rgba(47,72,56,.12);
}
* { box-sizing: border-box; } html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: "Kanit", sans-serif; font-size: 16px; line-height: 1.7; }
a { color: inherit; text-decoration: none; } button { font: inherit; }
.container { width: min(1120px, 90%); margin: auto; }
.topbar { color: #dfeadf; background: var(--green-dark); font-size: 12px; }.topbar-inner { display: flex; justify-content: space-between; padding: 7px 0; }
.nav { position: sticky; top: 0; z-index: 10; background: rgba(255,253,248,.9); border-bottom: 1px solid rgba(229,226,215,.8); backdrop-filter: blur(16px); }.nav-inner { height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--green-dark); font: 25px/1 "Itim", cursive; }.brand small { display: block; margin-top: 5px; color: #899487; font: 500 9px "Kanit", sans-serif; letter-spacing: .16em; }.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50% 50% 50% 8px; color: var(--white); background: var(--green); font: 22px "Itim", cursive; transform: rotate(-8deg); }
.links { display: flex; align-items: center; gap: 26px; color: #526057; font-size: 14px; }.links a:hover, .read-link:hover { color: var(--orange); }.nav-button, .button { display: inline-flex; align-items: center; gap: 10px; border-radius: 10px; font-weight: 500; transition: transform .2s, box-shadow .2s; }.nav-button { padding: 10px 17px; color: #fff; background: var(--green); }.nav-button:hover, .button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(47,107,79,.18); }.menu { display: none; border: 0; color: var(--green); background: none; font-size: 24px; }
.hero { position: relative; overflow: hidden; padding: 75px 0 80px; background: var(--cream); }.hero:after { content: ""; position: absolute; width: 480px; height: 230px; right: -100px; bottom: -100px; border-radius: 50%; background: rgba(213,229,205,.7); }.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 65px; }.hero-copy { padding: 20px 0; }
.eyebrow, .kicker { color: var(--orange); font-size: 12px; font-weight: 600; letter-spacing: .1em; }.eyebrow { display: inline-block; padding: 6px 12px; border: 1px solid #edc6a8; border-radius: 30px; background: rgba(255,253,248,.6); }
h1, h2, h3, blockquote { margin: 0; font-family: "Itim", cursive; font-weight: 400; line-height: 1.12; } h1 { margin: 20px 0 15px; color: var(--green-dark); font-size: clamp(47px,6vw,76px); } h1 em { color: var(--orange); font-style: normal; }.lead { max-width: 560px; margin: 0; color: var(--muted); font-size: 17px; }.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }.button { padding: 13px 20px; border: 1px solid var(--line); }.button.primary { color: #fff; border-color: var(--green); background: var(--green); }.button.secondary { background: var(--white); }.button.light { color: var(--green-dark); background: var(--white); border-color: transparent; }
.story-illustration { position: relative; min-height: 430px; overflow: hidden; border-radius: 48% 52% 18px 18px; background: #f6d59e; box-shadow: var(--shadow); }.sun { position: absolute; top: 42px; right: 65px; width: 78px; height: 78px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 14px rgba(244,215,126,.18); }.cloud { position: absolute; height: 21px; border-radius: 30px; background: rgba(255,253,248,.7); }.cloud:before,.cloud:after { content: ""; position: absolute; border-radius: 50%; background: inherit; }.cloud:before { width: 35px; height: 35px; left: 15px; bottom: 3px; }.cloud:after { width: 26px; height: 26px; right: 12px; bottom: 4px; }.cloud-one { top: 91px; left: 45px; width: 100px; }.cloud-two { top: 145px; right: 40px; width: 70px; opacity: .65; }.hill { position: absolute; bottom: -75px; width: 115%; height: 225px; border-radius: 50% 50% 0 0; }.hill-back { left: -25%; background: #9fbd8c; }.hill-front { left: 20%; bottom: -110px; background: #6f9b68; }
.fox { position: absolute; z-index: 2; left: 21%; bottom: 48px; width: 175px; height: 215px; }.fox-head { position: absolute; top: 22px; left: 39px; width: 102px; height: 90px; border-radius: 48%; background: var(--orange); }.fox-head:after { content: ""; position: absolute; left: 35px; bottom: 0; width: 33px; height: 35px; border-radius: 50%; background: #ffe3b9; }.ear { position: absolute; z-index: -1; top: 3px; width: 48px; height: 62px; background: var(--orange); transform: rotate(35deg); }.ear:after { content: ""; position: absolute; inset: 10px; background: #eea46d; }.ear.left { left: 34px; border-radius: 5px 50% 5px 50%; }.ear.right { right: 31px; border-radius: 50% 5px 50% 5px; transform: rotate(-35deg); }.eye { position: absolute; z-index: 1; top: 43px; width: 7px; height: 11px; border-radius: 50%; background: var(--ink); }.left-eye { left: 27px; }.right-eye { right: 27px; }.nose { position: absolute; z-index: 2; left: 47px; bottom: 16px; width: 11px; height: 8px; border-radius: 50%; background: var(--ink); }.fox-body { position: absolute; left: 52px; bottom: 0; width: 100px; height: 130px; border-radius: 48% 48% 15% 15%; background: var(--orange); }.tail { position: absolute; right: -4px; bottom: 13px; width: 100px; height: 50px; border-radius: 50% 50% 50% 5%; background: var(--orange); transform: rotate(-25deg); }.tail:after { content: ""; position: absolute; right: 0; width: 34px; height: 50px; border-radius: 50%; background: #ffe3b9; }
.book { position: absolute; z-index: 3; right: 12%; bottom: 22px; display: grid; width: 180px; height: 126px; place-content: center; padding: 15px; border: 5px solid #eebc80; border-radius: 8px; color: var(--green-dark); background: #fff6d8; box-shadow: 5px 8px 0 rgba(83,86,45,.16); transform: rotate(-8deg); font: 16px "Itim", cursive; }.book b { display: block; color: var(--orange); font-size: 25px; }.hero-leaf,.spark { position: absolute; color: rgba(47,107,79,.35); font-size: 25px; }.leaf-one { top: 22%; left: 7%; }.leaf-two { right: 5%; bottom: 15%; }.spark { z-index: 3; color: #fff3b1; }.spark-one { top: 32%; left: 35%; }.spark-two { top: 18%; right: 25%; }
section { padding: 92px 0; }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 35px; }.section-heading h2,.about h2 { margin-top: 9px; color: var(--green-dark); font-size: clamp(35px,4vw,50px); }.section-heading p { max-width: 435px; margin: 0; color: var(--muted); }.filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }.filter-label { margin-right: 7px; color: var(--muted); font-size: 13px; }.filter { padding: 6px 14px; border: 1px solid var(--line); border-radius: 20px; color: var(--muted); font-size: 13px; }.filter.active,.filter:hover { color: var(--green); border-color: #a8c2a4; background: var(--sage); }
.story-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 19px; }.story-card { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--white); transition: transform .25s, box-shadow .25s; }.story-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }.story-art { position: relative; height: 210px; overflow: hidden; }.art-tortoise { background: #b7d5aa; }.art-lion { background: #f2c282; }.art-fox { background: #ceb8d2; }.art-sun { position: absolute; top: 18px; right: 22px; color: #fff4b5; font-size: 43px; }.tortoise,.lion,.mouse,.fox-emoji,.grapes { position: absolute; font-size: 75px; }.tortoise { bottom: 22px; left: 27%; }.lion { bottom: 17px; left: 35%; font-size: 82px; }.mouse { right: 15%; bottom: 13px; font-size: 34px; }.fox-emoji { bottom: 17px; left: 37%; }.grapes { top: 52px; left: 22%; font-size: 45px; }.finish { position: absolute; bottom: 19px; right: 20px; padding: 3px 8px; color: #fff; border: 1px solid #fff; border-radius: 12px; font-size: 9px; letter-spacing: .14em; }.story-content { padding: 20px 21px 22px; }.story-tag { display: inline-block; margin-bottom: 9px; padding: 3px 9px; border-radius: 12px; font-size: 11px; }.story-tag.green { color: #457347; background: #e4f0df; }.story-tag.orange { color: #aa5e31; background: #fbe5d5; }.story-tag.purple { color: #76527f; background: #eee3f1; }.story-content h3 { color: var(--green-dark); font-size: 28px; }.story-content p { min-height: 54px; margin: 7px 0 14px; color: var(--muted); font-size: 13px; }.read-link { color: var(--green); font-size: 13px; font-weight: 600; }
.quote-section { padding: 60px 0; color: #fff; background: var(--green); }.quote-layout { display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 20px; }.quote-mark { align-self: start; color: #91b78e; font: 130px/1 "Itim", cursive; }.quote-section .kicker { color: #bcd8aa; }.quote-section blockquote { margin: 6px 0 10px; font-size: clamp(32px,4vw,51px); }.quote-section p { margin: 0; color: #d6e4d1; font-size: 14px; }.about { background: var(--cream); }.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }.about-copy > p { margin: 0 0 24px; color: var(--muted); font-size: 17px; }.about-points { display: flex; flex-wrap: wrap; gap: 12px 24px; color: var(--green); font-size: 14px; }
footer { padding: 48px 0 20px; color: #c6d1c5; background: var(--green-dark); }.footer-inner { display: flex; justify-content: space-between; gap: 30px; }.footer-brand { color: #fff; }.footer-inner p { margin: 13px 0 0; color: #9eb29f; font-size: 13px; }.footer-links { display: flex; gap: 25px; align-items: center; font-size: 13px; }.footer-links a:hover { color: #fff; }.copyright { margin-top: 35px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.13); color: #8fa48f; font-size: 11px; }
@media (max-width: 850px) { .links { display: none; }.menu { display: block; }.hero-grid,.about-grid { grid-template-columns: 1fr; gap: 30px; }.hero { padding-top: 55px; }.story-grid { grid-template-columns: 1fr 1fr; }.featured-card { grid-column: span 2; }.quote-layout { grid-template-columns: 55px 1fr; }.quote-layout .button { grid-column: 2; justify-self: start; }.footer-inner { display: block; }.footer-links { margin-top: 25px; } }
@media (max-width: 560px) { .topbar-inner { justify-content: center; }.topbar-inner span:last-child { display: none; }.nav-inner { height: 68px; }.hero { padding: 40px 0 60px; }.hero-copy { padding: 0; } h1 { font-size: 51px; }.story-illustration { min-height: 350px; }.fox { left: 8%; transform: scale(.82); transform-origin: bottom left; }.book { right: 5%; transform: rotate(-8deg) scale(.8); transform-origin: bottom right; }.section-heading { display: block; }.section-heading p { margin-top: 15px; }.story-grid { grid-template-columns: 1fr; }.featured-card { grid-column: auto; }.story-content p { min-height: auto; }.quote-layout { grid-template-columns: 1fr; }.quote-mark { display: none; }.quote-layout .button { grid-column: auto; }.footer-links { flex-wrap: wrap; gap: 12px 20px; } }