/* คืนไขคดี — ห้องเก็บแฟ้ม — hand-written CSS, no framework. Font direction A (typewriter). */
@font-face{font-family:"KK Pimpdeed";src:url(/assets/fonts/PSPimpdeedIINew.woff2) format("woff2");font-display:swap;size-adjust:150%}
@font-face{font-family:"KK MuekMod";src:url(/assets/fonts/SOV-MuekMod-Bold.woff2) format("woff2");font-display:swap;size-adjust:135%}
@font-face{font-family:"KK Courier";src:url(/assets/fonts/CourierPrime-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Special Elite";src:url(/assets/fonts/SpecialElite-Regular.woff2) format("woff2");font-display:swap}

:root{
  /* colour */
  --desk:#17130e; --paper:#ece2c9; --paper-2:#e4d8bb; --manila:#c7a466; --manila-edge:#6f5631;
  --ink:#231d15; --ink-soft:#4f4434; --ink-faded:#75674f; --rule:#a3916e; --red:#9a2a22; --blue:#2c3f63; --lamp:#e8cf8a;
  /* type: Thai first in Thai mode so Thai spacing comes from the Thai typewriter face */
  --f-body:"KK Pimpdeed","KK Courier",monospace;
  --f-head:"KK MuekMod","Special Elite",monospace;
  --f-type:"Special Elite","KK Pimpdeed",monospace;
  --f-logo:"KK MuekMod","Special Elite",monospace;
  --lh:1.9;
  /* spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --wrap:1120px; --gut:clamp(16px,4vw,40px);
  --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .15  0 0 0 0 .08  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --fibre:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='4' seed='7'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .27  0 0 0 0 .12  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
  --wear:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='120'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3'/><feComponentTransfer><feFuncA type='discrete' tableValues='1 1 1 0 1 1 0 1'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23w)'/></svg>");
}
html.en{--f-body:"KK Courier","KK Pimpdeed",monospace;--f-head:"Special Elite","KK MuekMod",monospace;--lh:1.65}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.en .th, html:not(.en) .en{display:none!important}
body{margin:0;color:var(--ink);font:400 16px/var(--lh) var(--f-body);background:var(--desk) var(--noise);background-size:220px;min-height:100vh;overflow-x:hidden}
a{color:var(--blue)}
img,video{max-width:100%;display:block}
::selection{background:#9a2a2255}
p{margin:0 0 var(--s4)}
b,strong{font-weight:700}
.wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--gut));margin-inline:auto;padding-inline:var(--gut)}

/* ---------- atmosphere ---------- */
.grain,.vignette,.flicker{position:fixed;pointer-events:none}
.grain{inset:-50%;z-index:90;background:var(--noise);opacity:.2;animation:grain .9s steps(5) infinite;mix-blend-mode:multiply}
.vignette{inset:0;z-index:89;box-shadow:inset 0 0 22vmin 6vmin rgba(0,0,0,.82)}
.flicker{inset:0;z-index:88;background:#000;opacity:0;animation:flick 11s infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
@keyframes flick{0%,91%,100%{opacity:0}92%{opacity:.18}92.6%{opacity:.02}93.4%{opacity:.25}94%{opacity:0}97%{opacity:.08}97.4%{opacity:0}}

/* ---------- top strip ---------- */
.topbar{position:relative;z-index:20;background:#0d0a07;border-bottom:1px dashed #4a3f30}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:48px}
.topbar .reg{font:13px/1.4 var(--f-type);color:#a99a7c;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ctrls{display:flex;gap:var(--s2);flex-shrink:0}
.ctrl{font:13px/1 var(--f-type);color:#d9c9a3;background:#2a2219;border:1px solid #6b5a40;padding:0 12px;height:34px;cursor:pointer;white-space:nowrap}
.ctrl:hover,.ctrl:focus-visible{color:#fff3d0;border-color:var(--manila);outline:none}
.ctrl[aria-pressed="true"]{color:#1c160f;background:var(--lamp)}
.ctrl .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#5b4b36;margin-right:7px;vertical-align:1px}
.ctrl[aria-pressed="true"] .dot{background:var(--red);box-shadow:0 0 6px #ff4a2a}

/* ---------- masthead: kicker / logo / subtitle, register card on the right ---------- */
.mast{position:relative;z-index:5;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--s5);padding-top:var(--s7);padding-bottom:var(--s5);color:#e8dcc0}
.mast-id{min-width:0}
.kicker{margin:0 0 var(--s3);font:14px/1.6 var(--f-type);letter-spacing:.14em;color:#a3906c}
html.en .kicker{text-transform:uppercase;font-size:13px}
.brand{display:inline-block;text-decoration:none;color:inherit}
.logo{display:block;font:400 clamp(52px,7.4vw,92px)/1.25 var(--f-logo);color:#efe2c2;letter-spacing:.02em;padding-top:.08em;
  text-shadow:1px 1px 0 #00000080,0 0 18px #e8cf8a1f;animation:sign 7s infinite}
@keyframes sign{0%,46%,49%,52%,100%{opacity:1}47%{opacity:.55}50%{opacity:.8}}
.sub{margin:var(--s3) 0 0;font:14px/1.4 "Special Elite",monospace;letter-spacing:.28em;color:#a3906c;white-space:nowrap}
.mast-card{margin:0;display:grid;gap:0;min-width:250px;border:1px solid #5a4b35;background:#120e0a;font:13px/1.5 var(--f-type);color:#c9b892}
.mast-card div{display:grid;grid-template-columns:7.5em 1fr;border-bottom:1px dashed #4a3f30}
.mast-card div:last-child{border-bottom:0}
.mast-card dt{padding:6px 10px;color:#8d7c5c;border-right:1px dashed #4a3f30}
.mast-card dd{margin:0;padding:6px 10px}

/* announcements: label box + scrolling teletype line */
.notice-wrap{position:relative;z-index:5}
.notice{display:flex;align-items:stretch;border:1px solid #3d3326;background:#0c0a07;height:34px;overflow:hidden}
.notice-lab{flex-shrink:0;display:flex;align-items:center;padding:0 var(--s3);background:var(--red);color:#f3e2c8;font:13px/1 var(--f-type);letter-spacing:.1em}
.notice-run{flex:1;min-width:0;overflow:hidden;white-space:nowrap;display:flex;align-items:center;color:#c9b27a;font:13px/1 var(--f-type);letter-spacing:.04em}
.notice-run > span{display:inline-block;padding-left:100%;animation:tick 40s linear infinite;animation-delay:-15s}
@keyframes tick{to{transform:translateX(-100%)}}

/* folder tabs: equal widths, never wrap */
.nav{position:relative;z-index:6;margin-top:var(--s5)}
.tabs{display:flex;gap:var(--s1);margin:0;padding:0;list-style:none}
.tabs li{flex:1 1 0;min-width:0}
.tabs a{display:flex;align-items:center;justify-content:center;gap:var(--s2);height:46px;padding:0 var(--s3);white-space:nowrap;text-decoration:none;
  color:#2d2418;background:var(--manila) var(--fibre);border:1px solid var(--manila-edge);border-bottom:0;border-radius:6px 6px 0 0;
  font:15px/1 var(--f-body);transform:translateY(4px);transition:transform .15s}
.tabs a:hover,.tabs a:focus-visible{transform:translateY(0);outline:none}
.tabs a[aria-current="page"]{background-color:var(--paper);transform:translateY(1px)}
.tabs .no{font:13px/1 var(--f-body);color:#6d5634;min-width:2em;text-align:right}
.tabs .lb{overflow:hidden;text-overflow:ellipsis}

/* ---------- page body ---------- */
main{position:relative;z-index:5}
.folder{background:var(--paper-2) var(--fibre);border:1px solid var(--manila-edge);padding:var(--s7) var(--s7) var(--s8);position:relative;box-shadow:0 30px 60px -20px #000c}
.folder::before{content:"";position:absolute;inset:0;background:var(--noise);opacity:.3;mix-blend-mode:multiply;pointer-events:none}
.folder > *{position:relative}
.folder > * + *{margin-top:var(--s7)}

/* typed document: punch-hole margin, header block, ruled body */
.doc{background:var(--paper) var(--fibre);position:relative;overflow:clip;padding:var(--s6) var(--s7) var(--s7) 92px;
  box-shadow:1px 2px 0 #b8a67f,3px 5px 0 #a59165,0 14px 24px -12px #0009}
.doc::before{content:"";position:absolute;left:64px;top:0;bottom:0;border-left:1px solid #c0675c66;box-shadow:3px 0 0 #c0675c33}
.doc::after{content:"";position:absolute;left:24px;top:72px;width:14px;height:14px;border-radius:50%;background:#2c241b;box-shadow:0 160px 0 #2c241b,inset 1px 1px 2px #000}
.doc-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s5);padding-bottom:var(--s4);margin-bottom:var(--s6);border-bottom:3px double var(--ink-soft)}
.doc-meta{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:0;margin:0;border:1px solid var(--rule)}
.doc-meta div{padding:var(--s2) var(--s3);border-right:1px solid var(--rule);min-width:0}
.doc-meta div:last-child{border-right:0}
.doc-meta dt{font:11px/1.3 var(--f-type);letter-spacing:.1em;color:var(--ink-faded);text-transform:uppercase}
.doc-meta dd{margin:2px 0 0;font:15px/1.5 var(--f-body)}
.doc-stamp{padding-right:var(--s2)}
.doc-body{max-width:none}
.doc-body > p,.doc-body > h2{max-width:68ch}
@media (min-width:981px){body{font-size:17px}}
.memo{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:var(--s3);padding-bottom:var(--s2);border-bottom:1px dotted var(--rule);margin-bottom:var(--s5)}
.memo b{font-weight:700}
h2{font:400 clamp(26px,3.2vw,36px)/1.5 var(--f-head);margin:0 0 var(--s4);color:#1b150f}
html.en h2{line-height:1.25;letter-spacing:-.01em}
h3{font:700 18px/1.6 var(--f-body);margin:var(--s5) 0 var(--s2)}
.faded{color:var(--ink-faded)}
.note{font-size:14px;color:var(--ink-faded);margin:var(--s4) 0 0}
.rule-top{border-top:1px dashed var(--rule);padding-top:var(--s4);margin-top:var(--s6)}
.kids{margin:var(--s6) 0 0;padding:var(--s3) var(--s4);border:1px dashed var(--rule);font-size:15px;color:var(--ink-soft)}
.stain{position:absolute;width:150px;height:150px;border-radius:50%;right:-24px;bottom:-34px;border:9px solid #8a6a3a1f;box-shadow:inset 0 0 14px #8a6a3a2e;pointer-events:none;transform:rotate(20deg) scaleX(.93)}

/* ledger: aligned labels with ruled rows */
.ledger{margin:var(--s5) 0;border-top:1px solid var(--rule)}
.ledger div{display:grid;grid-template-columns:9em minmax(0,1fr);gap:var(--s4);padding:var(--s2) 0;border-bottom:1px dotted var(--rule)}
.ledger dt{font:13px/1.9 var(--f-type);color:var(--ink-faded);letter-spacing:.04em}
.ledger dd{margin:0;font-weight:700}
.ledger-wide dd{font-weight:400}
.ledger a.mail{font-weight:700;word-break:break-all}

/* rubber stamp */
.stamp{display:inline-block;font:700 17px/1.2 var(--f-body);letter-spacing:.1em;color:var(--red);padding:6px 12px 5px;border:3px solid currentColor;border-radius:4px;
  transform:rotate(-7deg);opacity:.85;white-space:nowrap;-webkit-mask:var(--wear);mask:var(--wear);-webkit-mask-size:300px 120px;mask-size:300px 120px;mix-blend-mode:multiply}
.stamp.blue{color:var(--blue)} .stamp.dbl{border-style:double;border-width:6px}
.stamp.big{font-size:26px;padding:10px 18px;border-width:4px}

/* home grid */
.grid-home{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--s7);align-items:start}
.side{padding-top:var(--s3)}
.photo{background:#f1ead8;padding:10px 10px 38px;margin:0 auto;max-width:320px;position:relative;transform:rotate(2deg);box-shadow:0 14px 26px -8px #000b,0 0 0 1px #c9bd9f}
.photo{transform-origin:50% 0;animation:sway 7s ease-in-out infinite}
.photo .pic{overflow:hidden;aspect-ratio:640/1138;background:#d9c9a3}
.photo .pic img{width:100%;height:100%;object-fit:contain;transform-origin:50% 92%;animation:breathe 4.2s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(2deg)}50%{transform:rotate(.6deg)}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}
.photo .cap{position:absolute;left:10px;right:10px;bottom:9px;text-align:center;font:14px/1.3 var(--f-type);color:#4d4232}
.clip{position:absolute;top:-18px;left:38px;width:26px;height:64px;border:3px solid #8f8f8a;border-radius:13px;border-bottom-color:transparent;transform:rotate(-6deg)}
.slip{position:relative;background:#f4ecd4;border:1px solid #bba979;padding:var(--s3) var(--s4);font-size:15px;line-height:1.8;max-width:320px;margin:var(--s5) auto 0;transform:rotate(-1.2deg);box-shadow:0 6px 12px -6px #0008}
.slip::before{content:"";position:absolute;top:-12px;left:40px;border:12px solid transparent;border-bottom-color:#bba979;border-top:0}
.slip::after{content:"";position:absolute;top:-10px;left:41px;border:11px solid transparent;border-bottom-color:#f4ecd4;border-top:0}

/* numbered steps */
.steps{counter-reset:s;list-style:none;padding:0;margin:var(--s4) 0 0}
.steps li{counter-increment:s;position:relative;padding:0 0 var(--s4) 56px;margin-bottom:var(--s4);border-bottom:1px dotted var(--rule)}
.steps li:last-child{border-bottom:0;margin-bottom:0}
.steps li::before{content:counter(s,thai);position:absolute;left:0;top:2px;width:38px;height:38px;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;font:20px/1 var(--f-body)}
html.en .steps li::before{content:counter(s)}
.steps li b{display:block}
.steps li span{display:block;color:var(--ink-soft)}
#how .doc-body{max-width:none}
.steps-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6)}
.steps-3 li{border-bottom:0;margin:0;padding:52px 0 0;border-top:1px dotted var(--rule)}
.steps-3 li::before{top:var(--s3)}

/* evidence envelope */
.envelope{background:#b78d52 var(--fibre);border:1px solid #6b4f27;padding:var(--s6) var(--s7) var(--s6);position:relative;color:#20180e;box-shadow:0 14px 24px -12px #0009}
.envelope::before{content:"";position:absolute;inset:10px;border:1px dashed #5f4422aa;pointer-events:none}
.env-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);border-bottom:3px double #5f4422;padding-bottom:var(--s3)}
.env-lab{font:14px/1.5 var(--f-type);letter-spacing:.06em}
.envelope h3{font:400 clamp(24px,2.8vw,30px)/1.5 var(--f-head);margin:var(--s4) 0 0}
.envelope .ledger{border-top-color:#5f4422}
.envelope .ledger div{border-bottom-color:#5f442288}
.envelope .ledger dt{color:#4a3618}
.envelope .ledger dd{font-weight:400}
.redact{background:#1b150e;color:transparent;user-select:none;padding:0 .2em;border-radius:1px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;font:700 16px/1.3 var(--f-body);text-decoration:none;color:#f3e7c8;background:#2a2118;border:2px solid #120d08;
  padding:10px 20px;min-height:48px;box-shadow:3px 3px 0 #120d08;cursor:pointer;text-align:center}
.btn:hover,.btn:focus-visible{background:#3b2e20;outline:2px dashed var(--red);outline-offset:3px}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #120d08}
.btn.red{background:var(--red);border-color:#3e0f0b;box-shadow:3px 3px 0 #3e0f0b}
.btn.ghost{background:transparent;color:var(--ink);border-style:dashed;box-shadow:none}
.btn[disabled]{opacity:.55;cursor:wait}
.btn-row{display:flex;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s5)}
.btn-row.center{justify-content:center}
.btn-col{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}

/* forms: ruled government form with aligned labels */
.form{margin-top:var(--s5);border-top:1px solid var(--rule)}
.form .row{display:grid;grid-template-columns:13em minmax(0,1fr);gap:var(--s5);align-items:end;padding:var(--s3) 0;border-bottom:1px dotted var(--rule)}
.form label{font-weight:700;line-height:1.6}
.form label small{display:block;font:12px/1.5 var(--f-type);color:var(--ink-faded);font-weight:400}
.form input[type=text],.form input[type=email],.form select,.form textarea{width:100%;font:17px/1.6 var(--f-type);color:#1d2f52;background:transparent;border:0;border-bottom:1.5px solid #4b3f2e88;padding:4px 2px;border-radius:0;min-width:0}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-bottom:2px solid var(--red);background:#fff8e455}
.form .check{display:grid;grid-template-columns:22px minmax(0,1fr);gap:var(--s3);align-items:start;font-size:15px;font-weight:400;margin:var(--s4) 0 0}
.form .check input{width:20px;height:20px;margin:4px 0 0;accent-color:#2a2118}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.msg{font:14px/1.5 var(--f-type);margin-top:var(--s3);min-height:1.5em}
.msg.err{color:var(--red)}
.form-q .row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.form-q .n{display:inline-block;min-width:2em;font:15px var(--f-type);color:var(--ink-faded)}
.form-q label small{padding-left:2.15em}
.ans{display:flex;align-items:center;gap:var(--s3);min-width:0}
.ans input,.ans select{flex:1}

.unlock{display:none;border:2px dashed var(--ink);padding:var(--s5);margin-top:var(--s6);background:#f3ead1}
.unlock.show{display:block;animation:paperIn .5s ease-out}
.unlock-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);margin-bottom:var(--s4)}
.unlock-head h3{margin:0}
@keyframes paperIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* answer marks + verdicts */
.mark{flex-shrink:0;font:700 14px/1 var(--f-body);padding:5px 8px;border:2px solid;transform:rotate(-4deg);white-space:nowrap}
.mark[hidden]{display:none}
.mark.ok{color:#2b5a2b}.mark.no{color:var(--red)}
.verdict{display:none;text-align:center;padding:var(--s6) var(--s3) 0}
.verdict.show{display:block}
.verdict p{margin-top:var(--s5);font-family:var(--f-type)}
.verdict .stamp{animation:thud .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes thud{from{transform:scale(2.2) rotate(-14deg);opacity:0}to{transform:rotate(-7deg);opacity:.85}}

/* cases */
.files{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);margin-top:var(--s6)}
.file{background:var(--manila) var(--fibre);border:1px solid var(--manila-edge);padding:var(--s6) var(--s4) var(--s4);position:relative;display:flex;flex-direction:column;gap:var(--s4);box-shadow:0 10px 18px -10px #000a}
.file::before{content:"";position:absolute;top:-14px;left:14px;width:42%;height:15px;background:inherit;border:1px solid var(--manila-edge);border-bottom:0;border-radius:6px 6px 0 0}
.file .lab{background:#efe6cc;border:1px solid #8e7a52;padding:var(--s3);font-size:14px;line-height:1.7}
.file .lab span{display:block}
.file .lab .lab-no{font:12px/1.4 var(--f-type);letter-spacing:.08em;color:var(--ink-faded)}
.file .lab b{display:block;font:400 19px/1.6 var(--f-head)}
.file-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap}
.price{font:400 28px/1.2 var(--f-head)}
.price small{display:block;font:12px/1.4 var(--f-type);color:#4a3618}
.file.sealed{filter:saturate(.6) brightness(.85)}
.seal-strip{margin-top:auto;background:#ece2c9;border:1px solid #8e7a52;text-align:center;font:700 14px/36px var(--f-type);letter-spacing:.14em;color:var(--red);transform:rotate(-2deg);box-shadow:0 2px 4px #0005}

/* 404 */
.missing .doc-body{max-width:none;text-align:center}
.missing .code{font:400 clamp(80px,16vw,150px)/1.2 var(--f-logo);color:#2a231a;opacity:.85}

/* footer */
.foot{position:relative;z-index:5;padding-top:var(--s6);padding-bottom:140px;color:#9b8b6c;font:13px/1.7 var(--f-type)}
.foot-row{display:flex;gap:var(--s3) var(--s6);flex-wrap:wrap;justify-content:space-between;align-items:center;border-top:1px dashed #4a3f30;padding-top:var(--s4)}
.foot a{color:#d7c27f}
.odo{display:inline-flex;gap:2px;vertical-align:middle}
.odo i{font-style:normal;background:#000;color:#d7c27f;border:1px solid #3b3122;padding:0 4px;font:13px/20px "Special Elite",monospace}
.tallies{display:inline-flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}
.tallies[hidden]{display:none}
.tally{display:inline-flex;align-items:center;gap:var(--s2);white-space:nowrap}
.tally .tl{font:13px/1.4 var(--f-type);color:#a8987a;letter-spacing:.04em}
.tally .odo{box-shadow:0 0 0 2px #2a2219,0 0 0 3px #5b4b36;padding:1px;background:#2a2219}
.tally .odo i{font-size:15px;line-height:22px;min-width:1.05em;text-align:center;background:linear-gradient(#000,#1a140e 50%,#000);box-shadow:inset 0 1px 0 #ffffff14}
.disclaimer{margin-top:var(--s3);color:#857559}

/* corner helper: สารวัตรทุ่ง */
.helper{position:fixed;right:12px;bottom:0;z-index:80;display:flex;align-items:flex-end;gap:var(--s2);transform:translateY(120%);transition:transform .7s cubic-bezier(.3,1.4,.5,1)}
.helper.in{transform:translateY(0)}
.helper .face{width:74px;height:auto;aspect-ratio:auto;background:#f1ead8;padding:5px;box-shadow:0 6px 14px #000a;transform:rotate(-3deg);cursor:pointer;animation:sway-s 6s ease-in-out infinite;transform-origin:50% 100%;margin-bottom:14px;border:0}
.helper .face img{width:100%;height:auto;aspect-ratio:180/320;display:block;transform-origin:50% 92%;animation:breathe 4.2s ease-in-out infinite}
@keyframes sway-s{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(-1.4deg)}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -6px}}
.helper .bubble{max-width:260px;background:#f4ecd4 var(--fibre);border:1px solid #8e7a52;padding:10px 30px 10px 12px;font-size:14.5px;line-height:1.75;box-shadow:0 6px 14px #0009;position:relative;margin-bottom:40px;display:none}
.helper .bubble.show{display:block;animation:paperIn .3s ease-out}
.helper .bubble::after{content:"";position:absolute;right:-11px;bottom:16px;border:10px solid transparent;border-left-color:#8e7a52;border-right:0}
.helper .x{position:absolute;right:4px;top:2px;background:none;border:0;font:18px/1 var(--f-type);color:#6b5a40;cursor:pointer;padding:6px}
.helper .who{display:block;font:12px var(--f-type);color:var(--ink-faded);letter-spacing:.06em}

@media (prefers-reduced-motion:reduce){.grain,.logo,.helper .face,.helper .face img,.photo,.photo .pic img{animation:none}.flicker{display:none}.notice-run>span{animation:none;padding-left:var(--s3)}.helper{transition:none}}

/* ---------- 800-ish: tablet ---------- */
@media (max-width:980px){
  .mast-card{display:none}
  .mast{grid-template-columns:1fr}
  .folder{padding:var(--s6) var(--s5) var(--s7)}
  .doc{padding:var(--s5) var(--s5) var(--s6) 76px}
  .doc::before{left:52px}
  .doc::after{left:18px}
  .grid-home{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--s5)}
  .steps-3{grid-template-columns:1fr;gap:0}
  .steps-3 li{padding:0 0 var(--s4) 56px;border-top:0;border-bottom:1px dotted var(--rule);margin-bottom:var(--s4)}
  .steps-3 li::before{top:2px}
  .files{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tabs a{font-size:14px;padding:0 var(--s2);gap:6px}
  .envelope{padding:var(--s5)}
}

/* ---------- phones ---------- */
@media (max-width:640px){
  body{font-size:15.5px}
  :root{--gut:14px}
  .topbar .reg{display:none}
  .topbar-in{justify-content:flex-end}
  .mast{padding-top:var(--s6);padding-bottom:var(--s4)}
  .kicker{font-size:12.5px;letter-spacing:.08em;margin-bottom:var(--s2)}
  .logo{font-size:clamp(46px,15vw,64px)}
  .sub{font-size:12px;letter-spacing:.2em;margin-top:var(--s2)}
  .notice{height:30px}.notice-lab,.notice-run{font-size:12px}
  /* tabs: horizontal strip, same size each, scroll instead of wrapping */
  .tabs{overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;-webkit-mask:linear-gradient(90deg,#000 85%,transparent);mask:linear-gradient(90deg,#000 85%,transparent)}
  .tabs::-webkit-scrollbar{display:none}
  .tabs li{flex:0 0 auto;scroll-snap-align:start}
  .tabs a{height:42px;padding:0 14px;font-size:14px}
  .folder{padding:var(--s4) var(--s3) var(--s6)}
  .folder > * + *{margin-top:var(--s6)}
  .doc{padding:var(--s4) var(--s4) var(--s5) 40px}
  .doc::before{left:28px;box-shadow:none}
  .doc::after{left:9px;top:60px;width:11px;height:11px;box-shadow:0 140px 0 #2c241b}
  .doc-head{grid-template-columns:1fr;gap:var(--s3);margin-bottom:var(--s5)}
  .doc-meta{grid-template-columns:auto minmax(0,1fr) auto}
  .doc-meta div{padding:6px 8px}
  .doc-meta dd{font-size:13.5px}
  .doc-stamp{justify-self:end;padding:var(--s1) var(--s2) 0 0}
  .doc-stamp .stamp{font-size:14px}
  .memo{grid-template-columns:4em minmax(0,1fr);gap:var(--s2)}
  h2{font-size:25px}
  html.en h2{font-size:24px}
  .grid-home{grid-template-columns:1fr;gap:var(--s5)}
  .side{order:-1;display:grid;grid-template-columns:42% minmax(0,1fr);gap:var(--s4);align-items:start;padding-top:var(--s3)}
  .photo{margin:0;max-width:none;padding:6px 6px 30px}
  .photo .cap{font-size:12px;bottom:7px}
  .slip{margin:0;font-size:14px;line-height:1.75;transform:rotate(1deg);padding:var(--s3)}
  .slip::before{left:-12px;top:22px;border:12px solid transparent;border-right-color:#bba979;border-left:0}
  .slip::after{left:-10px;top:23px;border:11px solid transparent;border-right-color:#f4ecd4;border-left:0}
  .ledger div{grid-template-columns:6.5em minmax(0,1fr);gap:var(--s3)}
  .form .row,.form-q .row{grid-template-columns:1fr;gap:var(--s1);align-items:start}
  .form-q label small{padding-left:2.15em}
  .files{grid-template-columns:1fr}
  .envelope{padding:var(--s5) var(--s4)}
  .envelope::before{inset:6px}
  .env-head{flex-wrap:wrap}
  .btn{width:100%}
  .btn-row .btn{flex:1 1 auto}
  .btn-col{align-items:stretch}
  .unlock{padding:var(--s4)}
  .stamp.big{font-size:20px;padding:8px 12px}
  .helper .face{width:58px}
  .helper .bubble{max-width:210px;font-size:13.5px;margin-bottom:28px}
  .foot-row{flex-direction:column;align-items:flex-start;gap:var(--s2)}
}
@media print{.grain,.vignette,.flicker,.helper,.walker,.notice-wrap,.ctrls{display:none}}
.doc-body > p.kids{width:fit-content;max-width:100%}

/* sound toggle: waiting for the first tap */
.ctrl.armed .dot{animation:sign 1.6s infinite}
/* contact form */
.form textarea{resize:vertical;min-height:8.5em;line-height:1.75;border:1.5px solid #4b3f2e66;background:#fff8e433;padding:8px 10px;
  background-image:repeating-linear-gradient(transparent 0 calc(1.75em - 1px),#4b3f2e22 calc(1.75em - 1px) 1.75em);background-attachment:local}
.form .row-top{align-items:start}
.form .cnt{font-variant-numeric:tabular-nums}
.msg.ok{color:#2f5a2a}
.linkish{background:none;border:0;padding:0;font:inherit;color:#d7c27f;text-decoration:underline;cursor:pointer}
html.swapping main{opacity:.55;transition:opacity .15s}
main:focus{outline:none}

/* walking สารวัตรทุ่ง (still art + CSS motion only) */
.walker{position:fixed;left:0;bottom:2px;z-index:70;pointer-events:none;will-change:transform;transition:opacity .25s}
.walker .w-body{pointer-events:auto;display:block;background:none;border:0;padding:0;cursor:pointer;height:92px;filter:drop-shadow(0 4px 3px #0008)}
.walker img{height:92px;width:auto;display:block;user-select:none;-webkit-user-drag:none}
.walker .w-flip{display:block;transition:transform .25s}
.walker .w-flip.right{transform:scaleX(-1)}
.walker .w-move{display:block;transform-origin:50% 100%}
.walker.walking .w-move{animation:w-walk .56s ease-in-out infinite alternate}
.walker.idle-look .w-move{animation:w-look 2.6s ease-in-out}
.walker.idle-lean .w-move{animation:w-lean 2.2s ease-in-out}
.walker.idle-hop .w-move{animation:w-hop 1.3s ease-out}
.walker.jump .w-body{animation:w-jump .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes w-walk{from{transform:translateY(0) rotate(-2.5deg)}to{transform:translateY(-3px) rotate(2.5deg)}}
@keyframes w-look{0%,100%{transform:none}20%,40%{transform:scaleX(-1)}60%,80%{transform:none}}
@keyframes w-lean{0%,100%{transform:none}30%,75%{transform:rotate(-9deg) translateX(-5px)}}
@keyframes w-hop{0%,100%{transform:none}25%{transform:translateY(-12px)}50%{transform:translateY(0) scaleY(.95)}65%{transform:translateY(-5px)}}
@keyframes w-jump{0%,100%{transform:none}40%{transform:translateY(-26px)}}
.walker .w-say{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(calc(-50% + var(--sx,0px)));width:max-content;max-width:min(230px,80vw);
  background:#f4ecd4 var(--fibre);border:1.5px solid #3b2f22;box-shadow:3px 3px 0 #3b2f22;padding:6px 10px;font:14px/1.6 var(--f-type);color:#1c160f;opacity:0;visibility:hidden;transition:opacity .2s}
.walker .w-say.show{opacity:1;visibility:visible}
.walker .w-x{pointer-events:auto;position:absolute;top:-6px;right:-14px;width:20px;height:20px;border-radius:50%;border:1px solid #6b5a40;background:#2a2219;color:#d9c9a3;font:13px/1 var(--f-type);cursor:pointer;opacity:0;transition:opacity .2s;padding:0}
.walker:hover .w-x,.walker .w-x:focus-visible{opacity:1}
@media (hover:none){.walker .w-x{opacity:.85}}
.walker.dim{opacity:.35}
.walker.dim .w-body,.walker.dim .w-x{pointer-events:none}
.walker.away{opacity:0}
.walker.away .w-body,.walker.away .w-x{pointer-events:none}
body.has-walker{padding-bottom:100px}
@media (max-width:640px){
  .walker .w-body,.walker img{height:64px}
  .walker .w-say{font-size:13px}
  body.has-walker{padding-bottom:72px}
}
@media (prefers-reduced-motion:reduce){.walker .w-move,.walker .w-body{animation:none!important}.walker .w-flip{transition:none}}

/* per-case "taken by N people" odometer */
.taken{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);margin:var(--s2) 0 var(--s3);font:14px/1.5 var(--f-type);color:#3d2e19;letter-spacing:.02em}
.taken[hidden]{display:none}
.taken .odo{box-shadow:0 0 0 2px #2a2219,0 0 0 3px #5b4b36;padding:1px;background:#2a2219}
.taken .odo i{font-size:15px;line-height:22px;min-width:1.05em;text-align:center;background:linear-gradient(#000,#1a140e 50%,#000);box-shadow:inset 0 1px 0 #ffffff14}
.file .taken{margin:0;font-size:13px}
.taken .nw{display:inline-flex;align-items:center;gap:var(--s2);white-space:nowrap}