@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+Thai:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap');

:root { --ink:#19384b; --paper:#fcfbf7; --leaf:#688f7b; --orange:#a94d34; --sun:#c5a24c; --sky:#dcebf1; --violet:#dfe1eb; --line:rgba(25,56,75,.16); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope,"Noto Sans Thai",sans-serif; line-height:1.7; }
a { color:inherit; }
.site-header, main > section, footer { padding-left:max(5vw,24px); padding-right:max(5vw,24px); }
.site-header { position:sticky; top:0; z-index:10; min-height:76px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:24px; background:rgba(252,251,247,.94); backdrop-filter:blur(12px); }
.brand { font-size:1.5rem; text-decoration:none; letter-spacing:-.09em; font-weight:800; } .brand span { color:var(--orange); }
nav { display:flex; align-items:center; gap:clamp(14px,3vw,42px); font-size:.86rem; } nav a { text-decoration:none; font-weight:600; } nav a:hover { color:var(--orange); } .language-toggle { border:1px solid var(--ink); border-radius:3px; padding:5px 9px; color:var(--ink); background:transparent; font:800 .74rem Manrope,"Noto Sans Thai",sans-serif; cursor:pointer; } .language-toggle:hover { background:var(--ink); color:white; }
.hero { min-height:690px; padding-top:clamp(88px,12vw,160px); padding-bottom:100px; background:radial-gradient(circle at 82% 22%,#d6ff5b 0 2%,transparent 2.2%),radial-gradient(circle at 75% 60%,#ff7654 0 9%,transparent 9.3%),linear-gradient(125deg,#11283e 0%,#173e54 52%,#175c5a 100%); color:#fffdf8; }
.eyebrow { margin:0 0 14px; font: .72rem/1.5 "DM Mono",monospace; letter-spacing:.09em; color:#557282; }
h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:"Source Serif 4","Noto Sans Thai",serif; } h1 { max-width:900px; margin-bottom:25px; font-size:clamp(4.2rem,10vw,9rem); font-weight:700; line-height:.92; letter-spacing:-.065em; white-space:pre-line; color:var(--ink); } h1 em { color:var(--orange); font-style:normal; }
.hero .eyebrow { color:#d6ff5b; } .hero h1 { color:#fffdf8; } .hero h1 em { color:#d6ff5b; } .lead { max-width:650px; font-size:clamp(1.05rem,2vw,1.3rem); } .hero .lead { color:#e3f0ed; } .hero-philosophy { margin:27px 0 0; color:#d6ff5b; font:.76rem "DM Mono",monospace; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .lab-director { display:table; margin:10px 0 0; padding:8px 12px; border-left:3px solid #d6ff5b; background:rgba(7,22,34,.3); color:#e3f0ed; font-size:.88rem; font-weight:800; } .button { display:inline-block; margin-top:18px; padding:13px 22px; border-radius:999px; background:var(--ink); color:white; text-decoration:none; font-size:.9rem; font-weight:800; transition:transform .2s ease,background .2s ease; } .button:hover { transform:translateY(-2px); background:#285b72; } .hero .button { background:#d6ff5b; color:#11283e; } .hero-actions { display:flex; flex-wrap:wrap; gap:12px; } .hero-actions .button { margin-top:18px; } .button.button-secondary { border:1px solid rgba(255,255,255,.65); background:transparent; color:#fffdf8; }
.section { padding-top:clamp(70px,10vw,130px); padding-bottom:clamp(70px,10vw,130px); border-top:1px solid var(--line); } h2 { font-size:clamp(2rem,4.5vw,4.5rem); letter-spacing:-.06em; line-height:1.05; }
.two-columns { display:grid; grid-template-columns:minmax(220px,.9fr) minmax(300px,1.1fr); gap:clamp(40px,10vw,180px); } .two-columns > div:last-child { font-size:1.15rem; } .muted { color:#657066; font-size:.92rem; }
.impact-list { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:30px 0 0; padding:0; list-style:none; } .impact-list li { padding:13px 15px; border-left:3px solid var(--orange); background:#f5f0e4; } .impact-list strong,.impact-list span { display:block; } .impact-list strong { font-size:1.1rem; line-height:1.25; } .impact-list span { margin-top:4px; color:#557282; font-size:.7rem; line-height:1.4; }
.research { background:var(--ink); color:#fffdf8; } .research .eyebrow { color:#c4d5dc; } .cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .cards article { min-height:278px; padding:28px; border-radius:4px; border-top:6px solid var(--sun); background:#fffdf8; display:flex; flex-direction:column; align-items:flex-start; } .cards article:nth-child(2n) { border-top-color:#78aab4; } .cards article:nth-child(3n) { border-top-color:var(--leaf); } .cards span { color:#557282; font:.72rem "DM Mono",monospace; } .cards h3 { margin:50px 0 9px; font-size:1.25rem; color:var(--ink); } .cards p { color:#415d6c; font-size:.93rem; } .research-link { margin-top:auto; padding-top:18px; color:var(--ink); font-size:.8rem; font-weight:800; text-decoration-color:var(--orange); text-underline-offset:4px; } .research-status { margin-top:auto !important; padding-top:18px; color:#557282 !important; font:.7rem "DM Mono",monospace; letter-spacing:.04em; }
.teaching { background:#eaf1f2; } .teaching h2 { margin-bottom:20px; } .teaching-lead { max-width:700px; margin-bottom:45px; font-size:1.08rem; } .teaching-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .teaching-grid article { min-height:260px; padding:27px; border:1px solid var(--line); border-top:4px solid #78aab4; border-radius:4px; display:flex; flex-direction:column; align-items:flex-start; background:#fffdf8; } .teaching-grid article:nth-child(2) { border-top-color:var(--sun); } .teaching-grid article:nth-child(3) { border-top-color:var(--leaf); } .teaching-grid span { font:.72rem "DM Mono",monospace; color:var(--orange); } .teaching-grid h3 { margin:47px 0 9px; font-size:1.35rem; letter-spacing:-.05em; } .teaching-grid p { margin:0; font-size:.9rem; color:#456474; } .course-link { margin-top:auto; padding-top:21px; color:var(--ink); font-size:.8rem; font-weight:800; text-decoration-color:var(--orange); text-underline-offset:4px; }
.callout { background:#eff5ef; } .callout h2 { max-width:850px; }
.people-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .people-grid article { min-height:176px; padding:22px; border:1px solid var(--line); border-top:4px solid var(--leaf); border-radius:4px; background:#fffdf8; } .people-grid .director { grid-column:span 2; } .people-grid span { font:.65rem "DM Mono",monospace; letter-spacing:.06em; color:#557282; } .people-grid h3 { margin:27px 0 5px; font-size:1.35rem; letter-spacing:-.05em; } .people-grid h3 small { font:500 .72em Manrope,"Noto Sans Thai",sans-serif; letter-spacing:0; color:#526351; } .people-grid p { margin:0; font-size:.8rem; line-height:1.55; color:#415d6c; } .people-grid .role { font-weight:800; color:var(--ink); } .people-grid .member-focus { margin-top:10px; padding-top:10px; border-top:1px solid var(--line); color:#344633; } .people-grid .talent-development { margin-top:15px; padding:11px 13px; border-left:3px solid var(--orange); background:#fff6ed; } .people-grid .talent-development strong { color:var(--orange); } .people-grid .email-link { display:inline-block; margin-top:10px; font:.73rem "DM Mono",monospace; color:#344633; text-underline-offset:3px; } .people-grid .email-pending { margin-top:10px; font:.73rem "DM Mono",monospace; color:#526351; } .people-grid .projects { margin-top:10px; padding-top:9px; border-top:1px solid var(--line); font-size:.7rem; color:#526351; } .people-grid .profile-link { display:table; margin-top:12px; font-size:.78rem; font-weight:800; text-decoration-color:var(--orange); text-underline-offset:4px; } .people-grid .collaborator { background:#f6faf3; }
.alumni { background:#f5f0e4; } .alumni h2 { max-width:850px; margin-bottom:18px; } .alumni-lead { max-width:780px; margin-bottom:30px; font-size:1.05rem; } .alumni-highlights { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:0 0 24px; padding:0; list-style:none; } .alumni-highlights li { min-height:112px; padding:16px; border-top:4px solid var(--orange); background:#fffdf8; } .alumni-highlights strong,.alumni-highlights span { display:block; } .alumni-highlights strong { font-size:.85rem; line-height:1.45; } .alumni-highlights span { margin-top:6px; color:#557282; font-size:.7rem; line-height:1.4; } .alumni-details summary { padding:17px 20px; border:1px solid var(--line); border-radius:4px; background:var(--ink); color:#fffdf8; font-weight:800; cursor:pointer; } .alumni-details[open] summary { margin-bottom:16px; } .alumni-groups { display:grid; grid-template-columns:minmax(260px,.8fr) minmax(330px,1.2fr); gap:18px; align-items:start; } .alumni-group { padding:26px; border:1px solid var(--line); border-top:4px solid var(--orange); border-radius:4px; background:#fffdf8; } .alumni-group + .alumni-group { border-top-color:var(--sun); } .alumni-group h3 { margin:0 0 16px; font-size:1.25rem; letter-spacing:-.04em; } .alumni-list { margin:0; padding:0; list-style:none; } .alumni-list li { padding:13px 0; border-top:1px solid var(--line); font-size:.82rem; line-height:1.6; } .alumni-list strong { color:var(--ink); } .alumni-list strong::after { content:" — "; color:#557282; } .alumni-list span { color:#415d6c; } .alumni-list time { margin-left:.35rem; color:#557282; font:.68rem "DM Mono",monospace; white-space:nowrap; } .alumni-list time::before { content:" · "; }
.showcase,.activities,.join { background:#eaf1f2; } .showcase > p:not(.eyebrow),.activities > p:not(.eyebrow),.join > p:not(.eyebrow) { max-width:760px; font-size:1.08rem; } .demos { background:#fffdf8; } .demo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } .demo-grid a { min-height:200px; padding:26px; border:1px solid var(--line); border-top:5px solid var(--sun); border-radius:4px; text-decoration:none; background:#f5f0e4; } .demo-grid a:nth-child(2) { border-top-color:#78aab4; } .demo-grid span { font:.72rem "DM Mono",monospace; color:var(--orange); } .demo-grid h3 { margin:40px 0 8px; font-size:1.3rem; } .demo-grid p { margin:0; font-size:.9rem; color:#415d6c; } .publications { background:#fffdf8; } .publication-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:28px 0 38px; } .publication-panel { min-height:210px; padding:24px; border:1px solid var(--line); border-top:5px solid var(--sun); background:#f5f0e4; } .publication-panel.publication-recent { border-top-color:var(--orange); } .publication-panel > span { font:.7rem "DM Mono",monospace; color:var(--orange); letter-spacing:.06em; } .publication-panel h3 { margin:32px 0 8px; font-size:1.35rem; } .publication-panel p,.publication-panel li { color:#415d6c; font-size:.86rem; } .publication-panel ul { padding-left:1.2rem; } .publication-panel a { font-weight:800; text-decoration-color:var(--orange); text-underline-offset:4px; } .publication-subheading { margin:0; font-size:1.25rem; } .publication-list { max-width:1000px; margin:20px 0 28px; padding-left:1.4rem; } .publication-list li { margin:0 0 15px; padding-left:8px; } .publication-list a { font-weight:700; text-decoration-color:var(--orange); text-underline-offset:3px; } .publication-list span { display:block; color:#557282; font-size:.82rem; }
.showcase { background:linear-gradient(135deg,#5e3a96,#19384b 68%); color:#fffdf8; } .showcase .eyebrow { color:#d6ff5b; } .showcase h2 { color:#fffdf8; } .showcase > p:not(.eyebrow) { color:#e7ddff; } .showcase .button { background:#d6ff5b; color:#19384b; } .activities { background:#fff1e8; } .join { background:linear-gradient(135deg,#0f313f,#1a554a); color:#fffdf8; } .join .eyebrow { color:#d6ff5b; } .join h2,.join > p:not(.eyebrow) { color:#fffdf8; } .join .button { background:#ff7654; } .join-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:34px 0 12px; } .join-grid article { min-height:220px; padding:24px; border:1px solid rgba(255,255,255,.22); border-top:5px solid #d6ff5b; background:rgba(5,24,28,.25); } .join-grid article:nth-child(2) { border-top-color:#ff7654; } .join-grid article:nth-child(3) { border-top-color:#9cbed0; } .join-grid span { color:#d6ff5b; font:.7rem "DM Mono",monospace; letter-spacing:.05em; } .join-grid h3 { margin:30px 0 9px; font-size:1.25rem; } .join-grid p { color:#e3f0ed; font-size:.86rem; } .demo-grid a { transition:transform .2s ease,box-shadow .2s ease; } .demo-grid a:hover { transform:translateY(-5px) rotate(-.3deg); box-shadow:0 16px 28px rgba(25,56,75,.16); }
.project-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .project-grid article { min-height:260px; padding:26px; border:1px solid rgba(255,255,255,.24); border-top:5px solid #d6ff5b; border-radius:6px; background:rgba(10,24,48,.26); color:#fffdf8; } .project-grid article:nth-child(4) { border-top-color:#ff7654; } .project-grid article:nth-child(5) { border-top-color:#9cbed0; } .project-grid article:nth-child(6) { border-top-color:#c9a6ff; } .project-grid .project-featured { grid-column:span 2; } .project-grid .project-legacy { border-top-color:var(--sun); background:linear-gradient(145deg,rgba(197,162,76,.22),rgba(10,24,48,.3)); } .project-grid .project-tag { display:table; padding:5px 8px; border:1px solid currentColor; border-radius:999px; color:#d6ff5b; font:.66rem "DM Mono",monospace; letter-spacing:.06em; } .project-grid .project-legacy .project-tag { color:#f1d78e; } .project-grid span { font:.7rem "DM Mono",monospace; color:#d6ff5b; letter-spacing:.07em; } .project-grid h3 { margin:18px 0 9px; font-size:1.45rem; letter-spacing:-.05em; } .project-grid p { margin-bottom:18px; color:#e7ddff; font-size:.9rem; } .project-grid a:not(.button) { color:#fffdf8; font-size:.82rem; font-weight:800; text-decoration-color:#d6ff5b; text-underline-offset:4px; } .project-grid .showcase-image { width:100%; margin:16px 0 18px; }
.publication-authors { font-weight:700; color:var(--ink) !important; } .citation-list li { line-height:1.65; } .citation-list .citation-authors { display:inline; color:var(--ink); font-weight:700; } .citation-list time { white-space:nowrap; } .citation-list em { color:#415d6c; } .citation-list .doi-link { display:inline-block; margin-left:.2rem; color:#557282; font:.72rem "DM Mono",monospace; font-weight:500; overflow-wrap:anywhere; } .manuscript-list { margin-top:20px; list-style:none; padding-left:0 !important; } .manuscript-list li + li { margin-top:16px; padding-top:16px; border-top:1px solid var(--line); } .manuscript-list strong,.manuscript-list span { display:block; } .manuscript-list strong { margin-bottom:4px; color:var(--orange); font:.62rem "DM Mono",monospace; letter-spacing:.04em; }
.showcase-image { display:block; width:min(760px,100%); margin:26px 0; border:1px solid rgba(255,255,255,.28); border-radius:8px; box-shadow:0 22px 45px rgba(5,12,28,.35); }
.teaching-grid .course-featured { background:#f4f0ff; } .course-preview { display:block; width:100%; aspect-ratio:1.9/1; margin:14px 0 18px; border-radius:3px; object-fit:cover; object-position:top; } .teaching-grid .course-featured h3 { margin:0 0 9px; }
.resources { background:#fff1e8; } .resource-card { display:grid; grid-template-columns:minmax(260px,.9fr) minmax(260px,1.1fr); gap:clamp(22px,5vw,64px); max-width:1040px; padding:22px; border:1px solid rgba(169,77,52,.28); border-top:6px solid #ff7654; border-radius:7px; background:#fffdf8; text-decoration:none; transition:transform .2s ease,box-shadow .2s ease; } .resource-card:hover { transform:translateY(-5px); box-shadow:0 18px 35px rgba(169,77,52,.16); } .resource-card img { width:100%; border-radius:3px; align-self:center; } .resource-card div { align-self:center; } .resource-card span { font:.72rem "DM Mono",monospace; color:#a94d34; } .resource-card h3 { margin:14px 0 9px; font-size:clamp(1.35rem,2.6vw,2rem); letter-spacing:-.05em; } .resource-card p { color:#415d6c; } .resource-card strong { color:#a94d34; }
.demo-grid img { display:block; width:100%; aspect-ratio:1.9/1; margin:12px 0 16px; border-radius:3px; object-fit:cover; object-position:top; box-shadow:0 8px 18px rgba(25,56,75,.18); } .demo-grid h3 { margin:0 0 8px; }
.people-grid h3 > span { color:inherit; font:inherit; letter-spacing:inherit; }
footer { padding-top:60px; padding-bottom:60px; display:flex; justify-content:space-between; gap:30px; background:var(--ink); color:#fffdf8; } footer p { margin:12px 0 0; font-size:.87rem; } footer a:not(.brand) { font-size:1.1rem; font-weight:700; }
@media (max-width:680px) { .site-header { min-height:auto; padding-top:20px; padding-bottom:20px; align-items:flex-start; flex-direction:column; } nav { flex-wrap:wrap; gap:8px 18px; } .hero { min-height:570px; } .two-columns,.cards,.teaching-grid,.people-grid,.alumni-groups,.demo-grid,.resource-card,.impact-list,.project-grid,.publication-columns,.join-grid,.alumni-highlights { grid-template-columns:1fr; } .project-grid .project-featured,.people-grid .director { grid-column:auto; } .cards article,.teaching-grid article,.publication-panel,.join-grid article,.alumni-highlights li { min-height:0; } .cards h3,.teaching-grid h3 { margin-top:24px; } .alumni-group { padding:20px; } footer { flex-direction:column; } }