:root{--bg:#F5F0E7;--surface:#E8DFD0;--stone:#D9C9AD;--ink:#292B27;--head:#263D32;--muted:#4B6252;--line:#D9C9AD;--accent:#94472F;--gold:#B9674B;--gold-text:#94472F;--btn-bg:#A65A40;--btn-fg:#FFFFFF;--sec:#536A59;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
:root[data-theme="dark"]{--bg:#19241E;--surface:#243129;--stone:#302A23;--ink:#C8BCA7;--head:#F2E9D9;--muted:#A9B6A6;--line:#39483D;--accent:#D98668;--gold:#D98668;--gold-text:#D98668;--btn-bg:#D98668;--btn-fg:#19241E;--sec:#536A59}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.05rem/1.65 "Hanken Grotesk","Noto Serif Bengali",system-ui,sans-serif}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:10}
a{color:var(--accent)}
a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.wrap{max-width:78rem;margin:0 auto;padding:0 1.5rem}
.brand{display:block;padding:1.2rem 0 .4rem;font:600 1.2rem "Fraunces",Georgia,serif;color:var(--ink);text-decoration:none}
.tabbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;display:flex;overflow-x:auto;background:var(--bg);border-bottom:2px solid var(--line)}
.tabbar a{flex:1 0 auto;padding:1rem .9rem;text-align:center;font:600 clamp(.95rem,2.4vw,1.15rem) "Fraunces",Georgia,serif;color:var(--muted);text-decoration:none;border-bottom:4px solid transparent;margin-bottom:-2px;white-space:nowrap}
.tabbar a:hover{color:var(--ink)}
.tabbar a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--gold)}
section[hidden]{display:none}
section{padding:2.2rem 0 1.5rem}
h1{font:600 clamp(2.2rem,6.5vw,4.2rem)/1.1 "Fraunces","Noto Serif Bengali",Georgia,serif;margin:.4rem 0 1.1rem;max-width:18ch;letter-spacing:-.01em}
h1 span{display:block;color:var(--accent);font-weight:400;font-style:italic}
h2{font:600 1.8rem/1.2 "Fraunces","Noto Serif Bengali",Georgia,serif;margin:0 0 1rem}
h3.sub{font:600 1.2rem "Fraunces",Georgia,serif;margin:2rem 0 .9rem}
.lead{max-width:46rem;margin:0 0 1.4rem;color:var(--muted);font-size:1.1rem}
.btns{display:flex;gap:.8rem;flex-wrap:wrap}
.btn{display:inline-block;padding:.7rem 1.2rem;border-radius:.4rem;font-weight:600;text-decoration:none;border:2px solid var(--btn-bg)}
.btn.p{background:var(--btn-bg);color:var(--btn-fg)}
.btn.s{color:var(--ink);border-color:var(--ink)}
.pillars,.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem}
.card{display:block;background:var(--surface);border-top:4px solid var(--gold);border-radius:.4rem;padding:1.1rem 1.2rem;text-decoration:none;color:var(--ink)}
.card b{display:block;font:600 1.2rem "Fraunces",Georgia,serif;margin-bottom:.3rem}
.card span{color:var(--muted);font-size:.97rem}
.card:hover{outline:2px solid var(--gold)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.panel{background:var(--surface);border-radius:.4rem;padding:1.3rem}
.panel h3{margin:0 0 .6rem;font:600 1.25rem "Fraunces",Georgia,serif}
.panel ul{margin:0;padding-left:1.1rem}.panel li{margin:.35rem 0}
.books{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1.2rem}
.cover,.ph,.photo{background:var(--surface);border:2px dashed var(--line);border-radius:.4rem;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:.92rem;padding:.8rem}
.cover{aspect-ratio:2/3}.ph{aspect-ratio:4/3}.photo{aspect-ratio:4/5}
.book h3{margin:.7rem 0 .2rem;font:600 1.05rem "Noto Serif Bengali","Fraunces",serif}
.book p{margin:0;color:var(--muted);font-size:.95rem}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.8rem}
.about{display:grid;grid-template-columns:220px 1fr;gap:2rem;align-items:start}
.about p{margin:0 0 1rem;max-width:40rem}
.now{background:var(--surface);border-left:4px solid var(--gold);padding:1rem 1.2rem;border-radius:.3rem;max-width:40rem}
footer{margin-top:2rem;padding:1.5rem 0 3rem;border-top:1px solid var(--line);color:var(--muted);font-size:.95rem}
@media(max-width:700px){.two,.about{grid-template-columns:1fr}.photo{max-width:220px}}

.tabbar a{display:block}
h1.ptitle{font:600 clamp(1.8rem,5vw,2.8rem)/1.15 "Fraunces","Noto Serif Bengali",Georgia,serif;max-width:none;margin:.2rem 0 .5rem}
.cover.fill,.ph.fill,.photo.fill{border:0;padding:0;overflow:hidden}
.cover img,.ph img,.photo img{width:100%;height:100%;object-fit:cover;display:block}
.post{max-width:42rem}.post h2{font-size:1.45rem;margin:2rem 0 .6rem}.post h3{font:600 1.15rem "Fraunces",Georgia,serif;margin:1.5rem 0 .5rem}.post p,.post li{margin:.7rem 0}.post a{word-break:break-word}
.post img{max-width:100%;height:auto;border-radius:.4rem}
.post blockquote{border-left:4px solid var(--gold);margin:1rem 0;padding:.1rem 1rem;color:var(--muted)}
.post pre{background:var(--surface);padding:1rem;overflow-x:auto;border-radius:.4rem}.post code{background:var(--surface);padding:.1rem .3rem;border-radius:.2rem}
.tw{overflow-x:auto}.post table{border-collapse:collapse;width:100%}.post th,.post td{border:1px solid var(--line);padding:.5rem .7rem;text-align:left}
.meta{color:var(--muted);font-size:.9rem;margin:0 0 1rem}
.hero-img{width:100%;max-height:360px;object-fit:cover;border-radius:.4rem;margin:0 0 1.2rem}
.gallery figure{margin:0}.gallery figcaption{font-size:.85rem;color:var(--muted);margin-top:.3rem}
.back{display:inline-block;margin-bottom:1rem}

a.book{display:block;color:inherit;text-decoration:none}a.book:hover h3{text-decoration:underline}
.story{max-width:40rem;font-family:"Noto Serif Bengali","Hanken Grotesk",serif;font-size:1.1rem}
.story p{margin:.9rem 0;line-height:2}.story .dl{margin:.4rem 0 .4rem 1rem}.story .gap{height:1.6rem}

.books{grid-template-columns:repeat(auto-fill,minmax(140px,160px));gap:1.6rem 1.4rem}
.book h3{font-size:1rem;margin:.6rem 0 .1rem}
.hero-img{max-height:240px}
.photo{max-width:220px}

.hero2{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:center}
.hero2 h1{font-size:clamp(2rem,5vw,3.1rem)}
.himg{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:.5rem;display:block}
@media(max-width:700px){.hero2{grid-template-columns:1fr}.himg{max-width:440px}}

.eyebrow{font:500 .75rem/1 "Hanken Grotesk",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 1rem}
.more{color:var(--gold-text);font-weight:600;text-decoration:none}.more:hover{text-decoration:underline}.more.big{display:inline-block;margin-top:.2rem;font-size:1.05rem}
h2.sec{display:flex;align-items:center;gap:1rem;font:600 1.6rem "Fraunces",Georgia,serif;margin:2.6rem 0 1.2rem}h2.sec::after{content:"";flex:1;height:1px;background:var(--line)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.6rem}
.fcard{display:block;color:inherit;text-decoration:none}
.fcard img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:.4rem;display:block;margin-bottom:.8rem}.fcard img.top{object-position:50% 38%}
.lab{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);font-weight:600;margin-bottom:.3rem}
.fcard h3{font:600 1.3rem/1.25 "Fraunces","Noto Serif Bengali",Georgia,serif;margin:0 0 .4rem}.fcard p{margin:0 0 .6rem;color:var(--muted);font-size:.97rem}.fcard:hover h3{text-decoration:underline}
.band{background:var(--stone);border-radius:.5rem;padding:1.8rem 2rem;margin:2.8rem 0;border-left:5px solid var(--gold)}
.band h3{font:600 1.3rem "Fraunces",Georgia,serif;margin:0 0 .8rem}.band blockquote{margin:0 0 .5rem;font:400 1.5rem/1.6 "Noto Serif Bengali",Georgia,serif}.qsrc{margin:0 0 1rem;color:var(--muted);font-size:.95rem}
.lgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem}
.lrow{display:flex;gap:.9rem;align-items:center;color:inherit;text-decoration:none}.lrow img{width:64px;height:64px;object-fit:cover;border-radius:.3rem;flex:none}
.lrow b{display:block;font:600 1rem/1.3 "Fraunces","Noto Serif Bengali",Georgia,serif}.lrow span{font-size:.85rem;color:var(--muted)}.lrow:hover b{text-decoration:underline}
footer.f2{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.f2 .sig{font:italic 400 1.7rem "Fraunces",Georgia,serif;color:var(--ink)}.f2 nav a{color:var(--muted);margin:0 .6rem}

.gallery figcaption small{display:block;font-style:italic;margin-top:.2rem}

.topbar{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.ctl{display:flex;gap:.6rem;align-items:center}
.lang{padding:.35rem .9rem;border:1px solid var(--line);border-radius:2rem;color:var(--ink);text-decoration:none;font-weight:600;font-size:.9rem}.lang:hover{border-color:var(--gold)}
.tt{width:2.3rem;height:2.3rem;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font-size:1.15rem;line-height:1;padding:0}
.tt::before{content:"\263E"}:root[data-theme="dark"] .tt::before{content:"\2600"}
:root[data-theme="dark"]{color-scheme:dark}:root[data-theme="light"]{color-scheme:light}
.story .ch{font:600 1.6rem "Noto Serif Bengali","Fraunces",serif;text-align:center;margin:2.4rem 0 1rem}
.story .ch2{font:600 1.25rem "Noto Serif Bengali",serif;text-align:center;margin:1.8rem 0 .6rem}
.story .sn{text-align:center;color:var(--muted);margin:1.8rem 0 .4rem}
.story .vs{text-align:center;font-style:italic;color:var(--muted);margin:1rem 0}
html[lang="bn"] body,html[lang="bn"] :is(h1,h2,h3,b,.brand,.tabbar a,.lab,.more,.btn,figcaption,.lang){font-family:"Noto Serif Bengali","Hanken Grotesk",serif}
html[lang="bn"] :is(.eyebrow,.lab){letter-spacing:0;text-transform:none}

div.card:hover{outline:none}
html[lang="en"] .band blockquote{font-family:"Fraunces",Georgia,serif;font-style:italic}

.gallery a.zoom{display:block;cursor:zoom-in}.gallery a.zoom:hover img{filter:brightness(1.06)}
.lbx{position:fixed;inset:0;z-index:50;background:rgba(10,15,14,.94);display:flex;align-items:center;justify-content:center;padding:1rem}
.lbx figure{margin:0;max-width:92vw;text-align:center}
.lbx img{max-width:92vw;max-height:80vh;object-fit:contain;border-radius:.3rem;display:block;margin:0 auto}
.lbx p{color:#e9e6dc;margin:.8rem 0 0;font-size:.95rem}
.lbx button{position:absolute;background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:50%;width:2.8rem;height:2.8rem;font-size:1.8rem;line-height:1;cursor:pointer;padding:0}
.lbx button:hover{background:rgba(255,255,255,.28)}
.lbc{top:1rem;right:1rem}.lbp{left:.8rem;top:50%;transform:translateY(-50%)}.lbn{right:.8rem;top:50%;transform:translateY(-50%)}

@media (min-width:1500px){html{font-size:106.25%}}
@media (min-width:1900px){html{font-size:112.5%}}

header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--bg);display:flex;flex-wrap:wrap;align-items:center;column-gap:1rem;border-bottom:2px solid var(--line)}
header.site .topbar{display:contents}
header.site .brand{order:1;padding:.7rem 0}
header.site .ctl{order:2;margin-left:auto}
header.site .tabbar{position:static;order:3;flex:1 0 100%;border-bottom:0;margin:0}
header.site .tabbar a{margin-bottom:0}
@media (min-width:1050px){header.site .tabbar{order:2;flex:1 1 auto;justify-content:center;margin:0 1rem}header.site .ctl{order:3;margin-left:0}}
.wtop{display:grid;grid-template-columns:1fr 300px;gap:2.5rem;align-items:start}
.ebook{text-align:center}.ebook .cover{aspect-ratio:2/3;margin:0 auto .9rem}.ebook .cover.fill{box-shadow:0 12px 32px rgba(0,0,0,.28)}
.ebook h3{font:600 1.3rem/1.3 "Noto Serif Bengali","Fraunces",serif;margin:.2rem 0 .9rem}
@media(max-width:800px){.wtop{grid-template-columns:1fr}.ebook .cover{max-width:240px}}
.about{grid-template-columns:260px 1fr}.photo{max-width:260px}
.phead .himg.phimg{object-position:38% 50%}
.lframe{display:block;width:100%;height:85vh;min-height:560px;border:1px solid var(--line);border-radius:.5rem;background:#fff}

h1,h2,h3,.brand,.f2 .sig,.fcard h3,.card b,.lrow b,.book h3,.panel h3,.post h2,.post h3,.story .ch,.story .ch2,.ebook h3,.band h3,h2.sec,h3.sub{color:var(--head)}
.tabbar a:hover{color:var(--gold-text)}.tabbar a[aria-current="page"]{color:var(--head);border-bottom-color:var(--gold)}
.band .qsrc{color:var(--ink)}
.btn.s{color:var(--head);border-color:var(--head)}

.phead{margin-bottom:2.6rem}
.brand{display:inline-flex;align-items:center;gap:.6rem}
.logo{width:40px;height:40px;object-fit:contain}.lg-d{display:none}
:root[data-theme="dark"] .lg-l{display:none}:root[data-theme="dark"] .lg-d{display:inline-block}
.f2 .sig{display:inline-flex;align-items:center;gap:.7rem}.f2 .sig .logo{width:48px;height:48px}
.skillshead{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-top:2.2rem}
.skillshead h3.sub{margin:0}.snote{color:var(--muted);font-size:.95rem}
.sgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.8rem 3rem;margin:1.3rem 0}
.sg h4{font:600 1.08rem "Fraunces","Noto Serif Bengali",Georgia,serif;margin:0 0 .75rem;color:var(--head)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{display:inline-flex;align-items:center;gap:.5rem;padding:.38rem .9rem;border:1px solid var(--line);border-radius:2rem;background:var(--surface);font-size:.93rem;color:var(--ink)}
.ic{width:1.05rem;height:1.05rem;flex:none;color:var(--gold-text)}
.edu{border-top:1px solid var(--line);padding-top:1rem;margin:1.6rem 0 0;color:var(--muted)}.edu b{color:var(--head)}
.certs ul{list-style:none;padding:0;margin:0;columns:2 22rem;column-gap:2.5rem}
.certs li{display:flex;gap:.65rem;align-items:flex-start;margin:.55rem 0;break-inside:avoid}.certs .ci{flex:none;margin-top:.12rem}.certs .ic{width:1.15rem;height:1.15rem}
@media(max-width:800px){.sgrid{grid-template-columns:1fr}}


/* Brand colors for technology skill icons */
.chip[data-brand="redhat"] .ic{color:#EE0000}
.chip[data-brand="google"] .ic{color:#4285F4}
.chip[data-brand="cloud"] .ic,.chip[data-brand="cloud-upload"] .ic{color:#FF9900}
.chip[data-brand="docker"] .ic,.chip[data-brand="container"] .ic{color:#2496ED}
.chip[data-brand="linux"] .ic{color:#FCC624}
.chip[data-brand="vmware"] .ic{color:#607078}
.chip[data-brand="dell"] .ic{color:#007DB8}
.chip[data-brand="hitachi"] .ic{color:#D50000}
.chip[data-brand="cisco"] .ic{color:#049FD9}
/* Keep the icon colors legible in both light and dark themes. */
@media (prefers-contrast: more){.chip .ic{filter:saturate(1.05)}}