/* ══ pages ═══════════════════════════════════════════════
   สไตล์เฉพาะบางหน้า: hero (หน้าแรก) / รายละเอียดงาน /
   ประสบการณ์ + ทักษะ (เกี่ยวกับ) / ติดต่อ
   ═══════════════════════════════════════════════════════ */

/* ── hero (index.html) — เต็มความสูงจอ ────────────────── */
.hero{padding:0}
.hero .wrap{
  min-height:calc(100svh - 64px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:var(--s4); align-items:center; padding:var(--s3) 0;
}
@media(max-width:900px){
  .hero .wrap{
    grid-template-columns:1fr; min-height:0;
    gap:var(--s2); padding:var(--s3) 0 var(--s4);
  }
}
.hero .eyebrow{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  margin-bottom:var(--s2); color:var(--ink-2);
}
.hero .eyebrow::before{content:""; width:26px; height:2px; background:var(--green); flex:none}
.hero .eyebrow .th{font-size:var(--fs0); font-weight:500}
.hero .eyebrow .sep{color:var(--ink-3)}
.hero h1 em{font-style:normal; position:relative; white-space:nowrap}
.hero h1 em::after{
  content:""; position:absolute; left:-.04em; right:-.04em; bottom:.12em; height:.3em;
  background:var(--green); opacity:.24; 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 .viewer{height:min(76svh, 700px)}
@media(max-width:900px){ .hero .viewer{height:min(60svh, 480px)} }

/* ── งานล่าสุดหน้าแรก ─────────────────────────────────── */
.latest{background:var(--card); border-block:1px solid var(--line)}

/* ── หน้ารายละเอียดงาน ────────────────────────────────── */
.detail .wrap{
  display:grid; grid-template-columns:1.15fr .85fr; gap:var(--s4);
  align-items:start; padding-top:var(--s3);
}
@media(max-width:900px){ .detail .wrap{grid-template-columns:1fr; gap:var(--s3)} }
.detail .viewer{aspect-ratio:1/1; position:sticky; top:90px}
@media(max-width:900px){ .detail .viewer{position:static} }
.detail h1{font-size:var(--fs4); margin-bottom:.5rem}
.detail .lede{color:var(--ink-2); font-size:var(--fs2); margin-bottom:var(--s3)}

.spec{
  display:grid; grid-template-columns:auto 1fr; gap:.7rem var(--s2);
  font-size:var(--fs0); border-top:1px solid var(--line); padding-top:var(--s2);
}
.spec dt{color:var(--ink-3)}
.spec dd{
  margin:0; font-family:var(--mono); font-variant-numeric:tabular-nums;
  color:var(--ink); font-size:var(--fs-1); align-self:center;
}
.spec dd.th{font-family:var(--body); font-size:var(--fs0)}

.note{
  margin-top:var(--s3); padding:var(--s2); border-radius:var(--r);
  background:#EAF4E4; border:1px solid var(--line);
  font-size:var(--fs0); color:var(--ink-2);
}
.note b{color:var(--ink)}

/* ── ประสบการณ์ (about.html) ──────────────────────────── */
.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:760px){ .job{grid-template-columns:1fr; gap:.65rem} }
.when{font-size:var(--fs-1); color:var(--ink-3); line-height:1.85}
.when .num{color:var(--ink-2)}
.when .now{display:inline-flex; align-items:center; gap:.35rem; 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:.2rem 0 var(--s1); letter-spacing:.01em;
}
.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:.72em; width:6px; height:6px;
  border-radius:99px; background:var(--ac); opacity:.75;
}

/* ── ทักษะ ────────────────────────────────────────────── */
.skillcols{display:grid; grid-template-columns:1fr 1fr; gap:var(--s3)}
@media(max-width:760px){ .skillcols{grid-template-columns:1fr} }
.skillcols h3{
  font-size:var(--fs0); font-weight:600; color:var(--ink-2); margin-bottom:var(--s1);
  display:flex; align-items:center; gap:.6rem;
}
.skillcols h3::before{content:""; width:18px; 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:.4rem .95rem; 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 h2,.contact p,.contact .cta-row,.contact .lines{position:relative}
.contact h2{margin-bottom:.5rem}
.contact p{color:#B9CFC0; margin-bottom:var(--s3); max-width:44ch; 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; color:#7E9B8A; font-weight:500; margin-bottom:.15rem}
.lines a{font-family:var(--mono); font-size:var(--fs0); color:#DDEBE1; text-decoration:none}
.lines a:hover{color:#fff}