/* =========================================================
   Md. Meherab Hossen — portfolio
   Palette borrowed from CFD post-processing: slate-white
   background, ink navy rail, and one thermal colour ramp
   used as the site's only bold element.
   ========================================================= */

:root{
  --paper:#eef1f5;
  --surface:#ffffff;
  --ink:#0e1922;
  --ink-2:#4a5a68;
  --ink-3:#586977;
  --rule:#d4dbe2;
  --rail:#0e1922;
  --rail-ink:#c6d2dc;
  --rail-ink-dim:#acbdc9;
  --link:#14548f;
  --link-hover:#0d3f6d;
  --ramp:linear-gradient(90deg,#2b2fa8,#1d8fd1,#2fbf9e,#cfcb3a,#e0762a,#c22e1f);

  --rail-w:264px;
  --pad:clamp(1.25rem,4vw,3.25rem);
  --measure:68ch;

  --f-head:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Newsreader",Georgia,"Times New Roman",serif;
}

[data-theme="dark"]{
  --paper:#0c1319;
  --surface:#131d26;
  --ink:#e4ebf1;
  --ink-2:#a4b3bf;
  --ink-3:#a0afbb;
  --rule:#26333d;
  --rail:#080d12;
  --link:#7cb8ee;
  --link-hover:#a8d1f5;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-padding-top:1.5rem}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(1rem,.96rem + .2vw,1.08rem);
  line-height:1.7;
  font-weight:400;
}

img{max-width:100%;display:block}
[hidden]{display:none!important}
body.drawer-open{overflow:hidden}

a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--link-hover)}

:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:2px}

h1,h2,h3{font-family:var(--f-head);font-weight:600;line-height:1.15;letter-spacing:-.015em;margin:0}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.skip{
  position:absolute;left:-999px;top:0;z-index:99;
  background:var(--ink);color:#fff;padding:.6rem 1rem;font-family:var(--f-head);
}
.skip:focus{left:0}

/* ---------- the thermal ramp ---------- */
.scale{height:5px;width:132px;background:var(--ramp);border-radius:1px}

/* =========================================================
   LEFT RAIL
   ========================================================= */
.rail{
  position:fixed;inset:0 auto 0 0;width:var(--rail-w);
  background:var(--rail);color:var(--rail-ink);
  display:flex;flex-direction:column;
  padding:2.25rem 0 1.25rem;
  overflow-y:auto;z-index:40;
}

.rail__head{padding:0 1.75rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.09)}

.avatar{width:62px;height:62px;border-radius:50%;overflow:hidden;background:#1d2a35;margin-bottom:1rem}
.avatar img{width:100%;height:100%;object-fit:cover}

.rail__name{
  font-family:var(--f-head);font-size:1.3rem;font-weight:600;line-height:1.2;
  color:#fff;margin:0 0 .35rem;letter-spacing:-.02em;
}
.rail__role{margin:0;font-size:.85rem;line-height:1.45;color:var(--rail-ink-dim)}
.rail__degree{margin-top:.65rem}
.rail :focus-visible,.topbar :focus-visible,.hero :focus-visible{outline-color:#9bd3ff}

.menu{list-style:none;margin:1.25rem 0 auto;padding:0 .9rem;font-family:var(--f-head);font-size:.95rem}
.menu a{
  display:block;padding:.5rem .85rem;color:var(--rail-ink);
  text-decoration:none;border-radius:3px;position:relative;
}
.menu a:hover{background:rgba(255,255,255,.07);color:#fff}
.menu a.is-current{color:#fff;background:rgba(255,255,255,.09)}
.menu a.is-current::before{
  content:"";position:absolute;left:-.9rem;top:.45rem;bottom:.45rem;width:3px;
  background:var(--ramp);background-size:3px 100%;border-radius:2px;
}

.menu__group{margin:.35rem 0}
.menu__label{
  display:block;padding:.5rem .85rem .2rem;color:var(--rail-ink-dim);font-size:.88rem;
}
.menu__group ul{list-style:none;margin:0;padding:0 0 0 .85rem}
.menu summary{padding:.65rem .85rem;cursor:pointer;color:var(--rail-ink-dim);font-size:.85rem}
.menu summary:hover{color:#fff}

.rail__foot{padding:1.25rem 1.75rem 0;border-top:1px solid rgba(255,255,255,.09)}

.theme{
  display:inline-flex;align-items:center;gap:.5rem;background:none;border:1px solid rgba(255,255,255,.2);
  color:var(--rail-ink);font-family:var(--f-head);font-size:.82rem;
  padding:.35rem .7rem;border-radius:99px;cursor:pointer;
}
.theme:hover{border-color:rgba(255,255,255,.45);color:#fff}
.theme__dot{width:9px;height:9px;border-radius:50%;background:var(--ramp)}

.rail__copy{margin:1rem 0 0;font-size:.75rem;color:var(--rail-ink-dim)}

/* ---------- mobile top bar ---------- */
.topbar{
  display:none;position:sticky;top:0;z-index:45;
  background:var(--rail);color:#fff;
  padding:.75rem 1rem;align-items:center;justify-content:space-between;
}
.topbar__name{font-family:var(--f-head);font-weight:600;font-size:1rem}
.burger{background:none;border:0;padding:.65rem;cursor:pointer;display:grid;align-content:center;gap:4px;min-width:44px;min-height:44px}
.burger span{display:block;width:22px;height:2px;background:#fff}

.scrim{position:fixed;inset:0;background:rgba(6,11,15,.55);z-index:35}

/* =========================================================
   MAIN
   ========================================================= */
main{margin-left:var(--rail-w);min-height:100vh;display:flex;flex-direction:column}

.page{display:none;flex:1}
.page.is-active{display:block}

.wrap{padding:var(--pad);max-width:1080px}

.lead{font-size:1.12rem;color:var(--ink-2);max-width:var(--measure);margin:0 0 2.5rem}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--rail);color:#fff;min-height:clamp(320px,54vh,520px);display:flex}
.hero__img{position:absolute;inset:0;overflow:hidden}
.hero__img img{width:100%;height:100%;object-fit:cover;opacity:.3}
.hero__img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,25,34,.55),transparent)}
.hero__body{position:relative;align-self:flex-end;padding:var(--pad);max-width:58rem}
.hero__eyebrow{font-family:var(--f-head);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:#bed6e6;margin:0 0 1.1rem}
.hero__title{
  font-size:clamp(2.35rem,5.5vw,4.25rem);font-weight:700;letter-spacing:-.035em;color:#fff;
  margin:0 0 .5rem;
}
.hero__sub{font-size:clamp(1.1rem,2.2vw,1.35rem);margin:0 0 1.15rem;color:#edf3f7;max-width:53ch}
.hero .scale{margin-bottom:1.1rem}
.hero__meta{margin:0 0 1.6rem;font-size:.92rem;color:#c5d5e0;font-family:var(--f-head)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem}

.btn{
  display:inline-block;font-family:var(--f-head);font-size:.92rem;font-weight:500;
  padding:.62rem 1.15rem;border:1px solid currentColor;border-radius:2px;
  color:#fff;text-decoration:none;background:none;
}
.hero .btn:hover{background:rgba(255,255,255,.12);color:#fff}
.btn--solid{background:#fff;color:var(--rail);border-color:#fff}
.hero .btn--solid:hover{background:#dfe8ef;color:var(--rail)}

.wrap .btn{color:var(--ink);border-color:var(--ink)}
.wrap .btn:hover{background:var(--ink);color:var(--paper)}
.wrap .btn--solid{background:var(--ink);color:var(--paper)}
.wrap .btn--solid:hover{background:var(--link);border-color:var(--link);color:#fff}

/* ---------- page banner ---------- */
.banner{background:var(--rail);color:#fff;padding:clamp(2.5rem,6vw,4rem) var(--pad) clamp(1.75rem,4vw,2.5rem)}
.banner h1{font-size:clamp(2rem,4.5vw,3rem);color:#fff;margin-bottom:1rem}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:minmax(180px,260px) 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start;margin-bottom:3.5rem}
.portrait{margin:0}
.portrait img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:2px}

.prose h2{font-size:1.5rem;margin-bottom:.9rem}
.prose p{max-width:var(--measure);margin:0 0 1rem}

/* ---------- selected research ---------- */
.section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.section-heading h2{font-size:1.65rem}
.section-intro{margin:.8rem 0 1.5rem;color:var(--ink-2);max-width:var(--measure)}
.research-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.research-card{background:var(--surface);border:1px solid var(--rule);border-radius:5px;overflow:hidden}
.research-card__image{display:block;background:#fff;padding:1rem;border-bottom:1px solid var(--rule)}
.research-card__image img{width:100%;height:220px;object-fit:contain}
.research-card__body{padding:1.5rem}
.research-card__label{font-family:var(--f-head);font-size:.74rem;line-height:1.6;color:var(--ink-3);margin:0 0 .7rem}
.research-card h3{font-size:1.25rem;line-height:1.3}
.research-card h3 a{color:var(--ink);text-decoration:none}
.research-card h3 a:hover{color:var(--link);text-decoration:underline}
.research-card__body>p:not(.research-card__label){color:var(--ink-2);font-size:1rem;margin:.8rem 0 1rem}
.research-note{padding:1rem 0;margin:0;font-size:.98rem;color:var(--ink-2);border-bottom:1px solid var(--rule)}
.research-figure{max-width:650px;margin-top:1.5rem}
.research-figure .film__box{display:block;aspect-ratio:auto;padding:1rem}
.research-figure img{height:auto;max-height:450px;object-fit:contain}
[id^="research-"],.pubs li{scroll-margin-top:1.5rem}

/* ---------- blocks ---------- */
.block{margin:0 0 3.25rem}
.block__title{
  font-size:1.05rem;font-weight:600;padding-bottom:.5rem;margin-bottom:1.5rem;
  border-bottom:1px solid var(--rule);
}

/* ---------- activity log ---------- */
.log{list-style:none;margin:0;padding:0}
.log li{display:grid;grid-template-columns:5.5rem 1fr;gap:1.25rem;align-items:start}
.log__year{font-family:var(--f-head);font-size:1.5rem;font-weight:600;color:var(--ink-3);line-height:1.3}
.log p{margin:0 0 .5rem;max-width:var(--measure)}

/* ---------- tags ---------- */
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:0}
.tags li{
  font-family:var(--f-head);font-size:.88rem;
  border:1px solid var(--rule);background:var(--surface);
  padding:.35rem .75rem;border-radius:99px;color:var(--ink-2);
}

/* ---------- education ---------- */
.edu{list-style:none;margin:0;padding:0}
.edu__item{
  display:grid;grid-template-columns:96px 1fr;gap:clamp(1rem,3vw,2.25rem);
  padding:2rem 0;border-bottom:1px solid var(--rule);
}
.edu__item:first-child{padding-top:0}
.edu__item:last-child{border-bottom:0}
.edu__logo img{width:96px;height:96px;object-fit:contain}
.edu__degree{margin:0 0 .2rem;font-family:var(--f-head);font-size:.9rem;color:var(--ink-3)}
.edu__body h2{font-size:1.4rem;margin-bottom:.3rem}
.edu__where{margin:0 0 1rem;color:var(--ink-2);font-style:italic}

.facts{display:grid;grid-template-columns:auto 1fr;gap:.25rem 1.25rem;margin:0;font-size:.95rem}
.facts dt{font-family:var(--f-head);font-size:.85rem;color:var(--ink-3);align-self:center}
.facts dd{margin:0;color:var(--ink)}

/* ---------- work items (projects + research) ---------- */
.work{
  border-left:3px solid var(--rule);
  padding:0 0 0 clamp(1rem,2.5vw,1.75rem);
  margin:0 0 2.75rem;
}
.work:hover{border-left-color:var(--link)}
.work h2{font-size:1.35rem;margin-bottom:.5rem;max-width:32ch}
.work__spec{
  font-family:var(--f-head);font-size:.86rem;color:var(--ink-3);
  margin:0 0 .9rem;
}
.work__spec b{color:var(--ink-2);font-weight:600}
.work p{max-width:var(--measure);margin:0 0 .8rem}
.work__team,.work__note{font-size:.92rem;color:var(--ink-2)}
.work__note{border-left:2px solid var(--rule);padding-left:.85rem}

.ticks{margin:0 0 .9rem;padding-left:1.1rem;max-width:var(--measure)}
.ticks li{margin-bottom:.4rem}
.ticks li::marker{color:var(--ink-3)}

.doclink{
  display:inline-block;font-family:var(--f-head);font-size:.88rem;
  text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px;
}
.doclink:hover{border-bottom-width:2px}

/* ---------- simulation films ---------- */
.films{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem}
.film{margin:0}
.film__box{aspect-ratio:16/10;background:#fff;border:1px solid var(--rule);overflow:hidden;margin-bottom:.7rem;padding:.5rem}
.film__box img{width:100%;height:100%;object-fit:contain}
.film figcaption{font-size:.92rem;color:var(--ink-2);margin-bottom:.5rem;line-height:1.5}

/* ---------- certificates ---------- */
.cert{
  display:grid;grid-template-columns:1fr minmax(240px,360px);
  gap:clamp(1.25rem,3vw,2.5rem);align-items:start;
  padding:2rem 0;border-bottom:1px solid var(--rule);
}
.cert:first-of-type{padding-top:0}
.cert:last-of-type{border-bottom:0}
.cert h2{font-size:1.3rem;margin-bottom:.25rem}
.cert__by{margin:0 0 .9rem;font-family:var(--f-head);font-size:.86rem;color:var(--ink-3)}
.cert__body p{max-width:var(--measure)}
.cert__shot{border:1px solid var(--rule);background:var(--surface);padding:.4rem}
.cert__shot img{width:100%;aspect-ratio:4/3;object-fit:contain}

/* ---------- skills ---------- */
.skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:1.75rem 2.5rem}
.skill h3{font-size:1.08rem;margin-bottom:.3rem}
.skill__tools{margin:0 0 .55rem;font-family:var(--f-head);font-size:.88rem;color:var(--link)}
.skill .ticks{margin-bottom:0;font-size:.97rem}

/* ---------- gallery / team ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem}
.gallery figure,.team figure{margin:0}
.shot{background:var(--surface);border:1px solid var(--rule);aspect-ratio:4/3;overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover}
.gallery figcaption{margin-top:.6rem;font-size:.92rem;color:var(--ink-2);line-height:1.5}

.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:1.5rem}

/* ---------- achievements ---------- */
.award{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start;margin-bottom:3.5rem}
.award__shot{border:1px solid var(--rule);background:var(--surface)}
.award__shot img{width:100%;aspect-ratio:3/4;object-fit:cover}
.award h2{font-size:1.55rem;margin-bottom:.35rem;max-width:20ch}
.award__where{margin:0 0 1rem;font-family:var(--f-head);font-size:.88rem;color:var(--ink-3)}
.award__body p{max-width:var(--measure)}

/* ---------- empty state ---------- */
.empty{border:1px dashed var(--rule);padding:clamp(1.75rem,5vw,3rem);max-width:var(--measure);background:var(--surface)}
.empty h2{font-size:1.25rem;margin-bottom:.6rem}
.empty p{margin:0 0 1.5rem;color:var(--ink-2)}

/* ---------- publications list ---------- */
.pubs{margin:0;padding-left:1.4rem;max-width:var(--measure)}
.pubs li{margin-bottom:1.5rem}
.pub__title{margin:0 0 .2rem;font-family:var(--f-head);font-weight:600}
.pub__meta{margin:0 0 .4rem;font-size:.92rem;color:var(--ink-3)}

/* ---------- contact ---------- */
.contact{list-style:none;margin:0 0 2.5rem;padding:0;max-width:var(--measure)}
.contact li{
  display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;
  padding:.85rem 0;border-bottom:1px solid var(--rule);
}
.contact__k{font-family:var(--f-head);font-size:.88rem;color:var(--ink-3)}
.contact a{overflow-wrap:anywhere}

/* ---------- footer ---------- */
.foot{
  margin-left:0;padding:1.5rem var(--pad);
  border-top:1px solid var(--rule);font-size:.85rem;color:var(--ink-3);
}
.foot p{margin:0}

/* ---------- image fallback ---------- */
.is-missing{
  background:
    repeating-linear-gradient(45deg,transparent,transparent 9px,rgba(123,138,151,.14) 9px,rgba(123,138,151,.14) 10px);
  position:relative;
}
.is-missing img{display:none}
.is-missing::after{
  content:attr(data-hint);
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  font-family:var(--f-head);font-size:.78rem;color:var(--ink-3);padding:.75rem;
}
.avatar.is-missing::after,.edu__logo.is-missing::after{content:""}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:960px){
  html{scroll-padding-top:5rem}
  .topbar{display:flex;height:68px}
  main,.foot{margin-left:0}
  .rail{
    top:68px;
    transform:translateX(-100%);transition:transform .22s ease;
    width:min(84vw,300px);box-shadow:0 0 40px rgba(0,0,0,.3);
  }
  .rail.is-open{transform:none}
  .about,.award{grid-template-columns:1fr}
  .portrait{max-width:240px}
  .portrait img{aspect-ratio:4/5}
  .award__shot img{aspect-ratio:4/3}
  .cert{grid-template-columns:1fr}
  .cert__shot{order:-1}
}

@media (max-width:560px){
  .research-grid{grid-template-columns:1fr}
  .research-card__image img{height:200px}
  .edu__item{grid-template-columns:1fr}
  .edu__logo img{width:72px;height:72px}
  .log li{grid-template-columns:1fr;gap:.25rem}
  .contact li{grid-template-columns:1fr;gap:.1rem}
  .hero__cta .btn{flex:1 1 auto;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

@media print{
  .rail,.topbar,.scrim,.hero__cta{display:none}
  main,.foot{margin-left:0}
  .page{display:block!important}
  body{background:#fff}
}