/* MIND QUEST · สไตล์หน้าบทความ เข้าชุดกับเกม
   ไฟล์ต้นทาง — build.js จะคัดลอกไปที่ public/mbti/article.css ให้เอง */
:root{
  --bg:oklch(0.16 0.03 275); --bg2:oklch(0.21 0.035 275); --bg3:oklch(0.26 0.04 275);
  --ink:oklch(0.95 0.015 90); --dim:oklch(0.78 0.02 90);
  --gold:oklch(0.84 0.155 88); --accent:var(--gold);
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg); -webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  font-family:"Chakra Petch",sans-serif; background:var(--bg); color:var(--ink);
  line-height:1.75; font-size:18px; overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
.pixfont{font-family:"Press Start 2P","Chakra Petch",monospace}
a{color:var(--accent)}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:16px; background:var(--gold); color:var(--bg); padding:10px 14px; z-index:50}

/* ---- nav ---- */
.topnav{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px max(16px,env(safe-area-inset-left)); border-bottom:4px solid var(--ink);
  position:sticky; top:0; background:var(--bg); z-index:10;
}
.topnav .home{font-size:12px; color:var(--gold); text-decoration:none}
.playbtn{
  font-size:10px; padding:11px 14px; border:3px solid var(--ink);
  background:var(--bg2); color:var(--ink); text-decoration:none; min-height:42px;
  display:flex; align-items:center;
}
.playbtn:hover{background:var(--gold); color:var(--bg); border-color:var(--gold)}

.crumbs{
  max-width:1120px; margin:0 auto; padding:14px max(16px,env(safe-area-inset-left)) 0;
  font-size:14px; color:var(--dim);
}
.crumbs a{color:var(--dim)} .crumbs a:hover{color:var(--ink)}
.crumbs em{font-style:normal; margin:0 7px; color:var(--bg3)}

/* ---- layout ---- */
main{
  max-width:1120px; margin:0 auto; display:grid; gap:36px;
  grid-template-columns:minmax(0,1fr) 300px;
  padding:22px max(16px,env(safe-area-inset-left)) 70px;
}
@media (max-width:900px){ main{grid-template-columns:1fr} }

article{min-width:0}
.eyebrow{font-size:14px; color:var(--accent); font-weight:600; margin-bottom:8px}
h1{font-size:clamp(28px,4.6vw,42px); line-height:1.25; font-weight:700; text-wrap:balance; margin-bottom:20px}
.cover{width:100%; height:auto; border:4px solid var(--ink); display:block; margin-bottom:28px}
.lead{font-size:20px; color:var(--ink); margin-bottom:26px; text-wrap:pretty}
article h2{
  font-size:clamp(21px,3vw,26px); font-weight:700; margin:38px 0 14px;
  padding-left:14px; border-left:6px solid var(--accent); text-wrap:balance;
  scroll-margin-top:86px;   /* กันหัวข้อโดน sticky nav บังตอนกดลิงก์ anchor */
}
article h3{font-size:19px; font-weight:700; margin:24px 0 10px}
article p{margin-bottom:16px; max-width:70ch; text-wrap:pretty}
article ul,article ol{margin:0 0 20px 0; padding-left:0; list-style:none; max-width:70ch}
article ul li{position:relative; padding-left:26px; margin-bottom:10px}
article ul li::before{content:""; position:absolute; left:2px; top:12px; width:9px; height:9px; background:var(--accent)}
article ol{counter-reset:n}
article ol li{position:relative; padding-left:34px; margin-bottom:10px; counter-increment:n}
article ol li::before{
  content:counter(n); position:absolute; left:0; top:2px; font-family:"Press Start 2P",monospace;
  font-size:11px; color:var(--accent);
}
code{background:var(--bg2); padding:2px 7px; font-size:.9em; border:2px solid var(--bg3)}
strong{color:var(--ink)}
.soonlist{color:var(--dim); font-size:15.5px; line-height:1.9; max-width:none}

/* ---- pillar: การ์ดลิงก์ ---- */
.cardgrid{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-bottom:26px}
.card{
  display:flex; flex-direction:column; gap:6px; padding:16px 18px;
  background:var(--bg2); border:3px solid var(--bg3); text-decoration:none; color:var(--ink);
}
.card:hover{border-color:var(--accent); background:var(--bg3)}
.card .ct{font-weight:600; font-size:17px; line-height:1.45}
.card .ck{font-size:13px; color:var(--dim)}

/* ---- hub ---- */
.typegrid{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); margin-bottom:34px}
.tcard{
  display:flex; flex-direction:column; gap:5px; padding:15px 16px; text-decoration:none;
  background:var(--bg2); border:3px solid var(--bg3); color:var(--ink);
}
.tcard:hover{border-color:var(--gold)}
.tcard b{font-family:"Press Start 2P",monospace; font-size:15px; color:var(--gold)}
.tcard span{font-size:14px; color:var(--dim)}
.clus{margin-bottom:34px; padding-bottom:26px; border-bottom:3px solid var(--bg3)}
.clus h2{border-left-color:var(--accent)}
.clus h2 a{text-decoration:none; color:var(--ink)}
.clus h2 a:hover{color:var(--accent)}
.clus h2 em{font-style:normal; font-size:14px; color:var(--dim); font-weight:400; margin-left:8px}
.links{display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:14px}
.links li{padding-left:0!important}
.links li::before{display:none!important}
.links a{font-size:16px}
.more{display:inline-block; margin-top:12px; font-size:15px}

/* ---- faq ---- */
.faq details{border:3px solid var(--bg3); background:var(--bg2); margin-bottom:10px}
.faq summary{padding:15px 18px; cursor:pointer; font-weight:600; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; float:right; color:var(--accent); font-weight:700}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{border-bottom:3px solid var(--bg3)}
.faq p{padding:15px 18px; margin:0; color:var(--dim)}

/* ---- cta ---- */
.cta{
  margin:44px 0 0; padding:30px 26px; background:var(--bg2);
  border:4px solid var(--gold); text-align:center;
}
.cta .pixfont{font-size:13px; color:var(--gold); margin-bottom:12px}
.cta p{max-width:none; color:var(--dim)}
.btn{
  display:inline-block; margin-top:14px; font-family:"Press Start 2P","Chakra Petch",monospace;
  font-size:12px; padding:16px 24px; background:var(--gold); color:var(--bg);
  border:4px solid var(--gold); text-decoration:none; min-height:52px;
}
.btn:hover{background:var(--bg); color:var(--gold)}

/* ---- related ---- */
.related{min-width:0}
@media (min-width:901px){ .related{position:sticky; top:88px; align-self:start} }
.related h2{
  font-family:"Press Start 2P","Chakra Petch",monospace; font-size:12px;
  color:var(--accent); margin-bottom:16px;
}
.related ul{list-style:none}
.related li{border-bottom:3px solid var(--bg3); padding:12px 0}
.related li:last-child{border-bottom:0}
.related a{font-size:16px; font-weight:600; text-decoration:none; color:var(--ink); line-height:1.5}
.related a:hover{color:var(--accent)}
.related span{display:block; font-size:13px; color:var(--dim); margin-top:3px}

footer{
  border-top:4px solid var(--ink); padding:26px max(16px,env(safe-area-inset-left));
  text-align:center; color:var(--dim); font-size:15px;
}

@media (max-width:560px){
  body{font-size:17px}
  .lead{font-size:18.5px}
  .cta{padding:24px 18px}
}