:root{--ink:#201d32;--purple:#4c398c;--line:#d9d6e1;--paper:#f8f7f4;--lime:#dbff81;color-scheme:light}*{box-sizing:border-box}html{scroll-padding-top:18px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 system-ui,"Noto Sans Thai",sans-serif}header,main,footer{width:min(calc(100% - 36px),1080px);margin:auto}header,footer,nav,.brand,.actions,.section-head{display:flex;align-items:center}header,footer{justify-content:space-between;gap:15px}header{min-height:80px}a{color:inherit;text-decoration:none}nav{gap:20px;font-size:14px}nav a:hover,footer a:hover{text-decoration:underline}.brand{font-size:29px;font-weight:850;letter-spacing:-1.8px;gap:8px}.mark{background:var(--ink);color:var(--lime);border-radius:8px;font-size:27px;line-height:32px;text-align:center;width:32px}.subbrand,.tag,.art span{font:700 11px/1.5 ui-monospace,monospace;letter-spacing:.12em}.subbrand{color:#676075}.hero{display:grid;grid-template-columns:1.05fr 1fr;background:#24203f;color:#fff;border-radius:22px;overflow:hidden}.hero-copy{padding:clamp(24px,5vw,58px)}.hero .tag{display:flex;align-items:center;gap:8px;color:var(--lime)}.tag i{width:7px;height:7px;background:currentColor;border-radius:50%}h1{margin:16px 0 10px;font-size:clamp(42px,6vw,70px);letter-spacing:-.055em;line-height:1.25}h1 span{color:#c7b9ff}h2,h3,p{margin:0 0 8px}.hero p{color:#e1dcef}.cta,button{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:44px;padding:9px 18px;border:0;border-radius:8px;line-height:1.5;font-family:inherit;font-size:15px;font-weight:650;cursor:pointer}.cta{background:var(--lime);color:var(--ink);margin-top:12px}.cta b{font-size:20px}.art{display:grid;align-content:center;position:relative;background:#302b54}.art svg{width:100%;height:auto;display:block}.art span{position:absolute;bottom:14px;right:18px;color:#d3caef}.section-head{gap:16px;flex-wrap:wrap;margin-bottom:14px}.section-head h2{font-size:clamp(24px,3vw,32px);margin:0;letter-spacing:-.04em}.section-head .tag{color:var(--purple);padding-right:16px;border-right:1px solid var(--line)}section{margin-bottom:30px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,245px),1fr));gap:14px}.card,.panel,.order,dialog{background:white;border:1px solid var(--line);border-radius:14px;padding:20px}.card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;overflow:hidden;overflow-wrap:anywhere}.cover{position:relative;display:flex;align-items:flex-end;isolation:isolate;min-height:100px;width:calc(100% + 40px);margin:-20px -20px 5px;padding:13px 18px;color:#fff;background:#494074;overflow:hidden;font:700 12px ui-monospace,monospace;letter-spacing:.12em}.cover:after{content:"";position:absolute;z-index:-1;right:12%;top:-36px;width:100px;height:150px;border:12px double #dad0ff;transform:rotate(36deg)}.card:nth-child(3n+2) .cover{background:#245a54}.card:nth-child(3n) .cover{background:#91482e}.card strong{margin-top:auto}.card p{color:#594f67}.card button{width:100%;margin-top:3px}button{color:white;background:var(--purple)}button:hover,.cta:hover{filter:brightness(.94)}button:disabled{opacity:.6;cursor:default}:focus-visible{outline:3px solid #a56115;outline-offset:3px}.actions{gap:10px;margin-top:12px}.order{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:8px}.panel label{display:block;margin:10px 0}.panel input[type=tel],#code{width:min(100%,280px);display:block;padding:11px 13px;border:1px solid #a9a2b8;border-radius:7px;font:inherit;background:#fcfbff}#phonePanel{border-top:1px solid var(--line);margin-top:18px;padding-top:15px}#captcha,#codeFields{margin:10px 0}#code{margin-bottom:8px}#notice:not(:empty){background:#fff1c8;border-left:4px solid #a27718;padding:12px;margin:16px 0}dialog{width:min(400px,94vw);color:var(--ink);max-height:90dvh}.close{float:right;color:var(--ink);background:#eeebf3;padding:4px 12px}dialog h2{margin-top:8px}dialog img{display:block;margin:auto;max-width:100%;height:auto}dialog::backdrop{background:#18142ac9}footer{border-top:1px solid var(--line);padding:20px 0;color:#645b72}body [hidden]{display:none!important}@media(max-width:620px){header{min-height:66px}nav{gap:10px;font-size:13px}.subbrand{display:none}.hero{grid-template-columns:1fr}.art{height:112px;overflow:hidden}.art svg{height:170px}.art span{font-size:9px;bottom:5px}.section-head{gap:10px}.section-head .tag{padding-right:10px}section{margin-bottom:23px}.card{padding:16px}.cover{width:calc(100% + 32px);margin:-16px -16px 4px}}

/* Printed edition: warm paper, cobalt ink and an original wave print. */
:root{--paper:#f5f2e9;--ink:#1e231f;--purple:#1736b1;--line:#cdcbbf}
header,main,footer{width:min(calc(100% - 36px),1120px)}header{border-bottom:1px solid var(--ink);margin-bottom:18px}.mark{background:#1736b1;color:#fff3cf}.brand .subbrand{color:#344682}
.hero{background:#eee9db;color:var(--ink);border:1px solid var(--ink);border-radius:4px;grid-template-columns:1fr .94fr}.hero-copy{padding:clamp(26px,5vw,64px)}.hero .tag{color:#36427b}.hero .tag i{background:#db4b2c}
h1{font-size:clamp(49px,6.8vw,83px);margin:18px 0 12px;line-height:1.12}h1 span{display:block;color:#1736b1}.hero p{color:#444b46;line-height:1.7}.cta{background:var(--ink);color:#fff;border-radius:3px}.cta b{color:#ffaf82}
.art{display:grid;place-items:center;padding:28px 18px;background-color:#c9d3e8;background-image:radial-gradient(#899bbb 1px,transparent 1px);background-size:8px 8px;overflow:hidden}.poster{width:min(84%,350px);position:relative;transform:rotate(5deg);box-shadow:8px 10px 0 #243a8840;background:#1736b1;color:#fff2c8;padding:12px 14px}.art svg{display:block;width:100%;height:auto}.poster-head,.poster-foot{display:flex;align-items:center;justify-content:space-between;gap:5px;border-bottom:1px solid #879cd8;padding-bottom:6px}.poster-foot{border:0;border-top:1px solid #879cd8;padding:7px 0 0}.art span{position:static;color:#fff2c8;font:600 9px/1.2 ui-monospace,monospace}.poster-head b,.poster-foot b{font:800 13px ui-monospace,monospace}
section{margin-bottom:38px}.section-head{margin-bottom:10px}.tools{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0 14px;border-bottom:1px solid var(--ink);margin-bottom:16px}.tools>span{font-size:14px;color:#4b5149}.search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #acaea6;padding:5px 10px;border-radius:4px}.search>span{font:26px/1 system-ui}.search input{width:clamp(130px,25vw,260px);min-height:34px;border:0;font:inherit;background:transparent}.card,.panel,.order,dialog{border-radius:5px}.card{border-color:#bbbdaf}.cover{min-height:125px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;color:white;background:#1938ac}.cover b,.cover span{position:relative;z-index:1;background:#171b27;color:white;padding:3px 6px;max-width:100%;overflow-wrap:anywhere}.cover:after{border:0;right:-16px;top:-55px;width:185px;height:185px;border-radius:50%;transform:none;background:repeating-radial-gradient(circle,#faeab8 0 2px,transparent 3px 9px)}.card .cover[data-motif="1"]{background:#a13c29}.cover[data-motif="1"]:after{border-radius:0;transform:rotate(32deg);background:repeating-linear-gradient(90deg,#ffcaae 0 3px,transparent 3px 10px)}.card .cover[data-motif="2"]{background:#235649}.cover[data-motif="2"]:after{border-radius:50%;background:repeating-conic-gradient(#cce3a6 0 5deg,transparent 5deg 14deg)}.card .cover[data-motif="0"]{background:#1938ac}.empty{background:#fffdf7;padding:26px;border:1px dashed #a7aaa0;grid-column:1/-1}.empty p{color:#565e53}.actions button,.card button,dialog button,#phonePanel button{border-radius:4px}dialog{border-top:6px solid #1736b1}#orders:not(:has(.order)){border-left:3px solid #1736b1;padding:12px 16px;background:#eeece3}footer{border-color:var(--ink)}
@media(max-width:620px){.hero{grid-template-columns:1fr}.art{height:156px;padding:0}.poster{width:184px;transform:rotate(6deg)}.poster svg{height:110px}.hero-copy{padding:25px}.hero h1 span{display:inline}.tools{flex-wrap:wrap}.search{max-width:100%}.section-head .tag{font-size:10px}.hero p{font-size:15px}.art span{font-size:7px}.section-head{align-items:center}section{margin-bottom:28px}}