/* Adv. Varun Chaudhary — personal site layer on top of the Nyay Law Firm styles (site.css).
   Same palette and type so the two sites read as one practice; the personal site leads with
   the advocate's portrait in a bronze-framed "brief" and a credentials ledger. */

.brand .vc{width:40px;height:40px;flex:none;color:var(--bronze-hi)}
.site-head .brand b{white-space:nowrap}

/* Hero: name, credentials, portrait */
.vhero .hero-main{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;padding-block:72px 64px;gap:56px}
.vhero h1{margin-bottom:14px}
.vhero .role-line{font:600 13px/1.6 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-hi);margin:0 0 22px}
.vhero .focus{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;padding:0;list-style:none}
.vhero .focus li{font:500 14px/1 var(--body);color:var(--band-ink);border:1px solid var(--band-rule);background:rgba(255,255,255,.04);padding:9px 14px;border-radius:999px}
.portrait{position:relative;margin:0;justify-self:center;width:min(100%,400px)}
.portrait::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:1px solid var(--bronze-hi);opacity:.7}
.portrait img{position:relative;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.portrait figcaption{position:absolute;left:-22px;bottom:28px;background:var(--surface);color:var(--ink);padding:14px 18px 13px;border-left:3px solid var(--bronze-hi);box-shadow:var(--shadow);max-width:78%}
.portrait figcaption b{display:block;font:700 16px/1.25 var(--display)}
.portrait figcaption span{display:block;font:400 13px/1.45 var(--body);color:var(--muted);margin-top:3px}
@media (max-width:920px){
  .vhero .hero-main{grid-template-columns:minmax(0,1fr);padding-block:48px 56px;gap:44px}
  .portrait{width:min(100%,340px);margin-right:18px}
}
@media (max-width:420px){.portrait figcaption{left:-10px;max-width:88%}}

/* Practice cards */
.pcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;list-style:none;margin:0;padding:0}
.pcard{background:var(--surface);border:1px solid var(--rule);box-shadow:var(--shadow);padding:28px 28px 24px;display:flex;flex-direction:column;border-top:3px solid var(--bronze)}
.pcard .n{font:700 13px/1 var(--mono);letter-spacing:.12em;color:var(--bronze)}
.pcard h3{font:700 22px/1.25 var(--display);margin:12px 0 4px;letter-spacing:-.01em}
.pcard .hi-sub{display:block;margin-bottom:12px}
.pcard p{color:var(--muted);font-size:15.5px;margin:0 0 14px}
.pcard ul{margin:0 0 18px;padding:0;list-style:none;font-size:15px}
.pcard li{padding:7px 0;border-top:1px solid var(--rule)}
.pcard .arrow-link{margin-top:auto}
@media (max-width:980px){.pcards{grid-template-columns:minmax(0,1fr)}}

/* Credentials ledger (profile page) */
.ledger{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start}
.ledger .member{position:sticky;top:96px}
.ledger .prose{max-width:none}
@media (max-width:900px){.ledger{grid-template-columns:minmax(0,1fr)}.ledger .member{position:static}}

/* Firm note */
.firm-note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;background:var(--surface);border:1px solid var(--rule);padding:24px 26px;box-shadow:var(--shadow)}
.firm-note svg{width:54px;height:54px;color:var(--bronze)}
.firm-note p{margin:0;color:var(--muted)}
.firm-note b{color:var(--ink)}
@media (max-width:560px){.firm-note{grid-template-columns:minmax(0,1fr)}}
@media (max-width:400px){
  .site-head .brand b{font-size:16.5px;white-space:normal}
  .site-head .brand small{letter-spacing:.1em}
  .brand .vc{width:34px;height:34px}
  .site-head .wrap{gap:10px}
}