@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;600;800&display=swap');
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#504968;background:#2388d9;font-family:'Noto Sans Thai',Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid #e43188;outline-offset:5px}.sky{position:fixed;inset:0;background-image:url('assets/sky-reference.jpg');background-size:100% auto;background-position:center top;z-index:-3;animation:sky-breathe 12s ease-in-out infinite alternate}.sky:after{content:'';position:absolute;inset:0;background:#d4f2ff12}#cast{position:fixed;inset:0;overflow:hidden;z-index:-2;pointer-events:none}.cast-position{position:absolute;top:0;left:0;will-change:transform}.cast-float{height:100%;width:max-content;animation:float-character var(--float-duration) ease-in-out var(--float-delay) infinite alternate;will-change:transform}.cast-position img{display:block;height:100%;width:auto;filter:drop-shadow(0 8px 3px #3a548c22);animation:arrival 1.6s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--delay)}@keyframes arrival{from{transform:translateY(-130vh);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes float-character{0%{transform:translate3d(-8px,-12px,0) rotate(-1.2deg)}50%{transform:translate3d(7px,5px,0) rotate(.7deg)}100%{transform:translate3d(-3px,18px,0) rotate(1.3deg)}}@keyframes sky-breathe{from{filter:saturate(.94) brightness(.97)}to{filter:saturate(1.08) brightness(1.04)}}.menu{position:fixed;left:30px;top:20px;width:235px;z-index:20}.logo{display:block;text-align:center;filter:drop-shadow(0 2px 0 white)}.logo small{font-size:12px;color:#85409b;font-weight:800}.logo strong{display:block;font-family:Arial,sans-serif;font-size:43px;font-style:italic;letter-spacing:-3px;color:#df4c9d;-webkit-text-stroke:1px white;text-shadow:2px 3px #9252b8}.logo span{display:block;font-size:9px;font-weight:bold;letter-spacing:1px;color:#9252b8}nav{margin:25px 12px 20px}nav a{display:block;font-family:Arial,sans-serif;font-weight:900;font-size:24px;font-style:italic;letter-spacing:-1px;color:#e84491;text-shadow:2px 2px white,-1px -1px white,1px -1px white,-1px 1px white;padding:5px 0;border-bottom:1px solid #ed8db860;transition:transform .2s}nav a small{font-family:'Noto Sans Thai',sans-serif;font-size:9px;font-style:normal;letter-spacing:0;margin-left:7px;color:#845d9e}nav a:hover,nav a[aria-current=true]{transform:translateX(8px);color:#9660b7}.update{background:#ffffffe6;border:1px solid #eb81b4;padding:0 12px 10px;margin:0 12px;font-size:11px;line-height:1.8}.update h3{color:#e54797;font-size:16px;margin:0 -12px 8px;padding:3px 10px;background:#ffeff8;border-bottom:1px solid #ed9ac2}.update p{border-bottom:1px dotted #d9b9d4;padding-bottom:8px}.update time{color:#e54b99}.menu>button{margin:15px 12px;background:#ffffffdd;border:1px solid #dc81b0;color:#925485;padding:6px 12px;font-size:10px}main{margin-left:285px}section{min-height:1100px;height:145vh;position:relative;padding:150px 8% 100px 3%;display:flex;align-items:center}.hero{height:110vh;min-height:850px;align-items:flex-start;justify-content:center;padding-top:190px}.hero-logo{text-align:center;transform:rotate(-5deg);color:#e9499e;text-shadow:2px 2px white,-2px -2px white,2px -2px white,-2px 2px white;position:relative}.hero-logo p{font-size:23px;font-weight:800;letter-spacing:4px;margin:0}.hero-logo>small{font-size:14px;color:#8c56a7}.hero-logo h1{font-family:Arial,sans-serif;font-weight:900;font-style:italic;font-size:clamp(65px,9vw,145px);line-height:1;margin:5px 0;letter-spacing:-9px;-webkit-text-stroke:2px white;filter:drop-shadow(3px 5px 0 #995bb7)}.hero-logo>span{letter-spacing:8px;font-weight:800;font-size:17px;color:#9860b8}.hero-logo h2{background:#fffffff0;padding:5px 20px;font-size:23px;box-shadow:5px 5px 0 #e882b199}.hero-logo>a{display:inline-block;font-size:11px;color:#8155b4;letter-spacing:2px;margin-top:30px}.hero-logo b{font-size:50px;line-height:1}article{width:100%;max-width:100%;background:#fffffff0;border:3px solid white;box-shadow:0 0 0 1px #eaa5d0,9px 9px 0 #a5d5fa77;padding:35px;opacity:0;transform:translateX(70px);transition:opacity .5s,transform .65s}section.visible article{opacity:1;transform:none}article h2{font-family:Arial,sans-serif;font-style:italic;color:#e54e98;font-size:clamp(25px,4vw,49px);margin:0 0 25px;border-bottom:3px solid #ef9bc9;padding-bottom:12px;letter-spacing:-1px}article h2 small{display:block;font:12px 'Noto Sans Thai',sans-serif;letter-spacing:2px;color:#9876ac;margin-top:5px}article p{font-size:14px;line-height:2}.date{color:#e15d9b}.more{display:inline-block;background:#e767a7;color:white;font-size:12px;padding:10px 24px;margin-top:20px}#character-cards{display:flex;gap:15px}.card{flex:1;text-align:center;background:linear-gradient(#f2e5ff,#ecf9ff);padding:10px;border:1px solid #ead4f0}.card img{width:100%;height:240px;object-fit:contain}.card strong{display:block;color:#b965ab}.card p{font-size:10px}#gallery{display:flex;gap:10px;flex-wrap:wrap}#gallery a{padding:10px 20px;border:1px solid #e2add0;color:#b34d92;background:#fff}.scroll-controls{position:fixed;right:18px;bottom:45px;display:flex;flex-direction:column;align-items:center;color:#da4996;gap:6px;font-size:9px;font-weight:bold;z-index:25}.scroll-controls button{border:2px solid white;background:#ef87b9;color:white;border-radius:50%;width:40px;height:40px}.scroll-controls button:disabled{opacity:.35;cursor:default}footer{position:fixed;bottom:0;width:100%;text-align:center;font-size:9px;letter-spacing:1px;background:#ffffffe0;padding:6px;color:#8c739d}.clouds{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}.clouds i{position:absolute;width:600px;height:170px;border-radius:50%;background:#fff;filter:blur(30px);opacity:.6;left:60%;top:110%;animation:cloud-breathe 6.5s ease-in-out infinite alternate}.clouds i:nth-child(2){left:-20%;top:220%;animation-duration:8s;animation-delay:-2s}.clouds i:nth-child(3){left:50%;top:340%;animation-duration:7.2s;animation-delay:-4s}@keyframes cloud-breathe{from{scale:.94;opacity:.48}to{scale:1.08;opacity:.7}}html.motion-paused .sky,html.motion-paused .cast-float,html.motion-paused .cast-position img,html.motion-paused .clouds i{animation-play-state:paused!important}@media(max-width:700px){.menu{left:0;top:0;width:100%;background:#ffffffef;padding:8px 10px;display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between}.logo{width:125px}.logo strong{font-size:28px;letter-spacing:-2px}.logo small{font-size:7px}.logo span{font-size:5px}.update{display:none}nav{order:3;display:flex;overflow:auto;margin:5px 0 0;width:100%;gap:14px}nav a{font-size:12px;white-space:nowrap;padding:5px 0}nav a small{display:none}.menu>button{font-size:9px;margin:0}main{margin-left:0}section{padding:100px 24px;min-height:900px;height:125vh}.hero{padding-top:250px;min-height:800px;height:110vh}.hero-logo h1{font-size:75px;letter-spacing:-5px}.hero-logo p{font-size:16px}.hero-logo>span{font-size:11px;letter-spacing:5px}.hero-logo h2{font-size:18px}article{padding:20px}article p{font-size:12px}.card img{height:145px}#character-cards{gap:5px}.card{padding:4px}.card p{font-size:9px}.scroll-controls{right:6px;bottom:35px}.scroll-controls button{width:32px;height:32px}.sky{background-size:auto 220vh}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}article{transition:none}}
/* A full footer in document flow; the parallax cast continues to this point. */
footer.footbody{position:relative;bottom:auto;width:auto;margin-left:285px;padding:0;z-index:1;background:none;text-align:center;letter-spacing:0;color:#755684}
.footer-top{min-height:420px;padding:100px 25px 65px;background:linear-gradient(transparent,#ffffffb0 75%,#fff5fc);text-shadow:0 1px 4px white,0 0 15px white}
.footer-top>span{font-size:11px;font-weight:800;letter-spacing:3px;color:#b0478b}
.footer-top h2{font-size:clamp(27px,4vw,48px);color:#d84c96;margin:18px 0 8px}
.footer-top p{font-size:14px}.back-top{display:inline-block;margin-top:22px;padding:12px 30px;border:2px solid white;background:#e366a5;color:white;font-size:13px;text-shadow:none;box-shadow:0 4px 0 #ba4c8c}
.footer-body{padding:40px 35px 20px;background:#fff5fc;border-top:2px solid #efafd3}
.footer-brand{font:italic 900 37px Arial,sans-serif;color:#df559e;letter-spacing:-2px}
.footer-brand small{display:block;font:10px Arial,sans-serif;letter-spacing:4px;margin-top:5px;color:#9761ad}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 25px;margin:30px 0 20px;font:bold 11px Arial,sans-serif;color:#b45794}
.footer-links a:hover{text-decoration:underline}.footer-body>p{font-size:12px}
.footer-bottom{border-top:1px solid #e9cde0;padding-top:18px;margin-top:30px;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;font-size:9px;color:#9b7d99}
@media(max-width:700px){footer.footbody{margin-left:0}.footer-top{min-height:360px;padding:85px 35px 50px}.footer-body{padding:30px 28px 22px}.footer-bottom{justify-content:center}.footer-links{gap:16px}}

/* Fluid layout and compact, edge-to-edge footer. */
html{overflow-x:clip;scroll-padding-top:20px}
body{overflow-x:clip}
main{max-width:100%;width:calc(100% - 285px)}
section{width:100%;height:auto;min-height:max(780px,130svh);padding:100px clamp(20px,4vw,60px) 100px clamp(20px,4vw,40px);display:flex;align-items:center}
.hero{min-height:max(700px,105svh);padding-top:clamp(140px,20svh,230px)}
.hero-logo{max-width:100%}.hero-logo h1{font-size:clamp(52px,8vw,130px);letter-spacing:-.06em}
article{min-width:0;overflow-wrap:anywhere}
article h2{font-size:clamp(23px,3.5vw,49px)}
.card{min-width:0}.card img{height:clamp(140px,22vw,240px)}
.menu{max-height:calc(100dvh - 40px);overflow-y:auto;scrollbar-width:thin}
nav a{font-size:22px}.menu>button,.more,#gallery a{min-height:44px}
.scroll-controls button{width:44px;height:44px}
footer.footbody{width:100%;margin:0;z-index:30;background:#fff5fc;border-top:2px solid #efafd3}
.footer-body{max-width:1500px;margin:auto;padding:16px max(24px,env(safe-area-inset-right)) 12px max(24px,env(safe-area-inset-left));border:0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px 28px}
.footer-brand{font-size:26px;letter-spacing:-1px}.footer-brand small{font-size:8px;letter-spacing:2px}
.footer-links{margin:0;gap:0 20px}.footer-links a{display:inline-flex;align-items:center;min-height:44px}
.footer-body .back-top{margin:0;padding:8px 16px;min-height:44px;font-size:11px;box-shadow:none;display:flex;align-items:center}
.footer-bottom{grid-column:1/-1;margin:0;padding-top:9px;gap:5px 16px;font-size:9px}
@media(min-width:1025px) and (max-height:750px){.update{display:none}.menu{top:10px}.menu nav{margin-top:12px}}
@media(max-width:1024px){
 html{scroll-padding-top:130px}
 .menu{left:0;top:0;width:100%;max-height:none;overflow:visible;background:#fffffff2;padding:8px max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:4px}
 .logo{width:145px}.logo strong{font-size:30px;letter-spacing:-2px}.logo small{font-size:8px}.logo span{font-size:6px}
 .update{display:none}
 nav{order:3;display:flex;overflow-x:auto;overflow-y:hidden;margin:0;width:100%;gap:20px;scrollbar-width:thin}
 nav a{font-size:14px;white-space:nowrap;min-height:44px;display:flex;align-items:center;padding:5px 0;flex-shrink:0}
 nav a small{display:none}nav a:hover,nav a[aria-current=true]{transform:none}
 .menu>button{font-size:10px;margin:0;min-height:44px}
 main{margin-left:0;width:100%}
 section{min-height:max(680px,115svh);padding:150px clamp(24px,6vw,70px) 90px;justify-content:center}
 .hero{min-height:max(640px,100svh);padding-top:clamp(190px,30svh,280px)}
 .hero-logo h1{font-size:clamp(52px,12vw,112px)}
 .hero-logo p{font-size:clamp(13px,3vw,23px);letter-spacing:2px}
 .hero-logo>span{font-size:12px;letter-spacing:5px}.hero-logo h2{font-size:clamp(16px,3vw,23px)}
 article{padding:clamp(18px,4vw,35px)}
 .sky{background-size:auto max(220svh,200vw)}
 .scroll-controls{right:max(8px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}
 .footer-body{grid-template-columns:1fr auto;gap:6px 15px}
 .footer-brand{text-align:left}.footer-links{grid-column:1/-1;grid-row:2;gap:0 18px;justify-content:flex-start}
 .footer-body .back-top{grid-column:2;grid-row:1}
 .footer-bottom{justify-content:space-between}
}
@media(max-width:480px){
 section{padding-inline:18px}
 .hero-logo h1{font-size:clamp(48px,15vw,72px)}
 article h2{font-size:clamp(21px,6vw,28px);letter-spacing:-.6px}
 article p{font-size:12px}article p br{display:none}
 #character-cards{gap:6px;flex-wrap:wrap}.card{flex:1 1 95px;padding:7px}.card img{height:145px}.card p{font-size:10px}
 #gallery a{flex:1;text-align:center;padding:10px}
 .footer-body{padding:12px 16px max(10px,env(safe-area-inset-bottom))}
 .footer-brand{font-size:23px}.footer-links{gap:0 13px;font-size:10px}
 .footer-bottom{font-size:8px;text-align:left}
}
@media(max-height:500px) and (max-width:1024px){
 .logo small,.logo span{display:none}.logo strong{font-size:25px}
 .menu{padding-top:3px}.menu>button{min-height:34px}
 nav a{min-height:36px}html{scroll-padding-top:95px}
 .hero{padding-top:145px;min-height:600px}
}

/* Editable CMS content */
.cms-body{white-space:pre-line}
.news-item+.news-item{border-top:1px solid #edc5dc;margin-top:28px;padding-top:20px}
.news-item h3{margin:8px 0}.news-item .date{font-size:11px;margin:0}
.update>a{display:block;padding:9px 0;border-bottom:1px dotted #e1bbd5;color:#b84c91;font-weight:600}
#gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:15px}
#gallery .special-image{padding:10px;display:flex;flex-direction:column;gap:8px;text-align:left;min-width:0}
.special-image img{width:100%;height:200px;object-fit:contain;background:#f8f0fa}
.special-image span{font-size:11px;color:#97718b;white-space:pre-line;overflow-wrap:anywhere}
#character-cards{flex-wrap:wrap}.card{flex:1 1 140px;max-width:100%}
.footer-social{grid-column:1/-1;display:flex;gap:15px;flex-wrap:wrap;font-size:11px}
.footer-social:empty{display:none}.footer-social a{padding:8px 0}
.site-logo-img{max-height:48px;max-width:180px;width:auto;object-fit:contain;display:block;margin-bottom:6px}
.hero-logo-img{max-height:120px;max-width:280px;width:auto;object-fit:contain;margin-bottom:12px}
.copy-protected,.copy-protected *{user-select:none!important;-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;-webkit-touch-callout:none!important}