:root{color-scheme:light;--ink:#162723;--muted:#4c6259;--paper:#f8f7ef;--green:#174b3c;--lime:#d8f49a;--line:#d5ddd0;font:16px/1.65 "Segoe UI",Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:6rem}body{margin:0;background:var(--paper);color:var(--ink)}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #357a62;outline-offset:4px}img{display:block;width:100%}figure,p,dl{margin:0}p,dd,li{color:var(--muted)}p+*,ul+.button{margin-top:1rem}.wrap{width:min(1120px,calc(100% - 3rem));margin:auto}.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem}header{border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:2}header .bar{min-height:72px}.brand{font-weight:750;white-space:nowrap}.brand span{display:inline-grid;place-items:center;background:var(--green);color:white;border-radius:50%;width:2.4rem;height:2.4rem;margin-right:.5rem;font-size:.8rem}nav{display:flex;gap:clamp(1rem,4vw,3rem);color:var(--muted);font-size:.9rem}.contact{font-weight:750;color:var(--green);white-space:nowrap}
.hero{display:grid;grid-template-columns:1.35fr 1fr;align-items:center;gap:clamp(2rem,7vw,6rem);padding:clamp(3rem,8vw,7rem) 0 3rem}.eyebrow{font-size:.73rem;letter-spacing:.13em;font-weight:750;color:var(--green)}.eyebrow i{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:#6a983a;margin-right:.3rem}.eyebrow b{margin:0 .25rem}h1,h2,h3{margin:0;line-height:1.12;text-wrap:balance}h1{font-size:clamp(3rem,7.6vw,7rem);letter-spacing:-.075em;margin:.26em 0}h1 em{font-style:normal;color:var(--green)}h2{font-size:clamp(2.15rem,5vw,4rem);letter-spacing:-.055em;margin:.22em 0 .65em}h3{font-size:clamp(1.3rem,2.4vw,1.8rem);letter-spacing:-.035em;margin:.35rem 0 .75rem}.lead{font-size:clamp(1.05rem,2.2vw,1.4rem);font-weight:750;color:var(--ink)}.lead span{color:#628a3f}.intro{max-width:53ch}.actions,.tags{display:flex;gap:.65rem;flex-wrap:wrap}.actions{margin-top:1.5rem}.button{display:inline-flex;gap:.65rem;align-items:center;justify-content:center;border:1px solid var(--line);padding:.7rem 1rem;border-radius:99px;font-weight:700;max-width:100%;overflow-wrap:anywhere}.button:hover{background:#e8eddf;text-decoration:none}.primary{background:var(--green);color:white;border-color:var(--green)}.primary:hover{background:#24634f}.portrait{background:var(--green);padding:.75rem;border-radius:1.25rem;color:white;transform:rotate(2deg);box-shadow:12px 12px 0 #dce5cd}.portrait img{aspect-ratio:4/4.3;object-fit:cover;object-position:center 35%;border-radius:.8rem}.portrait figcaption{display:flex;justify-content:space-between;gap:.4rem;padding:.65rem .3rem 0;font-size:.68rem;letter-spacing:.12em}
.stats,.credentials{display:grid;grid-template-columns:repeat(3,1fr);background:#e8eddf;border-radius:1rem}.stats div,.credentials div{padding:1.15rem clamp(.7rem,3vw,2rem);display:grid;align-content:center}.stats div+div,.credentials div+div{border-left:1px solid #cbd6c7}.stats strong{font-size:clamp(1.45rem,4vw,2.75rem);line-height:1.25;color:var(--green)}.stats span,.credentials span{font-size:.86rem;color:var(--muted)}section[id]{margin-top:clamp(4rem,9vw,8rem)}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.card{border:1px solid var(--line);border-radius:1rem;background:#fffdf8;overflow:hidden}.pad{padding:clamp(1.2rem,3vw,2rem)}.project-image{display:block;background:#e8eddf}.project-image img{aspect-ratio:16/10;object-fit:contain}.project-image.scan{background:#174b3c}.project-image:hover img{filter:brightness(.94)}
summary{cursor:pointer;font-weight:700;color:var(--green)}details p{margin-top:.5rem}.tags{margin-top:1rem}.tags span{background:#eaf0e3;border-radius:99px;padding:.2rem .65rem;font-size:.78rem}.row{display:grid;grid-template-columns:1fr 3fr;gap:1rem;padding:1.65rem 0;border-top:1px solid var(--line)}.row p{margin-top:.5rem}.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin-top:1rem}.gallery a{border-radius:.65rem;overflow:hidden;background:#e8eddf}.gallery img{aspect-ratio:4/3;object-fit:cover;transition:transform .25s}.gallery a:hover img{transform:scale(1.05)}dt{font-weight:750;margin-top:.6rem}dd{margin:0}.subheading{margin-top:1.75rem}.contact-panel{background:#e1eccf;border-radius:1.2rem;padding:clamp(1.3rem,5vw,4rem);margin-bottom:2.5rem}.contact-panel h2{margin-bottom:.2em}footer{border-top:1px solid var(--line);padding:1.35rem 0;color:var(--muted);font-size:.85rem}dialog{padding:0;border:0;background:#101a16;border-radius:1rem;max-width:min(92vw,1100px);max-height:90vh}dialog::backdrop{background:#0d1c16dd}dialog img{max-height:87vh;width:auto;max-width:100%;object-fit:contain}dialog form{position:absolute;top:.5rem;right:.5rem}dialog button{border:0;border-radius:50%;width:2.75rem;height:2.75rem;font:1.7rem/1 Arial;cursor:pointer}
@media(max-width:700px){.wrap{width:calc(100% - 2rem)}header .bar{flex-wrap:wrap;gap:.45rem;padding:.65rem 0}nav{order:3;flex-basis:100%;justify-content:space-between}.hero,.grid,.row{grid-template-columns:1fr}.hero{padding-top:2.65rem}.portrait{width:min(95%,400px);margin:auto;transform:none;box-shadow:7px 7px 0 #dce5cd}.row{gap:.35rem}.stats span,.credentials span{font-size:.75rem}.credentials strong{font-size:.85rem}.gallery{gap:.4rem}footer{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.gallery img{transition:none}}

.cv-actions{margin-bottom:1rem}.cv-preview{display:block;width:100%;height:clamp(430px,75vh,850px);border:1px solid var(--line);border-radius:1rem;background:#fff}

.portrait{transform:none}.portrait-stage{background:#e8eddf;border-radius:.8rem;overflow:hidden}.portrait-stage img{aspect-ratio:4/4.3;object-fit:contain;object-position:center}.portrait [hidden]{display:none}.portrait figcaption{align-items:center;flex-wrap:wrap}.portrait-controls{display:flex;gap:.35rem}.portrait-controls button{min-height:2.25rem;border:1px solid #ffffff65;border-radius:99px;background:transparent;color:white;padding:.25rem .55rem;font:inherit;letter-spacing:normal;cursor:pointer}.portrait-controls button:focus-visible{outline-color:var(--lime)}.aspiration{max-width:66ch;margin:.85rem 0 1rem}

body{background:radial-gradient(ellipse 42rem 34rem at 94% 5%,#e3edcd,transparent),var(--paper)}
.hero{gap:clamp(1.5rem,6vw,5rem)}
.portrait{background:#123c32;box-shadow:0 22px 48px #183c3029;padding:.6rem;border-radius:1.5rem}
.portrait-stage{position:relative;background:radial-gradient(ellipse at center,#56776a,#173e34);border-radius:1.1rem}
.portrait-stage img{aspect-ratio:1.06;object-fit:contain;animation:portrait-in .5s ease both}
.portrait-index{position:absolute;top:.7rem;left:.7rem;background:#123c32e8;color:#fff;border-radius:99px;padding:.3rem .6rem;letter-spacing:.12em;font-size:.64rem}
.portrait figcaption{padding:.6rem .25rem .1rem;gap:.6rem}
.portrait-controls{align-items:center;gap:.4rem}
.portrait-controls .portrait-thumb{padding:2px;border-radius:.55rem;width:2.55rem;height:2.55rem;border:1px solid transparent;opacity:.75}
.portrait-controls .portrait-thumb[aria-pressed=true]{border-color:var(--lime);opacity:1}
.portrait-thumb img{width:100%;height:100%;aspect-ratio:1;object-fit:cover;border-radius:.36rem}
.recruiter{display:grid;grid-template-columns:1.1fr repeat(3,1fr);gap:.75rem;background:#123c32;color:#fff;border-radius:1.2rem;padding:clamp(1rem,3vw,2rem);margin-bottom:1rem}
.recruiter .eyebrow,.recruiter a span{color:var(--lime)}
.recruiter h2{font-size:clamp(1.6rem,3vw,2.4rem);margin:.35rem 0}
.recruiter a{display:grid;align-content:start;gap:.35rem;padding:.85rem;border-radius:.75rem;background:#ffffff0d;border:1px solid #ffffff29;transition:background .2s}
.recruiter a:hover,.recruiter a:focus-visible{background:#ffffff20;text-decoration:none}
.recruiter a span{font-size:.72rem;font-weight:750}.recruiter small{color:#e0ece2;line-height:1.45}
#du-an .card{transition:box-shadow .25s,border-color .25s}#du-an .card:hover{box-shadow:0 12px 28px #183c301c;border-color:#96b09d}
@keyframes portrait-in{from{opacity:.35;transform:scale(.985)}to{opacity:1;transform:scale(1)}}
@media(max-width:850px){.recruiter{grid-template-columns:repeat(3,minmax(0,1fr))}.recruiter>div{grid-column:1/-1}}
@media(max-width:520px){.recruiter{grid-template-columns:1fr}.recruiter a{grid-template-columns:2rem 1fr;column-gap:.65rem}.recruiter small{grid-column:2}.portrait{width:100%}}
@media(prefers-reduced-motion:reduce){.portrait-stage img{animation:none}.recruiter a,#du-an .card{transition:none}}


/* Layered surfaces with pointer-driven perspective. */
.hero{perspective:1200px}
.portrait{position:relative;isolation:isolate;transform-style:preserve-3d;transform:rotateX(var(--pitch,3deg)) rotateY(var(--yaw,-8deg));transition:transform .28s ease-out;box-shadow:16px 23px 0 -10px #a1bf8d,29px 38px 0 -16px #ccdcaa,28px 45px 55px -22px #173e3480}
.portrait::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse at var(--shine-x,20%) var(--shine-y,0%),#d8f49a5c,transparent 57%);transform:translateZ(20px);z-index:1}
.portrait-stage{transform:translateZ(26px);box-shadow:0 10px 24px #061e1a66;border:1px solid #e4f8cc4d}
.portrait-index{box-shadow:0 4px 10px #0a201c66}
.portrait figcaption{transform:translateZ(14px);position:relative;z-index:2}
.recruiter{box-shadow:0 13px 0 -6px #a6bd97,0 24px 35px -18px #173e3475}
.recruiter a{box-shadow:0 4px 0 #071d17;transition:transform .2s,background .2s,box-shadow .2s}
.recruiter a:hover,.recruiter a:focus-visible{transform:translateY(-4px);box-shadow:0 8px 0 #071d17}
#du-an .grid{perspective:1400px}
#du-an .card{overflow:visible;transform:rotateX(var(--pitch,0deg)) rotateY(var(--yaw,0deg));transform-style:preserve-3d;box-shadow:0 9px 0 -4px #c1d0bb,0 22px 30px -23px #173e3475;transition:transform .28s ease-out,box-shadow .25s,border-color .25s}
#du-an .project-image{margin:.55rem .55rem 0;border-radius:.7rem;overflow:hidden;transform:translateZ(18px);box-shadow:0 7px 16px -7px #173e3475}
#du-an .pad{transform:translateZ(8px)}
#du-an .card:hover{box-shadow:0 13px 0 -5px #c1d0bb,0 25px 38px -18px #173e3480}
@media(max-width:700px){.portrait{transform:rotateX(2deg) rotateY(-3deg);width:calc(100% - .75rem);box-shadow:8px 12px 0 -4px #a1bf8d,14px 21px 0 -8px #ccdcaa,13px 25px 30px -16px #173e3480}.portrait:active{transform:rotateX(0) rotateY(0)}#du-an .card:active{transform:rotateX(2deg)}}
@media(prefers-reduced-motion:reduce){.portrait,#du-an .card,.recruiter a{transform:none!important;transition:none}.portrait-stage,.portrait figcaption,#du-an .project-image,#du-an .pad{transform:none}.portrait::before{transform:none}}

.icon{display:inline-block;vertical-align:-.18em;flex:none}.recruiter a span .icon{margin-left:.2em}
.languages{display:flex;gap:.3rem;flex-wrap:wrap;font-size:.78rem}.languages a{padding:.25rem .5rem;border-radius:99px}.languages a[aria-current=page]{background:var(--green);color:white}html[lang=th]{font-family:"Leelawadee UI",Tahoma,sans-serif}html[lang=th] h2,html[lang=th] h3{letter-spacing:normal}@media(max-width:700px){.languages{order:2}header .contact{margin-left:auto}}
.languages{position:relative;display:block}.languages summary{display:flex;align-items:center;gap:.35rem;list-style:none;padding:.45rem .6rem;border:1px solid var(--line);border-radius:.55rem;background:var(--paper)}.languages summary::-webkit-details-marker{display:none}.languages summary::after{content:"";width:.32rem;height:.32rem;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);margin-top:-.2rem}.flag{display:block;border-radius:2px;flex:none}.language-options{position:absolute;top:calc(100% + .35rem);right:0;min-width:8rem;padding:.3rem;background:var(--paper);border:1px solid var(--line);border-radius:.65rem;box-shadow:0 8px 24px #173e342b}.language-options a{display:flex;align-items:center;gap:.55rem;padding:.5rem;border-radius:.35rem;white-space:nowrap}.language-options a:hover{background:#e8eddf;text-decoration:none}