/* One continuous commissioned illustration; typography remains live HTML. */
.page-title,.mani-banner{position:relative;isolation:isolate;border-bottom:1px solid #bba16a;background:#071c2c url('premium-banner-single-flute-v3.png') center center/cover no-repeat;overflow:hidden;box-shadow:inset 0 1px #f2d59a22}
.page-title::before,.page-title::after,.mani-banner::before,.mani-banner::after{content:none;display:none}
.page-title{display:grid;place-items:center;min-height:0;height:auto;aspect-ratio:4.4/1;padding:36px 0;margin:0;text-align:center}
.page-banner-copy{position:relative;width:56%;margin:0 0 0 1%;padding:15px 0;filter:drop-shadow(0 2px 7px #03111d)}
.page-title .eyebrow{display:block;font:500 11px/1.7 Sarabun,sans-serif;letter-spacing:.2em;color:#dcc38f;margin:0 0 15px}
.page-title h1{font-family:'Noto Serif Thai',serif;font-size:clamp(29px,2.65vw,45px);font-weight:600;line-height:1.55;letter-spacing:0;color:#f4d8a0;margin:0;text-wrap:balance;text-shadow:0 2px 18px #020d18}
.page-title .banner-description{font:400 clamp(14px,1.15vw,19px)/1.8 Sarabun,sans-serif;color:#f0e9de;margin:14px auto 0;max-width:680px;text-wrap:balance}
.banner-divider{display:flex;align-items:center;justify-content:center;gap:13px;width:190px;max-width:60%;margin:18px auto 0;color:#dcbc7c}
.banner-divider::before,.banner-divider::after{content:'';height:1px;flex:1;background:linear-gradient(90deg,transparent,#cfad70)}
.banner-divider::after{transform:rotate(180deg)}
.banner-divider span{width:7px;height:7px;transform:rotate(45deg);border:1px solid #ebd099;box-shadow:0 0 0 3px #ddbd7820}
.mani-banner{display:flex;align-items:center;justify-content:center;aspect-ratio:3/1;min-height:0;height:auto;padding:24px 0}
.mani-banner-copy{width:48%;margin:0 0 0 1%;padding:15px 0;background:none;filter:drop-shadow(0 2px 7px #03111d)}
.mani-banner .mani-kicker{font:500 11px/1.7 Sarabun,sans-serif;letter-spacing:.18em;color:#dcc38f;margin:0 0 12px}
.mani-banner h1{font:600 clamp(39px,4vw,66px)/1.45 'Noto Serif Thai',serif;color:#f4d8a0;margin:0 0 9px;text-shadow:0 2px 18px #020d18}
.mani-banner h2{font:500 clamp(21px,1.9vw,32px)/1.65 'Noto Serif Thai',serif;margin:0;color:#f0dbb2;text-wrap:balance}
.mani-banner-copy .mani-arranger{font:400 clamp(14px,1.15vw,19px)/1.8 Sarabun,sans-serif;color:#eee4d3;margin:14px 0 0;text-wrap:balance}
.mani-banner-copy .mani-arranger strong{color:#f3d195}
.mani-banner-copy>p:last-of-type{font:400 13px/1.8 Sarabun,sans-serif;color:#c9d5db;max-width:520px;margin:12px auto 20px;text-wrap:balance}
.mani-actions{gap:14px;flex-wrap:wrap}
.mani-actions>button,.mani-actions>a{min-width:175px;padding:12px 23px;font-size:15px;border-radius:30px;box-shadow:0 4px 18px #0003}
.mani-actions>button{background:linear-gradient(120deg,#ffedc3,#debc7d);border:1px solid #f4dcb0;color:#102b40}
.mani-actions>a{background:#071c2c70;border:1px solid #dcc89c;color:#f4ead7;backdrop-filter:blur(3px)}
@media(max-width:1050px) and (min-width:701px){.page-title{aspect-ratio:3.5/1;padding:24px 0}.page-banner-copy{width:59%}.page-title h1{font-size:28px}.page-title .eyebrow{font-size:9px;margin-bottom:10px}.mani-banner-copy{width:53%}.mani-banner h1{font-size:39px}.mani-banner h2{font-size:21px}.mani-banner-copy>p:last-of-type{font-size:12px;margin-bottom:14px}.mani-actions>button,.mani-actions>a{min-width:145px;padding:9px 14px;font-size:13px}}
@media(max-width:700px){.page-title,.mani-banner{display:block;aspect-ratio:auto;height:auto;background:#071c2c;padding:0 0 28px}.page-title::before,.mani-banner::before{content:'';display:block;position:relative;inset:auto;width:100%;height:auto;aspect-ratio:3/1;background:url('premium-banner-single-flute-v3.png') center/contain no-repeat;opacity:1;mask:none;z-index:auto}.page-banner-copy,.mani-banner-copy{width:auto;margin:0 6%;padding:22px 0 0}.page-title h1{font-size:28px}.page-title .eyebrow{font-size:10px;margin-bottom:10px}.page-title .banner-description{font-size:16px}.banner-divider{margin-top:15px;width:150px}.mani-banner h1{font-size:40px}.mani-banner h2{font-size:23px}.mani-banner-copy .mani-arranger{font-size:16px}.mani-banner-copy>p:last-of-type{font-size:13px;margin:12px auto 20px}.mani-actions>button,.mani-actions>a{min-width:140px;padding:10px 17px;font-size:13px}}

/* Full ensemble framing: keep all five story characters visible. */
@media(min-width:701px){.page-title{aspect-ratio:3/1}.page-banner-copy{width:38%;margin:0}.page-title h1{font-size:clamp(27px,2.35vw,40px)}.mani-banner-copy{width:38%;margin:0}.mani-banner h1{font-size:clamp(36px,3.5vw,57px)}.mani-banner h2{font-size:clamp(20px,1.65vw,28px)}.mani-banner-copy .mani-arranger{font-size:16px}.mani-actions>button,.mani-actions>a{min-width:145px;padding:10px 17px;font-size:13px}.mani-banner-copy>p:last-of-type{font-size:12px}}
@media(min-width:701px) and (max-width:1000px){.mani-banner-copy{width:42%}.mani-banner h1{font-size:34px}.mani-banner h2{font-size:19px}.mani-banner-copy .mani-arranger{font-size:14px}.mani-actions{gap:8px}.mani-actions>button,.mani-actions>a{min-width:0;padding:8px 12px;font-size:12px}}
/* Home shows the entire ensemble at every width, without background cropping. */
.mani-home .mani-banner{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;justify-items:center;aspect-ratio:auto;padding:0;background:#071c2c;height:auto}
.mani-home .mani-banner::before{content:none;display:none}
.mani-banner-art{display:block;grid-area:1/1;width:100%;height:auto;max-width:100%;aspect-ratio:3/1;object-fit:contain;align-self:center}
.mani-home .mani-banner-copy{grid-area:1/1;z-index:1}
@media(max-width:1100px){.mani-home .mani-banner{padding-bottom:28px}.mani-banner-art{grid-area:1/1;align-self:start}.mani-home .mani-banner-copy{grid-area:2/1;width:auto;max-width:620px;margin:0 6%;padding:22px 0 0}.mani-home .mani-banner h1{font-size:clamp(34px,5vw,44px)}.mani-home .mani-banner h2{font-size:23px}.mani-home .mani-banner-copy .mani-arranger{font-size:16px}}