/* ══ pages ═══════════════════════════════════════════════
   เฉพาะบางหน้า: hero / ประสบการณ์ + ทักษะ / ติดต่อ
   ═══════════════════════════════════════════════════════ */

/* ── hero เต็มจอ ──────────────────────────────────────── */
.hero{padding:0}
.hero .wrap{
  min-height:calc(100svh - 64px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:var(--s4); align-items:center; padding:var(--s3) 0;
}
@media(max-width:960px){
  .hero .wrap{
    grid-template-columns:1fr; min-height:0;
    gap:var(--s2); padding:var(--s3) 0 var(--s4);
  }
}
.hero .lat{
  display:flex; align-items:center; gap:.7rem; margin-bottom:var(--s2);
}
.hero .lat::before{content:""; width:26px; height:2px; background:var(--green); flex:none}
.hero h1 em{font-style:normal; position:relative; white-space:nowrap}
.hero h1 em::after{
  content:""; position:absolute; left:-.03em; right:-.03em; bottom:.1em; height:.3em;
  background:var(--green); opacity:.26; border-radius:3px; z-index:-1;
}
.hero .deck{
  color:var(--ink-2); font-size:var(--fs2); margin:var(--s2) 0 var(--s3);
  max-width:34ch;
}
.hero .facts{
  display:flex; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s3);
  padding-left:var(--s2); border-left:2px solid var(--line);
  font-size:var(--fs-1); color:var(--ink-3);
}
.hero .facts b{
  display:block; font-family:var(--mono); font-variant-numeric:tabular-nums;
  color:var(--ink); font-weight:500; font-size:var(--fs0);
}
.hero .viewer{height:min(76svh, 700px)}
@media(max-width:960px){ .hero .viewer{height:min(60svh, 500px)} }

/* ── ประสบการณ์ ───────────────────────────────────────── */
.job{
  display:grid; grid-template-columns:200px 1fr; gap:var(--s3);
  padding:var(--s3) 0; border-top:1px solid var(--line);
}
.job:first-of-type{border-top:0; padding-top:0}
@media(max-width:800px){ .job{grid-template-columns:1fr; gap:.7rem} }
.when{font-size:var(--fs-1); color:var(--ink-3); line-height:1.9}
.when .num{color:var(--ink-2)}
.when .now{display:inline-flex; align-items:center; gap:.4rem; color:var(--green-dk)}
.when .now::before{content:""; width:7px; height:7px; border-radius:99px; background:var(--green)}
.job .org{
  font-family:var(--mono); font-size:var(--fs-1); color:var(--ac);
  margin:.25rem 0 var(--s1); letter-spacing:.02em;
}
.job ul{margin:0; padding:0; list-style:none; display:grid; gap:.5rem}
.job li{position:relative; padding-left:1.2rem; color:var(--ink-2); font-size:var(--fs0)}
.job li::before{
  content:""; position:absolute; left:0; top:.7em; width:6px; height:6px;
  border-radius:99px; background:var(--ac); opacity:.8;
}

/* ── ทักษะ ────────────────────────────────────────────── */
.skillcols{display:grid; grid-template-columns:1fr 1fr; gap:var(--s3)}
@media(max-width:800px){ .skillcols{grid-template-columns:1fr} }
.skillcols h3{
  font-family:var(--mono); font-size:var(--fs-2); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  margin-bottom:var(--s1); display:flex; align-items:center; gap:.6rem;
}
.skillcols h3::before{content:""; width:20px; height:2px; background:var(--green); flex:none}
.tags{display:flex; gap:.5rem; flex-wrap:wrap}
.tags span{
  border:1px solid var(--line); background:var(--card); border-radius:99px;
  padding:.42rem 1rem; font-size:var(--fs0); line-height:1.4;
}
.tags.soon span{border-style:dashed; color:var(--ink-3)}
.edu{
  margin-top:var(--s3); padding-top:var(--s2); border-top:1px solid var(--line);
  font-size:var(--fs0); color:var(--ink-2);
}
.edu b{color:var(--ink); font-weight:600}

/* ── ติดต่อ ───────────────────────────────────────────── */
.contact{
  background:var(--ink); color:var(--paper); border-radius:var(--r);
  padding:clamp(2.25rem,5vw,3.75rem); position:relative; overflow:hidden;
}
.contact::after{
  content:""; position:absolute; right:-90px; bottom:-90px; width:280px; height:280px;
  border-radius:99px; background:var(--green); opacity:.22; filter:blur(8px);
}
.contact > *{position:relative; z-index:1}
.contact h1{font-size:var(--fs4); margin-bottom:.6rem}
.contact p{color:#B9CFC0; margin-bottom:var(--s3); max-width:46ch; font-size:var(--fs2)}
.contact .btn-ghost{border-color:#5C7A67; color:var(--paper)}
.contact .btn-ghost:hover{background:var(--paper); color:var(--ink)}
.lines{
  margin-top:var(--s3); padding-top:var(--s2); border-top:1px solid #2B4335;
  display:flex; gap:var(--s3); flex-wrap:wrap; font-size:var(--fs-1);
}
.lines b{
  display:block; font-family:var(--mono); font-size:var(--fs-2);
  letter-spacing:.12em; text-transform:uppercase; color:#7E9B8A;
  font-weight:400; margin-bottom:.2rem;
}
.lines a{font-family:var(--mono); font-size:var(--fs0); color:#DDEBE1; text-decoration:none}
.lines a:hover{color:#fff}