/* Chithi Gunatilake — home page (dark first; light via body[data-theme="light"]) */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0}
section[id]{scroll-margin-top:24px}
.v3{
  margin:0;
  --bg:#121315; --deep:#0A0B0D; --surface:#1A1C1F; --line:#2B2E33; --grid:rgba(236,237,238,.05);
  --ink:#ECEDEE; --ink-2:#C2C6CC; --ink-3:#979CA4;
  --accent:#D1FF00; --link:#D1FF00; --on-accent:#121315;
  font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--ink); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
  position:relative; min-height:100%;
}
.v3[data-theme="light"]{
  --bg:#F4F5F6; --deep:#16181B; --surface:#FFFFFF; --line:#DADFE3; --grid:rgba(13,14,21,.055);
  --ink:#16181B; --ink-2:#3E434A; --ink-3:#5E636A; --link:#3F5F00; --on-accent:#16181B;
}
.v3 *{box-sizing:border-box;margin:0;padding:0}
.v3 img{display:block;max-width:100%}
.v3 ul{list-style:none}
.v3 a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.v3 a:hover{text-decoration-thickness:2px}
.v3 :focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.v3 .wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.v3 .mono{font-family:'IBM Plex Mono',ui-monospace,monospace}

/* top rail */
.v3 .rail-wrap{position:sticky;top:0;height:0;z-index:20}
.v3 .rail{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 32px}
.v3 .chip-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(10px);color:var(--ink);font-size:15px;font-weight:500;text-decoration:none;cursor:pointer}
.v3 .chip-btn:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.v3 .chip-btn svg{width:16px;height:16px}
.v3 .monogram{font-family:'IBM Plex Mono',monospace;font-weight:500;letter-spacing:.12em}
.v3 .rail-actions{display:flex;gap:8px;flex-wrap:wrap}

/* hero */
.v3 .hero{position:relative;min-height:780px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:120px 32px 100px;text-align:center}
.v3 .hero-grid{position:absolute;inset:-10%;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 30%,transparent 78%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 30%,transparent 78%)}
.v3 .hero-stage{position:relative;max-width:1000px}
.v3 .eyebrow{display:inline-block;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:15px;letter-spacing:.06em;text-transform:uppercase;padding:8px 14px;margin-bottom:28px}
.v3 h1{font-size:136px;line-height:.9;font-weight:700;letter-spacing:-0.035em;text-transform:uppercase}
.v3 h1 span{display:block}
.v3 .lede{margin:32px auto 0;max-width:36em;font-size:20px;line-height:1.65;color:var(--ink-2)}
.v3 .meta{margin-top:32px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.v3 .meta a,.v3 .meta span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--line);color:var(--ink-2);text-decoration:none;font-size:15px}
.v3 .meta a:hover{color:var(--ink);border-color:var(--ink-3);background:var(--surface)}
.v3 .meta svg{width:15px;height:15px}

/* sections */
.v3 section{padding:96px 0;border-top:1px solid var(--line)}
.v3 h2{font-size:40px;line-height:1.1;font-weight:600;letter-spacing:-0.015em;margin-bottom:36px}
.v3 h3{font-size:20px;line-height:1.3;font-weight:600}
.v3 .about{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:56px;align-items:start}
.v3 .prose p{font-size:19px;line-height:1.7;color:var(--ink-2)}
.v3 .prose p+p{margin-top:18px}
.v3 figure{margin:0}
.v3 figcaption{margin-top:10px;font-size:14px;color:var(--ink-3);line-height:1.5}
.v3 .about img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
.v3 .strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:56px}
.v3 .strip img{width:100%;aspect-ratio:4/3;object-fit:cover}
.v3 .more{margin-top:20px}

/* project cards */
.v3 .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.v3 .card{position:relative;background:var(--surface);padding:28px 26px 26px;display:flex;flex-direction:column;gap:12px;min-height:270px;transition:background .3s}
.v3 .card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.v3 .card:hover::after{transform:scaleX(1)}
.v3 .card-top{display:flex;justify-content:space-between;align-items:flex-start}
.v3 .glyph{width:40px;height:40px;color:var(--ink-3);transition:color .3s}
.v3 .card:hover .glyph{color:var(--ink)}
.v3 .pid{font-size:13px;color:var(--ink-3)}
.v3 .card p{font-size:15px;line-height:1.6;color:var(--ink-2);flex:1 1 auto}
.v3 .chips{display:flex;flex-wrap:wrap;gap:6px}
.v3 .chip{font-size:13px;padding:3px 9px;border:1px solid var(--line);color:var(--ink-3)}
.v3 .chip.hot{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:500}
.v3 .card a{font-size:15px;font-weight:500}
.v3 .card.feature{grid-column:span 2;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px;align-items:center}
.v3 .card.feature .render{background:radial-gradient(ellipse at 50% 55%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 70%)}
.v3 .card.feature .render img{width:100%}
.v3 .card.feature .body{display:flex;flex-direction:column;gap:12px;height:100%}

/* rows */
.v3 .row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;padding:28px 0;border-top:1px solid var(--line)}
.v3 .row:first-of-type{border-top:0;padding-top:0}
.v3 .when{color:var(--ink-3);font-size:15px}
.v3 .org{color:var(--ink-2);margin-top:2px}
.v3 .bul{margin-top:14px;display:grid;gap:8px}
.v3 .bul li{position:relative;padding-left:20px;color:var(--ink-2)}
.v3 .bul li::before{content:"";position:absolute;left:0;top:.8em;width:9px;height:2px;background:var(--accent)}
.v3 .sub-role{margin-top:28px}
.v3 .skills{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px 32px}
.v3 .skills dt{color:var(--ink-3)}
.v3 .skills dd{color:var(--ink-2)}

/* contact block */
.v3 .contact{background:var(--deep);color:#ECEDEE;border-top:0;padding:120px 0}
.v3 .contact h2{font-size:72px;line-height:1.02;font-weight:700;letter-spacing:-0.03em;max-width:16ch}
.v3 .contact h2 em{font-style:normal;color:#D1FF00}
.v3 .contact .lead{margin-top:24px;max-width:36em;font-size:19px;color:#C2C6CC}
.v3 .clist{margin-top:56px;border-top:1px solid rgba(236,237,238,.18)}
.v3 .crow{display:flex;align-items:center;gap:20px;padding:22px 4px;border-bottom:1px solid rgba(236,237,238,.18);color:#ECEDEE;text-decoration:none;transition:padding .3s,color .3s}
.v3 a.crow:hover{padding-left:16px;color:#D1FF00}
.v3 .crow-k{flex:0 0 130px;font-size:14px;color:#979CA4;text-transform:uppercase;letter-spacing:.08em}
.v3 .crow-v{flex:1 1 auto;font-size:22px;font-weight:500}
.v3 .crow svg{width:16px;height:16px;opacity:.6}
.v3 footer{background:var(--deep);color:#979CA4;font-size:15px;padding:24px 0 32px;border-top:1px solid rgba(236,237,238,.12)}

/* HUD */
.v3 .hud{position:sticky;bottom:0;z-index:20;height:60px;display:flex;align-items:center;gap:20px;padding:0 32px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--line);font-size:15px}
.v3 .hud-brand{display:flex;align-items:center;gap:10px;font-weight:500;white-space:nowrap}
.v3 .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:v3pulse 2.4s ease-in-out infinite}
@keyframes v3pulse{0%,100%{opacity:1}50%{opacity:.4}}
.v3 .hud-sec{color:var(--ink-3);white-space:nowrap}
.v3 .hud-prog{margin-left:auto;display:flex;align-items:center;gap:14px}
.v3 .track{width:200px;height:2px;background:var(--line)}
.v3 .fill{height:100%;width:0;background:var(--accent)}
.v3 .hud-nav{display:flex;gap:6px}
.v3 .hud-nav a{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);color:var(--ink)}
.v3 .hud-nav a:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.v3 .hud-nav svg{width:14px;height:14px}

@media (max-width:900px){
  .v3 .wrap{padding:0 20px}
  .v3 .rail{padding:12px 16px}
  .v3 .rail .lbl{display:none}
  .v3 .hero{min-height:620px;padding:100px 20px 72px}
  .v3 h1{font-size:56px}
  .v3 .lede{font-size:18px}
  .v3 h2{font-size:30px}
  .v3 section{padding:64px 0}
  .v3 .about,.v3 .row,.v3 .skills,.v3 .card.feature{grid-template-columns:minmax(0,1fr)}
  .v3 .grid{grid-template-columns:minmax(0,1fr)}
  .v3 .card.feature{grid-column:auto}
  .v3 .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v3 .row{gap:6px}
  .v3 .contact{padding:72px 0}
  .v3 .contact h2{font-size:40px}
  .v3 .crow{flex-wrap:wrap;gap:4px 16px}
  .v3 .crow-k{flex-basis:100%}
  .v3 .crow-v{font-size:18px;word-break:break-word}
  .v3 .hud-sec,.v3 .track{display:none}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.v3 .dot{animation:none}}

/* live site: rail and HUD pinned to the viewport */
.v3{padding-bottom:60px}
.v3 .rail-wrap{position:fixed;top:0;left:0;right:0;height:0}
.v3 .hud{position:fixed;left:0;right:0;bottom:0}
@media (max-width:900px){.v3 .eyebrow{font-size:13px}}