:root { --night:var(--surface); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:110px; }
body { margin:0; background:var(--surface); color:var(--ink); font:400 17px/1.75 var(--sans); }
img { max-width:100%; }
a { color:var(--accent-text); } a:hover { color:var(--ink); }
button,input,select { font:inherit; }
button { cursor:pointer; }
button,a { -webkit-tap-highlight-color:transparent; }
:where(a,button,input,select):focus-visible { outline:3px solid var(--focus)!important; outline-offset:4px; }
button { color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:var(--radius-pill); padding:10px 18px; }
button:hover { border-color:var(--accent-text); }
button[aria-pressed=true],.primary { background:linear-gradient(var(--gold-300),var(--gold-700));color:var(--on-gold);border-color:var(--gold-500); }
[hidden] { display:none!important; }
.site-header { position:relative;z-index:5;background:rgba(11,18,32,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line); }
body[data-page=home] .site-header { position:sticky;top:0; }
.site-nav { max-width:1248px;margin:auto;padding:14px 24px;display:flex;align-items:center;flex-wrap:wrap;gap:12px 28px; }
.brand { display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:700 16px/1 var(--latin);letter-spacing:.08em; }
.brand img { width:40px;height:40px;flex:none; }
.nav-links { display:flex;flex-wrap:wrap;gap:4px 22px;margin-left:auto;font-size:14px;font-weight:500; }
.nav-links a { color:var(--muted);text-decoration:none; }
.nav-links a[aria-current=page] { color:var(--accent-text); }
.language { display:flex;border:1px solid var(--line);border-radius:var(--radius-pill);padding:3px; }
.language button { padding:4px 12px;border:0;font-size:13px;font-weight:600; }
.skip-link { position:fixed;left:16px;top:-150px;z-index:100;padding:12px;background:var(--surface-raised); }
.skip-link:focus { top:16px; }
.container { width:100%;max-width:1200px;margin:0 auto; }
.section { padding:var(--space-30) var(--space-6); }
.raised { background:var(--surface-raised); }
h1,h2 { text-wrap:balance; }
h1 { margin:0;font:400 clamp(40px,5.4vw,72px)/1.12 var(--display); }
h2 { font:400 clamp(30px,4vw,48px)/1.2 var(--display); }
h3 { font:700 24px/1.4 var(--serif); }
html[lang=en] h1,html[lang=en] h2 { font-family:var(--latin); }
html[lang=th] p,html[lang=th] .caption { line-height:1.75; }
.lead { max-width:760px;font-size:21px;line-height:1.6;color:var(--muted); }
.caption { font-size:13px;color:var(--muted); }
.eyebrow { font:600 13px/1.6 var(--sans);letter-spacing:.14em;color:var(--accent-text); }
.two-col { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px; }
.media-mock { aspect-ratio:16/9;border:1px solid var(--line);border-radius:var(--radius-card);display:grid;place-items:center;text-align:center;padding:24px;background:var(--surface-raised); }
.mock-image { position:relative;min-width:0; }
.mock-image img { display:block;width:100%;height:auto; }
[data-mock] { position:relative; }
.mock-badge { position:absolute;right:6px;top:6px;z-index:15;display:inline-block;border-radius:4px;padding:2px 6px;background:var(--gold-300);color:var(--on-gold);font:700 10px/1.6 var(--sans);letter-spacing:.06em;box-shadow:0 1px 5px #0008;pointer-events:none; }
.mocks-hidden .mock-badge { display:none; }
.mock-copy { padding:18px 22px;border:1px solid var(--line);border-radius:var(--radius-md);color:var(--muted); }
.site-footer { padding:40px 24px;border-top:1px solid var(--line);font-size:13px;color:var(--muted); }
.footer-row { display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px; }
.footer-links { display:flex;flex-wrap:wrap;gap:18px; }
.footer-note { margin-top:24px;display:flex;gap:16px;flex-wrap:wrap; }
.footer-note span { padding:8px 52px 8px 0; }
.story-controls { display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%; }
.story-controls p { flex-basis:100%;font-size:13px;color:var(--muted);margin:4px 0 0; }
[data-story-image] { transition:opacity .7s ease; }
[data-story-hall] { isolation:isolate; }
[data-fan-card] { transition:transform 1s cubic-bezier(.3,.1,.2,1),opacity .8s ease; }
.filter-section { position:sticky;top:0;z-index:4;background:rgba(11,18,32,.94);backdrop-filter:blur(12px);border-block:1px solid var(--line);padding:12px 24px; }
.filter-row { display:flex;flex-wrap:wrap;gap:8px;align-items:center; }
.filter-row+.filter-row { margin-top:8px; }
.filter-row button { padding:8px 16px;font-size:14px;font-weight:600;line-height:1.6; }
.filter-row label { font-size:13px;color:var(--muted); }
.filter-row input,.filter-row select { background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-pill);color:var(--ink);font-size:13px;padding:8px 12px;max-width:100%; }
.filter-row input { width:260px; }
.gallery-section { padding:40px 24px 120px; }
#gallery-count { font-size:14px;color:var(--muted);margin:0 0 20px; }
.card-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:26px; }
.card-tile { padding:0;border:0;border-radius:8px;aspect-ratio:2/3;width:100%;overflow:hidden;background:transparent;box-shadow:0 16px 36px #0009;transition:transform .5s ease; }
.card-tile:hover { transform:translateY(-6px); }
.card-tile img { width:100%;height:100%;display:block;object-fit:contain; }
#gallery-more { display:block;margin:40px auto; }
#card-dialog { width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:24px;border:0;background:rgba(5,8,16,.94);color:var(--ink);overflow-y:auto; }
#card-dialog::backdrop { background:rgba(5,8,16,.88);backdrop-filter:blur(8px); }
.detail-layout { width:100%;max-width:1040px;min-height:100%;margin:auto;display:flex;flex-wrap:wrap;gap:44px;align-items:center;justify-content:center; }
.detail-visual { display:flex;flex-direction:column;align-items:center;gap:14px; }
.card-flipper { padding:0;border:0;background:none;width:320px;height:480px;perspective:1400px;border-radius:12px; }
.flip-inner { position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.1,.2,1); }
.card-flipper.is-flipped .flip-inner { transform:rotateY(180deg); }
.flip-face { position:absolute;inset:0;backface-visibility:hidden;border-radius:12px;overflow:hidden;box-shadow:0 30px 80px #000b; }
.flip-face img { width:100%;height:100%;display:block; }
.flip-back { transform:rotateY(180deg); }
.detail-text { flex:1 1 340px;max-width:520px;min-width:0; }
.detail-text h2 { margin:10px 0;font:700 40px/1.3 var(--serif); }
.detail-text p { white-space:pre-line; }
.passive-list { border-top:1px solid var(--line);padding-top:14px; }
.passive { margin-bottom:16px; }
.passive h3 { font:700 18px/1.6 var(--serif);margin:0; }
.passive h3 strong { font:800 15px/1.6 var(--num);color:var(--accent-text);margin-right:10px; }
.passive p { margin:4px 0;font-size:15px;line-height:1.75;color:var(--muted); }
.detail-actions { display:flex;flex-wrap:wrap;gap:10px;margin-top:22px; }
.detail-actions .primary { margin-left:auto; }
.detail-avatar { width:68px;height:68px;object-fit:contain;float:right;margin-left:12px; }
.source-copy { border-left:2px solid var(--line);padding-left:12px; }
.news-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:48px; }
.news-card { border-top:1px solid var(--line);padding-top:18px; }
.news-art { aspect-ratio:16/9;background:var(--surface-raised);border:1px solid var(--line);display:grid;place-items:center;border-radius:var(--radius-md);color:var(--muted);font-size:14px; }
.news-card h2 { font:700 24px/1.6 var(--serif); }
.article { max-width:820px; }
.article .news-art { margin-top:40px; }
.article-body { font-size:19px;line-height:1.9; }
.follow-panel { max-width:720px;margin:auto; }
.follow-form { display:grid;gap:14px;margin:40px 0;padding:32px;background:var(--surface-raised);border-radius:var(--radius-card);border:1px solid var(--line); }
.follow-form input { width:100%;padding:14px 18px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);color:var(--ink); }
.social-row { display:flex;flex-wrap:wrap;gap:12px; }
#mock-message { position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:60;width:max-content;max-width:calc(100% - 32px);padding:16px 24px;border:1px solid var(--accent-text);border-radius:var(--radius-md);background:var(--surface-raised);box-shadow:var(--shadow-lift); }
.initial-loading { min-height:100dvh;display:grid;place-content:center;text-align:center; }
.initial-loading img { width:160px;justify-self:center; }
body[data-page=loading] .screen { min-height:75dvh; }
.loading-wrap { height:75dvh;min-height:500px;position:relative; }
.loading-wrap .controls { position:absolute; }
.loading-progress { width:min(280px,70vw);height:2px;accent-color:var(--gold-300); }
.loading-wrap .status { line-height:1.75; }
.progress-0 { width:0%!important; }.progress-18 { width:18%!important; }.progress-46 { width:46%!important; }.progress-78 { width:78%!important; }.progress-100 { width:100%!important; }
.legal { max-width:820px; }
@media(max-width:700px) {
 html { scroll-padding-top:16px; }
 .site-nav { padding:14px 16px;gap:12px; }
 .brand { font-size:13px;letter-spacing:.04em;flex:1; }
 .brand img { width:32px;height:32px; }
 .nav-links { order:3;width:100%;margin:0;gap:8px 18px; }
 .language { margin-left:auto; }
 .site-header,body[data-page=home] .site-header { position:relative; }
 .section { padding:80px 16px; }
 main section[class^=d] { padding-left:16px;padding-right:16px; }
 main [class^=d] { min-width:0; }
 main div[class^=d] { grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
 main h1 { font-size:clamp(36px,9vw,56px);line-height:1.25; }
 main h2 { line-height:1.35; }
 main [data-story-hall] { height:220px;max-width:100%;margin-top:16px; }
 main [data-story-hall]>div:first-child { width:77%;top:10px; }
 main [data-story-hall]>div:nth-child(2) { width:34%;right:0;top:125px; }
 main [data-story-hall] img { width:100%;height:100%;object-fit:contain; }
 main [data-fan-card] { width:140px;height:210px;margin-left:-70px; }
 .two-col,.news-grid { grid-template-columns:1fr; }
 .filter-section { position:relative;padding:12px 16px; }
 .filter-row { gap:6px; }
 .filter-row input { width:100%; }
 .filter-row button { padding:8px 12px; }
 .filter-row label { display:flex;flex-direction:column;flex:1;min-width:120px; }
 .gallery-section { padding:28px 16px 80px; }
 .card-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:16px; }
 #card-dialog { padding:24px 16px; }
 .detail-layout { gap:24px;align-items:flex-start; }
 .detail-text { flex-basis:100%; }
 .card-flipper { width:260px;height:390px; }
 .detail-text h2 { font-size:32px; }
 .follow-form { padding:24px 16px; }
 .site-footer { padding:32px 16px; }
}
@media(max-height:500px) and (orientation:landscape) {
 .detail-layout { flex-wrap:nowrap;gap:24px;align-items:flex-start; }
 .card-flipper { width:180px;height:270px; }
 .detail-text { flex-basis:55%; }
 .loading-wrap { min-height:400px; }
}
@media(prefers-reduced-motion:reduce) {
 *,*::before,*::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; }
}

.fan-slot-0{transform:translateX(-472px) translateY(144px) rotate(-36deg) scale(1);z-index:6;opacity:0}
.fan-slot-1{transform:translateX(-354px) translateY(81px) rotate(-27deg) scale(1);z-index:7;opacity:1}
.fan-slot-2{transform:translateX(-236px) translateY(36px) rotate(-18deg) scale(1);z-index:8;opacity:1}
.fan-slot-3{transform:translateX(-118px) translateY(9px) rotate(-9deg) scale(1);z-index:9;opacity:1}
.fan-slot-4{transform:translateX(0px) translateY(-18px) rotate(0deg) scale(1.1);z-index:10;opacity:1}
.fan-slot-5{transform:translateX(118px) translateY(9px) rotate(9deg) scale(1);z-index:9;opacity:1}
.fan-slot-6{transform:translateX(236px) translateY(36px) rotate(18deg) scale(1);z-index:8;opacity:1}
.fan-slot-7{transform:translateX(354px) translateY(81px) rotate(27deg) scale(1);z-index:7;opacity:1}[data-mock]:is(button,span) { display:inline-block;padding-right:62px; }
.footer-note>span { padding:8px 62px 8px 0; }
.footer-note .mock-badge { padding:2px 6px; }
button .mock-badge { top:4px;right:6px; }
.dialog-open { overflow:hidden; }
.filter-row .search-label { margin-left:auto;font-size:12px; }
.filter-row .search-label input { margin-left:12px; }
.subfilters { gap:6px; }
.subfilters button { padding:5px 12px;font-size:13px; }
.filter-divider { width:1px;height:24px;background:var(--line);margin:0 6px; }
.story-controls>[data-mock] { flex-basis:100%;padding:8px 62px 8px 0; }
@media(max-width:700px) { .filter-row .search-label { flex-basis:100%;margin-left:0; }.filter-row .search-label input { margin-left:0;width:100%; }.subfilters { gap:6px; }.filter-divider { display:none; } }
.follow-play { display:inline-block;padding:10px 24px;border:1px solid var(--gold-500);border-radius:var(--radius-pill);font-weight:700;text-decoration:none; }
.follow-play:hover { color:var(--on-gold);filter:brightness(1.1); }
/* Pictures arrive whole: a soft placeholder, then a fade. */
main img { transition:opacity .3s ease; }
.img-wait { opacity:0; }
.card-tile,[data-fan-card] { background:linear-gradient(160deg,#1a2438,#10182a); }
/* The first screen: the logo and a bar, until the page is ready. The animation is a safety net
   so it can never stay up (no JavaScript, or something failed). */
#boot { position:fixed;inset:0;z-index:50;display:grid;place-content:center;justify-items:center;gap:18px;background:#07060d;transition:opacity .45s ease,visibility .45s;animation:boot-out .4s ease 12s forwards; }
#boot img { width:min(46vh,70vw);height:auto; }
.boot-bar { width:min(320px,60vw);height:4px;overflow:hidden;border-radius:2px;background:rgba(255,224,138,.16); }
.boot-bar i { display:block;height:100%;background:linear-gradient(90deg,#b07f2c,#ffe08a);transform:scaleX(.06);transform-origin:left;transition:transform .35s ease; }
#boot.done { opacity:0;visibility:hidden; }
@keyframes boot-out { to { opacity:0;visibility:hidden; } }