:root{--ink:#1d1c1a;--soft:#6b675f;--rule:#1d1c1a;--paper:#faf8f3;--hl:#e9e3d6}
*{box-sizing:border-box}
body{margin:0;background:#ece9e2;color:var(--ink);font:300 17px/1.45 "Cormorant Garamond","Noto Serif Thai",Georgia,serif}
.th,[lang=th]{font-family:"Noto Serif Thai",serif;font-weight:300;font-size:.82em;line-height:1.6}
.paper{max-width:1180px;margin:0 auto;background:var(--paper);padding:18px 16px 30px;box-shadow:0 1px 18px rgba(0,0,0,.08)}
.topline{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);border-bottom:.5px solid var(--rule);padding-bottom:5px}
.mast{text-align:center;padding:10px 0 4px}
.mast h1{font:400 clamp(42px,11vw,96px)/1 "Bodoni Moda",serif;margin:0;letter-spacing:-.01em}
.mast .tag{font-style:italic;font-size:15px;color:var(--soft);margin-top:4px}
.dateline{display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:space-between;border-top:2px solid var(--rule);border-bottom:.5px solid var(--rule);outline:.5px solid var(--rule);outline-offset:2px;padding:5px 2px;margin:8px 0 16px;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.grid{display:grid;grid-template-columns:1fr;gap:0 22px}
section{border-top:.5px solid var(--rule);padding:10px 0 14px}
h2{font:500 12px/1 "Cormorant Garamond",serif;letter-spacing:.26em;text-transform:uppercase;margin:0 0 10px;display:flex;justify-content:space-between}
h2 small{letter-spacing:.1em;color:var(--soft);font-weight:400}
h3{font:400 19px/1.2 "Bodoni Moda",serif;margin:12px 0 3px}
.lead h3{font-size:clamp(26px,5vw,34px);line-height:1.1;margin-top:2px}
.brief p{margin:2px 0}.brief .en{font-size:15px;color:#3a3833}
.src{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.src a{color:inherit}
.brief+.brief{border-top:.5px dotted #aaa;padding-top:4px}
.word .w{font:italic 400 34px/1 "Bodoni Moda",serif}.word .meta{color:var(--soft);font-size:14px}
.dialog p{margin:3px 0}.dialog b{font-weight:500;font-variant:small-caps;letter-spacing:.06em}
.vocab{list-style:none;padding:0;margin:8px 0;columns:2;column-gap:16px}
.vocab li{break-inside:avoid;margin-bottom:6px;line-height:1.15}.vocab .th{display:block;color:var(--soft);font-size:11.5px}
.tip{border:.5px solid var(--rule);padding:8px 10px;font-size:15px}.tip s{color:var(--soft)}
.weather .big{font:400 54px/1 "Bodoni Moda",serif}
.otd p{margin:4px 0}.otd b{font:500 15px "Bodoni Moda",serif;margin-right:6px}
/* puzzles */
.ws{display:grid;grid-template-columns:repeat(10,1fr);max-width:340px;margin:0 auto;user-select:none}
.ws span{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font:400 16px "Bodoni Moda",serif;cursor:pointer;border-radius:50%}
.ws span.sel{background:var(--hl)}.ws span.found{background:var(--ink);color:var(--paper)}
.words{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;font-size:13px;letter-spacing:.12em;margin-top:8px}
.words .done{text-decoration:line-through;color:var(--soft)}
.sd{display:grid;grid-template-columns:repeat(6,1fr);max-width:270px;margin:0 auto;border:1.5px solid var(--ink)}
.sd input{width:100%;aspect-ratio:1;border:.5px solid #999;background:transparent;text-align:center;font:400 20px "Bodoni Moda",serif;color:#5b4a2f;padding:0;border-radius:0}
.sd input[readonly]{color:var(--ink);font-weight:500}
.sd input:nth-child(6n+3){border-right:1.5px solid var(--ink)}
.sd input:nth-child(n+7):nth-child(-n+12),.sd input:nth-child(n+19):nth-child(-n+24){border-bottom:1.5px solid var(--ink)}
.sd input.bad{background:#f3dcd6}.sd.win{outline:2px solid #6a7d5a}
.btn{font:400 12px "Cormorant Garamond";letter-spacing:.2em;text-transform:uppercase;background:none;border:.5px solid var(--ink);padding:5px 10px;margin:8px 4px 0;cursor:pointer;color:var(--ink)}
.center{text-align:center}
.check{list-style:none;padding:0;margin:0}.check label{display:flex;gap:10px;align-items:center;padding:6px 0;border-bottom:.5px dotted #aaa;cursor:pointer}
.check input{appearance:none;width:18px;height:18px;border:.5px solid var(--ink);flex:none;margin:0}
.check input:checked{background:linear-gradient(45deg,transparent 46%,var(--ink) 47% 53%,transparent 54%),linear-gradient(-45deg,transparent 46%,var(--ink) 47% 53%,transparent 54%)}
.check input:checked+span{text-decoration:line-through;color:var(--soft)}
.answers .flip{transform:rotate(180deg);font-size:12px;color:var(--soft);transition:transform .5s}
.answers.show .flip{transform:none;color:var(--ink)}
.answers .flip pre{font:12px/1.3 "Bodoni Moda",serif;margin:2px 0;letter-spacing:.3em}
footer{border-top:2px solid var(--rule);margin-top:10px;padding-top:6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);text-align:center}
@media(min-width:760px){
 .paper{padding:28px 34px 34px;margin:24px auto}
 .grid{grid-template-columns:repeat(2,1fr)}
 .col{border-left:.5px solid var(--rule);padding-left:22px}.col:first-child{border-left:0;padding-left:0}
}
@media(min-width:1050px){.grid{grid-template-columns:1.25fr 1fr 1fr}}
@media print{
 @page{size:A4;margin:9mm}
 body{background:#fff;font-size:10.5pt}.paper{box-shadow:none;margin:0;max-width:none;padding:0;background:#fff}
 .grid{grid-template-columns:1.25fr 1fr 1fr}.col{border-left:.5px solid #000;padding-left:12px}.col:first-child{border:0;padding:0}
 .btn{display:none}.mast h1{font-size:54pt}section{padding:5px 0 8px;break-inside:avoid}
 .answers .flip{transform:rotate(180deg)!important}
}
.social .why{font-size:14px;margin:3px 0;padding-left:8px;border-left:2px solid var(--rule)}.social .why b{font-weight:600}