:root{--ink:#0f172a;--muted:#64748b;--line:#dbe3ef;--paper:#f7f9fd;--blue:#1647f5;--shadow:0 24px 70px rgba(30,49,85,.12)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif}.page{position:relative;width:min(1260px,100%);min-height:100svh;margin:auto;padding:clamp(24px,4vh,46px) 5vw;display:grid;grid-template-columns:minmax(280px,.85fr) minmax(420px,1.15fr);align-items:center;gap:clamp(32px,5vw,72px);overflow:hidden}.grid{position:fixed;inset:0;z-index:0;background:radial-gradient(circle at 58% 30%,#fff 0 14%,rgba(239,244,255,.78) 54%,transparent 80%),linear-gradient(rgba(52,82,140,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(52,82,140,.035) 1px,transparent 1px);background-size:auto,48px 48px,48px 48px;mask-image:linear-gradient(to bottom,#000,transparent 96%)}.portrait,.portfolio{position:relative;z-index:1}.portrait{height:min(76svh,680px);overflow:hidden;border-radius:30px;background:#101b31;box-shadow:0 30px 80px rgba(22,45,96,.2)}.portrait img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 12%}.portfolio h1{margin:0;font-family:"Plus Jakarta Sans",sans-serif;font-size:clamp(64px,7vw,92px);line-height:.86;letter-spacing:-.085em}.portfolio h1 span{color:var(--blue)}.statement{max-width:610px;margin:28px 0 30px;color:#52627a;font-size:clamp(17px,1.35vw,20px);font-weight:600;line-height:1.6}.projects{display:grid;gap:11px}.project{min-height:94px;padding:15px 18px;display:grid;grid-template-columns:180px 1fr auto;align-items:center;gap:20px;border:1px solid var(--line);border-radius:20px;background:#fff;color:var(--ink);text-decoration:none;box-shadow:0 10px 32px rgba(30,49,85,.055);transition:transform .18s,border-color .18s,box-shadow .18s}.project:hover{transform:translateY(-2px);border-color:#adbedc;box-shadow:var(--shadow)}.project img{display:block;max-width:100%;height:50px;object-fit:contain;object-position:left center}.project .limau-logo{width:175px}.project .nexus-logo{width:150px}.project .school-logo{width:54px;height:54px}.project strong{font-size:13px;line-height:1.45}.project b{color:var(--blue);font-size:20px}.nexus{background:linear-gradient(145deg,#fff,#edf4ff)}
@media(max-height:720px) and (min-width:821px){.page{padding-top:22px;padding-bottom:22px}.portrait{height:82svh}.portfolio h1{font-size:60px}.statement{margin:20px 0}.project{min-height:80px}.project img{height:42px}}
@media(max-width:820px){.page{min-height:100svh;padding:18px 15px 30px;grid-template-columns:1fr;gap:28px;overflow:visible}.portrait{height:min(48svh,480px);border-radius:28px}.portfolio h1{font-size:clamp(60px,20vw,88px)}.statement{margin:24px 0;font-size:16px}.project{min-height:88px;grid-template-columns:135px 1fr auto;gap:14px;padding:14px}.project .limau-logo{width:130px}.project .nexus-logo{width:118px}.project strong{font-size:12px}}
@media(max-width:440px){.portrait{height:43svh}.project{grid-template-columns:110px 1fr auto}.project .limau-logo{width:108px}.project .nexus-logo{width:98px}.project strong{font-size:11px}}
@media(prefers-reduced-motion:reduce){.project{transition:none}}
.portrait{height:min(82svh,730px);align-self:end;overflow:visible;border-radius:0;background:transparent;box-shadow:none}.portrait img{object-fit:contain;object-position:50% 100%}
@media(max-width:820px){.portrait{height:min(52svh,520px)}}
.portfolio h1{font-family:Manrope,Inter,sans-serif;font-weight:800;line-height:.9;letter-spacing:-.065em}.project .school-logo{justify-self:center}
body{background-color:#f7f9fd;background-image:linear-gradient(90deg,rgba(247,249,253,.12),rgba(247,249,253,.28) 38%,rgba(247,249,253,.88) 63%,#f7f9fd 100%),url("assets/jambongan-background.png");background-size:cover;background-position:center;background-attachment:fixed;background-repeat:no-repeat}
@media(max-width:820px){body{background-image:linear-gradient(rgba(247,249,253,.3),rgba(247,249,253,.94) 58%,#f7f9fd 100%),url("assets/jambongan-background.png");background-position:32% center;background-attachment:scroll}}
.portrait::before{content:"";position:absolute;z-index:-1;width:min(35vw,430px);height:min(35vw,430px);left:50%;top:48%;transform:translate(-50%,-50%);border-radius:50%;background:linear-gradient(145deg,rgba(255,255,255,.76),rgba(201,220,255,.74));box-shadow:0 0 0 1px rgba(22,71,245,.08),0 28px 80px rgba(22,71,245,.11)}.portrait::after{content:"";position:absolute;z-index:-2;width:min(41vw,500px);height:min(41vw,500px);left:50%;top:48%;transform:translate(-50%,-50%);border:1px solid rgba(22,71,245,.1);border-radius:50%}.portrait img{position:relative;z-index:1}
@media(max-width:820px){.page{padding:12px 16px 28px;grid-template-columns:1fr;grid-template-rows:42svh auto;gap:8px;align-items:start}.portrait{width:100%;height:42svh;min-height:320px;align-self:start}.portrait::before{width:min(76vw,330px);height:min(76vw,330px);top:52%;background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(193,215,255,.78))}.portrait::after{width:min(88vw,380px);height:min(88vw,380px);top:52%}.portrait img{object-position:50% 100%}.portfolio{margin-top:-4px}.portfolio h1{font-size:clamp(46px,14.5vw,64px);line-height:1;letter-spacing:-.07em;white-space:nowrap}.statement{margin:16px 0 22px;font-size:15px;line-height:1.5}.projects{gap:9px}.project{min-height:82px}.project img{height:42px}body{background-image:linear-gradient(rgba(247,249,253,.56),rgba(247,249,253,.86) 44%,#f7f9fd 68%),url("assets/jambongan-background.png");background-position:24% top;background-size:auto 62svh;background-repeat:no-repeat;background-attachment:scroll}}
@media(max-width:440px){.page{grid-template-rows:39svh auto}.portrait{height:39svh;min-height:285px}.portfolio h1{font-size:clamp(43px,14vw,58px)}.statement{font-size:14px}.project{grid-template-columns:102px 1fr auto}.project strong{font-size:10.5px}}
.contact{margin:-12px 0 22px;color:#52627a;font-size:13px;font-weight:700}.contact summary{width:max-content;cursor:pointer;list-style:none}.contact summary::-webkit-details-marker{display:none}.contact summary::after{content:" +";color:var(--blue)}.contact[open] summary::after{content:" −"}.contact a{display:inline-block;margin-top:8px;color:var(--blue);font-weight:600;text-decoration:none}.contact a:hover{text-decoration:underline;text-underline-offset:3px}
@media(max-width:820px){.page{grid-template-rows:auto auto;gap:26px;padding-top:10px}.portrait{height:42svh;min-height:330px;overflow:hidden;border-radius:0 0 34px 34px}.portrait::before{top:48%;width:min(74vw,320px);height:min(74vw,320px)}.portrait::after{top:48%;width:min(84vw,360px);height:min(84vw,360px)}.portrait img{object-position:50% 100%}.portfolio{margin-top:0}.portfolio h1{font-size:clamp(44px,13vw,58px);white-space:nowrap}.statement{margin:14px 0 20px}.contact{margin:-8px 0 20px}}
@media(max-width:440px){.page{grid-template-rows:auto auto}.portrait{height:40svh;min-height:300px}.portfolio h1{font-size:clamp(42px,12.8vw,54px)}}
.portrait::before{background:linear-gradient(145deg,#fff,#d9e6ff)}
@media(max-width:820px){.portrait::before{background:linear-gradient(145deg,#fff,#d5e3ff)}}
.portrait::before,.portrait::after{display:none}
.portrait img{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 82%,rgba(0,0,0,.92) 87%,rgba(0,0,0,.55) 94%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 82%,rgba(0,0,0,.92) 87%,rgba(0,0,0,.55) 94%,transparent 100%)}
@media(max-width:820px){.portrait img{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 84%,rgba(0,0,0,.88) 90%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 84%,rgba(0,0,0,.88) 90%,transparent 100%)}}
.contact{margin:18px 0 0}
@media(max-width:820px){.contact{margin:16px 0 0}}