:root { --ink: #20252b; --muted: #747b84; --line: #e6e8eb; --accent: #315efb; --paper: #fff; --gray: #f7f8fa; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: 'Kanit', sans-serif; font-weight: 300; line-height: 1.7; }
section { scroll-margin-top: 70px; }
.navbar { padding: 16px 0; }.navbar-brand { color: var(--ink); font-size: 1.15rem; letter-spacing: -.3px; }.navbar-brand:hover { color: var(--ink); }.navbar-brand span { color: var(--accent); }.nav-link { color: #6b7077; font-size: .92rem; }.nav-link:hover { color: var(--ink); }.contact-link { color: var(--ink); border-bottom: 1px solid var(--ink); }.navbar-toggler { border: 0; padding-right: 0; }
.hero-section { display: flex; align-items: center; min-height: 100vh; padding: 130px 0 90px; background: var(--gray); }.overline { margin: 0 0 18px; color: var(--accent); font-size: .72rem; font-weight: 500; letter-spacing: 2px; }.hero-section h1 { margin: 0 0 22px; font-size: clamp(2.7rem, 6vw, 5.3rem); font-weight: 500; line-height: 1.15; letter-spacing: -1px; }.hero-section h1 span { color: var(--accent); }.intro { max-width: 500px; margin-bottom: 30px; color: var(--muted); font-size: 1.1rem; }.hero-image { width: min(350px, 75vw); height: min(350px, 75vw); object-fit: cover; border-radius: 50%; filter: grayscale(12%); }
.section { padding: 110px 0; }.section-gray { background: var(--gray); }.section-title { display: flex; align-items: baseline; gap: 15px; margin-bottom: 55px; }.section-title span { color: var(--accent); font-size: .8rem; font-weight: 500; }.section-title h2 { margin: 0; font-size: clamp(2rem, 4vw, 3rem); font-weight: 500; letter-spacing: -.5px; }.large-text { margin-bottom: 18px; font-size: 1.55rem; line-height: 1.55; }.muted { color: var(--muted); }.info-group + .info-group { margin-top: 38px; }.info-group h3,.subheading { margin-bottom: 15px; font-size: 1rem; font-weight: 500; }.tag-list,.tools-list { display: flex; flex-wrap: wrap; gap: 9px; }.tag-list span,.tools-list span { padding: 7px 13px; color: #59616b; background: var(--gray); border: 1px solid var(--line); border-radius: 5px; font-size: .85rem; }.section-gray .tag-list span { background: #fff; }
.education-list { max-width: 850px; border-top: 1px solid var(--line); }.education-item { display: flex; justify-content: space-between; gap: 20px; padding: 28px 0; border-bottom: 1px solid var(--line); }.education-item h3 { margin: 6px 0 2px; font-size: 1.15rem; font-weight: 400; }.education-item p { margin: 0; color: var(--muted); font-size: .9rem; }.education-item strong { color: #b2b7bf; font-size: 1.15rem; font-weight: 500; }.year { color: var(--accent); font-size: .8rem; }
.skill { margin-bottom: 26px; }.skill > div:first-child { display: flex; justify-content: space-between; margin-bottom: 7px; }.skill small { color: var(--muted); font-size: .75rem; }.progress { height: 5px; background: #edf0f3; border-radius: 20px; }.progress-bar { background: var(--accent); border-radius: 20px; }.tools-list span { background: #fff; }
.contact-section { padding: 95px 0; background: var(--gray); }.contact-section h2 { margin: 0; font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 400; }footer { color: var(--muted); background: #fff; font-size: .8rem; }
@media (max-width: 991px) { .navbar .navbar-collapse { padding-top: 12px; }.hero-section { min-height: auto; }.hero-image { width: 280px; height: 280px; } }
@media (max-width: 575px) { .section { padding: 75px 0; }.hero-section { padding: 120px 0 75px; }.hero-section h1 { font-size: 2.7rem; }.intro { font-size: 1rem; }.hero-image { width: 230px; height: 230px; }.section-title { margin-bottom: 35px; }.large-text { font-size: 1.3rem; }.education-item { align-items: flex-start; }.education-item strong { font-size: .95rem; } }