@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');

:root{--red:#ef2b2e;--cream:#f6f1ea;--ink:#0b0809;--line:rgba(255,255,255,.19);--muted:#beb6b5;--sans:"Google Sans","Noto Sans Thai",Arial,sans-serif;--serif:Georgia,"Times New Roman",serif}
*{box-sizing:border-box}
html{background:var(--ink);scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--sans);min-width:320px}
a{color:inherit;text-decoration:none}
button,summary{font:inherit}
.site-header{position:absolute;z-index:10;top:0;left:0;width:100%;height:82px;padding:0 clamp(24px,5vw,64px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:flex;position:relative;flex-direction:column;line-height:.75;font-family:var(--serif);letter-spacing:-1px}
.brand small{font:700 9px/1 var(--sans);letter-spacing:2px;margin-bottom:4px}
.brand strong{font-size:29px}
.brand>span{position:absolute;right:-25px;bottom:0;color:var(--red);font:22px/1 var(--sans)}
.nav-right{display:flex;align-items:center;justify-content:flex-end;gap:30px;font-size:12px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase}
.nav-link,.projects-menu summary{padding:15px 0;white-space:nowrap}
.nav-link:hover,.projects-menu summary:hover{color:var(--red)}
.projects-menu{position:relative}
.projects-menu summary{list-style:none;cursor:pointer;display:flex;gap:8px;align-items:center}
.projects-menu summary::-webkit-details-marker{display:none}
.projects-menu summary b{color:var(--red);font-size:14px}
.menu-panel{position:absolute;top:48px;right:0;width:190px;padding:8px;background:#130e10;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.4)}
.menu-panel a{display:block;padding:13px 12px;border-radius:7px;letter-spacing:.3px;text-transform:none}
.menu-panel a:hover{background:var(--red)}
.nav-separator{width:1px;height:22px;background:rgba(255,255,255,.36);margin-left:2px}
.lang-switch{display:flex;gap:9px;align-items:center}
.lang-switch button{border:0;background:transparent;color:#827d7d;cursor:pointer;padding:6px 0;font-weight:700}
.lang-switch button.active{color:#fff}
.hero{position:relative;min-height:min(780px,100svh);display:flex;align-items:center;background:url('assets/lisa-new-single.webp') center 34%/cover no-repeat;border-bottom:1px solid var(--line)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,4,5,.96) 0%,rgba(8,4,5,.76) 37%,rgba(8,4,5,.22) 67%,rgba(8,4,5,.38) 100%),linear-gradient(0deg,rgba(8,4,5,.5),transparent 50%)}
.hero-content{position:relative;z-index:1;width:min(650px,calc(100% - 48px));margin-left:clamp(24px,8vw,104px);padding-top:90px}
.status{display:flex;align-items:center;gap:13px;font-size:12px;font-weight:600;letter-spacing:1.7px;text-transform:uppercase}
.status i{width:9px;height:9px;background:var(--red);border-radius:50%;box-shadow:0 0 0 7px rgba(239,43,46,.12)}
h1{margin:28px 0 22px;font:400 clamp(54px,7vw,91px)/.9 var(--serif);letter-spacing:-4px}
h1 em{color:var(--red);font-weight:400}
.intro{max-width:630px;margin:0;font-size:clamp(16px,1.6vw,20px);line-height:1.65;color:#e0d9d6}
.projects-section{padding:100px clamp(24px,8vw,104px) 120px;background:radial-gradient(circle at 85% 30%,rgba(181,19,25,.17),transparent 33%),#0b0809}
.section-heading p{margin:0;color:var(--red);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.section-heading p span:first-child{margin-right:7px}
.section-heading h2{margin:10px 0 40px;font:400 clamp(44px,6vw,70px)/1 var(--serif)}
.project-card{width:min(360px,100%);aspect-ratio:1;display:flex;align-items:center;padding:28px;border:1px solid rgba(255,255,255,.24);border-radius:27px;background:linear-gradient(145deg,rgba(239,43,46,.93),rgba(92,5,12,.84) 58%,#12090b);box-shadow:0 20px 70px rgba(0,0,0,.38);overflow:hidden;position:relative;transition:transform .3s ease,border-color .3s ease}
.project-card::before{content:"★";position:absolute;right:-10px;top:-48px;font-size:190px;color:rgba(255,255,255,.08);transform:rotate(11deg)}
.project-card span{position:relative;width:100%;font:400 clamp(50px,4.8vw,65px)/.82 var(--serif);letter-spacing:-4px}
.project-card span b{display:block;font:inherit}
.project-card span b:last-child{font-size:1.8em;line-height:.76;letter-spacing:-8px}
.project-card:hover{transform:translateY(-7px);border-color:rgba(255,255,255,.65)}
.site-footer{padding:28px clamp(24px,5vw,64px);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:30px;color:#817a7c;font-size:9px;letter-spacing:1px;text-transform:uppercase}
.site-footer p{margin:0}
@media(max-width:700px){.site-header{height:72px;padding:0 20px}.brand strong{font-size:22px}.brand>span{right:-20px;font-size:18px}.nav-right{gap:15px;font-size:10px;letter-spacing:.6px}.projects-menu summary b{display:none}.nav-separator{margin-left:0}.hero{min-height:720px;background-position:60% center}.hero-shade{background:linear-gradient(90deg,rgba(8,4,5,.94),rgba(8,4,5,.38)),linear-gradient(0deg,rgba(8,4,5,.7),transparent)}.hero-content{margin-left:24px;width:calc(100% - 48px);padding-top:90px}h1{letter-spacing:-2px}.projects-section{padding:74px 24px 90px}.site-footer{flex-direction:column;line-height:1.6}}
@media(max-width:480px){.brand small{display:none}.nav-right{gap:11px}.nav-link,.projects-menu summary{padding:14px 0}.nav-separator{height:18px}.lang-switch{gap:5px}.hero{background-position:63% center}.status{font-size:10px}.project-card{padding:24px}.project-card span{font-size:clamp(46px,15vw,60px)}}