/* Jirawat portfolio — shared visual system, September 2026. */
:root[data-theme],html[data-theme] body{--bg:#f7fafc;--surface:#fff;--text:#142234;--muted:#516780;--accent:#0872ed;--line:#dce6ef;--header:#f9fcfff2;--soft:#edf6ff;--tech:#0872ed;--accent-ink:#0872ed;color-scheme:light}
:root[data-theme=dark],html[data-theme=dark] body{--bg:#0a1523;--surface:#101f32;--text:#eef5ff;--muted:#a6bbd2;--accent:#6abcff;--line:#2b3e54;--header:#0a1523f2;--soft:#11273e;--tech:#6abcff;--accent-ink:#6abcff;color-scheme:dark}
html{scroll-padding-top:150px}html body{background:var(--bg);color:var(--text);background-image:none;font-size:15px;line-height:1.85}body::before,body::after{display:none!important}body .container{max-width:1200px;width:calc(100% - 64px)}body h1,body h2,body h3{letter-spacing:-.025em;line-height:1.4}body h1{font-size:clamp(34px,4.2vw,58px)}body h2{font-size:clamp(25px,2.65vw,36px)}body h3{font-size:20px}body p{color:var(--muted)}body .site-header{background:var(--header);border-bottom:1px solid var(--line);backdrop-filter:blur(18px);box-shadow:none}body .nav{gap:24px;min-height:84px}body .brand,body.network-design .brand{font-size:19px;font-style:normal;letter-spacing:-.6px;font-weight:800;white-space:nowrap}body .brand span{color:var(--accent);margin-right:6px}body .nav-links{gap:20px;font-size:13px}body .nav-links a{padding:6px 0;position:relative}body .nav-links a[aria-current=location]{color:var(--accent)}body .nav-links a[aria-current=location]::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--accent)}body .account-nav{gap:9px;font-size:12px}body .theme-toggle,body .language-toggle{color:var(--text);border:1px solid var(--line);background:var(--surface);border-radius:12px;min-height:38px;min-width:38px}body .button,body.network-design .button{background:#137cf5;border:1px solid #137cf5;border-radius:24px;color:white;padding:11px 23px;box-shadow:0 6px 16px #0077ed16;font-size:14px;gap:14px;min-height:46px}body .button:hover,body.network-design .button:hover{background:#0662c8;color:#fff;box-shadow:0 8px 24px #0077ed29}body .button.outline,body.network-design .button.outline{background:var(--surface);border-color:var(--line);color:var(--text);box-shadow:0 3px 8px #102c4810}body .button.outline:hover{border-color:var(--accent);color:var(--accent)}body .button.small{padding:8px 14px;min-height:38px;font-size:12px}body .eyebrow{font-size:12px;letter-spacing:.1em;margin-bottom:12px;color:var(--accent)}body .text-link{border-color:var(--line);color:var(--accent)}body .reading-progress{background:var(--accent);height:2px}body .jp-section{padding-block:64px;scroll-margin-top:18px}
.jp-hero-band{background:radial-gradient(ellipse at 85% 30%,#72bfff20,transparent 60%),linear-gradient(130deg,var(--bg),var(--soft))}.jp-hero{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding-block:76px 86px;min-height:650px}.jp-pill{display:inline-block;padding:4px 14px;border-radius:30px;color:var(--accent);background:var(--soft);font-size:12px;font-weight:600;letter-spacing:.03em}.jp-hero h1{margin:14px 0 22px;line-height:1.4}.jp-hero h1 span{color:var(--text)}.jp-intro{font-size:16px;max-width:520px}.jp-values{display:flex;margin-top:36px;gap:22px}.jp-values>div{display:flex;flex-direction:column;border-right:1px solid var(--line);padding-right:22px}.jp-values>div:last-child{border:0;padding:0}.jp-values strong{font-size:23px;letter-spacing:-.04em;line-height:1.4}.jp-values span{font-size:11px;color:var(--muted)}.jp-visual{position:relative;padding:16px 0 25px;min-width:0}.jp-browser{border:8px solid var(--surface);background:#112338;border-radius:26px;overflow:hidden;box-shadow:0 28px 55px #12335424;transform:perspective(1400px) rotateY(-5deg) rotateZ(-1deg)}.jp-browser-bar{display:flex;justify-content:space-between;align-items:center;padding:7px 15px;background:var(--surface);color:var(--muted);font-size:10px}.jp-browser-bar>span:first-child{color:#8ca8c1;letter-spacing:3px}.jp-feature{display:block;position:relative}.jp-feature[hidden]{display:none}.jp-feature img{width:100%;height:330px;object-fit:contain;background:#102337}.jp-feature-label{padding:22px;color:#fff;background:#12283c}.jp-feature-label small{display:block;letter-spacing:.13em;color:#87cfff;font-size:10px}.jp-feature-label strong{display:block;font-size:16px;margin-top:6px}.jp-cover-empty{display:grid;place-content:center;min-height:220px;background:linear-gradient(135deg,#0c263e,#1c4870);color:#a5d9ff;font-size:70px;text-align:center}.jp-cover-empty p{font-size:15px;color:#d8eafa}.jp-float{position:absolute;z-index:1;display:flex;gap:14px;align-items:center;border:1px solid var(--line);box-shadow:0 12px 32px #163d5920;border-radius:18px;padding:16px 20px;font-size:12px}.jp-float-code{left:-25px;top:62%;background:#12273deb;color:#fff;backdrop-filter:blur(12px)}.jp-float-code b{font-size:26px}.jp-float-code span{line-height:1.6}.jp-float-contact{bottom:-6px;right:-12px;background:var(--surface)}.jp-float-contact i{width:13px;height:13px;border-radius:50%;background:#0ba3dd;box-shadow:0 0 0 6px #1597ff17}.jp-float-contact small{display:block;color:var(--muted)}.jp-heading{display:flex;align-items:center;justify-content:space-between;gap:40px;margin-bottom:28px}.jp-heading h2,.jp-heading p{margin:0}.jp-heading>p{font-size:14px;max-width:400px}.jp-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.jp-service{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:25px 22px;display:flex;align-items:flex-start;gap:16px;box-shadow:0 5px 16px #24456905}.jp-service h3{font-size:18px;margin:2px 0 10px}.jp-service p{font-size:13px;margin:0}.jp-icon{background:#e7f2ff;border-radius:50%;width:50px;height:50px;flex:0 0 50px;display:grid;place-items:center;font-size:28px;color:#0872ed}.jp-service:nth-child(2) .jp-icon{color:#039961;background:#e6f7ef}.jp-service:nth-child(3) .jp-icon{color:#8c39e5;background:#f2e9ff}.jp-about-band{background:var(--soft);border-block:1px solid var(--line)}.jp-about{padding-block:50px;display:grid;grid-template-columns:220px 1.4fr 1fr;gap:35px;align-items:center}.jp-portrait{height:300px;width:100%;object-fit:cover;object-position:50% 25%;border-radius:24px;box-shadow:0 12px 35px #163a5010}.jp-about h2{font-size:28px;margin-bottom:8px}.jp-about p{font-size:14px}.jp-subtitle{font-weight:500}.jp-facts{margin:0;padding-left:26px;border-left:1px solid var(--line);font-size:12px;min-width:0}.jp-facts>div{margin-block:16px}.jp-facts dt{font-weight:700}.jp-facts dd{margin:2px 0 0;color:var(--muted);overflow-wrap:anywhere}.jp-skills{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px}.jp-skills>div{display:grid;justify-items:center;gap:9px;padding:18px 8px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}.jp-skills span{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--soft);color:var(--accent);font-weight:800;font-size:20px}.jp-skills strong{font-size:12px;font-weight:600}.jp-project-band{background:#10253b;color:#f1f7ff}.jp-project-band p{color:#b3c6d9}.jp-project-band .eyebrow{color:#69baff}.jp-projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.jp-project{border:1px solid #375066;border-radius:20px;overflow:hidden;background:#1a3046;display:flex;flex-direction:column}.jp-project-image{position:relative;display:block;background:#0b1b2c;padding:8px}.jp-project-image img{width:100%;aspect-ratio:16/10;object-fit:contain;height:auto;border-radius:12px}.jp-project-image>span{position:absolute;right:17px;bottom:17px;background:#10253bdb;color:white;border-radius:8px;padding:0 8px;font-size:22px}.jp-project-copy{padding:22px;display:flex;flex-direction:column;flex:1}.jp-project-copy h3{font-size:20px;color:#f3f8ff;margin:0 0 12px}.jp-project-copy>p:not(.jp-category){font-size:13px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.jp-project-copy .jp-category{font-size:11px;color:#8acbff;margin:0 0 8px}.jp-project-copy .text-link{color:#a4d6ff;border-color:#3a5874;margin-top:auto;align-self:flex-start;font-size:13px}.jp-admin-tools{display:flex;align-items:center;gap:15px;margin-bottom:25px;font-size:12px;color:#b3c6d9}.jp-empty{border:1px dashed #52758f;border-radius:18px;padding:35px}.jp-site .studio-faq{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;padding-block:70px;border:0}.jp-site .studio-faq h2{font-size:30px}.jp-site .faq-list{border:1px solid var(--line);border-radius:20px;background:var(--surface);overflow:hidden}.jp-site .faq-list details{border-bottom:1px solid var(--line)}.jp-site .faq-list details:last-child{border:0}.jp-site .faq-list summary{padding:20px 24px;cursor:pointer;display:flex;justify-content:space-between;gap:16px;font-size:14px;font-weight:600;list-style:none}.jp-site .faq-list summary::-webkit-details-marker{display:none}.jp-site .faq-list details[open] summary span{transform:rotate(45deg)}.jp-site .faq-list details p{padding:0 24px 20px;margin:0;font-size:14px}.jp-contact{display:grid;grid-template-columns:1.3fr 1fr;gap:65px;align-items:center;border:1px solid var(--line);background:var(--surface);border-radius:26px;padding:42px;box-shadow:0 12px 32px #1f426908}.jp-contact h2{font-size:30px;margin-bottom:16px}.jp-contact p{font-size:14px;margin-bottom:0}.jp-contact>div:last-child>.button{display:flex;margin-bottom:12px}.jp-contact .copy-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:20px}.jp-contact .email-link{font-size:12px;margin:0;line-height:1.7;overflow-wrap:anywhere}.jp-contact .copy-email{border:1px solid var(--line);background:var(--soft);color:var(--text);border-radius:9px;padding:5px 9px;font-size:11px}.jp-contact small{font-size:11px;color:var(--muted)}.jp-footer{border-top:1px solid var(--line);padding-block:45px;background:var(--soft)}.jp-footer-grid{display:grid;grid-template-columns:1.6fr .7fr .8fr 1fr;gap:30px;font-size:12px}.jp-footer-grid>div>strong{display:block;margin-bottom:12px}.jp-footer-grid>div>a:not(.brand){display:block;margin:6px 0}.jp-footer-grid p{margin-top:14px;font-size:12px}.jp-footer-grid small{display:block;margin-top:22px;font-size:10px;color:var(--muted)}.jp-about-intro{max-width:1000px!important}.jp-about-intro p:last-child{max-width:700px;font-size:18px}.jp-about-story{display:grid;grid-template-columns:300px 1fr;gap:70px;align-items:center}.jp-about-story .jp-portrait{height:360px}.jp-about-story p{max-width:650px}.jp-process{padding:30px;border:1px solid var(--line);background:var(--surface);border-radius:22px}.jp-process h3{margin:16px 0}.jp-process p{font-size:14px;margin:0}.jp-principles{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px}.jp-principles dl{margin:0}.jp-principles dl>div{display:grid;grid-template-columns:1fr 1.5fr;gap:28px;border-top:1px solid var(--line);padding:23px 0;font-size:14px}.jp-principles dt{font-weight:600}.jp-principles dd{margin:0;color:var(--muted)}.jp-site .detail{max-width:1000px}.jp-site .detail .project-cover{background:#10253b}.jp-site .detail h1{font-size:clamp(30px,4vw,48px)}body .auth-card-new,body .auth-card{box-shadow:0 12px 40px #18394b08}html[data-theme] .auth-card-new input:not([type=hidden]),html[data-theme] .admin-page input,html[data-theme] .admin-page textarea{background:var(--bg);color:var(--text);border-color:var(--line)}
@media(min-width:1001px){body .nav{flex-wrap:wrap;padding-block:13px;gap:12px 22px}body .nav-links{flex:1;justify-content:center}.jp-projects:has(> :only-child){grid-template-columns:minmax(0,760px)}.jp-projects:has(> :only-child) .jp-project{display:grid;grid-template-columns:1.2fr 1fr}.jp-projects:has(> :only-child) .jp-project-image{display:grid;align-items:center}}
@media(max-width:1100px){.jp-hero{gap:32px}.jp-about{grid-template-columns:190px 1fr}.jp-facts{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border:0;padding:0}.jp-values{gap:12px}.jp-values>div{padding-right:12px}.jp-values strong{font-size:20px}}
@media(max-width:760px){body .container{width:calc(100% - 36px)}body .nav{gap:12px;min-height:76px}body .brand,body.network-design .brand{font-size:16px}body .nav-links{overflow-x:auto;justify-content:flex-start;gap:20px;white-space:nowrap;padding-bottom:3px}body .account-nav{flex-wrap:wrap;gap:7px}body .account-nav .viewer-name{display:none}body .account-nav .button.small{font-size:11px;padding:6px 10px;min-height:34px}body .jp-section{padding-block:45px}.jp-hero{grid-template-columns:1fr;padding-block:38px 58px;gap:44px;min-height:0}.jp-hero h1{font-size:clamp(30px,7.9vw,48px)}.jp-intro{font-size:15px}.jp-values{justify-content:space-between;margin-top:28px}.jp-values strong{font-size:20px}.jp-values span{font-size:10px}.jp-visual{margin-inline:8px}.jp-feature img{height:auto;aspect-ratio:4/3;object-fit:contain}.jp-float-code{left:-9px;top:53%;padding:12px;font-size:10px}.jp-float-code b{font-size:20px}.jp-float-contact{right:-7px;bottom:0;padding:12px;font-size:11px}.jp-heading{display:block;margin-bottom:24px}.jp-heading p{margin-top:12px}.jp-three{grid-template-columns:1fr;gap:14px}.jp-service{padding:22px}.jp-about{grid-template-columns:1fr;padding-block:40px;gap:28px}.jp-portrait{max-width:340px;height:330px}.jp-about h2{font-size:28px}.jp-facts{grid-template-columns:1fr 1fr;gap:0 20px}.jp-skills{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.jp-skills strong{font-size:11px}.jp-projects{grid-template-columns:1fr}.jp-project-copy>p:not(.jp-category){-webkit-line-clamp:4}.jp-site .studio-faq{grid-template-columns:1fr;gap:26px;padding-block:45px}.jp-site .studio-faq h2{font-size:28px}.jp-contact{grid-template-columns:1fr;gap:25px;padding:25px}.jp-contact h2{font-size:27px}.jp-footer-grid{grid-template-columns:1fr 1fr;gap:25px}.jp-footer-grid>div:first-child{grid-column:1/-1}.jp-about-story{grid-template-columns:1fr;gap:30px}.jp-about-intro p:last-child{font-size:16px}.jp-principles{grid-template-columns:1fr;gap:20px}.jp-principles dl>div{grid-template-columns:1fr;gap:8px}.jp-process{padding:24px}.jp-admin-tools{align-items:flex-start}.jp-admin-tools span{flex:1}}
body .button.google-button,body.network-design .button.google-button{background:#fff;color:#1f2937;border-color:#d6dce3;box-shadow:0 2px 6px #18394b08}body .button.google-button:hover{background:#f0f6ff;color:#1f2937}
@media(max-width:420px){body .nav{column-gap:7px}body .account-nav{gap:6px;font-size:11px}body .theme-toggle,body .language-toggle{min-width:32px;min-height:34px;padding:5px 7px}body .brand,body.network-design .brand{font-size:15px}body .account-nav .button.small{padding-inline:8px}.jp-values{gap:8px}.jp-values>div{padding-right:8px}.jp-values strong{font-size:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.jp-browser{transform:none}}