/* Soft colours that are easy on the eyes. Panels are frosted glass over the cover photo, like an iPhone wallpaper.
   Dark mode follows the phone, or the button in the top bar. */
:root{
  --bg:#f5f2ea;--surface:#fffdf8;--ink:#22313a;--mute:#52636a;--line:#e3ddd0;
  --accent:#3a7a73;--accent-ink:#ffffff;--soft:#dcebe6;--warm:#96562f;--warn:#8a4b1f;--bad:#a23b3b;
  --glass:rgba(255,253,248,.74);--glass-line:rgba(255,255,255,.7);--veil:rgba(245,242,234,.80);--shadow:0 10px 34px rgba(30,50,60,.14);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#121b1f;--surface:#1f2b30;--ink:#eaf0f0;--mute:#b0bdc0;--line:#2f3d43;--accent:#7cc4b8;--accent-ink:#10201e;--soft:#233b39;--warm:#e0a47e;--warn:#f0c08a;--bad:#f09a9a;--glass:rgba(22,33,38,.66);--glass-line:rgba(255,255,255,.14);--veil:rgba(12,20,24,.80);--shadow:0 10px 34px rgba(0,0,0,.35)}
}
:root[data-theme="dark"]{--bg:#121b1f;--surface:#1f2b30;--ink:#eaf0f0;--mute:#b0bdc0;--line:#2f3d43;--accent:#7cc4b8;--accent-ink:#10201e;--soft:#233b39;--warm:#e0a47e;--warn:#f0c08a;--bad:#f09a9a;--glass:rgba(22,33,38,.66);--glass-line:rgba(255,255,255,.14);--veil:rgba(12,20,24,.80);--shadow:0 10px 34px rgba(0,0,0,.35)}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
/* a jump to #about and friends stops below the sticky top bar, not under it */
[id]{scroll-margin-top:76px}
body{margin:0;color:var(--ink);font:1.0625rem/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Noto Sans Devanagari","Noto Sans JP",sans-serif}

/* the whole page sits on a blurred, softened copy of the cover photo */
body::before{content:"";position:fixed;inset:-40px;z-index:-2;background:var(--bg) url(/cover-sm.jpg) center/cover no-repeat;filter:blur(26px) saturate(1.2);transform:scale(1.08)}
body::after{content:"";position:fixed;inset:0;z-index:-1;background:var(--veil)}
@media(min-width:900px){body::before{background-image:url(/cover.jpg)}}

a{color:var(--accent)}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,8vw,3.4rem);letter-spacing:-.01em}
h2{font-size:clamp(1.6rem,5vw,2.1rem)}
h3{font-size:1.2rem}h4{font-size:1.05rem}
p{margin:0 0 1em}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--accent-ink);padding:10px 14px;border-radius:0 0 10px 0;z-index:20}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--warm);outline-offset:3px;border-radius:6px}

/* frosted glass: one look for every panel */
.card,.facts li,.form,.cta,.msg,.hero-panel,.top{
  background:var(--glass);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);box-shadow:var(--shadow);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card,.facts li,.form,.cta,.msg,.hero-panel,.top{background:var(--surface)}
}

/* top bar */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));border-width:0 0 1px;border-radius:0;box-shadow:none}
.brand{position:relative;overflow:hidden;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-weight:700;text-decoration:none;letter-spacing:.02em;border:2px solid var(--glass-line)}
.brand img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.brand img[hidden]{display:none}
.menu-btn{min-height:44px;padding:0 16px;border:1px solid var(--glass-line);border-radius:12px;background:var(--glass);color:var(--ink);font:inherit}
nav{display:flex;width:100%;flex-direction:column;gap:4px;padding-bottom:8px}
/* the menu folds away only when scripts run (theme.js sets "js"); without them the links simply stay visible */
@media(max-width:759.98px){.js nav:not(.open){display:none}}
html:not(.js) .tools{display:none}
nav a{padding:12px 8px;color:var(--ink);text-decoration:none;border-radius:10px;min-height:44px}
nav a:hover{background:var(--soft)}
nav a.pill{background:var(--accent);color:var(--accent-ink);text-align:center}
@media(min-width:760px){
  .menu-btn{display:none}
  nav{flex-direction:row;width:auto;align-items:center;padding:0;gap:2px}
  nav a{padding:10px 14px}
}

main{max-width:980px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-right)) 40px max(16px,env(safe-area-inset-left))}

/* hero: the photo, with one glass panel on top */
.hero{position:relative;isolation:isolate;overflow:hidden;margin:14px 0 0;border-radius:28px;min-height:min(calc(100svh - 112px),780px);display:flex;align-items:flex-end;box-shadow:var(--shadow)}
.hero-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:62% 40%;transform-origin:62% 40%;animation:drift 40s ease-in-out infinite alternate}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(8,18,26,.5),rgba(8,18,26,0) 55%)}
.hero-panel{width:100%;margin:14px;padding:20px;border-radius:24px;display:grid;gap:4px;animation:rise .9s .1s both cubic-bezier(.2,.7,.2,1)}
@media(min-width:760px){.hero{min-height:min(calc(100svh - 112px),680px)}.hero-panel{width:auto;max-width:620px;margin:28px;padding:28px}}
.who{display:flex;align-items:center;gap:16px;margin-bottom:6px}
.eyebrow{color:var(--warm);font-weight:600;margin:0 0 2px}
.who h1{margin:0}
.lead{font-size:1.15rem;color:var(--mute);max-width:36ch;margin:6px 0 0}
.photo{position:relative;flex:none;width:92px;aspect-ratio:1;border-radius:50%;background:var(--soft);display:grid;place-items:center;border:3px solid var(--glass-line);box-shadow:0 6px 20px rgba(0,0,0,.18);overflow:hidden}
.photo .initials{font-size:1.9rem;font-weight:700;color:var(--accent)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo img[hidden]{display:none}
@media(min-width:760px){.photo{width:116px}}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 4px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border:2px solid var(--accent);border-radius:14px;background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:600;text-decoration:none;cursor:pointer;transition:transform .15s ease,filter .15s ease}
.btn.alt{background:transparent;color:var(--accent)}
.btn.sm{min-height:44px;padding:0 16px;font-size:.98rem}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:12px 0 0}
.chips li{background:var(--soft);color:var(--ink);padding:6px 14px;border-radius:99px;font-size:.98rem}
.chips small{color:var(--mute)}

/* sections */
.block{padding:40px 0 8px}
.two{display:grid;gap:0 32px}
@media(min-width:760px){.two{grid-template-columns:1fr 1fr}}
.facts{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:10px}
@media(min-width:760px){.facts{grid-template-columns:repeat(3,1fr)}}
.facts li{border-radius:18px;padding:14px 16px;display:grid;gap:2px}
.facts b{color:var(--warm);font-size:.9rem;text-transform:uppercase;letter-spacing:.06em}
.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.cards.big{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.card{border-radius:20px;padding:18px}
.card p{color:var(--mute);margin:0 0 .6em}
.card.lang{text-align:center}
.card.lang h4{margin:0}
.proj{display:flex;flex-direction:column;gap:2px}
.proj .btn{margin-top:auto;align-self:flex-start}
.tags{font-size:.92rem;color:var(--warm)!important}
.sub{margin:28px 0 12px}
.note,.more{color:var(--mute)}
.more{margin-top:18px}

.timeline{list-style:none;margin:0;padding:0 0 0 18px;border-left:3px solid var(--soft)}
.timeline li{position:relative;padding:0 0 22px 18px;display:grid;gap:2px}
.timeline li::before{content:"";position:absolute;left:-27px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--accent);border:3px solid var(--bg)}
.timeline time{color:var(--warm);font-weight:600;font-size:.95rem}
.timeline span{color:var(--mute)}

.cta{margin:28px 0 0;padding:36px 20px;text-align:center;border-radius:26px}
.cta p{color:var(--mute)}

footer{text-align:center;padding:26px 16px calc(26px + env(safe-area-inset-bottom));color:var(--mute)}
footer p{margin:0 0 4px}
footer a{display:inline-block;padding:12px 8px;min-height:44px}

/* contact page */
.page{max-width:640px;margin:0 auto;padding:28px max(16px,env(safe-area-inset-right)) 48px max(16px,env(safe-area-inset-left))}
.form{border-radius:22px;padding:20px}
label{display:block;font-weight:600;margin:14px 0 6px}
label small{font-weight:400;color:var(--mute)}
input,textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:color-mix(in srgb,var(--bg) 70%,transparent);border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-height:48px}
textarea{min-height:160px;resize:vertical}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--bad);border-width:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.status{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:var(--soft)}
.status.bad{background:#a23b3b22;color:var(--bad)}
.count{font-size:.9rem;color:var(--mute);text-align:right;margin:4px 0 0}
.back,.side a{display:inline-block;padding:10px 4px;min-height:44px}
.side{margin-top:22px;color:var(--mute)}
.msg{border-radius:16px;padding:14px;margin:0 0 10px;overflow-wrap:anywhere}
.msg time,.msg small{color:var(--mute)}
.msg pre{white-space:pre-wrap;font:inherit;margin:8px 0}

/* header tools: language, light/dark, menu */
.tools{display:flex;align-items:center;gap:8px}
.sel{width:auto;min-height:44px;padding:0 10px;border:1px solid var(--glass-line);border-radius:12px;background:var(--glass);color:var(--ink);font:inherit;font-size:1rem}
.icon-btn{min-width:44px;min-height:44px;border:1px solid var(--glass-line);border-radius:12px;background:var(--glass);color:var(--ink);font:inherit;font-size:1.25rem;line-height:1;cursor:pointer}
.row{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.proj .row .btn{margin:0}
@media(min-width:760px){.brand{margin-right:auto}nav{order:2}.tools{order:3}}


/* Pictures behind the panels. The picture sits at the top of the box and a frosted pane (like an iPhone widget) holds the text,
   so the words are always on a calm, blurred background and never on a busy picture. */
:root{--pane:rgba(255,253,248,.6)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--pane:rgba(18,28,32,.58)}}
:root[data-theme="dark"]{--pane:rgba(18,28,32,.58)}
.a-study{--art:url(/art/study.svg)}.a-outside{--art:url(/art/outside.svg)}.a-fav{--art:url(/art/fav.svg)}.a-code{--art:url(/art/code.svg)}.a-web{--art:url(/art/web.svg)}.a-network{--art:url(/art/network.svg)}.a-security{--art:url(/art/security.svg)}.a-also{--art:url(/art/also.svg)}.a-team{--art:url(/art/team.svg)}.a-lang-ne{--art:url(/art/lang-ne.svg)}.a-lang-en{--art:url(/art/lang-en.svg)}.a-lang-ja{--art:url(/art/lang-ja.svg)}.a-lang-hi{--art:url(/art/lang-hi.svg)}.a-hotel{--art:url(/art/hotel.jpg)}.a-pasal{--art:url(/art/pasal.jpg)}.a-dahal{--art:url(/art/dahal.jpg)}.a-sewa{--art:url(/art/sewa.svg)}.a-dob{--art:url(/art/dob.svg)}.a-hk1{--art:url(/art/hk1.svg)}.a-hk2{--art:url(/art/hk2.svg)}.a-hk3{--art:url(/art/hk3.svg)}.a-cta{--art:url(/art/cta.svg)}
.art,.facts li.art{--h:150px;position:relative;isolation:isolate;overflow:hidden;background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;padding-top:calc(var(--h) - 4px)}
.art.tall{--h:176px}.art.sm{--h:96px}.art.cta{--h:150px;padding-top:calc(var(--h) + 6px)}
.facts li.art{--h:136px;padding:calc(var(--h) - 14px) 16px 14px}
.art::before{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;top:calc(var(--h) - 30px);background:var(--pane);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);border-top:1px solid var(--glass-line);border-radius:20px 20px 0 0}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.art::before{background:var(--surface)}}
.art::after{content:"";position:absolute;z-index:-2;left:0;right:0;top:0;height:calc(var(--h) + 64px);background:var(--art) center/cover no-repeat}
.art.a-hotel::after{background-position:center 28%}.art.a-dahal::after{background-position:left center}
.art h3,.art h4,.art p,.art b,.art span,.art .row{overflow-wrap:anywhere}
.card.lang.art{text-align:center}
.cta.art{padding-left:20px;padding-right:20px}

/* a little movement, only a little: the photo drifts slowly, the panel rises once, sections fade in as you scroll */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes drift{from{transform:scale(1.03)}to{transform:scale(1.1) translate(-1.2%,-1%)}}
.js-reveal .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js-reveal .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-img,.hero-panel{animation:none}
  .js-reveal .reveal{opacity:1;transform:none;transition:none}
  .btn{transition:none}
}

/* the three app banners are darker, so their pane stays a little firmer to keep the words easy to read */
.a-hotel,.a-pasal,.a-dahal{--pane:rgba(255,253,248,.72)}
:root[data-theme="dark"] .a-hotel,:root[data-theme="dark"] .a-pasal,:root[data-theme="dark"] .a-dahal{--pane:rgba(18,28,32,.68)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .a-hotel,:root:not([data-theme="light"]) .a-pasal,:root:not([data-theme="light"]) .a-dahal{--pane:rgba(18,28,32,.68)}}

/* technology badges */
.badges{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:2px 0 12px}
.badges li{font-size:.84rem;line-height:1;padding:7px 11px;border-radius:99px;background:var(--soft);color:var(--ink);border:1px solid var(--glass-line);font-weight:600}
.card.soon{text-align:center;border-style:dashed}
.card.soon p{margin:0}
/* blog */
.post{border-radius:20px;padding:20px;margin:0 0 14px;background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--shadow)}
.post time{color:var(--warm);font-weight:600;font-size:.95rem}
.empty{margin-top:24px;padding:32px 20px;text-align:center;border-radius:22px;background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--shadow)}
.empty p{color:var(--mute)}
/* an optional short screen recording of an app, shown above the text of a project card: <video class="demo" ...> */
.demo{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;margin:0 0 12px;background:var(--soft)}