:root{color-scheme:dark;--bg:#0c0d10;--sub:#17181d;--card:#1c1d23;--ink:#f4efe6;--muted:#a6a29b;--gold:#c6a56b;--hi:#e0c18a;--line:#c6a56b42;--ur:'Noto Nastaliq Urdu',serif;--sans:'DM Sans',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ur);line-height:2.65}a{color:inherit;text-decoration:none}button,input{font:inherit;color:inherit}button{cursor:pointer}a:focus-visible,input:focus-visible,button:focus-visible{outline:2px solid var(--hi);outline-offset:4px}a:hover{color:var(--hi)}header{position:sticky;top:0;z-index:10;background:#101114fa;border-bottom:1px solid var(--line)}.navwrap{max-width:1480px;margin:auto;padding:11px 6vw;display:flex;align-items:center;gap:25px;transition:padding .2s}.compact .navwrap{padding-block:5px}.brand{font:500 24px/2.3 var(--ur);color:var(--hi);white-space:nowrap}.navwrap nav{margin-left:auto;display:flex;gap:clamp(13px,2vw,33px)}.navwrap nav a,.actions:lang(en),.intro small,.kicker{font-family:var(--sans)}.navwrap nav a{font-size:13px;padding:9px 0;border-bottom:1px solid transparent}.navwrap nav a:hover{border-color:var(--gold)}.searchlink{width:40px;height:40px;position:relative;font-size:0}.searchlink:before{content:'';position:absolute;border:1.5px solid var(--gold);border-radius:50%;width:13px;height:13px;top:10px;left:10px}.searchlink:after{content:'';position:absolute;width:9px;height:1.5px;background:var(--gold);transform:rotate(45deg);left:23px;top:26px}.menu{display:none}
.hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:calc(100svh - 78px);padding:55px 7vw;background:#101115;overflow:hidden}.portrait{position:absolute;inset:0 0 0 43%;z-index:-1}.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;filter:saturate(.65) brightness(.78)}.portrait:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#101115 0%,transparent 45%),linear-gradient(0deg,#101115 0%,transparent 26%)}.intro{width:52%;max-width:740px}.kicker,.intro small.kicker{color:var(--gold);font:600 10px/1.6 var(--sans);letter-spacing:.24em}.intro h1{font:500 clamp(56px,6.7vw,106px)/.95 'Cormorant Garamond',Georgia,serif;letter-spacing:-.045em;margin:24px 0 8px}.intro em{color:var(--hi);font-weight:500}.urdu-name{text-align:left;font-size:clamp(22px,2.7vw,40px);line-height:2.6}.intro small{color:var(--muted);font-size:13px}.intro blockquote{text-align:left;margin:25px 0;padding-left:20px;border-left:1px solid var(--gold);font-size:clamp(15px,1.35vw,23px)}.actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:25px}.actions a,button{border:1px solid var(--line);background:transparent;padding:8px 19px;font-size:13px;min-height:44px}.actions .gold{background:var(--hi);color:#171411}.section,footer{padding:65px max(6vw,calc((100vw - 1280px)/2));border-top:1px solid var(--line)}h2{font-weight:500;font-size:clamp(31px,3.6vw,48px);margin:0 0 26px;line-height:2.4}.featured,.about{background:var(--sub)}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.cards a{background:linear-gradient(145deg,#222128,var(--card));border:1px solid var(--line);padding:25px clamp(18px,2.5vw,40px);display:flex;flex-direction:column;transition:transform .2s,border-color .2s}.cards a:hover{transform:translateY(-3px);border-color:var(--gold)}.cards small,.rows small,.reader>small{color:var(--gold)}.cards h3{font-size:21px;font-weight:400;margin:17px 0 0}.cards p{color:#c9c3bb;font-size:15px;margin:3px 0 28px}.cards span{margin-top:auto;color:var(--hi);font-size:12px;border-top:1px solid var(--line);padding-top:13px}.tools,.filters,.reading-tools,footer nav,.reader nav{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.tools{justify-content:space-between;margin-bottom:24px}.filters a{padding:6px 15px 10px;font-size:13px}.filters a[aria-current]{border-bottom:1px solid var(--gold);color:var(--hi)}input{background:var(--sub);border:1px solid var(--line);padding:6px 14px;font-size:13px}.rows a{display:grid;grid-template-columns:45px minmax(0,1fr) auto;align-items:center;gap:18px;border-top:1px solid var(--line);padding:15px 5px}.rows i{font:20px var(--sans);color:var(--gold)}.rows{margin-bottom:18px}.about{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.2fr);gap:9%;align-items:center}.about img{width:100%;height:420px;object-fit:cover;object-position:50% 38%;filter:grayscale(.9)}.about p,#connect>p{font-size:16px;color:#d0cac0}.quote{float:left;font:95px/1 Georgia;color:var(--gold)}footer{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:#101115}footer small,footer p,footer nav{font-size:12px;color:var(--muted)}.reader{max-width:900px;padding:45px 6% 75px;margin:auto;text-align:center}.reader>small{display:block}.reader h1{font-size:clamp(25px,3.4vw,42px);line-height:2.5;font-weight:500;margin:12px 0}.reader>a,.reader>p,.reader nav{font-size:13px;color:var(--gold)}.reading-tools{justify-content:center;margin:24px 0}.reading-tools button{padding:4px 13px}.reading-tools button:disabled{opacity:.4}.sher{padding:24px 0;border-top:1px solid var(--line)}.sher p{margin:0;line-height:3}.reader nav{justify-content:space-between}.reader nav a{padding:10px}.intro>*{animation:rise .55s both}.intro blockquote{animation-delay:.12s}.intro .actions{animation-delay:.19s}@keyframes rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}@supports(animation-timeline:view()){.section h2{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 100%}.portrait img{animation:drift linear both;animation-timeline:view();animation-range:exit 0% exit 100%}@keyframes drift{to{transform:translateY(3%)}}}
:root { --gutter: clamp(16px, 5vw, 42px); }
img { max-inline-size: 100%; }
.searchlink { min-width: 44px; min-height: 44px; }
main, .cards a, .about > div, .intro, .tools > *, .rows span, .sher { min-inline-size: 0; }
.rows span, .reader h1, .sher p, .cards h3, .cards p { overflow-wrap: anywhere; }
.reader { padding-block-end: max(75px, env(safe-area-inset-bottom)); }
#mobile-menu { position:fixed; inset:0; margin:0; padding:0; border:0; max-width:none; max-height:none; width:100%; height:100dvh; background:transparent; color:var(--ink); }
#mobile-menu::backdrop { background:rgb(0 0 0 / 62%); }
.menu-panel { margin-inline-start:auto; width:min(100%, 24rem); max-height:100%; overflow-y:auto; overscroll-behavior:contain; background:var(--sub); border-bottom:1px solid var(--line); padding: max(10px,env(safe-area-inset-top)) max(var(--gutter),env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(var(--gutter),env(safe-area-inset-left)); }
.menu-head { display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); }
.menu-head button, .menu { inline-size:44px; block-size:44px; padding:0; font:24px/1 var(--sans); }
.menu-panel nav { display:grid; }
.menu-panel nav a { padding:12px 4px; border-bottom:1px solid var(--line); font:500 16px/1.5 var(--sans); }
#mobile-menu[open] .menu-panel { animation:rise .18s both; }
@media (max-width:820px) {
  html { scroll-padding-top:calc(75px + env(safe-area-inset-top)); }
  .navwrap, .compact .navwrap { gap:8px; padding: max(6px,env(safe-area-inset-top)) max(var(--gutter),env(safe-area-inset-right)) 6px max(var(--gutter),env(safe-area-inset-left)); }
  .navwrap nav { display:none; }
  .brand { font-size:21px; }
  .searchlink { margin-inline-start:auto; }
  .menu { display:block; }
  .section, footer { padding:clamp(32px,6vw,54px) max(var(--gutter),env(safe-area-inset-right)) clamp(32px,6vw,54px) max(var(--gutter),env(safe-area-inset-left)); }
  .section h2 { margin-block-end:18px; }
  .tools { align-items:stretch; gap:16px; }
  .tools input { width:100%; min-width:0; font-size:16px; line-height:2.65; }
  .filters { gap:4px; }
  .filters a, footer nav a { min-height:44px; padding-inline:10px; }
  .cards { grid-template-columns:repeat(auto-fit,minmax(min(100%, 225px),1fr)); gap:14px; }
  .cards a { padding:18px; }
  .cards h3 { margin-block-start:8px; line-height:2.6; }
  .cards p { margin-block-end:16px; }
  .reader { padding:24px var(--gutter) max(50px,env(safe-area-inset-bottom)); }
  .reader h1 { line-height:2.65; }
  .reading-tools { gap:8px; }
  .reader nav { border-block-start:1px solid var(--line); margin-block-start:14px; }
  footer { padding-block-end:max(36px,env(safe-area-inset-bottom)); }
}
@media (max-width:639px) {
  .hero { display:flex; flex-direction:column; align-items:stretch; min-height:auto; padding:0; }
  .portrait { position:relative; inset:auto; aspect-ratio:1.32; max-height:390px; }
  .portrait img { object-position:50% 48%; }
  .portrait:after { background:linear-gradient(0deg,#101115,transparent 35%); }
  .intro { width:100%; margin-block-start:-12px; padding:0 var(--gutter) 32px; }
  .intro h1 { font-size:clamp(42px,10.4vw,64px); margin-block:15px 4px; }
  .urdu-name { font-size:clamp(22px,5.6vw,30px); }
  .intro blockquote { margin-block:16px; padding-inline-start:0; padding-inline-end:14px; font-size:clamp(15px,4vw,18px); line-height:2.8; }
  .intro .actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .intro .actions a { display:grid; place-items:center; padding:9px 6px; text-align:center; line-height:1.55; }
  .cards, .about { grid-template-columns:minmax(0,1fr); }
  .about { gap:20px; }
  .about img { height:auto; aspect-ratio:1.4; object-position:center; }
  .rows a { gap:8px; grid-template-columns:30px minmax(0,1fr) auto; padding-block:13px; }
  .reading-tools { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sher { padding-block:19px; }
  .sher p { line-height:2.85; }
  footer { align-items:start; gap:12px 24px; }
}
@media(max-height:520px) and (orientation:landscape) and (min-width:520px) {
  .hero { display:flex; flex-direction:row; min-height:340px; padding:24px var(--gutter); }
  .portrait { position:absolute; inset:0 0 0 50%; max-height:none; aspect-ratio:auto; }
  .portrait:after { background:linear-gradient(90deg,#101115,transparent 50%); }
  .intro { width:52%; margin:0; padding:0; }
  .intro h1 { font-size:40px; }
}
@media(hover:none) { .cards a:hover { transform:none; } .cards a:active { border-color:var(--hi); } }
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .intro > *, .section h2, .portrait img, #mobile-menu[open] .menu-panel { animation:none; }
  .navwrap, .cards a { transition:none; }
}