/* ═══════════════════════════════════════════════════
   SHUJA UZZAMAN KHAN SHAD
   Font: EB Garamond + Noto Nastaliq Urdu
   Palette: White / Dark Brown / Dark Gray
   ═══════════════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --white:#ffffff;
  --off:#f8f5f1;
  --cream:#f2ebe0;
  --br-deep:#2e1a0e;
  --br-dark:#3b2410;
  --br-mid:#6b4122;
  --br-warm:#8b5e35;
  --br-lt:#c4956a;
  --br-pale:#d4b896;
  --gr-dark:#3a3530;
  --gr-mid:#6a635b;
  --gr-lt:#a09890;
  --border:#d9cfc4;
  --border-d:#c4b09a;
  --en:'EB Garamond','Garamond',Georgia,serif;
  --ur:'Noto Nastaliq Urdu',serif;
  --nav-h:62px;
  --max:1100px;
  --r:4px;
  --rl:8px;
}
html{font-size:17px;scroll-behavior:smooth;}
body{font-family:var(--en);background:var(--white);color:var(--gr-dark);line-height:1.75;-webkit-font-smoothing:antialiased;}
img{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;}
a{color:var(--br-mid);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ── NAV ── */
.navbar{position:sticky;top:0;z-index:500;background:var(--white);border-bottom:1px solid var(--border);height:var(--nav-h);}
.nav-inner{max-width:var(--max);margin:0 auto;padding:0 1.75rem;height:100%;display:flex;align-items:center;gap:1.5rem;}
.nav-logo{display:flex;flex-direction:column;gap:1px;background:none;border:none;padding:0;text-align:left;flex-shrink:0;cursor:pointer;}
.logo-en{font-size:13px;font-style:italic;letter-spacing:.04em;color:var(--br-dark);line-height:1.2;}
.logo-ur{font-family:var(--ur);font-size:12px;color:var(--gr-mid);line-height:1.6;direction:rtl;}
.nav-logo:hover .logo-en{color:var(--br-mid);}
.nav-list{display:flex;list-style:none;gap:2px;margin-left:auto;}
.nav-btn{background:none;border:none;font-size:13px;letter-spacing:.04em;color:var(--gr-mid);padding:.45rem .85rem;border-radius:var(--r);transition:color .15s,background .15s;white-space:nowrap;}
.nav-btn:hover{color:var(--br-dark);background:var(--cream);}
.nav-btn.active{color:var(--br-dark);background:var(--cream);font-weight:600;box-shadow:inset 0 -2px 0 var(--br-mid);}
.burger{display:none;background:none;border:none;font-size:22px;color:var(--br-dark);margin-left:auto;padding:4px 8px;}

/* ── TABS ── */
.tab{display:none;}
.tab.active{display:block;}

/* ── MODAL ── */
.modal-bg{display:none;position:fixed;inset:0;z-index:900;background:rgba(30,18,8,.65);align-items:center;justify-content:center;padding:1.5rem;}
.modal-bg.open{display:flex;}
.modal-card{background:var(--white);border-radius:var(--rl);border:1px solid var(--border);max-width:680px;width:100%;max-height:88vh;overflow-y:auto;padding:2.5rem 2.75rem;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.25);}
.modal-x{position:absolute;top:1rem;right:1.25rem;background:none;border:none;font-size:16px;color:var(--gr-lt);padding:4px 8px;border-radius:3px;transition:color .15s,background .15s;}
.modal-x:hover{color:var(--br-dark);background:var(--cream);}
.modal-cat{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--br-pale);margin-bottom:.5rem;}
.modal-title{font-family:var(--ur);direction:rtl;text-align:right;font-size:20px;font-weight:600;line-height:2;color:var(--br-dark);margin-bottom:1.25rem;}
.modal-hr{border:none;border-top:1px solid var(--border);margin-bottom:1.5rem;}
.modal-body{direction:rtl;text-align:right;}
/* poem rendering */
.poem-wrap{direction:rtl;text-align:right;}
.misra{font-family:var(--ur);font-size:17px;line-height:2.7;color:var(--gr-dark);display:block;}
.sher-gap{height:.6rem;}
/* essay rendering */
.essay-body{font-family:var(--ur);direction:rtl;text-align:right;font-size:14px;line-height:2.5;color:var(--gr-dark);white-space:pre-wrap;word-break:break-word;}

/* ── HERO ── */
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - var(--nav-h));border-bottom:1px solid var(--border);}
.hero-text{padding:5rem 3rem 5rem 1.75rem;display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--border);}
.overline{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--br-pale);margin-bottom:1.5rem;}
.hero-name-en{font-size:50px;font-weight:400;font-style:italic;line-height:1.08;color:var(--br-dark);margin-bottom:.5rem;}
.hero-name-ur{font-family:var(--ur);font-size:28px;direction:rtl;color:var(--gr-mid);margin-bottom:2.5rem;line-height:2;}
.hero-pills{display:flex;flex-wrap:wrap;gap:.5rem;}
.hpill{font-family:var(--ur);direction:rtl;font-size:12px;padding:5px 14px;border:1px solid var(--border-d);border-radius:2px;background:none;color:var(--gr-mid);transition:.15s;}
.hpill:hover{border-color:var(--br-mid);color:var(--br-dark);background:var(--cream);}
.hero-img-wrap{overflow:hidden;}
.hero-img-wrap img{width:100%;height:100%;object-fit:cover;object-position:20% center;}

/* ── SECTIONS ── */
.page-section{max-width:var(--max);margin:0 auto;padding:3.5rem 1.75rem;border-top:1px solid var(--border);}
.page-section:first-child{border-top:none;}
.section-label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--br-pale);margin-bottom:2rem;}

/* ── CAROUSEL ── */
.carousel{background:var(--off);border:1px solid var(--border);border-radius:var(--rl);padding:2.25rem 2.5rem;max-width:580px;margin:0 auto;}
.car-poem{margin-bottom:1.25rem;}
.car-lines{direction:rtl;text-align:right;margin-bottom:.75rem;}
.car-lines .misra{font-size:18px;}
.car-src{font-family:var(--ur);font-size:12px;color:var(--gr-lt);direction:rtl;text-align:right;font-style:italic;}
.car-ctrl{display:flex;align-items:center;justify-content:space-between;}
.car-arrow{background:none;border:none;font-size:16px;color:var(--gr-mid);padding:4px 10px;border-radius:3px;transition:.15s;}
.car-arrow:hover{color:var(--br-dark);background:var(--cream);}
.car-dots{display:flex;gap:6px;}
.car-dot{width:7px;height:7px;border-radius:50%;border:none;background:var(--border-d);padding:0;cursor:pointer;transition:.15s;}
.car-dot.on{background:var(--br-mid);}

/* ── BIO ── */
.bio-grid{display:grid;grid-template-columns:1fr 260px;gap:3rem;align-items:start;}
.ur-text{font-family:var(--ur);direction:rtl;text-align:right;font-size:15px;line-height:2.5;color:var(--gr-dark);margin-bottom:1rem;}
.bio-quals{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem;}
.bio-quals span{font-size:11px;letter-spacing:.1em;font-style:italic;padding:4px 12px;border:1px solid var(--border);border-radius:2px;color:var(--gr-lt);}
.bio-photo img{width:100%;border-radius:var(--rl);border:1px solid var(--border);}

/* ── BOOKS PREVIEW ── */
.books-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;}
.bprev-card{cursor:pointer;text-align:center;padding:1.5rem 1rem;border:1px solid var(--border);border-radius:var(--rl);transition:.15s;}
.bprev-card:hover{border-color:var(--br-lt);box-shadow:0 4px 20px rgba(60,35,15,.1);transform:translateY(-2px);}
.bprev-card img{width:100%;max-width:140px;margin:0 auto 1rem;border-radius:var(--r);box-shadow:0 4px 14px rgba(0,0,0,.12);}
.bprev-ur{font-family:var(--ur);font-size:17px;color:var(--br-dark);direction:rtl;line-height:1.7;}
.bprev-year{font-size:12px;color:var(--gr-lt);letter-spacing:.08em;margin-top:.25rem;}

/* ── BOOK TAB HEADER ── */
.book-hdr{display:grid;grid-template-columns:200px 1fr;gap:2.5rem;align-items:start;padding-bottom:2.5rem;margin-bottom:2.5rem;border-bottom:1px solid var(--border);}
.book-cover{width:100%;border-radius:var(--rl);box-shadow:0 6px 24px rgba(0,0,0,.15);}
.book-title-ur{font-family:var(--ur);font-size:32px;color:var(--br-dark);direction:rtl;line-height:1.6;margin-bottom:.25rem;}
.book-title-en{font-size:15px;font-style:italic;color:var(--gr-mid);margin-bottom:.25rem;}
.book-year{font-size:12px;color:var(--gr-lt);letter-spacing:.06em;margin-bottom:1rem;}
.book-desc{font-size:15px;line-height:1.8;color:var(--gr-mid);margin-bottom:1.25rem;}
.book-verse-ur{font-family:var(--ur);direction:rtl;text-align:right;font-size:16px;line-height:2.3;font-style:normal;color:var(--br-dark);background:var(--cream);border-right:3px solid var(--br-lt);border-radius:var(--r);padding:1rem 1.25rem 1rem 1rem;}

/* ── ESSAYS IN BOOK TAB ── */
.essays-section{margin-bottom:2.5rem;}
.essay-list{list-style:none;}
.essay-list li{border-bottom:1px solid var(--border);}
.essay-btn{width:100%;background:none;border:none;display:flex;align-items:baseline;justify-content:space-between;flex-direction:row-reverse;padding:.7rem .4rem;gap:1rem;transition:background .12s;border-radius:var(--r);}
.essay-btn:hover{background:var(--cream);}
.essay-title{font-family:var(--ur);font-size:15px;color:var(--br-mid);direction:rtl;line-height:1.7;flex:1;text-align:right;}
.essay-btn:hover .essay-title{color:var(--br-dark);}
.essay-label{font-size:11px;color:var(--gr-lt);white-space:nowrap;flex-shrink:0;font-style:italic;}

/* ── POEM INDEX ── */
.cat-section{margin-bottom:2.25rem;}
.section-cat{font-family:var(--ur);font-size:20px;font-weight:700;direction:rtl;text-align:right;color:var(--br-dark);padding:.6rem 0;border-top:2px solid var(--br-dark);border-bottom:1px solid var(--border);margin-bottom:.5rem;margin-top:2rem;letter-spacing:0;}
.cat-count{color:var(--gr-mid);font-size:13px;font-family:var(--en);font-weight:400;margin-right:.5rem;}
.poem-index{list-style:none;}
.poem-index li{border-bottom:1px solid var(--border);}
.poem-btn{width:100%;text-align:right;direction:rtl;font-family:var(--ur);font-size:14px;line-height:1.7;color:var(--br-mid);background:none;border:none;padding:.55rem .4rem;display:block;transition:color .12s,background .12s,padding .12s;border-radius:var(--r);}
.poem-btn:hover{color:var(--br-dark);background:var(--cream);padding-right:.85rem;}

/* ── GRATITUDE ── */
.grat-wrap{display:grid;grid-template-columns:280px 1fr;gap:3.5rem;align-items:start;}
.grat-photo{width:100%;border-radius:var(--rl);border:1px solid var(--border);}
.grat-heading{font-size:22px;font-weight:400;font-style:italic;color:var(--br-dark);margin-bottom:1.5rem;}
.grat-text p{font-size:16px;line-height:1.85;color:var(--gr-dark);margin-bottom:1rem;}
.grat-sig{font-style:italic;color:var(--gr-lt)!important;margin-top:1.5rem!important;}

/* ── CONTACT ── */
.contact-intro{font-size:15.5px;line-height:1.8;color:var(--gr-mid);margin-bottom:2.5rem;max-width:460px;}
.contact-cards{display:flex;flex-direction:column;gap:1rem;max-width:400px;}
.contact-card{display:grid;grid-template-columns:36px 1fr;grid-template-rows:auto auto;column-gap:1rem;align-items:center;padding:1.1rem 1.4rem;background:var(--off);border:1px solid var(--border);border-radius:var(--rl);text-decoration:none;transition:border-color .15s,box-shadow .15s;}
.contact-card:hover{border-color:var(--br-lt);box-shadow:0 2px 12px rgba(60,35,15,.1);}
.cc-icon{font-size:20px;color:var(--br-lt);grid-row:1/3;}
.cc-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--br-pale);}
.cc-val{font-size:16px;color:var(--br-mid);font-style:italic;}

/* ── FOOTER ── */
.site-footer{border-top:1px solid var(--border);padding:1.5rem 1.75rem;}
.footer-inner{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;align-items:center;}
.ft-ur{font-family:var(--ur);font-size:14px;color:var(--gr-mid);direction:rtl;}
.ft-copy{font-size:12px;color:var(--gr-lt);letter-spacing:.04em;}

/* ═══════════ RESPONSIVE ═══════════ */
@media(max-width:900px){
  .hero{grid-template-columns:1fr;min-height:auto;}
  .hero-text{padding:3rem 1.5rem;border-right:none;border-bottom:1px solid var(--border);}
  .hero-name-en{font-size:38px;}
  .hero-img-wrap{height:320px;}
  .hero-img-wrap img{object-position:15% center;}
  .bio-grid{grid-template-columns:1fr;}
  .bio-photo{display:none;}
  .book-hdr{grid-template-columns:150px 1fr;gap:1.5rem;}
  .book-title-ur{font-size:24px;}
  .grat-wrap{grid-template-columns:1fr;}
  .grat-photo{max-width:280px;}
  .books-preview{gap:1rem;}
}
@media(max-width:640px){
  :root{--nav-h:54px;}
  html{font-size:15px;}
  .nav-list{display:none;flex-direction:column;position:fixed;top:var(--nav-h);left:0;right:0;background:var(--white);border-bottom:1px solid var(--border);padding:.5rem 0;z-index:400;box-shadow:0 4px 20px rgba(0,0,0,.1);}
  .nav-list.open{display:flex;}
  .nav-btn{padding:.65rem 1.5rem;font-size:14px;border-radius:0;}
  .nav-btn.active{box-shadow:inset 3px 0 0 var(--br-mid);}
  .burger{display:block;}
  .page-section{padding:2rem 1rem;}
  .hero-text{padding:2rem 1rem;}
  .hero-img-wrap{height:260px;}
  .hero-name-en{font-size:30px;}
  .hero-name-ur{font-size:22px;}
  .books-preview{grid-template-columns:1fr;max-width:200px;}
  .book-hdr{grid-template-columns:1fr;}
  .book-cover{max-width:160px;}
  .modal-card{padding:1.5rem 1.25rem;}
  .modal-title{font-size:17px;}
  .carousel{padding:1.5rem 1rem;}
  .grat-wrap{gap:1.5rem;}
  .footer-inner{flex-direction:column;gap:.4rem;text-align:center;}
}