:root{--bg:#040b24;--bg2:#081233;--card:#0a1740;--ink:#eaf6ff;--dim:#9db8d4;--w1:#5eead4;--w2:#93c5fd;--w3:#f0abfc;--w4:#fcd34d;--gold:#f5c04e;--line:rgba(168,198,255,.14)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Inter','Noto Sans Thai','Noto Sans SC',system-ui,sans-serif;line-height:1.65;overflow-x:hidden}
a{color:var(--w2)} a:hover{color:var(--gold)}
::selection{background:#4e8df5;color:#fff}
/* languages */
.t{display:flex;flex-direction:column;gap:.15rem}
.l{display:block}
.l.th{font-family:'Noto Sans Thai','Kodchasan',sans-serif}
.l.zh{font-family:'Noto Sans SC',sans-serif}
.t .l+.l{opacity:.78}
body[data-pref=en] .l.en{order:1} body[data-pref=en] .l.th{order:2} body[data-pref=en] .l.zh{order:3}
body[data-pref=th] .l.th{order:1} body[data-pref=th] .l.en{order:2} body[data-pref=th] .l.zh{order:3}
body[data-pref=zh] .l.zh{order:1} body[data-pref=zh] .l.en{order:2} body[data-pref=zh] .l.th{order:3}
body[data-pref=en] .t .l.en,body[data-pref=th] .t .l.th,body[data-pref=zh] .t .l.zh{opacity:1}
body[data-mode=en] .l:not(.en),body[data-mode=th] .l:not(.th),body[data-mode=zh] .l:not(.zh){display:none}
body:not([data-mode=all]) .t .l{opacity:1}
.t.takedown .l,.t.credit .l,.t.small .l{margin-bottom:.35rem}
.go .l+.l:before{content:" · ";opacity:.5}
.go .l{display:inline}
body[data-mode=en] .go .l+.l:before,body[data-mode=th] .go .l+.l:before,body[data-mode=zh] .go .l+.l:before{content:""}
.pill .l{display:inline}.pill .l+.l:before{content:" · ";opacity:.5}
.anthem .l{display:inline}.anthem .l+.l:before{content:" · ";opacity:.5}
body[data-mode=en] .anthem .l+.l:before,body[data-mode=th] .anthem .l+.l:before,body[data-mode=zh] .anthem .l+.l:before,
body[data-mode=en] .pill .l+.l:before,body[data-mode=th] .pill .l+.l:before,body[data-mode=zh] .pill .l+.l:before{content:""}
/* langbar */
.langbar{position:fixed;top:12px;right:12px;z-index:50;display:flex;gap:4px;background:rgba(4,11,36,.72);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:999px;padding:4px}
.langbar button{border:0;background:transparent;color:var(--dim);font:600 .8rem 'Inter','Noto Sans Thai','Noto Sans SC',sans-serif;padding:.4rem .75rem;border-radius:999px;cursor:pointer}
.langbar button.on{background:linear-gradient(135deg,var(--gold),#ff9d5c);color:#1a0f00}
.langbar button:focus-visible{outline:2px solid var(--w1);outline-offset:2px}
/* hero */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:5rem 1.25rem 12rem;overflow:hidden;
 background:linear-gradient(180deg,rgba(4,11,36,.55) 0%,rgba(4,11,36,.78) 62%,var(--bg) 100%),url(assets/4seas-solarpunk-banner.jpg) center/cover no-repeat}
.hero-gift{background:linear-gradient(180deg,rgba(40,24,6,.5) 0%,rgba(4,11,36,.8) 62%,var(--bg) 100%),url(assets/4seas-solarpunk-banner.jpg) center/cover no-repeat}
.hero-circle{background:linear-gradient(180deg,rgba(24,8,40,.55) 0%,rgba(4,11,36,.8) 62%,var(--bg) 100%),url(assets/eth-chiangmai-lakeside.webp) center/cover no-repeat}
.logo{width:170px;height:auto;background:#f4f8ff;padding:.55rem .9rem;border-radius:20px;box-shadow:0 14px 40px rgba(0,0,0,.5);margin-bottom:1.6rem;position:relative}
.triple{position:relative;display:flex;flex-direction:column;gap:.35rem;align-items:center;margin-bottom:1.1rem}
.triple .l.zh{font-family:'Noto Serif SC',serif;font-weight:900;font-size:clamp(3rem,13vw,7.5rem);line-height:1.05;letter-spacing:.08em;background:linear-gradient(90deg,var(--w1),var(--w2),var(--w3),var(--w4));-webkit-background-clip:text;background-clip:text;color:transparent}
.triple .l.th{font-weight:600;font-size:clamp(1.6rem,5.2vw,3rem);color:var(--gold)}
.triple .l.en{font-family:'Fraunces',serif;font-style:italic;font-size:clamp(1.3rem,4vw,2.2rem);color:var(--ink)}
body .triple .l.zh{order:1} body .triple .l.th{order:2} body .triple .l.en{order:3}
.triple .l{opacity:1!important}
body.circle .triple .l.zh{font-size:clamp(2.2rem,8.5vw,5rem);letter-spacing:.03em}
.sub{position:relative;max-width:46rem;font-size:clamp(1rem,2.3vw,1.2rem);color:var(--dim)}
.sub .l{opacity:1!important}
.scroll{position:relative;margin-top:2rem;color:var(--gold);text-decoration:none;font-size:1.8rem;animation:bob 2.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(8px)}}
/* four seas */
.seas{position:absolute;left:-4%;bottom:-1px;width:108%;height:190px}
.sea{animation:sway 9s ease-in-out infinite alternate;transform-origin:center}
.s1{fill:var(--w1);opacity:.5}.s2{fill:var(--w2);opacity:.55;animation-duration:11s}.s3{fill:var(--w3);opacity:.5;animation-duration:13s}.s4{fill:var(--bg);opacity:1;animation-duration:7s}
@keyframes sway{from{transform:translateX(-2%)}to{transform:translateX(2%)}}
/* lanterns */
.lanterns{position:absolute;inset:0;pointer-events:none}
.lanterns i{position:absolute;bottom:-30px;width:calc(16px*var(--s));height:calc(22px*var(--s));border-radius:40% 40% 46% 46%;background:radial-gradient(circle at 50% 40%,#fff3c4,#f5c04e 55%,#d9822b);box-shadow:0 0 22px 6px rgba(245,192,78,.45);animation:rise linear infinite;opacity:0}
@keyframes rise{0%{transform:translateY(0) translateX(0);opacity:0}8%{opacity:.9}90%{opacity:.7}100%{transform:translateY(-105vh) translateX(40px);opacity:0}}
/* sections */
main{max-width:1100px;margin:0 auto;padding:0 1.25rem}
section{padding:3.5rem 0}
h2{font-family:'Fraunces','Noto Serif SC',serif;font-size:clamp(1.6rem,4vw,2.3rem);margin-bottom:1.4rem;text-align:center}
h2.t{align-items:center}
h2.t .l+.l{font-size:.62em;font-weight:500;opacity:.8}
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.3rem}
.door{display:flex;flex-direction:column;gap:.7rem;text-decoration:none;color:var(--ink);background:linear-gradient(160deg,var(--card),#0e1f52);border:1px solid var(--line);border-radius:22px;padding:1.6rem;transition:transform .25s,border-color .25s,box-shadow .25s;position:relative;overflow:hidden}
.door:hover,.door:focus-visible{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 0 1px var(--gold) inset}
.door .emoji{font-size:2.4rem}
.door h3{font-family:'Fraunces','Noto Serif SC',serif;font-size:1.35rem;color:var(--gold)}
.door .t{font-size:.95rem;color:var(--dim)}
.door .go{margin-top:auto;padding-top:.6rem;font-weight:600;color:var(--w1)}
.door.here{border-color:var(--w3)} .door.here:after{content:"●";position:absolute;top:14px;right:16px;color:var(--w3)}
.d-pit{border-top:3px solid var(--w2)}.d-circle{border-top:3px solid var(--w3)}.d-gift{border-top:3px solid var(--w4)}
.story,.rules,.seat,.sibling{text-align:center;max-width:46rem;margin:0 auto}
.story .t,.seat>.t{font-size:1.05rem;color:var(--ink);align-items:center}
.story i{color:var(--w2)}
.anthem{margin-top:1.4rem}
.anthem a,.pill{display:inline-block;padding:.65rem 1.2rem;border:1px solid var(--gold);border-radius:999px;text-decoration:none;color:var(--gold);font-weight:600}
.anthem a:hover,.pill:hover{background:var(--gold);color:#1a0f00}
.rules ol{list-style:none;display:grid;gap:1rem;text-align:left}
.rules li{display:flex;gap:1rem;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.1rem 1.3rem}
.rules li b{flex:none;width:2.2rem;height:2.2rem;border-radius:50%;background:linear-gradient(135deg,var(--w1),var(--w3));color:#06122e;display:grid;place-items:center}
.wall{display:flex;gap:.8rem;justify-content:center;margin:1.6rem 0 .6rem;flex-wrap:wrap}
.seat-empty{width:62px;height:62px;border-radius:16px;border:1.5px dashed var(--line);display:grid;place-items:center;font-size:1.6rem;opacity:.55}
.small{font-size:.9rem;color:var(--dim);align-items:center}
.sibling .t{align-items:center;color:var(--dim);margin-bottom:1rem}
footer{border-top:1px solid var(--line);margin-top:2rem;padding:2.2rem 1.25rem 3rem;text-align:center;color:var(--dim);font-size:.85rem;max-width:56rem;margin-inline:auto}
footer .t{align-items:center;margin-bottom:.9rem}
footer .l{opacity:.9}
footer .links{margin-top:1rem}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}.lanterns{display:none}}
@media(max-width:600px){.langbar{top:8px;right:8px}.hero{padding-bottom:9rem}.seas{height:130px}}