/* Ranong coast photograph: Tintin Thaï, CC BY-SA 4.0. Full credits in every footer. */
:root{--sand:#f5fcff;--line:#d4e7ed;--muted:#435f6b;--ink:#173d4b;--leaf:#257585}
body{background-color:#e6f5fc;background-image:linear-gradient(180deg,#ffffff12,#eaf8ff38),url('images/andaman-continuous.webp');background-position:center top;background-size:cover;background-attachment:fixed}
header{background:#ffffffed;border-bottom:1px solid #d8edf2;padding-block:18px}
main{padding-bottom:36px}
main>section:not(.hero):not(.page-heading){max-width:1240px;width:calc(100% - 64px);margin:28px auto;padding:38px 42px;border:1px solid #ffffffb8;border-radius:24px;background:#ffffffed;box-shadow:0 12px 40px #1c61720a}
main>.page-heading{position:relative;max-width:none;width:100%;min-height:540px;padding:64px 6% 78px;background:linear-gradient(90deg,#eaf8ff12,#ffffff00),url('images/andaman-continuous.webp') center 43%/cover;display:flex;align-items:center}
.heading-content{position:relative;max-width:680px;padding:30px 36px;background:#ffffffed;border:1px solid #ffffff;border-radius:24px;box-shadow:0 15px 45px #174e5a12}
.heading-content h1{font-size:clamp(34px,4vw,58px);margin:14px 0;line-height:1.35}
.heading-content h1 span{font-size:.7em;margin-top:14px}
.heading-content .intro{font-size:16px;margin-bottom:4px}
.coast-credit{font-size:11px;line-height:1.7;color:#365461;background:#fffffff0;border-radius:12px;padding:9px 14px;max-width:520px}
.page-heading>.coast-credit{position:absolute;right:24px;bottom:12px}
.coast-credit a{text-decoration:underline}
.hero{min-height:690px;background:#d9f3ff;padding-block:60px}
.hero:after{display:none}
.hero .landscape{object-position:center 40%}
.hero-copy{background:#ffffffed;border:1px solid white;border-radius:26px;padding:30px 36px;max-width:650px;box-shadow:0 14px 44px #174e5a12}
.hero h1{font-size:clamp(40px,4.4vw,64px);margin:20px 0}
.hero .hero-caption{font-size:11px;max-width:550px;line-height:1.6;background:#fffffff0;border-radius:12px}
.quote-panel,.source{background:#f4fbff;border-color:#d1e7ee}
.sea,.leaf,.sand{background:#f1fbff;border-color:#d2e9ef}
.story{box-shadow:none}.story:after{display:none}
.district-band{background:#ffffffed}
.district-links a,input,select{background:white;border-color:#bedce6}
.place-card{background:white;border-color:#d4e6ed;box-shadow:none}
.place-card:hover{box-shadow:0 8px 24px #246e8612;border-color:#72b5c8}
.map-section,.detail-contacts{background:#f4fbff;border-color:#d4e8ef}
footer{background:#ffffffed;border-top:1px solid #d4e8ef}
footer .coast-credit{margin-top:14px;padding:0;background:transparent}
@media(min-width:1500px){main>.page-heading{min-height:600px}.heading-content{margin-left:max(0px,calc((100vw - 1400px)/2))}}
@media(max-width:760px){body{background-attachment:scroll;background-size:auto 900px;background-repeat:no-repeat}header{background:white}main>.page-heading{padding:200px 20px 72px;min-height:650px;background-position:58% top;align-items:end}.heading-content{padding:22px 24px;max-width:100%}.heading-content h1{font-size:36px}.heading-content .intro{font-size:15px}.page-heading>.coast-credit{left:20px;right:20px;bottom:10px;font-size:10px}main>section:not(.hero):not(.page-heading){width:calc(100% - 28px);padding:28px 22px;margin:18px auto;border-radius:20px}.hero{padding:210px 20px 74px;min-height:730px;align-items:end}.hero-copy{padding:24px;max-width:100%;background:#ffffffed}.hero h1{font-size:42px}.hero .landscape{object-position:58% top}.hero .hero-caption{left:20px;right:20px;bottom:10px;font-size:10px}.hero-copy .intro{font-size:15px}.hero .text-link{margin:14px 0 0 12px}}
/* Light translucency keeps the coast visible without losing text contrast. */
.heading-content,.hero-copy{background:rgba(255,255,255,.83);border-color:rgba(255,255,255,.72);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
main>section:not(.hero):not(.page-heading){background:rgba(255,255,255,.85);border-color:rgba(255,255,255,.65);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.place-card,.quote-panel,.source,.sea,.leaf,.sand{background:rgba(255,255,255,.76);border-color:rgba(202,228,236,.85)}
.detail-contacts,.map-section{background:rgba(245,252,255,.82)}
@media(prefers-reduced-transparency:reduce){.heading-content,.hero-copy,main>section:not(.hero):not(.page-heading),.place-card,.quote-panel,.source,.sea,.leaf,.sand,.detail-contacts,.map-section,header,footer{background:white;backdrop-filter:none;-webkit-backdrop-filter:none}}