/* ══ layout ══════════════════════════════════════════════
   โครงหน้า: ฉากหลัง / เมนู / หัวข้อ section / footer
   ═══════════════════════════════════════════════════════ */

.wrap{width:min(1240px,100% - 2.5rem); margin-inline:auto}

/* กริดพื้น viewport — ฉากหลังทั้งเว็บ */
.gridbg{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:68px 68px;
  -webkit-mask-image:radial-gradient(115% 85% at 62% 6%, #000 0%, transparent 74%);
  mask-image:radial-gradient(115% 85% at 62% 6%, #000 0%, transparent 74%);
  opacity:.75;
}

/* ── เมนู ─────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex; align-items:center; gap:var(--s2); height:64px}
.mark{
  font-family:var(--disp); font-weight:800; font-size:1.22rem;
  letter-spacing:-.03em; text-decoration:none;
  display:flex; align-items:center; gap:.55rem; white-space:nowrap;
}
.mark svg{display:block}
.nav nav{margin-left:auto; display:flex; gap:var(--s2); align-items:center}
.nav nav a{
  font-size:var(--fs0); font-weight:500; text-decoration:none; color:var(--ink-2);
  transition:color .15s ease; position:relative;
}
.nav nav a:hover{color:var(--green-dk)}
.nav nav a.active{color:var(--ink); font-weight:600}
.nav nav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px;
  height:2px; background:var(--green); border-radius:2px;
}
.nav nav a.hire{
  color:#fff; background:var(--ink); padding:.5rem 1.05rem; border-radius:99px;
  font-weight:600;
}
.nav nav a.hire:hover{background:var(--green-dk); color:#fff}
.nav nav a.hire.active::after{display:none}
@media(max-width:640px){
  .nav .wrap{gap:.9rem}
  .nav nav{gap:1rem}
  .nav nav a{font-size:var(--fs-1)}
}

/* ── section ──────────────────────────────────────────── */
section{padding:var(--s5) 0}
@media(max-width:900px){ section{padding:var(--s4) 0} }

.head{
  display:flex; align-items:baseline; gap:var(--s2);
  margin-bottom:var(--s3); border-bottom:1px solid var(--line);
  padding-bottom:var(--s1); flex-wrap:wrap;
}
.head .count{font-size:var(--fs0); color:var(--ink-3); margin-left:auto}
.head .count b{font-family:var(--mono); font-weight:500; color:var(--ink-2)}

/* หัวหน้าเพจ (หน้ารอง) */
.pagehead{padding:var(--s4) 0 0}
.pagehead .lat{display:block; margin-bottom:.7rem}
.pagehead .thainame{color:var(--ink-3); font-size:var(--fs2); margin-top:.3rem}
.pagehead p{color:var(--ink-2); font-size:var(--fs2); max-width:50ch; margin-top:var(--s1)}

/* ── footer ───────────────────────────────────────────── */
.site-footer{
  border-top:1px solid var(--line); background:var(--card); margin-top:var(--s4);
}
.site-footer .wrap{
  padding:var(--s3) 0; display:flex; gap:var(--s2); flex-wrap:wrap;
  align-items:center; font-size:var(--fs-1); color:var(--ink-3);
}
.site-footer nav{display:flex; gap:var(--s2); margin-left:auto; flex-wrap:wrap}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--green-dk)}