/* alihossain.bd — court paper, ink, seal oxblood */

:root{
  --paper:#F7F5F0;
  --paper-2:#EFEBE3;
  --ink:#1A1D1A;
  --ink-soft:#4A4F49;
  --muted:#6B6F68;
  --rule:#D8D3C7;
  --seal:#8C2B24;
  --seal-soft:#A9463E;
  --court:#14432E;
  --on-court:#EDE9DF;

  --bn-serif:"Noto Serif Bengali","Hind Siliguri","Nirmala UI",serif;
  --bn-sans:"Hind Siliguri","Nirmala UI",system-ui,sans-serif;
  --en-display:"Fraunces",Georgia,"Times New Roman",serif;

  --wrap:min(68rem,100% - 2.5rem);
  --col:min(38rem,100%);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#14170F; --paper-2:#1D2118;
    --ink:#EAE6DA; --ink-soft:#BDB9AC; --muted:#8F9488;
    --rule:#333829; --seal:#D9736A; --seal-soft:#C4564C;
    --court:#B9C9BB; --on-court:#14170F;
  }
}
:root[data-theme="dark"]{
  --paper:#14170F; --paper-2:#1D2118;
  --ink:#EAE6DA; --ink-soft:#BDB9AC; --muted:#8F9488;
  --rule:#333829; --seal:#D9736A; --seal-soft:#C4564C;
  --court:#B9C9BB; --on-court:#14170F;
}

*{box-sizing:border-box}
img{max-width:100%;height:auto}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--bn-sans);font-size:1.0625rem;line-height:1.7;
  -webkit-font-smoothing:antialiased;padding-bottom:4.5rem;
}
@media (min-width:52rem){ body{padding-bottom:0} }

.wrap{width:var(--wrap);margin-inline:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--seal);outline-offset:3px;border-radius:2px}

[data-lang]{display:none}
html[lang="bn"] [data-lang="bn"],
html[lang="en"] [data-lang="en"]{display:block}
html[lang="bn"] span[data-lang="bn"],
html[lang="en"] span[data-lang="en"],
html[lang="bn"] dt[data-lang="bn"],
html[lang="en"] dt[data-lang="en"]{display:inline}

/* masthead */
.masthead{border-bottom:1px solid var(--rule);background:var(--paper);position:sticky;top:0;z-index:40}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.85rem}
.mark{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.mark .glyph{
  width:2.2rem;height:2.2rem;flex:none;border:1px solid var(--seal);color:var(--seal);
  display:grid;place-items:center;font-family:var(--bn-serif);font-size:1.15rem;line-height:1;padding-top:.15rem;
}
.mark .who{font-family:var(--bn-serif);font-weight:600;font-size:1rem;letter-spacing:.01em;line-height:1.25}
.mark .where{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-family:var(--bn-sans)}
.mast-actions{display:flex;align-items:center;gap:.5rem}
.langbtn{
  font:inherit;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  background:none;border:1px solid var(--rule);color:var(--ink-soft);padding:.4rem .65rem;cursor:pointer;
}
.langbtn:hover{border-color:var(--seal);color:var(--seal)}
.mast-call{display:none;text-decoration:none;font-weight:600;font-size:.9rem;background:var(--seal);color:#F7F5F0;padding:.5rem .95rem}
@media (min-width:52rem){ .mast-call{display:inline-block} }

/* hero seal */
.hero{padding-block:clamp(3rem,9vw,6rem)}
.seal{width:var(--col);border:1px solid var(--rule);border-top:3px solid var(--seal);padding:clamp(1.6rem,5vw,2.6rem);background:var(--paper-2)}
.seal .eyebrow{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--seal);margin:0 0 1.1rem;font-family:var(--bn-sans)}
.seal h1{font-family:var(--bn-serif);font-weight:700;font-size:clamp(1.9rem,6.5vw,3rem);line-height:1.22;margin:0 0 .5rem;text-wrap:balance;letter-spacing:-.01em}
html[lang="en"] .seal h1{font-family:var(--en-display);font-weight:500}
.seal .role{margin:0;color:var(--ink-soft);font-size:1.05rem}
.seal .divider{height:1px;background:var(--rule);margin:1.4rem 0}
.seal dl{margin:0;display:grid;gap:.6rem}
.seal .row{display:flex;gap:.9rem;align-items:baseline}
.seal dt{flex:none;width:6.5rem;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.seal dd{margin:0;font-weight:500}

.lede{width:var(--col);margin-top:2.2rem;color:var(--ink-soft);font-size:1.1rem}
.lede p{margin:0 0 1rem}

.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem}
.btn{text-decoration:none;font-weight:600;font-size:1rem;padding:.8rem 1.4rem;border:1px solid transparent;display:inline-block}
.btn-primary{background:var(--seal);color:#F7F5F0}
.btn-primary:hover{background:var(--seal-soft)}
.btn-ghost{border-color:var(--rule);color:var(--ink)}
.btn-ghost:hover{border-color:var(--seal);color:var(--seal)}

/* sections */
section{padding-block:clamp(2.6rem,7vw,4.5rem);border-top:1px solid var(--rule)}
.sec-head{margin-bottom:2rem}
.sec-head .num{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--seal);margin-bottom:.5rem}
.sec-head h2{font-family:var(--bn-serif);font-weight:600;font-size:clamp(1.35rem,4vw,1.8rem);margin:0;line-height:1.3;text-wrap:balance}
html[lang="en"] .sec-head h2{font-family:var(--en-display);font-weight:500}
.sec-head p{margin:.6rem 0 0;color:var(--muted);max-width:34rem}

/* practice — reads like a cause list */
.practice{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.practice li{border-bottom:1px solid var(--rule);padding:1.15rem 0}
.practice .pair{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .9rem}
.practice .bn{font-family:var(--bn-serif);font-weight:600;font-size:1.15rem}
.practice .en{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.practice .note{margin:.35rem 0 0;color:var(--ink-soft);font-size:.96rem;max-width:44rem}

/* credentials */
.creds{display:grid;gap:1.5rem}
@media (min-width:44rem){ .creds{grid-template-columns:1fr 1fr;gap:2rem} }
.cred{border-left:2px solid var(--seal);padding-left:1.1rem}
.cred h3{margin:0 0 .2rem;font-size:1.05rem;font-weight:600}
.cred .meta{margin:0;color:var(--muted);font-size:.9rem}

/* chamber */
.chamber{display:grid;gap:2rem}
@media (min-width:48rem){ .chamber{grid-template-columns:1.1fr .9fr;gap:3rem} }
.chamber .addr{margin-top:0}
.hours{border:1px solid var(--rule);padding:1.4rem}
.hours h3{margin:0 0 .9rem;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:600}
.hours dl{margin:0;display:grid;gap:.55rem}
.hours .row{display:flex;justify-content:space-between;gap:1rem;font-variant-numeric:tabular-nums}
.hours dt{color:var(--ink-soft)}
.hours dd{margin:0;font-weight:500}

/* obiter */
.obiter{background:var(--court);color:var(--on-court);padding:clamp(1.6rem,5vw,2.4rem)}
.obiter h3{font-family:var(--bn-serif);margin:0 0 .6rem;font-size:1.3rem;font-weight:600}
.obiter p{margin:0 0 1rem;opacity:.85;max-width:40rem}
.obiter a{font-weight:600;text-underline-offset:4px}

/* contacts */
.contacts{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media (min-width:40rem){
  .contacts{grid-template-columns:repeat(3,1fr)}
  .contacts.four{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:60rem){ .contacts.four{grid-template-columns:repeat(4,1fr)} }
.contact{background:var(--paper);padding:1.4rem;text-decoration:none;display:block}
.contact:hover{background:var(--paper-2)}
.contact .label{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.4rem}
.contact .value{font-weight:600;font-size:1.05rem;color:var(--seal);word-break:break-word}

/* sticky call bar — the conversion action */
.callbar{position:fixed;inset:auto 0 0 0;z-index:50;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule)}
@media (min-width:52rem){ .callbar{display:none} }
.callbar a{text-decoration:none;text-align:center;padding:1rem .5rem;font-weight:600;font-size:1rem}
.callbar .call{background:var(--seal);color:#F7F5F0}
.callbar .wa{background:var(--court);color:var(--on-court)}

footer{border-top:1px solid var(--rule);padding-block:2.5rem;color:var(--muted);font-size:.88rem}
footer p{margin:0 0 .6rem;max-width:46rem}
.disclaimer{border-left:2px solid var(--rule);padding-left:1rem;font-size:.83rem}

@media (prefers-reduced-motion: no-preference){
  .hero > .wrap > *{animation:rise .7s cubic-bezier(.2,.7,.3,1) both}
  .hero .lede{animation-delay:.1s}
  .hero .cta-row{animation-delay:.18s}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}