/* Puppet Slam in Bangkok — main stylesheet (Option B: Paper & Object) */


:root{
  --paper:#EDEBDF;
  --paper-2:#E4E2D4;
  --ink:#16170F;
  --green:#8DC63F;
  --pink:#E64C82;
  --teal:#1B8CAE;
  --orange:#F2A650;
  --rule:#16170F;
  --pad:clamp(18px,4vw,58px);
  --maxw:1520px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Newsreader',Georgia,serif;font-size:17px;line-height:1.62;font-weight:380;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body::after{
  content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{max-width:100%;display:block}
::selection{background:var(--pink);color:var(--paper)}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* type system: grotesque display, serif body */
.d{font-family:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;font-weight:800;text-transform:uppercase;
   line-height:.82;letter-spacing:-.028em;margin:0;font-variation-settings:'wdth' 96}
.d-xl{font-size:clamp(46px,10.2vw,164px)}
.d-page{font-size:clamp(36px,6.4vw,116px)}
.d-l{font-size:clamp(36px,7vw,104px)}
.d-m{font-size:clamp(26px,3.9vw,58px)}
.d-s{font-size:clamp(19px,2.2vw,30px);line-height:.98}
.shadow{text-shadow:.055em .055em 0 var(--teal)}
.shadow-p{text-shadow:.055em .055em 0 var(--pink)}
.lede{font-size:clamp(17px,1.35vw,21px);line-height:1.6;max-width:62ch}
.lbl{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;line-height:1.2}
.serif-i{font-style:italic}

/* ---------- nav ---------- */
.top{position:sticky;top:0;z-index:90;background:var(--paper);border-bottom:2px solid var(--rule)}
.top-in{display:flex;align-items:center;gap:clamp(12px,2.4vw,34px);max-width:var(--maxw);margin:0 auto;padding:11px var(--pad);min-height:70px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:42px}
.brand span{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:13px;text-transform:uppercase;line-height:1.02;letter-spacing:-.01em;max-width:92px}
.nlinks{display:flex;gap:clamp(9px,1.5vw,22px);margin-left:auto;align-items:center}
.nlinks a{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:13px;letter-spacing:.02em;text-transform:uppercase;padding:4px 2px;border-bottom:2px solid transparent}
.nlinks a:hover{border-bottom-color:var(--pink)}
.nlinks a.on{border-bottom-color:var(--ink)}
.subbtn{background:var(--green);border:2px solid var(--ink)!important;border-radius:100px;padding:8px 18px;box-shadow:3px 3px 0 var(--teal);transition:.15s}
.subbtn:hover{box-shadow:0 0 0 var(--teal);transform:translate(3px,3px)}
.langbtn{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:13px;letter-spacing:.03em;background:var(--paper);border:2px solid var(--ink);border-radius:100px;padding:6px 14px;cursor:pointer;margin-right:4px}
.langbtn:hover{background:var(--ink);color:var(--paper)}
.burger{display:none;margin-left:auto;width:40px;height:40px;border:2px solid var(--ink);border-radius:100px;align-items:center;justify-content:center}
.burger i{width:16px;height:2px;background:var(--ink);position:relative;display:block}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:16px;height:2px;background:var(--ink)}
.burger i::before{top:-5px}.burger i::after{top:5px}

/* ---------- hero ---------- */
.hero{padding:clamp(30px,5vw,72px) 0 0;border-bottom:2px solid var(--rule)}
.hgrid{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(20px,3vw,48px);align-items:start}
.hero h1{max-width:9ch}
.hstack{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.chip{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(12px,1.05vw,15px);text-transform:uppercase;letter-spacing:.02em;
  border:2px solid var(--ink);border-radius:100px;padding:7px 16px;background:var(--paper)}
.chip.g{background:var(--green)}.chip.p{background:var(--pink);color:var(--paper)}.chip.o{background:var(--orange)}
.hcta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3vw,42px)}
.btn{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;text-transform:uppercase;font-size:14px;letter-spacing:.01em;
  border:2px solid var(--ink);border-radius:100px;padding:13px 28px;display:inline-block;box-shadow:4px 4px 0 var(--ink);transition:.15s;background:var(--paper)}
.btn:hover{box-shadow:0 0 0 var(--ink);transform:translate(4px,4px)}
.btn-g{background:var(--green)}
.btn-p{background:var(--pink);color:var(--paper);box-shadow:4px 4px 0 var(--ink)}
.postwrap{transform:rotate(-2.2deg);border:2px solid var(--ink);box-shadow:10px 10px 0 var(--teal);background:var(--paper)}
.tape{position:absolute;width:96px;height:26px;background:rgba(242,166,80,.72);border:1px solid rgba(22,23,15,.25);transform:rotate(-6deg);top:-13px;left:22%}

/* marquee: the one moving element */
.marq{border-top:2px solid var(--rule);border-bottom:2px solid var(--rule);background:var(--green);overflow:hidden;padding:11px 0}
.marq-in{display:flex;gap:0;width:max-content;animation:slide 34s linear infinite}
.marq span{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(16px,2vw,27px);
  padding:0 22px;white-space:nowrap;letter-spacing:-.01em}
.marq span::after{content:"◆";margin-left:22px;font-size:.55em;vertical-align:middle;color:var(--pink)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- structure ---------- */
.sec{padding:clamp(56px,7vw,104px) 0;border-bottom:2px solid var(--rule)}
.sec.plain{border-bottom:0}
.sec-hd{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:clamp(26px,3.5vw,50px)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,70px)}
.panel{background:var(--green);border:2px solid var(--ink);padding:clamp(24px,3vw,48px)}
.panel.pink{background:var(--pink);color:var(--paper)}
.panel.paper{background:var(--paper-2)}
.formlist{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.formlist span{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(14px,1.4vw,20px);text-transform:uppercase;
  border:2px solid var(--ink);border-radius:100px;padding:7px 17px;transition:.2s;background:var(--paper)}
.formlist span:nth-child(3n){background:var(--orange)}
.formlist span:nth-child(3n+1):hover{background:var(--green)}
.formlist span:hover{transform:rotate(-2deg)}
.numbers{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));border:2px solid var(--ink);background:var(--ink);gap:2px}
.num{background:var(--paper);padding:22px 20px 20px}
.num b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(34px,4.6vw,64px);line-height:.86}
.num small{display:block;margin-top:9px}

/* ---------- page shell ---------- */
.page{padding:clamp(30px,4vw,58px) 0 0}
.pagehd{border-bottom:2px solid var(--rule);padding-bottom:clamp(26px,3.5vw,48px)}
.tabs{display:flex;gap:9px;flex-wrap:wrap;margin-top:24px}
.tab{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:13px;text-transform:uppercase;border:2px solid var(--ink);
  border-radius:100px;padding:8px 19px;background:var(--paper);transition:.15s}
.tab:hover{background:var(--orange)}
.tab.on{background:var(--ink);color:var(--paper)}

/* ---------- programme table ---------- */
.tt{border-bottom:2px solid var(--rule)}
.ttrow{display:grid;grid-template-columns:92px 1fr 1fr 150px 66px;gap:16px;align-items:baseline;padding:17px 12px 17px 6px;
  border-top:1px solid rgba(22,23,15,.34);transition:background .15s}
.ttrow:hover{background:var(--green)}
.ttrow .tm{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(15px,1.35vw,19px)}
.ttrow .nm{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(17px,1.65vw,23px);line-height:1.1;letter-spacing:-.015em}
.ttrow .cm,.ttrow .vn{font-size:15px}
.ttrow .ag{font-family:'Bricolage Grotesque',sans-serif;font-size:12px;font-weight:700;text-transform:uppercase}
.sess{display:flex;align-items:baseline;gap:14px;background:var(--ink);color:var(--paper);padding:9px 12px;margin-top:0}
.sess h3{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.04em}
.sess span{font-size:14px;opacity:.75}
.footnote{padding:16px 6px;font-style:italic}

/* ---------- detail ---------- */
.back{display:inline-block;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:12px;text-transform:uppercase;
  border:2px solid var(--ink);border-radius:100px;padding:7px 16px;margin-bottom:22px;transition:.15s}
.back:hover{background:var(--pink);color:var(--paper)}
.dgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,3.5vw,58px);align-items:start;padding-top:clamp(26px,3.5vw,46px)}
.frame{border:2px solid var(--ink);box-shadow:9px 9px 0 var(--teal);background:var(--paper)}
.dtable{border-top:2px solid var(--ink)}
.dtable div{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px solid rgba(22,23,15,.3);font-size:16px}
.dtable b{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px;background:var(--ink);border:2px solid var(--ink);margin-top:clamp(38px,5vw,70px)}
.blocks>div{background:var(--paper);padding:24px 22px 28px}
.blocks h4{margin:0 0 10px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.05em}
.blocks p,.blocks li{margin:0;font-size:16px}
.blocks ul{margin:0;padding-left:18px}
.blocks li{margin-bottom:4px}

/* ---------- about ---------- */
.kws{display:flex;flex-wrap:wrap;gap:clamp(10px,1.6vw,26px);align-items:baseline}
.kws span{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(38px,8.4vw,132px);
  line-height:.86;letter-spacing:-.03em;transition:.25s;cursor:default}
.kws span:nth-child(1){text-shadow:.05em .05em 0 var(--green)}
.kws span:nth-child(2){text-shadow:.05em .05em 0 var(--pink)}
.kws span:nth-child(3){text-shadow:.05em .05em 0 var(--teal)}
.kws span:nth-child(4){text-shadow:.05em .05em 0 var(--orange)}
.kws span:hover{transform:rotate(-2deg)}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px;background:var(--ink);border:2px solid var(--ink)}
.tcard{background:var(--paper);padding:0 0 18px;transition:background .2s}
.tcard:hover{background:var(--green)}
.tcard .ph{aspect-ratio:4/5;overflow:hidden;border-bottom:2px solid var(--ink)}
.tcard h4{margin:14px 18px 2px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:19px;letter-spacing:-.01em}
.tcard p{margin:0 18px;font-size:14px;font-style:italic}

/* ---------- upcoming ---------- */
.coming{min-height:78svh;display:grid;place-items:center;padding:clamp(40px,7vw,110px) var(--pad);text-align:center;position:relative;overflow:hidden}
.cut{position:absolute;border:2px solid var(--ink);filter:saturate(1.1)}
.coming-in{position:relative;z-index:3;max-width:960px}
.coming h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;text-transform:uppercase;line-height:.8;letter-spacing:-.035em;
  font-size:clamp(56px,15vw,240px);margin:0;color:var(--green);text-shadow:.028em .028em 0 var(--ink),-.028em -.028em 0 var(--pink)}

/* ---------- videos ---------- */
.feat{position:relative;display:block;border:2px solid var(--ink);box-shadow:10px 10px 0 var(--pink);overflow:hidden;aspect-ratio:16/8}
.feat img{width:100%;height:100%;object-fit:cover}
.play{position:absolute;inset:0;display:grid;place-items:center}
.play i{width:74px;height:74px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);display:grid;place-items:center;transition:.18s}
.play i::after{content:"";border-left:15px solid var(--ink);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.feat:hover .play i,.vcard:hover .play i{background:var(--pink)}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:clamp(16px,2vw,28px)}
.vcard .ph{position:relative;aspect-ratio:16/10;border:2px solid var(--ink);overflow:hidden;transition:.15s;box-shadow:5px 5px 0 var(--teal)}
.vcard:hover .ph{box-shadow:0 0 0 var(--teal);transform:translate(5px,5px)}
.vcard .ph img{width:100%;height:100%;object-fit:cover}
.vcard h4{margin:13px 0 2px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:18px;letter-spacing:-.01em}
.vcard p{margin:0;font-size:14px;font-style:italic}

/* ---------- archive ---------- */
.yearbtns{display:flex;flex-wrap:wrap;gap:clamp(14px,2.4vw,40px);padding:clamp(24px,4vw,60px) 0}
.ybtn{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(56px,13vw,190px);line-height:.8;letter-spacing:-.04em;transition:.25s}
.ybtn:nth-child(1){text-shadow:.04em .04em 0 var(--teal)}
.ybtn:nth-child(2){text-shadow:.04em .04em 0 var(--pink)}
.ybtn:nth-child(3){text-shadow:.04em .04em 0 var(--green)}
.ybtn:hover{transform:translateY(-6px) rotate(-1.5deg)}
.ylist{display:grid;gap:2px;background:var(--ink);border:2px solid var(--ink)}
.yline{background:var(--paper);display:flex;gap:20px;align-items:baseline;flex-wrap:wrap;padding:16px 20px}
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:clamp(16px,2vw,26px)}
.acard .ph{aspect-ratio:4/3;border:2px solid var(--ink);overflow:hidden;box-shadow:6px 6px 0 var(--green);transition:.15s}
.acard:hover .ph{box-shadow:0 0 0 var(--green);transform:translate(6px,6px)}
.acard .ph img{width:100%;height:100%;object-fit:cover}
.acard h4{margin:13px 0 2px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:18px;line-height:1.12}
.acard p{margin:0;font-size:14px;font-style:italic}
.acard .tag{display:inline-block;margin-top:7px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:10px;
  text-transform:uppercase;letter-spacing:.08em;border:2px solid var(--ink);border-radius:100px;padding:2px 9px}
.ysum{display:grid;grid-template-columns:290px 1fr;gap:clamp(24px,4vw,56px);align-items:start}

/* ---------- contact ---------- */
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px;background:var(--ink);border:2px solid var(--ink);margin-top:clamp(26px,3.5vw,48px)}
.cbox{background:var(--paper);padding:26px 22px 30px;transition:.2s}
.cbox:nth-child(1):hover{background:var(--green)}
.cbox:nth-child(2):hover{background:var(--pink);color:var(--paper)}
.cbox:nth-child(3):hover{background:var(--orange)}
.cbox:nth-child(4):hover{background:var(--teal);color:var(--paper)}
.cbox strong{display:block;margin-top:10px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(17px,1.7vw,24px);
  line-height:1.16;letter-spacing:-.015em;word-break:break-word}
.socials{display:flex;flex-wrap:wrap;gap:11px;margin-top:clamp(26px,3.5vw,44px)}
.socials a{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;text-transform:uppercase;font-size:14px;border:2px solid var(--ink);
  border-radius:100px;padding:12px 26px;box-shadow:4px 4px 0 var(--ink);transition:.15s}
.socials a:hover{box-shadow:0 0 0 var(--ink);transform:translate(4px,4px)}
.socials a:nth-child(1):hover{background:var(--teal);color:var(--paper)}
.socials a:nth-child(2):hover{background:var(--pink);color:var(--paper)}
.socials a:nth-child(3):hover{background:var(--orange)}
.socials a:nth-child(4):hover{background:var(--green)}
.bigmark{display:grid;place-items:center;padding:clamp(40px,6vw,90px) 0 0}
.bigmark img{width:min(46vw,280px);transform:rotate(-3deg)}

/* ---------- newsletter + footer ---------- */
.band{background:var(--green);border-top:2px solid var(--rule);border-bottom:2px solid var(--rule);padding:clamp(46px,6vw,88px) 0}
.bandgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.5vw,56px);align-items:end}
.sform{display:flex;gap:11px;flex-wrap:wrap;margin-top:20px}
.sform input{flex:1;min-width:190px;background:var(--paper);border:2px solid var(--ink);padding:13px 16px;font:inherit;font-size:16px}
.sform input:focus{outline:0;box-shadow:4px 4px 0 var(--ink)}
.gform-embed{width:100%;min-width:190px;height:220px;border:2px solid var(--ink);background:var(--paper);margin-top:20px}
@media(max-width:640px){.langbtn{margin:8px 0}.gform-embed{height:340px}}
footer{padding:clamp(38px,5vw,68px) 0 28px}
.fgrid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:28px}
.fgrid h5{margin:0 0 12px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.fgrid a{display:block;padding:4px 0;font-size:16px;width:fit-content;border-bottom:1px solid transparent}
.fgrid a:hover{border-bottom-color:var(--ink)}
.fbot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:clamp(30px,4vw,54px);
  padding-top:18px;border-top:2px solid var(--rule);font-size:14px;font-style:italic}

@media(max-width:1080px){
  .hgrid{grid-template-columns:1fr}
  .postwrap{max-width:330px}
  .two{grid-template-columns:1fr}
  .dgrid{grid-template-columns:1fr}
  .ysum{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .ttrow{grid-template-columns:78px 1fr 130px 58px}
  .ttrow .cm{display:none}
}
@media(max-width:760px){
  .nlinks{position:fixed;inset:70px 0 auto 0;background:var(--paper);border-bottom:2px solid var(--rule);flex-direction:column;
    align-items:flex-start;gap:0;padding:8px var(--pad) 22px;transform:translateY(-135%);transition:transform .4s cubic-bezier(.3,.8,.3,1)}
  .nlinks.open{transform:none}
  .nlinks a{font-size:22px;padding:11px 0;width:100%;border-bottom:1px solid rgba(22,23,15,.2)}
  .subbtn{margin-top:14px;font-size:15px}
  .burger{display:flex}
  .ttrow{grid-template-columns:64px 1fr 52px;gap:12px}
  .ttrow .vn{display:none}
  .fgrid{grid-template-columns:1fr}
  .bandgrid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}


/* small extra styles: poster cards */

.poster{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--paper);display:flex;flex-direction:column;justify-content:space-between;padding:8%;container-type:inline-size}
.poster .blobs{position:absolute;inset:0;mix-blend-mode:multiply}
.poster .pt{position:relative;z-index:2}
.poster .pname{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;text-transform:uppercase;line-height:.8;
  font-size:clamp(24px,5cqw,60px);letter-spacing:-.03em;text-shadow:.045em .045em 0 var(--pink)}
.poster .pmeta{position:relative;z-index:2;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  font-size:clamp(9px,1.6cqw,14px);text-transform:uppercase;letter-spacing:.06em;line-height:1.55}