@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&family=Pridi:wght@400;500;600;700&display=swap');

:root{--red:#cc1820;--red-deep:#8d0e14;--ink:#080808;--paper:#f4f0e8;--cream:#fffdf8;--muted:#6e6862;--line:#ded7cc;--gold:#e7bc52}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0 0 0 288px;background:var(--paper);color:var(--ink);font:400 16px/1.85 Kanit,sans-serif}a{color:inherit;text-decoration:none}.site-header{position:fixed;inset:0 auto 0 0;z-index:50;width:288px;display:flex;flex-direction:column;align-items:stretch;padding:28px 24px 22px;background:#070707;color:#fff;border-right:5px solid var(--red);box-shadow:14px 0 40px rgba(0,0,0,.16)}.site-header:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 16px,rgba(255,255,255,.025) 16px 17px);pointer-events:none}.brand{position:relative;display:flex;align-items:center;height:104px;margin:0 0 34px}.logo-image{display:block;width:100%;max-height:96px;object-fit:contain;object-position:left center}.site-header nav{position:relative;display:grid;gap:3px;margin-top:4px}.site-header nav a{position:relative;padding:12px 13px;border-left:2px solid transparent;color:#d7d0ca;font-size:14px;transition:color .18s ease,background .18s ease,border-color .18s ease}.site-header nav a:not(.nav-cta):hover{color:#fff;background:rgba(255,255,255,.07);border-color:var(--red)}.site-header .nav-cta{display:block;margin-top:15px;padding:13px 14px;background:var(--red);color:#fff;text-align:center;font-weight:600;box-shadow:6px 6px 0 var(--red-deep);transition:transform .18s ease,box-shadow .18s ease}.site-header .nav-cta:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--red-deep)}.site-header:after{content:'12PLAY / TH';position:absolute;left:26px;bottom:20px;color:#716965;font:500 10px/1 monospace;letter-spacing:.18em}.menu-button{display:none}.hero{position:relative;min-height:620px;display:grid;grid-template-columns:minmax(0,1fr) 295px;align-items:end;gap:46px;padding:96px clamp(28px,6vw,94px) 88px;overflow:hidden;background:#0b0b0b;color:#fff}.hero:before{content:'12';position:absolute;right:40px;top:-104px;color:rgba(204,24,32,.16);font:700 min(46vw,610px)/.78 Pridi,serif;letter-spacing:-.12em}.hero:after{content:'';position:absolute;inset:auto 0 0;height:7px;background:repeating-linear-gradient(90deg,var(--red) 0 72px,#fff 72px 79px,var(--red-deep) 79px 92px)}.hero-copy,.hero aside{position:relative;z-index:1}.kicker{margin:0 0 17px;color:var(--gold);font:600 11px/1 monospace;letter-spacing:.17em}.hero h1,.inner-hero h1,.article-hero h1{margin:0;font:700 clamp(58px,7.6vw,108px)/.82 Pridi,serif;letter-spacing:-.07em}.hero h1 em{display:inline-block;margin-top:18px;color:var(--red);font-style:normal;font-size:.54em;letter-spacing:-.04em}.hero-copy>p:not(.kicker){max-width:640px;margin:28px 0 33px;color:#ded7d2;font-size:18px}.button{display:inline-flex;align-items:center;gap:9px;padding:12px 17px;background:var(--red);color:#fff;font-weight:600;box-shadow:5px 5px 0 var(--red-deep);transition:transform .18s ease,box-shadow .18s ease}.button:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--red-deep)}.hero aside{padding:26px 25px 24px;border-top:3px solid var(--red);background:rgba(255,255,255,.06);backdrop-filter:blur(6px)}.hero aside span{color:var(--red);font:700 56px/.75 Pridi,serif}.hero aside strong{display:block;margin:20px 0 8px;font-size:19px}.hero aside p{margin:0;color:#c9c2bc;font-size:14px}.service-ribbon{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,1fr);margin:-1px 0 0;background:var(--cream);border-bottom:1px solid var(--line)}.service-ribbon article{min-height:186px;padding:27px clamp(18px,2.3vw,34px);border-right:1px solid var(--line)}.service-ribbon article:last-child{border:0}.service-ribbon span,.section-number{color:var(--red);font:600 12px monospace;letter-spacing:.11em}.service-ribbon h3{margin:18px 0 8px;font:600 28px/1.05 Pridi,serif;letter-spacing:-.04em}.service-ribbon p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}.home-content{width:min(980px,calc(100% - 56px));margin:92px auto}.content-section{position:relative;display:grid;grid-template-columns:84px minmax(0,1fr);gap:34px;padding:68px 0;border-top:1px solid var(--line)}.content-section:nth-child(3n+2){grid-template-columns:minmax(0,1fr) 84px}.content-section:nth-child(3n+2) .section-number{grid-column:2;grid-row:1;text-align:right}.content-section:nth-child(3n+2)>div:last-child{grid-column:1;grid-row:1}.content-section h2,.reading h2{margin:0 0 17px;font:700 clamp(38px,5vw,63px)/1 Pridi,serif;letter-spacing:-.06em}.content-section .lead{max-width:780px;margin:0 0 21px;color:#2e2926;font:500 23px/1.5 Pridi,serif}.content-section p:not(.lead),.reading p{max-width:780px;margin:0 0 20px;color:#4e4844}.content-section ul,.reading ul{margin:0 0 25px;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 22px}.content-section li,.reading li{padding:8px 0;border-bottom:1px solid var(--line);color:#3f3935}.content-section li:before,.reading li:before{content:'+';margin-right:9px;color:var(--red);font-weight:700}.content-section .button{margin-top:7px}.content-section:nth-child(4n){padding:48px 52px;background:var(--cream);box-shadow:10px 10px 0 #dfd7ca}.content-section:nth-child(4n) .section-number{font-size:18px}.content-section details,.reading details{max-width:780px;border-top:1px solid var(--line);padding:16px 0}.content-section summary,.reading summary{cursor:pointer;font:600 19px/1.45 Pridi,serif}.inner-hero,.article-hero{position:relative;padding:100px clamp(28px,6vw,94px) 78px;overflow:hidden;background:#0b0b0b;color:#fff}.inner-hero:after,.article-hero:after{content:'12PLAY';position:absolute;right:-8px;bottom:-40px;color:rgba(204,24,32,.2);font:700 clamp(120px,19vw,300px)/1 Pridi,serif;letter-spacing:-.1em}.inner-hero>* ,.article-hero>*{position:relative;z-index:1}.inner-hero h1,.article-hero h1{max-width:820px;font-size:clamp(49px,6.1vw,86px)}.inner-hero>p:not(.kicker),.article-hero>p:not(.kicker){max-width:720px;margin:24px 0 0;color:#ded7d2;font-size:18px}.reading{width:min(820px,calc(100% - 56px));padding:78px 0 104px;margin:0 auto}.reading h2{margin-top:50px;font-size:42px}.callout,.article-cta{margin:44px 0;padding:28px 30px;background:var(--cream);border-left:5px solid var(--red);box-shadow:9px 9px 0 #dfd7ca}.callout p,.article-cta p{margin:8px 0 0}.article-list{width:min(1110px,calc(100% - 56px));margin:72px auto 108px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.article-list article{position:relative;min-height:270px;padding:28px;background:var(--cream);border:1px solid var(--line);border-top:5px solid var(--red);transition:transform .18s ease,box-shadow .18s ease}.article-list article:hover{transform:translateY(-5px);box-shadow:9px 11px 0 #dcd3c6}.article-list span{color:var(--red);font:600 12px monospace}.article-list h2{margin:28px 0 13px;font:600 31px/1.1 Pridi,serif;letter-spacing:-.045em}.article-list p{color:var(--muted);font-size:14px;line-height:1.7}.article-list article>a{color:var(--red);font-weight:600}form{margin-top:30px;padding:30px;background:var(--cream);border-top:4px solid var(--red)}input,textarea{width:100%;margin-top:7px;padding:10px 12px;border:1px solid #cfc5b8;background:#fffdf8;color:var(--ink);font:400 16px Kanit,sans-serif}footer{position:relative;padding:63px clamp(28px,6vw,94px) 24px;display:grid;grid-template-columns:1.2fr 0.8fr 1.2fr;gap:28px;background:#090909;color:#d8d1cb;border-top:5px solid var(--red)}.footer-sponsor-block{font-size:13.5px;line-height:1.65}.footer-sponsor-block strong{display:block;font-family:Pridi,serif;font-size:19px;color:#fff;margin-bottom:8px;letter-spacing:-.02em}.footer-sponsor-block p{margin:0;color:#a8a099}.footer-sponsor-block a{color:var(--gold);text-decoration:underline;font-weight:600;transition:color .18s ease}.footer-sponsor-block a:hover{color:#fff}footer strong{color:#fff;font:700 39px Pridi,serif;letter-spacing:-.05em}footer p{max-width:410px;margin:8px 0;font-size:14px}footer div:nth-child(2){display:grid;align-content:start;gap:7px;font-size:14px}footer small{grid-column:1/-1;padding-top:22px;border-top:1px solid rgba(255,255,255,.17);color:#8f8881}.mobile-dock{display:none}@media(max-width:920px){body{margin:0;padding-bottom:65px}.site-header{position:sticky;inset:auto;width:auto;height:67px;display:flex;flex-direction:row;align-items:center;padding:8px 16px;border-right:0;border-bottom:3px solid var(--red);box-shadow:none}.site-header:before,.site-header:after{display:none}.brand{height:45px;width:141px;margin:0}.logo-image{max-height:45px}.site-header nav{display:none;position:absolute;top:64px;left:0;right:0;margin:0;padding:16px;background:#090909;border-bottom:3px solid var(--red);box-shadow:0 15px 30px rgba(0,0,0,.25)}.site-header nav.open{display:grid}.site-header nav a{padding:11px 10px}.site-header .nav-cta{margin:8px 3px 3px}.menu-button{display:grid;gap:4px;margin-left:auto;border:0;background:transparent;color:#fff;font:12px Kanit}.menu-button i{display:block;width:25px;height:2px;background:#fff}.hero{min-height:540px;grid-template-columns:1fr;align-items:center;gap:24px;padding:72px 25px 66px}.hero h1{font-size:65px}.hero:before{right:-10px;top:-30px;font-size:290px}.hero aside{max-width:420px}.service-ribbon{grid-template-columns:1fr 1fr}.service-ribbon article{min-height:150px;padding:21px 18px}.home-content{margin:58px auto}.content-section,.content-section:nth-child(3n+2){display:block;padding:50px 0}.content-section:nth-child(3n+2) .section-number,.content-section:nth-child(3n+2)>div:last-child{grid-column:auto;grid-row:auto;text-align:left}.content-section:nth-child(4n){padding:36px 25px;margin-inline:-14px;box-shadow:6px 6px 0 #dfd7ca}.section-number{margin-bottom:15px}.content-section h2{font-size:45px}.content-section .lead{font-size:21px}.content-section ul,.reading ul{grid-template-columns:1fr}.inner-hero,.article-hero{padding:75px 25px 58px}.article-list{grid-template-columns:1fr;margin:48px auto 82px}.reading{padding:55px 0 76px}.reading h2{font-size:36px}footer{grid-template-columns:1fr;padding:46px 25px 22px}footer small{grid-column:auto}.mobile-dock{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;z-index:60;bottom:0;left:0;right:0;background:#fffdf8;border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(0,0,0,.13)}.mobile-dock a{padding:9px 2px;color:#564f49;text-align:center;font-size:10px}.mobile-dock .dock-cta{margin-top:-15px;padding:13px 2px;background:var(--red);color:#fff;font-weight:600;border-radius:9px 9px 0 0}}@media(max-width:460px){.hero h1{font-size:56px}.service-ribbon article{min-height:132px;padding:16px 13px}.service-ribbon h3{font-size:21px}.service-ribbon p{font-size:11px}.content-section h2{font-size:39px}}
.brand-token{color:var(--accent,var(--red));font-weight:700}.hero .brand-token,.inner-hero .brand-token,.article-hero .brand-token{color:inherit}.hero h1 .brand-token{color:var(--accent,var(--red))}.article-list .brand-token{color:var(--accent,var(--red))}

/* Article Banner Image styles */
.article-banner-container {
  width: min(820px, calc(100% - 56px));
  margin: 40px auto 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 10px 10px 0 #dfd7ca;
}
.article-banner-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
@media (max-width: 920px) {
  .article-banner-container {
    width: calc(100% - 50px);
    margin: 25px auto 0;
    box-shadow: 6px 6px 0 #dfd7ca;
  }
}