/* ICSETEP Project Page 3: technology theme that follows the CSE Varendra site (paper, ink, brick). Mobile first. */
.icx{--paper:#EEEBE5;--card:#F8F6F2;--ink:#0B1424;--ink2:#14213A;--mute:#4A5368;--brick:#C34A2B;--bt:#A63A1C;--blue:#1B4DB1;--sig:#8DB8FF;--hot:#F29A7C;--line:rgba(11,20,36,.2);--lined:rgba(255,255,255,.16);
--serif:"IBM Plex Serif",Georgia,"Noto Serif Bengali",serif;--sans:"IBM Plex Sans",system-ui,"Noto Sans Bengali","Segoe UI",sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
position:relative;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);overflow-x:clip;background:var(--paper);color:var(--ink);font:400 1rem/1.65 var(--sans);box-sizing:border-box}
.icx *,.icx *::before,.icx *::after{box-sizing:inherit}
.icx :where(img){max-width:100%;height:auto;display:block}
.icx :where(a){color:var(--bt)}
.icx :focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.icx-d :focus-visible{outline-color:var(--sig)}
.icx-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.icx-w{width:min(1200px,100% - 2rem);margin-inline:auto}
@media (min-width:1900px){.icx-w{width:min(1360px,100% - 4rem)}}
.icx :where(h1,h2,h3,h4){font-family:var(--serif);font-weight:600;line-height:1.2;margin:0;overflow-wrap:anywhere}
.icx :where(p){margin:0 0 1rem}
.icx :where(ul,ol){list-style:none;margin:0;padding:0}
.icx-d{background:var(--ink);color:#E6EBF5}
.icx-d :where(a){color:var(--sig)}
.icx-s{padding:3rem 0;scroll-margin-top:7.5rem}
.icx-s.alt{background:#E4E0D8}
@media (min-width:900px){.icx-s{padding:4.5rem 0}}
.icx-k{font:400 .78rem/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--bt);margin:0 0 .6rem}
.icx-d .icx-k{color:var(--hot)}
.icx-head{margin-bottom:1.75rem;max-width:46rem}
.icx-head h2{font-size:clamp(1.55rem,3.4vw,2.4rem)}
.icx-h3{font-size:1.25rem;margin:0 0 1rem}
.icx-two{display:grid;gap:2.25rem}
@media (min-width:900px){.icx-two{grid-template-columns:1.1fr 1fr;gap:3.5rem}}
.icx-link{font-weight:600}

/* logo strip */
.icx-strip{background:var(--paper);border-bottom:1px solid var(--line);padding:1rem 0}
.icx-logos{display:flex;align-items:center;justify-content:center;gap:clamp(1rem,4vw,2.5rem);flex-wrap:wrap}
.icx-logo{height:clamp(46px,9vw,64px);width:auto}

/* hero */
.icx-hero{position:relative;padding:2.5rem 0 0;overflow:hidden}
.icx-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--lined) 1px,transparent 1px),linear-gradient(90deg,var(--lined) 1px,transparent 1px);background-size:44px 44px;opacity:.5;-webkit-mask-image:linear-gradient(180deg,#000 10%,transparent 90%);mask-image:linear-gradient(180deg,#000 10%,transparent 90%);pointer-events:none}
.icx-hero-grid{position:relative;display:grid;gap:2rem;align-items:center}
@media (min-width:900px){.icx-hero-grid{grid-template-columns:1.25fr 1fr;gap:3rem}.icx-hero{padding-top:4rem}}
.icx-chip{display:inline-flex;align-items:center;gap:.6rem;font:400 .8rem var(--mono);border:1px solid var(--lined);padding:.3rem .75rem;margin:0 0 1.1rem;color:#C9D3E6}
.icx-chip span{background:var(--brick);color:#fff;padding:0 .45rem;font-weight:400}
.icx-hero h1{font-size:clamp(2rem,6.4vw,3.9rem);letter-spacing:-.01em;color:#fff;margin-bottom:.9rem}
.icx-sub{font-size:clamp(1.05rem,2.4vw,1.35rem);color:#fff;font-weight:500;max-width:36rem}
.icx-meta{font:400 .85rem/1.7 var(--mono);color:#B9C6DE}
.icx-lead{max-width:36rem;color:#D3DBEA}
.icx-btns{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}
.icx-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.7rem 1.2rem;font-weight:600;text-decoration:none;border:2px solid currentColor;color:var(--ink)}
.icx-btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.icx-d .icx-btn{color:#fff;border-color:var(--lined)}
.icx-d .icx-btn:hover{background:#fff;color:var(--ink);border-color:#fff}
.icx .icx-btn.p,.icx-d .icx-btn.p{background:var(--brick);border-color:var(--brick);color:#fff}
.icx .icx-btn.p:hover{background:#fff;color:var(--bt);border-color:#fff}
.icx-d .icx-btn.ghost{border-color:transparent;color:var(--sig);text-decoration:underline;padding-inline:.4rem}
.icx-scope{position:relative;border:1px solid var(--lined);background:rgba(20,33,58,.7);padding:1rem}
.icx-amph-wrap{background:var(--paper);padding:.7rem 1rem;width:fit-content;max-width:100%;margin:0 auto 1rem}
.icx-amph{width:min(150px,100%);margin:0 auto}
.icx-scope svg{width:100%;height:110px;display:block}
.icx-scope .g{stroke:var(--lined);stroke-width:1;fill:none}
.icx-scope .t,.icx-ch .t{fill:none;stroke:var(--sig);stroke-width:1.6;stroke-linejoin:round;stroke-dasharray:1800;stroke-dashoffset:1800;animation:icx-draw 3.5s ease-out forwards;animation-delay:var(--d,0s)}
.icx-scope-l{position:absolute;right:.75rem;top:.5rem;font:400 .72rem var(--mono);color:#9FB4D8}
@keyframes icx-draw{to{stroke-dashoffset:0}}
.icx-facts{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:2.25rem;margin-bottom:0;border-top:1px solid var(--lined)}
@media (min-width:700px){.icx-facts{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.icx-facts{grid-template-columns:repeat(6,1fr)}}
.icx-facts div{padding:1rem .9rem 1.1rem 0;border-bottom:1px solid var(--lined)}
.icx-facts dt{font:400 .72rem var(--mono);letter-spacing:.05em;text-transform:uppercase;color:#9FB4D8;margin-bottom:.25rem}
.icx-facts dd{margin:0;font-weight:600;color:#fff;overflow-wrap:anywhere}

/* jump nav */
.icx .icx-jump{display:block;margin:0;max-height:none;overflow:visible;left:auto;right:auto;position:sticky;top:calc(76px + env(safe-area-inset-top,0px));z-index:9;background:var(--paper);border-bottom:1px solid var(--line)}
.icx-jump ul{margin-inline:auto;display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:.35rem 0}
.icx-jump ul::-webkit-scrollbar{display:none}
.icx-jump a{display:block;white-space:nowrap;padding:.55rem .8rem;color:var(--ink);text-decoration:none;font-weight:500;font-size:.92rem;border-bottom:2px solid transparent;min-height:44px}
.icx-jump a:hover,.icx-jump a[aria-current]{border-color:var(--brick);color:var(--bt)}

/* about, research, pipeline, method */
.icx-why{counter-reset:w;display:grid;gap:.9rem}
.icx-why li{counter-increment:w;position:relative;padding:1rem 1rem 1rem 3.4rem;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--brick)}
.icx-why li::before{content:counter(w,decimal-leading-zero);position:absolute;left:1rem;top:1rem;font:400 .85rem var(--mono);color:var(--bt)}
.icx-why h3{font-size:1.05rem;margin-bottom:.25rem}.icx-why p{margin:0;color:var(--mute);font-size:.95rem}
.icx-areas{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.icx-areas li{background:var(--card);border:1px solid var(--line);padding:1.25rem;display:grid;gap:.4rem;align-content:start}
.icx-areas li:hover{border-color:var(--brick)}
.icx-i{width:34px;height:34px;color:var(--brick)}
.icx-d .icx-i{color:var(--sig)}
.icx-areas h3{font-size:1.1rem}.icx-areas p{margin:0;color:var(--mute);font-size:.95rem}
.icx-flow{display:grid;gap:0;counter-reset:f}
.icx-flow li{position:relative;display:grid;grid-template-columns:auto 34px 1fr;align-items:center;gap:.9rem;padding:.9rem 0 .9rem 0}
.icx-flow li:not(:last-child)::after{content:"";position:absolute;left:1.05rem;top:100%;width:2px;height:0;background:var(--sig)}
.icx-flow li{border-left:2px solid var(--sig);padding-left:1rem;margin-left:.45rem}
.icx-flow .n{font:400 .8rem var(--mono);color:var(--hot)}
.icx-flow .l{font-weight:600;color:#fff}
@media (min-width:760px){
.icx-flow{grid-template-columns:repeat(4,1fr);gap:1.25rem 0}
.icx-flow li{grid-template-columns:1fr;grid-template-rows:auto auto auto;justify-items:start;gap:.5rem;border-left:0;margin:0;padding:1.1rem 1.1rem 1.1rem 0;border-top:2px solid var(--sig)}
.icx-flow li::before{content:"";position:absolute;top:-6px;left:0;width:10px;height:10px;background:var(--ink);border:2px solid var(--sig);border-radius:50%}
.icx-flow li::after{display:none}}
.icx-steps{display:grid;gap:0;counter-reset:s}
@media (min-width:900px){.icx-steps{grid-template-columns:1fr 1fr;column-gap:3rem}}
.icx-steps li{display:grid;grid-template-columns:3rem 1fr;gap:.75rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.icx-steps .n{font:400 1.5rem var(--mono);color:var(--brick)}
.icx-steps h3{font-size:1.1rem;margin-bottom:.2rem}.icx-steps p{margin:0;color:var(--mute);font-size:.95rem}
.icx-soon{color:var(--mute);font-size:.95rem}.icx-d .icx-soon{color:#B9C6DE}
.icx-tags{display:flex;flex-wrap:wrap;gap:.5rem}
.icx-tags li{font:400 .82rem var(--mono);border:1px solid var(--lined);padding:.25rem .7rem;color:#C9D3E6}
.icx-tags.big li{font:400 .92rem var(--sans);color:var(--ink);border-color:var(--line);background:var(--card);padding:.45rem .8rem}
.icx-ch{border:1px solid var(--lined);background:rgba(20,33,58,.7);padding:1rem}
.icx-ch svg{width:100%;height:auto;display:block}
.icx-ch .cl{font:400 11px var(--mono);fill:#9FB4D8}
.icx-ch .t{stroke-width:1.3;stroke-dasharray:1400;stroke-dashoffset:1400;animation-duration:3s}
.icx-q{margin:0;padding:1.25rem 1.25rem 1.25rem 1.5rem;border-left:5px solid var(--brick);background:var(--card);font:500 clamp(1.1rem,2.2vw,1.4rem)/1.5 var(--serif)}
.icx-goals li{position:relative;padding:.6rem 0 .6rem 1.6rem;border-bottom:1px solid var(--line)}
.icx-goals li::before{content:"";position:absolute;left:0;top:1.05rem;width:10px;height:10px;border:2px solid var(--brick)}

/* partners and team */
.icx-partners{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.icx-partners li{background:var(--card);border:1px solid var(--line);padding:1.25rem;display:flex;flex-direction:column}
.icx-partners .lg{height:70px;display:flex;align-items:center;margin-bottom:.9rem}
.icx-partners .lg img{max-height:64px;width:auto;max-width:100%}
.icx-role{font:400 .75rem var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--bt);margin:0 0 .3rem}
.icx-partners h3{font-size:1.05rem;margin-bottom:.4rem}.icx-partners p{font-size:.93rem;color:var(--mute)}
.icx-grp{margin-bottom:2.25rem}
.icx-team{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.icx-person{display:grid;grid-template-columns:84px minmax(0,1fr);gap:1rem;padding:1rem;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--brick)}
.icx-ph img,.icx-mono{width:84px;height:84px;object-fit:cover;object-position:50% 25%}
.icx-mono{display:flex;align-items:center;justify-content:center;background:var(--ink);color:var(--paper);font:600 1.5rem var(--serif)}
.icx-person h4{font-size:1.05rem;margin-bottom:.2rem}
.icx-person p{margin:0 0 .25rem;font-size:.9rem;overflow-wrap:anywhere}
.icx-person .r{font-weight:600}.icx-person .a{color:var(--mute)}
.icx-person .l{display:flex;flex-wrap:wrap;gap:.35rem 1rem;margin-top:.45rem}
.icx-person .l a{min-height:24px;display:inline-flex;align-items:center;gap:.35rem;max-width:100%;min-width:0;overflow-wrap:anywhere;word-break:break-word}
.icx-person .b{background:var(--blue);color:#fff;font:700 .7rem var(--sans);padding:.05rem .3rem}
@media (max-width:360px){.icx-person{grid-template-columns:64px minmax(0,1fr)}.icx-ph img,.icx-mono{width:64px;height:64px}}

/* events, notices, gallery, contact */
.icx-events{display:grid;gap:2rem}
.icx-events>li{display:grid;gap:1rem;grid-template-columns:76px 1fr;padding-bottom:2rem;border-bottom:1px solid var(--line)}
@media (min-width:700px){.icx-events>li{grid-template-columns:96px 1fr;gap:1.5rem}}
.icx-date{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--ink);color:#fff;padding:.6rem .3rem;font:400 .78rem var(--mono);text-align:center;align-self:start}
.icx-date b{font:600 1.8rem var(--serif);line-height:1}
.icx-ev h3{font-size:clamp(1.15rem,2.4vw,1.45rem);margin-bottom:.4rem}.icx-ev p{max-width:46rem}
.icx-thumbs{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(min(46%,150px),1fr));margin-top:.75rem}
.icx-thumbs a{display:block;aspect-ratio:4/3;overflow:hidden;background:#ccc}
.icx-thumbs img,.icx-gal img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.icx-thumbs a:hover img,.icx-gal a:hover img{transform:scale(1.04)}
.icx-notes{display:grid;gap:1rem;margin-bottom:1.5rem}
.icx-notes li{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--brick);padding:1.1rem 1.25rem}
.icx-notes .m{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;font:400 .82rem var(--mono);color:var(--mute);margin-bottom:.4rem}
.icx-tag{border:1px solid var(--line);padding:0 .5rem}
.icx-notes h3{font-size:1.1rem;margin-bottom:.4rem}.icx-notes h3 a{color:var(--ink)}.icx-notes h3 a:hover{color:var(--bt)}
.icx-notes p:last-child{margin:0;color:var(--mute);font-size:.95rem}
.icx-gal{display:grid;gap:.6rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){.icx-gal{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.icx-gal{grid-template-columns:repeat(5,1fr)}}
.icx-gal a{display:block;position:relative;aspect-ratio:1/1;overflow:hidden}
.icx-gal span{position:absolute;left:0;right:0;bottom:0;padding:1.5rem .6rem .5rem;font-size:.75rem;line-height:1.3;color:#fff;background:linear-gradient(transparent,rgba(11,20,36,.9))}
.icx-cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.icx-cards li{border:1px solid var(--lined);padding:1.25rem;background:rgba(20,33,58,.6)}
.icx-cards h3{font-size:1.05rem;margin-bottom:.5rem;color:#fff}.icx-cards p{margin:0 0 .5rem;font-size:.95rem;overflow-wrap:anywhere}
.icx-support{padding:2rem 0 2.5rem}
.icx-sup{display:flex;flex-wrap:wrap;gap:1.25rem 2.5rem;align-items:center;margin-bottom:1.5rem}
.icx-sup li{display:flex;align-items:center;gap:.9rem;font-size:.92rem;font-weight:500}
.icx-sup img{height:52px;width:auto}
.icx-foot{font-size:.88rem;color:var(--mute);margin:0}

/* photo viewer */
.icx-lb{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;color:#fff}
.icx-lb::backdrop{background:rgba(5,10,20,.92)}
.icx-lb figure{margin:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3.5rem 1rem 1.5rem}
.icx-lb img{max-width:100%;max-height:calc(100vh - 9rem);width:auto;height:auto;object-fit:contain}
.icx-lb figcaption{margin-top:.8rem;text-align:center;font-size:.92rem;max-width:40rem}
.icx-lb button{position:absolute;width:48px;height:48px;border:2px solid #fff;background:rgba(11,20,36,.6);color:#fff;font:400 1.6rem/1 var(--sans);cursor:pointer}
.icx-lb .x{top:.75rem;right:.75rem}
.icx-lb .pv,.icx-lb .nx{top:50%;transform:translateY(-50%)}
.icx-lb .pv{left:.5rem}.icx-lb .nx{right:.5rem}
.icx-lb .pv::before,.icx-lb .nx::before{content:"";display:block;width:10px;height:10px;border:solid #fff;border-width:0 0 2px 2px;margin:auto;transform:rotate(45deg)}
.icx-lb .nx::before{transform:rotate(-135deg)}
@media (prefers-reduced-motion:reduce){.icx-scope .t,.icx-ch .t{animation:none;stroke-dashoffset:0}.icx-thumbs img,.icx-gal img{transition:none}}
@media print{.icx-jump,.icx-lb{display:none}.icx-d{background:#fff;color:#000}}