/* Nasirin Roset portfolio — light minimalist */
:root{--paper:#f7f8f5;--white:#fff;--ink:#18221e;--muted:#69736d;--line:#dfe4de;--green:#d9ed78;--green-dark:#b8d34d;--soft:#edf1e9;--serif:"Manrope","DM Sans",serif;--sans:"DM Sans",Arial,sans-serif;--display:"Manrope","DM Sans",sans-serif;--khmer:"Kantumruy Pro","Noto Sans Khmer",sans-serif;--container:1160px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}.container{width:min(var(--container),calc(100% - 64px));margin-inline:auto}.section{padding-block:112px}.site-header{height:78px;position:sticky;top:0;z-index:20;background:rgba(247,248,245,.9);backdrop-filter:blur(16px);border-bottom:1px solid rgba(223,228,222,.75)}.nav{height:100%;display:flex;align-items:center;justify-content:space-between}.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:14px;letter-spacing:-.02em}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--green);font-family:var(--display);font-size:17px;font-weight:800;letter-spacing:-.1em;padding-right:3px}.nav-links{display:flex;align-items:center;gap:34px;font-size:12px;color:#59635d}.nav-links>a{transition:color .2s}.nav-links>a:hover,.text-link:hover{color:#6b851e}.language-switch{border:1px solid var(--line);background:transparent;border-radius:99px;padding:8px 13px;font-size:11px;font-weight:700;cursor:pointer;color:var(--ink)}.language-switch span{margin-left:5px}.menu-toggle{display:none}.hero{min-height:660px;padding-top:104px;padding-bottom:72px;display:grid;grid-template-columns:1.06fr .94fr;align-items:center;gap:40px;position:relative}.eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 23px;color:#758077;font-size:10px;font-weight:700;letter-spacing:.15em}.status-dot{height:7px;width:7px;background:#8da62d;border-radius:50%;box-shadow:0 0 0 4px #e7edce}.hero h1,.section-heading h2,.contact-inner h2{font-family:var(--display);font-size:clamp(42px,5.1vw,68px);line-height:1.12;letter-spacing:-.065em;font-weight:600;margin:0;max-width:690px}.hero h1 em,.section-heading h2 em,.contact-inner h2 em{font-family:var(--serif);font-weight:400;letter-spacing:-.055em}.hero h1 em{background:linear-gradient(transparent 73%,var(--green) 73%);font-style:normal}.hero-description{color:var(--muted);max-width:510px;margin:26px 0 28px;font-size:15px;line-height:1.9}.hero-actions{display:flex;align-items:center;gap:25px}.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;padding:14px 18px;border-radius:5px;font-size:12px;font-weight:700;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px)}.button-dark{background:var(--ink);color:white}.button-dark:hover{background:#33423a}.text-link{display:inline-flex;gap:13px;align-items:center;font-size:12px;font-weight:700;transition:color .2s}.hero-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:55px;font-size:10px;color:#8a938d}.hero-meta strong{font-weight:600;color:#4c5850}.meta-divider{height:3px;width:3px;background:#adb6ad;border-radius:50%;margin:0 5px}.hero-art{height:430px;position:relative;display:grid;place-items:center;isolation:isolate}.hero-art:before{content:"";position:absolute;width:330px;height:330px;border-radius:50%;background:#edf0e8;z-index:-2}.hero-art:after{content:"";position:absolute;width:235px;height:235px;border-radius:50%;border:1px solid #dfe5d9;z-index:-1}.art-orbit{position:absolute;border:1px solid #d9dfd4;border-radius:50%;transform:rotate(-25deg)}.orbit-one{width:420px;height:220px}.orbit-two{width:390px;height:290px;transform:rotate(38deg)}.art-card{width:270px;height:300px;background:#fff;border:1px solid #e7eae3;border-radius:13px;box-shadow:0 25px 70px #26342912;position:relative;z-index:2}.art-card-main{padding:21px;display:flex;flex-direction:column;justify-content:space-between;transform:rotate(-3deg)}.art-topline{display:flex;align-items:center;justify-content:space-between}.tiny-label,.visual-caption,.project-type,.project-year{font-size:9px;letter-spacing:.12em;font-weight:700;color:#89938a}.art-spark{font-size:22px;color:#9ab12f}.art-symbol{display:flex;align-items:center;justify-content:center;gap:13px;height:110px;color:#24362a}.symbol-bracket{font-family:var(--display);font-weight:600;font-size:48px;letter-spacing:-.1em}.symbol-line{height:3px;width:49px;background:var(--green-dark);border-radius:3px;transform:rotate(-50deg)}.art-caption{display:flex;flex-direction:column;gap:4px}.art-caption strong{font-family:var(--display);font-size:19px;letter-spacing:-.05em}.art-caption span{font-size:10px;color:#929a93}.floating-chip{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e6e9e2;padding:11px 14px;border-radius:7px;box-shadow:0 10px 30px #2634290c;font-size:10px;font-weight:700}.chip-education{top:55px;right:4px;transform:rotate(4deg)}.chip-digital{bottom:62px;left:2px;transform:rotate(-4deg)}.chip-icon{display:grid;place-items:center;width:25px;height:25px;background:#eff3e3;border-radius:5px;font-size:15px}.art-note{position:absolute;right:2px;bottom:8px;display:flex;gap:12px;align-items:center;color:#7d887f;font-size:9px;line-height:1.5}.note-number{color:#9ab12f;font-size:12px;font-weight:700}.hero-bottom{position:absolute;bottom:27px;left:0;right:0;display:flex;align-items:center;gap:14px;font-size:9px;letter-spacing:.1em;color:#929b93}.bottom-line{height:1px;width:48px;background:#cdd4cb}.intro-strip{background:#edf0e9;border-block:1px solid #e4e8e0}.strip-inner{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:25px}.strip-inner>span{font-size:9px;letter-spacing:.14em;color:#78837a;font-weight:700}.strip-items{display:flex;align-items:center;gap:22px;font-size:11px;font-weight:600}.strip-items i{font-style:normal;color:#9bb13a}.section-heading{max-width:760px}.section-heading h2{font-size:clamp(34px,4vw,52px);max-width:700px}.section-heading h2 em{font-style:italic}.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:100px;margin-top:65px}.about-lead p{font-family:var(--display);font-size:22px;line-height:1.55;letter-spacing:-.035em;margin:0 0 25px}.about-body p{margin:0 0 17px;color:var(--muted);font-size:13px;line-height:1.95}.facts-row{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin-top:75px;padding-top:26px;border-top:1px solid var(--line)}.facts-row>div{position:relative;padding-left:36px}.fact-index{position:absolute;left:0;top:2px;color:#9bb13a;font-size:10px;font-weight:700}.facts-row strong{font-family:var(--display);font-size:13px;letter-spacing:-.02em}.facts-row p{font-size:11px;color:#7d887f;margin:7px 0 0}.work-section{background:#edf0e9;border-block:1px solid #e5e9e2}.work-inner{padding-block:105px}.work-heading{display:grid;grid-template-columns:1fr .7fr;align-items:end;max-width:none;column-gap:45px}.work-heading .eyebrow{grid-column:1/-1}.work-heading h2{grid-column:1;grid-row:2}.heading-support{grid-column:2;grid-row:2;margin:0 0 5px;color:var(--muted);font-size:13px;max-width:280px;line-height:1.8}.project-card{display:grid;grid-template-columns:1.05fr .95fr;gap:62px;margin-top:58px;padding:25px;background:#f9faf7;border:1px solid #e0e5dd;border-radius:9px}.project-visual{background:#e8ede2;min-height:365px;border-radius:5px;position:relative;display:grid;place-items:center;overflow:hidden}.project-visual:before{content:"";position:absolute;width:390px;height:390px;border:1px solid #d6dfcf;border-radius:50%}.project-visual:after{content:"";position:absolute;width:280px;height:280px;border:1px solid #d6dfcf;border-radius:50%}.dashboard-window{position:relative;z-index:1;width:84%;max-width:440px;background:#fff;border-radius:7px;box-shadow:0 20px 50px #243a2a19;overflow:hidden;transform:rotate(-2deg)}.window-bar{height:28px;border-bottom:1px solid #edf0eb;display:flex;align-items:center;gap:4px;padding:0 10px;color:#8b958c;font-size:7px}.window-bar>span{width:5px;height:5px;border-radius:50%;background:#d7ded4}.window-bar div{margin-left:9px}.mock-dashboard{display:flex;min-height:220px}.mock-sidebar{width:38px;flex-shrink:0;background:#23342a;display:flex;align-items:center;flex-direction:column;gap:17px;padding-top:12px}.mock-logo{color:#d9ed78;font-weight:800;font-size:12px;margin-bottom:8px}.mock-sidebar>span{width:12px;height:12px;border:1px solid #829185;border-radius:3px}.mock-sidebar .mock-active{background:#d9ed78;border-color:#d9ed78}.mock-content{padding:17px 14px;flex:1;min-width:0}.mock-welcome{display:flex;flex-direction:column;gap:3px}.mock-welcome small,.mock-stats small{font-size:6px;letter-spacing:.08em;color:#98a29a}.mock-welcome b{font-size:12px;letter-spacing:-.04em}.mock-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:13px}.mock-stats>div{border:1px solid #edf0eb;padding:7px;border-radius:3px;display:flex;flex-direction:column;gap:4px}.mock-stats b{font-size:13px}.mock-stats i{width:60%;height:3px;background:#d9ed78;border-radius:3px}.mock-chart{border:1px solid #edf0eb;margin-top:9px;padding:8px;border-radius:3px}.chart-heading{display:flex;justify-content:space-between;font-size:7px}.chart-bars{height:55px;display:flex;align-items:end;gap:6px;padding:8px 3px 0}.chart-bars i{display:block;flex:1;background:#b7cc70;border-radius:2px 2px 0 0}.mock-bottom{display:flex;gap:7px;margin-top:8px}.mock-bottom i{height:17px;flex:1;background:#f1f3ee;border-radius:2px}.visual-caption{position:absolute;bottom:15px;left:18px;right:18px;display:flex;justify-content:space-between;font-size:8px;color:#7c887c}.project-info{padding:20px 15px 18px 0;display:flex;flex-direction:column;align-items:flex-start}.project-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.project-type{background:#edf2dd;color:#6d7c3c;padding:6px 8px;border-radius:3px;font-size:8px}.project-year{font-size:8px}.project-info h3{font-family:var(--display);font-size:27px;line-height:1.28;letter-spacing:-.05em;margin:23px 0 13px;font-weight:600}.project-info>p{font-size:12px;color:var(--muted);line-height:1.85;margin:0}.project-focus{margin-top:22px}.project-focus>span{font-size:10px;font-weight:700}.project-focus ul{list-style:none;margin:9px 0 0;padding:0}.project-focus li{position:relative;padding-left:17px;font-size:11px;color:#69756b;margin-top:7px}.project-focus li:before{content:"↗";position:absolute;left:0;color:#91a82e}.tag-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:23px}.tag-list span,.approach-tags span{font-size:9px;padding:6px 8px;border:1px solid #e1e6dd;border-radius:3px;color:#68746a}.project-info .project-note{font-size:9px;color:#969e96;margin-top:15px;font-style:italic}.approach-section{padding-block:112px}.approach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:58px}.approach-grid article{border:1px solid var(--line);background:#fafbf8;padding:25px;min-height:285px;position:relative;border-radius:5px;transition:transform .2s,border-color .2s}.approach-grid article:hover{transform:translateY(-4px);border-color:#c9d3bd}.approach-num{position:absolute;right:22px;top:22px;font-size:10px;color:#9ba59b}.approach-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:8px;background:#eaf0dc;color:#53672b;font-size:21px;margin-bottom:28px}.approach-grid h3{font-family:var(--display);font-size:17px;letter-spacing:-.04em;margin:0 0 10px}.approach-grid p{font-size:11px;line-height:1.9;color:var(--muted);margin:0}.approach-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:19px}.approach-tags span{font-size:8px;padding:4px 6px}.contact-section{background:#25352b;color:#f6f8f3;position:relative;overflow:hidden}.contact-inner{padding-block:95px;display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:center;position:relative}.contact-inner .eyebrow{color:#bdc8b9}.contact-inner h2{font-size:clamp(36px,4.5vw,58px);position:relative;z-index:1}.contact-inner h2 em{color:var(--green);font-style:italic}.contact-desc{max-width:470px;color:#c0cbc1;font-size:12px;line-height:1.9;margin:23px 0 0}.contact-action{display:flex;flex-direction:column;align-items:flex-start;gap:14px;position:relative;z-index:2}.button-light{background:var(--green);color:#26352b;max-width:100%;overflow-wrap:anywhere}.button-light:hover{background:#e4f5a1}.contact-action>span{font-size:10px;color:#a9b7aa}.contact-decoration{position:absolute;right:-20px;bottom:-125px;font-family:var(--display);font-weight:800;font-size:290px;letter-spacing:-.13em;color:#ffffff08;pointer-events:none}.footer{background:#1d2a22;color:#b7c2b8}.footer-inner{min-height:85px;display:flex;align-items:center;justify-content:space-between;gap:20px}.footer .brand{color:#f2f5ee;font-size:12px}.footer .brand-mark{width:29px;height:29px;background:#34473a;color:#d9ed78;font-size:14px}.footer p,.footer-inner>span{font-size:9px;color:#a1aea2}.skip-link{position:absolute;left:-999px;top:8px;background:white;padding:10px;z-index:50}.skip-link:focus{left:8px}
@media(min-width:1400px){.hero{min-height:700px}.hero-art{transform:scale(1.06)}}
@media(max-width:900px){.container{width:min(100% - 44px,var(--container))}.section{padding-block:85px}.hero{min-height:auto;padding-top:80px;padding-bottom:85px;gap:12px}.hero h1{font-size:clamp(39px,6.2vw,58px)}.hero-art{transform:scale(.88)}.about-grid{gap:45px}.project-card{gap:28px;padding:17px}.project-info h3{font-size:23px}.project-visual{min-height:330px}.strip-items{gap:12px;font-size:10px}.strip-inner>span{max-width:130px;line-height:1.6}.approach-grid{gap:12px}.approach-grid article{padding:20px}.contact-inner{gap:28px}}
@media(max-width:680px){.container{width:calc(100% - 40px)}.site-header{height:68px}.brand{font-size:13px}.menu-toggle{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:6px;width:39px;height:39px;background:transparent}.menu-toggle span{width:15px;height:1px;background:var(--ink);transition:transform .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3px) rotate(-45deg)}.nav-links{display:none;position:absolute;top:67px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:20px;flex-direction:column;align-items:stretch;gap:0}.nav-links.is-open{display:flex}.nav-links>a{padding:13px 0;border-bottom:1px solid var(--line)}.language-switch{align-self:flex-start;margin-top:14px}.hero{display:flex;flex-direction:column;align-items:stretch;padding-top:66px;padding-bottom:65px;gap:0}.hero h1{font-size:clamp(41px,11vw,58px)}.hero-description{font-size:13px;margin-top:21px}.hero-meta{margin-top:33px;line-height:1.8}.hero-art{height:350px;transform:scale(.82);transform-origin:center top;margin:23px 0 -35px}.art-orbit.orbit-one{width:380px}.chip-education{right:-7px}.chip-digital{left:-6px}.art-note{right:-5px}.hero-bottom{bottom:20px}.intro-strip .strip-inner{align-items:flex-start;flex-direction:column;justify-content:center;padding-block:21px;gap:13px}.strip-items{flex-wrap:wrap;gap:10px;font-size:10px}.section{padding-block:72px}.section-heading h2{font-size:37px}.about-grid{grid-template-columns:1fr;gap:27px;margin-top:37px}.about-lead p{font-size:21px}.about-body p{font-size:12px}.facts-row{grid-template-columns:1fr;gap:20px;margin-top:42px}.facts-row>div{min-height:45px}.work-inner{padding-block:72px}.work-heading{display:block}.heading-support{margin-top:18px}.project-card{grid-template-columns:1fr;gap:22px;margin-top:35px;padding:12px}.project-visual{min-height:300px}.dashboard-window{width:86%}.project-info{padding:7px 8px 13px}.project-info h3{font-size:25px}.approach-grid{grid-template-columns:1fr;margin-top:35px;gap:12px}.approach-grid article{min-height:0;padding:22px}.approach-icon{margin-bottom:20px}.contact-inner{grid-template-columns:1fr;padding-block:70px;gap:32px}.contact-inner h2{font-size:39px}.contact-action{gap:12px}.button-light{font-size:10px;gap:12px;padding:13px}.contact-decoration{font-size:200px;right:-10px;bottom:-70px}.footer-inner{padding-block:20px;flex-wrap:wrap;justify-content:space-between}.footer p{order:3;flex-basis:100%;margin:0}.footer-inner>span{font-size:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}


/* Refined typography and motion */
html[lang="km"] body,
html[lang="km"] button,
html[lang="km"] input,
html[lang="km"] textarea{font-family:var(--khmer);line-height:1.85}
html[lang="km"] h1,html[lang="km"] h2,html[lang="km"] h3,
html[lang="km"] .brand,html[lang="km"] .art-caption strong,
html[lang="km"] .about-lead p,html[lang="km"] .facts-row strong,
html[lang="km"] .project-info h3{font-family:var(--khmer);letter-spacing:0;font-weight:600}
html[lang="km"] .hero h1,html[lang="km"] .section-heading h2,html[lang="km"] .contact-inner h2{line-height:1.5;letter-spacing:0}
html[lang="km"] .hero h1 em,html[lang="km"] .section-heading h2 em,html[lang="km"] .contact-inner h2 em{font-family:var(--khmer);letter-spacing:0;font-style:normal}
html[lang="km"] .eyebrow,html[lang="km"] .tiny-label,html[lang="km"] .project-type,html[lang="km"] .project-year{letter-spacing:.02em}
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:50;pointer-events:none}
.scroll-progress span{display:block;height:100%;width:0;background:var(--green-dark);transform-origin:left;will-change:width}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal-left{transform:translateX(-24px)}
.reveal-right{transform:translateX(24px)}
.reveal.is-visible{opacity:1;transform:translate3d(0,0,0)}
.hero-copy .eyebrow{animation:fade-up .7s .05s both}
.hero-copy h1{animation:fade-up .8s .14s both}
.hero-copy .hero-description{animation:fade-up .8s .24s both}
.hero-copy .hero-actions{animation:fade-up .8s .34s both}
.hero-copy .hero-meta{animation:fade-up .8s .44s both}
.hero-art:before{animation:breathe 7s ease-in-out infinite}
.art-card-main{animation:card-arrive .9s .25s both, gentle-float 7s 1.2s ease-in-out infinite}
.chip-education{animation:chip-in .7s .55s both, gentle-float 5.5s 1.2s ease-in-out infinite}
.chip-digital{animation:chip-in .7s .7s both, gentle-float 6s 1.4s ease-in-out infinite}
.art-orbit{animation:orbit-drift 18s linear infinite}
.orbit-two{animation-direction:reverse;animation-duration:24s}
.button,.floating-chip,.approach-grid article,.project-card,.tag-list span,.approach-tags span{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,border-color .3s ease,background .3s ease}
.project-card:hover{box-shadow:0 22px 65px #2634290b;border-color:#d1dacb}
.project-card:hover .dashboard-window{transform:rotate(0) translateY(-4px)}
.dashboard-window{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.tag-list span:hover,.approach-tags span:hover{background:#edf2dd;border-color:#d6e1b8;transform:translateY(-2px)}
.brand-mark{transition:transform .3s cubic-bezier(.2,.7,.2,1),border-radius .3s ease}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.06);border-radius:50%}
@keyframes fade-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes card-arrive{from{opacity:0;transform:translateY(18px) rotate(-7deg)}to{opacity:1;transform:rotate(-3deg)}}
@keyframes chip-in{from{opacity:0;scale:.88}to{opacity:1;scale:1}}
@keyframes gentle-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.035);opacity:.72}}
@keyframes orbit-drift{from{rotate:0deg}to{rotate:360deg}}
@media(max-width:680px){.reveal-left,.reveal-right{transform:translateY(22px)}}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-copy .eyebrow,.hero-copy h1,.hero-copy .hero-description,.hero-copy .hero-actions,.hero-copy .hero-meta,.art-card-main,.chip-education,.chip-digital{animation:none}
  .hero-art:before,.art-orbit{animation:none}
  .scroll-progress{display:none}
}

/* Personal imagery and real project links */
.hero-art{isolation:isolate}
.profile-photo-frame{position:absolute;z-index:3;width:245px;height:315px;right:45px;top:48px;border:8px solid #fff;border-radius:125px 125px 12px 12px;overflow:hidden;box-shadow:0 24px 60px #24342920;transform:rotate(3deg);background:#e4e9df;transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease}
.profile-photo-frame:hover{transform:rotate(0) translateY(-5px);box-shadow:0 30px 70px #24342928}
.profile-photo{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.profile-photo-caption{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:7px;padding:12px 10px;background:linear-gradient(transparent,#16231dd9);color:#fff;font-size:9px;font-weight:600}
.profile-caption-dot{width:6px;height:6px;border-radius:50%;background:#d9ed78;flex-shrink:0}
.hero-art .art-card-main{width:190px;height:220px;position:absolute;left:8px;bottom:35px;padding:15px;opacity:.96;transform:rotate(-5deg)}
.hero-art .art-symbol{height:70px}
.hero-art .symbol-bracket{font-size:35px}
.hero-art .art-caption strong{font-size:14px}
.hero-art .art-caption span{font-size:8px}
.hero-art .chip-education{top:30px;right:0}
.hero-art .chip-digital{bottom:25px;left:10px}
.university-affiliation{display:flex;align-items:center;gap:16px;padding:17px 20px;margin-top:38px;border:1px solid var(--line);border-radius:7px;background:#fbfcf9;max-width:580px}
.university-affiliation img{width:49px;height:54px;object-fit:contain;flex-shrink:0}
.university-affiliation div{display:flex;flex-direction:column;gap:2px}
.university-affiliation span{font-size:9px;color:#8a948b}
.university-affiliation strong{font-family:var(--display);font-size:13px;letter-spacing:-.025em}
.university-affiliation small{font-size:10px;color:#7d887f}
.project-visual-image{display:block;padding:0;background:#e8ede2;min-height:365px}
.project-image-link{display:block;position:absolute;inset:0;overflow:hidden}
.project-image-link img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s ease}
.project-image-link:hover img{transform:scale(1.045);filter:saturate(1.05)}
.image-link-label{position:absolute;right:16px;top:16px;background:#f9faf3;color:#25352b;border:1px solid #e0e5dd;border-radius:4px;padding:9px 12px;font-size:10px;font-weight:700;box-shadow:0 5px 18px #15231a15;transition:transform .25s,background .25s}
.project-image-link:hover .image-link-label{transform:translateY(-2px);background:#d9ed78}
.project-visual-image .visual-caption{z-index:2;background:linear-gradient(transparent,#10231aab);padding:30px 18px 13px;color:#fff;bottom:0;left:0;right:0}
.institution-visual img{object-position:top center}
.project-card-secondary{margin-top:22px}
html[lang="km"] .profile-photo-caption,html[lang="km"] .image-link-label,html[lang="km"] .university-affiliation strong{font-family:var(--khmer);letter-spacing:0}
@media(max-width:900px){.profile-photo-frame{right:34px;width:220px;height:285px}.hero-art .art-card-main{left:0}.university-affiliation{margin-top:30px}}
@media(max-width:680px){.hero-art{height:345px;margin-bottom:-15px}.profile-photo-frame{width:195px;height:250px;right:34px;top:35px}.hero-art .art-card-main{width:150px;height:180px;left:-4px;bottom:25px;padding:12px}.hero-art .art-symbol{height:55px}.hero-art .art-caption strong{font-size:12px}.hero-art .chip-education{right:-5px;top:17px}.hero-art .chip-digital{left:-2px;bottom:12px}.university-affiliation{padding:13px;gap:12px}.university-affiliation img{width:40px;height:44px}.university-affiliation strong{font-size:11px}.university-affiliation small{font-size:9px}.project-visual-image{min-height:260px}}

/* Personal portrait as brand icon and favicon source */
.brand-photo{overflow:hidden;padding:0;letter-spacing:0;background:#e6eadf;border:1px solid #dce3d8}
.brand-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 18%;border-radius:inherit}
.footer .brand-photo{background:#fff;border-color:#516451}
.footer .brand-photo img{object-position:center 18%}


/* === Midnight Navy & Champagne refresh === */
:root{
  --paper:#F7F5F0;
  --ink:#10243A;
  --green-dark:#10243A;
  --green:#1C3D5A;
  --green-mid:#49647C;
  --green-soft:#E8EDF1;
  --line:#DDD9D0;
  --muted:#667487;
  --gold:#C6A66B;
  --gold-soft:#E8D8B8;
  --card:#FFFFFF;
  --shadow:0 18px 50px rgba(16,36,58,.08);
}
body{background:var(--paper);color:var(--ink)}
a{color:inherit}
::selection{background:#E8D8B8;color:#10243A}
.button-primary,.hero-actions .button:first-child{background:var(--ink);border-color:var(--ink);color:#fff}
.button-primary:hover,.hero-actions .button:first-child:hover{background:#1D3C59;border-color:#1D3C59;box-shadow:0 12px 28px rgba(16,36,58,.18)}
.button-secondary,.hero-actions .button:nth-child(2){border-color:var(--gold);color:var(--ink)}
.button-secondary:hover,.hero-actions .button:nth-child(2):hover{background:#F0E7D5;border-color:var(--gold)}
.brand-mark{background:var(--ink);color:#fff}
.brand-photo{background:#fff;border-color:var(--gold)}
.eyebrow,.tiny-label,.project-type,.project-year{color:#8C6C36}
.gold-text{color: #D4AF37;}
.hero-art:before{background:radial-gradient(circle at 50% 50%,rgba(198,166,107,.22),rgba(16,36,58,.04) 55%,transparent 72%)}
.art-card-main,.floating-chip,.university-affiliation{border-color:#E2D9C7}
.art-card-main{background:rgba(255,255,255,.92);box-shadow:0 24px 60px rgba(16,36,58,.12)}
.art-symbol{color:var(--ink)}
.chip-education,.chip-digital{background:#fff;border-color:#e5dfd3;color:var(--ink)}
.section-heading h2 em,.hero h1 em,.contact-inner h2 em{color:#A78343}
.project-card,.approach-grid article{background:#fff;border-color:#E2DED5;box-shadow:0 12px 36px rgba(16,36,58,.035)}
.project-card:hover{box-shadow:0 26px 65px rgba(16,36,58,.12);border-color:#C6A66B}
.project-visual-image{background:#e7eaf0}
.project-visual-image .visual-caption{background:linear-gradient(transparent,rgba(16,36,58,.86))}
.image-link-label{border-color:#E0D4BC;color:#10243A}
.image-link-label:hover{background:#C6A66B}
.tag-list span,.approach-tags span{background:#F7F5F0;border-color:#E1DCD1;color:#33465A}
.tag-list span:hover,.approach-tags span:hover{background:#F0E7D5;border-color:#C6A66B}
.university-affiliation{background:#fff}
.contact-section{background:#10243A;color:#F7F5F0}
.contact-section .contact-inner h2,.contact-section .contact-inner p{color:#F7F5F0}
.contact-section .contact-inner h2 em{color:#D9BD87}
.contact-section .button-primary{background:#C6A66B;border-color:#C6A66B;color:#10243A}
.contact-section .button-primary:hover{background:#D8BC88;border-color:#D8BC88}
.footer{border-color:#DDD9D0}
.scroll-progress span{background:linear-gradient(90deg,#10243A,#C6A66B)}
/* More expressive but controlled interaction */
.button,.project-card,.approach-grid article,.brand-mark,.project-image-link img,.image-link-label,.floating-chip{
  will-change:transform;
}
.button{transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,background .28s ease,border-color .28s ease}
.button:hover{transform:translateY(-3px)}
.button:active{transform:translateY(-1px) scale(.985)}
.project-card{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease,border-color .35s ease}
.project-card:hover{transform:translateY(-7px)}
.approach-grid article{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease}
.approach-grid article:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(16,36,58,.09);border-color:#C6A66B}
.brand:hover .brand-mark{transform:rotate(-9deg) scale(1.08)}
.profile-photo-frame{border-color:#fff;box-shadow:0 25px 70px rgba(16,36,58,.18)}
.profile-photo-frame:after{content:"";position:absolute;inset:0;border:1px solid rgba(198,166,107,.55);border-radius:inherit;pointer-events:none}
.profile-photo-frame:hover{box-shadow:0 32px 80px rgba(16,36,58,.24)}
.hero-art .art-orbit{border-color:rgba(198,166,107,.6)}
.art-orbit.orbit-two{border-color:rgba(16,36,58,.18)}
.floating-chip{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease}
.floating-chip:hover{transform:translateY(-6px) rotate(-2deg);box-shadow:0 14px 35px rgba(16,36,58,.12)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}


/* Contact section — clearer hierarchy, purposeful CTA, and balanced footer handoff */
.contact-section{position:relative;overflow:hidden;padding:clamp(72px,9vw,126px) 0 76px;background:#10243A;color:#F7F5F0}
.contact-section:before{content:"";position:absolute;width:540px;height:540px;right:-180px;top:-230px;border:1px solid rgba(198,166,107,.22);border-radius:50%;pointer-events:none}
.contact-section:after{content:"";position:absolute;width:360px;height:360px;right:-90px;top:-140px;border:1px solid rgba(198,166,107,.15);border-radius:50%;pointer-events:none}
.contact-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.82fr);align-items:center;gap:clamp(35px,7vw,100px)}
.contact-copy{max-width:660px}
.contact-section .eyebrow{color:#D8BC88;display:flex;gap:8px;align-items:center}
.contact-index{color:#C6A66B}
.contact-section h2{font-size:clamp(2.6rem,5.2vw,5rem);line-height:1.06;letter-spacing:-.055em;color:#F7F5F0;margin:22px 0 22px;max-width:720px}
.contact-section h2 em{font-style:normal;color:#D9BD87}
.contact-section .contact-desc{max-width:540px;color:#D0D8E0;font-size:clamp(14px,1.25vw,16px);line-height:1.9}
.contact-topics{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.contact-topics span{border:1px solid rgba(247,245,240,.19);border-radius:999px;padding:8px 12px;color:#E2E6EA;font-size:11px;transition:background .25s,border-color .25s,transform .25s}
.contact-topics span:hover{background:rgba(198,166,107,.13);border-color:#C6A66B;transform:translateY(-2px)}
.contact-card{position:relative;z-index:2;background:#FDFCF9;color:#10243A;border:1px solid rgba(198,166,107,.55);border-radius:12px;padding:clamp(22px,3vw,34px);box-shadow:0 28px 80px rgba(0,0,0,.18);transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease}
.contact-card:hover{transform:translateY(-5px);box-shadow:0 35px 90px rgba(0,0,0,.24)}
.contact-card-top{display:flex;align-items:center;gap:9px;color:#7B6A4A;font-size:9px;font-weight:700;letter-spacing:.14em;margin-bottom:23px}
.contact-status-dot{width:8px;height:8px;border-radius:50%;background:#C6A66B;box-shadow:0 0 0 4px rgba(198,166,107,.16)}
.contact-email{display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none;color:#10243A;font-size:clamp(13px,1.4vw,17px);font-weight:700;letter-spacing:-.025em;overflow-wrap:anywhere;padding-bottom:20px;border-bottom:1px solid #E6E0D4}
.contact-email span:first-child{transition:color .25s}
.contact-email:hover span:first-child{color:#8C6C36}
.contact-arrow{font-size:22px;color:#A78343;transition:transform .25s}
.contact-email:hover .contact-arrow{transform:translate(3px,-3px)}
.contact-card-note{font-size:12px;line-height:1.8;color:#667487;margin:18px 0 22px}
.contact-send{display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none;background:#10243A;color:#fff;padding:14px 16px;border-radius:6px;font-size:12px;font-weight:700;transition:background .25s,transform .25s,box-shadow .25s}
.contact-send:hover{background:#1E3D5A;transform:translateY(-2px);box-shadow:0 10px 25px rgba(16,36,58,.16)}
.contact-send span:last-child{color:#D9BD87;font-size:17px}
.contact-decoration{position:absolute;right:0;bottom:-84px;font-size:clamp(100px,18vw,220px);font-family:var(--display);font-weight:800;letter-spacing:-.1em;color:rgba(247,245,240,.035);line-height:1;pointer-events:none;user-select:none}
.footer{background:#F7F5F0;color:#10243A}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-inner p{color:#667487;font-size:12px}
.footer-inner>span{color:#7C8794;font-size:11px}
html[lang="km"] .contact-card,html[lang="km"] .contact-section,html[lang="km"] .footer{line-height:1.8}
html[lang="km"] .contact-section h2{line-height:1.55;letter-spacing:0;font-weight:600}
html[lang="km"] .contact-email{letter-spacing:0;font-family:var(--sans)}
html[lang="km"] .contact-card-top{letter-spacing:0}
@media(max-width:800px){.contact-inner{grid-template-columns:1fr;gap:34px}.contact-copy{max-width:650px}.contact-card{max-width:560px;width:100%}.contact-decoration{right:8px;bottom:-45px}}
@media(max-width:480px){.contact-section{padding:68px 0 58px}.contact-section h2{font-size:clamp(2.3rem,11vw,3.2rem)}.contact-topics{gap:6px}.contact-topics span{font-size:10px;padding:7px 10px}.contact-card{padding:22px 18px}.contact-email{font-size:13px}.footer-inner{align-items:flex-start;flex-direction:column;gap:10px}}


/* === Mobile refinement: balanced type scale, compact spacing, no horizontal overflow === */
html{scroll-padding-top:78px}
img,svg,video,canvas{max-width:100%}
body{overflow-x:hidden}
.container{width:min(100% - 48px, var(--container, 1160px))}
h1,h2,h3,p,li,a,span{overflow-wrap:break-word}
.hero h1{font-size:clamp(2.25rem,5.3vw,4.8rem);line-height:1.08;letter-spacing:-.045em}
.section-heading h2{font-size:clamp(1.9rem,4.2vw,3.4rem);line-height:1.14}
.contact-section h2{font-size:clamp(2.05rem,4.6vw,4.2rem);line-height:1.12}
@media(max-width:768px){
  .container{width:calc(100% - 36px)}
  body{font-size:15px}
  .hero{padding-top:46px;padding-bottom:44px}
  .hero h1{font-size:clamp(2rem,7.2vw,3.1rem);line-height:1.12;letter-spacing:-.04em;max-width:16ch}
  .hero .hero-desc,.hero p{font-size:14px;line-height:1.75}
  .section{padding-top:64px;padding-bottom:64px}
  .section-heading{margin-bottom:28px}
  .section-heading h2{font-size:clamp(1.75rem,6.2vw,2.5rem);line-height:1.18;letter-spacing:-.035em}
  .section-heading p,.about-grid p,.project-info p,.approach-grid p{font-size:14px;line-height:1.75}
  .eyebrow{font-size:10px;letter-spacing:.12em}
  .button{font-size:12px;padding:12px 15px;min-height:42px}
  .hero-actions{gap:10px;flex-wrap:wrap}
  .hero-art{max-width:100%;overflow:visible}
  .project-grid,.projects-grid{grid-template-columns:minmax(0,1fr)}
  .project-card{min-width:0}
  .project-info{padding:20px}
  .project-info h3{font-size:21px;line-height:1.25}
  .project-visual-image{min-height:230px}
  .project-card-secondary{margin-top:18px}
  .university-affiliation{max-width:100%}
  .contact-section{padding:58px 0 48px}
  .contact-inner{gap:28px}
  .contact-section h2{font-size:clamp(1.95rem,7.5vw,2.75rem);line-height:1.16;letter-spacing:-.04em;margin:18px 0}
  .contact-section .contact-desc{font-size:14px;line-height:1.75}
  .contact-card{padding:20px 17px;border-radius:10px}
  .contact-card-top{font-size:9px;margin-bottom:17px}
  .contact-email{font-size:clamp(12px,3.5vw,15px);line-height:1.5;gap:8px}
  .contact-card-note{font-size:12px;line-height:1.7}
  .contact-send{padding:12px 14px;font-size:12px}
  .footer-inner{gap:12px}
  .footer-inner p{font-size:11px;line-height:1.6;margin:0}
  .footer-inner>span{font-size:10px}
  .brand{font-size:13px}
  .brand-photo{width:34px;height:34px}
}
@media(max-width:390px){
  .container{width:calc(100% - 30px)}
  .hero{padding-top:36px;padding-bottom:36px}
  .hero h1{font-size:clamp(1.85rem,7.5vw,2.25rem);line-height:1.15;max-width:15ch}
  .hero .hero-desc,.hero p{font-size:13px;line-height:1.72}
  .section{padding-top:52px;padding-bottom:52px}
  .section-heading h2{font-size:1.75rem}
  .project-info{padding:17px}
  .project-info h3{font-size:19px}
  .project-visual-image{min-height:195px}
  .contact-section h2{font-size:1.9rem;line-height:1.2}
  .contact-card{padding:18px 14px}
  .contact-email{font-size:11.5px}
  .contact-topics span{font-size:9px;padding:6px 8px}
  .university-affiliation small{line-height:1.5}
}
@media(max-width:350px){
  .container{width:calc(100% - 26px)}
  .hero h1{font-size:1.75rem}
  .contact-section h2{font-size:1.75rem}
  .contact-email{font-size:10.5px}
}
/* Khmer glyphs need a little more vertical breathing room on compact screens. */
html[lang="km"] body{line-height:1.8}
html[lang="km"] .hero h1,html[lang="km"] .section-heading h2,html[lang="km"] .contact-section h2{letter-spacing:0;line-height:1.55}
html[lang="km"] .hero .hero-desc,html[lang="km"] .contact-section .contact-desc{line-height:1.95}
@media(max-width:768px){
  html[lang="km"] .hero h1{font-size:clamp(1.7rem,6.5vw,2.35rem)}
  html[lang="km"] .section-heading h2{font-size:clamp(1.55rem,5.5vw,2rem)}
  html[lang="km"] .contact-section h2{font-size:clamp(1.65rem,6.2vw,2.2rem)}
}