/* drahmedejaz.com — theme drawn from the logo: two interlocking blues on cool white, 45° geometry.
   Layout: left-aligned editorial pages; one signature device, the chamfered (45°-cut) frame from the logo. */
@font-face{font-family:"Red Hat Display";font-weight:500;font-display:swap;src:url(fonts/red-hat-display-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Red Hat Display";font-weight:700;font-display:swap;src:url(fonts/red-hat-display-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Red Hat Display";font-weight:800;font-display:swap;src:url(fonts/red-hat-display-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Red Hat Text";font-weight:400;font-display:swap;src:url(fonts/red-hat-text-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Red Hat Text";font-weight:500;font-display:swap;src:url(fonts/red-hat-text-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Red Hat Text";font-weight:600;font-display:swap;src:url(fonts/red-hat-text-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Red Hat Text";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/red-hat-text-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Noto Nastaliq Urdu";font-weight:400;font-display:swap;src:url(fonts/noto-nastaliq-urdu-arabic-400-normal.woff2) format("woff2")}

:root{
  --paper:#F4F7FA;
  --panel:#FFFFFF;
  --ink:#0F2238;
  --muted:#4B5B6E;
  --rule:#D3DCE6;
  --bright:#0092FA;   /* logo: right link */
  --steel:#2884C4;    /* logo: left link */
  --deep:#2271A6;     /* logo: overlap */
  --link:#0B67B0;     /* text-safe blue */
  --wash:#E3F0FB;
  --focus:#0B67B0;
  --display:"Red Hat Display",system-ui,-apple-system,"Segoe UI",sans-serif;
  --text:"Red Hat Text",system-ui,-apple-system,"Segoe UI",sans-serif;
  --urdu:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq",serif;
  --max:1140px;
  --cut:28px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:1.0625rem;line-height:1.65}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-underline-offset:3px}
a:hover{color:var(--deep)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:3px}
h1,h2,h3{font-family:var(--display);text-wrap:balance;color:var(--ink)}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:24px}
.skip{position:absolute;left:-999px;top:8px;background:var(--panel);padding:8px 12px;z-index:20}
.skip:focus{left:16px}
.urdu{font-family:var(--urdu);direction:rtl;line-height:2.1}

/* chamfer: the logo's 45° cut corner */
.cut{clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}

/* ---------- header ---------- */
.site-head{background:var(--panel);border-bottom:1px solid var(--rule);position:relative;z-index:5}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:80px}
.brand{display:block;flex:0 1 auto;min-width:0}
.brand img{height:42px;width:auto;max-width:100%;object-fit:contain;object-position:left center}
.tabs{display:flex;align-items:center;gap:2px}
.tabs a{text-decoration:none;color:var(--muted);font-weight:500;padding:10px 12px;white-space:nowrap}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current="page"]{color:var(--ink);font-weight:600;box-shadow:inset 0 -3px 0 var(--bright)}
.tabs a.tab-cta{background:var(--deep);color:#fff;margin-left:10px;padding-inline:18px}
.tabs a.tab-cta:hover{background:var(--ink)}
.menu-btn{display:none;align-items:center;gap:8px;background:none;border:1.5px solid var(--ink);padding:8px 12px;font:inherit;font-weight:600;color:var(--ink);cursor:pointer}
.menu-btn svg{width:18px;height:18px}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--deep);color:#fff;text-decoration:none;font-weight:600;padding:13px 22px;border:2px solid var(--deep)}
.btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-quiet{background:transparent;color:var(--deep)}
.btn-quiet:hover{background:var(--panel);color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- home hero ---------- */
.hero{padding-block:64px 72px}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.02;font-weight:800;letter-spacing:-.03em;margin:0 0 14px}
.hero .urdu{font-size:clamp(1.15rem,2vw,1.4rem);color:var(--deep);margin:0 0 22px;text-align:left}
.hero .lede{font-size:1.2rem;color:var(--muted);max-width:46ch;margin:0 0 30px}
.portrait{position:relative;min-width:0}
.portrait::before{content:"";position:absolute;inset:22px -18px -22px 18px;background:var(--bright);opacity:.85;clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.portrait img{position:relative;width:100%;aspect-ratio:4/3.4;object-fit:cover;object-position:52% 18%}
.portrait figcaption{position:relative;margin-top:34px;font-size:.88rem;color:var(--muted)}

/* ---------- page heads ---------- */
.page-head{padding-block:56px 44px}
.crumbs{font-size:.9rem;color:var(--muted);margin:0 0 16px}
.crumbs a{color:var(--muted)}
.page-head h1{font-size:clamp(2.1rem,4.4vw,3.3rem);line-height:1.08;font-weight:800;letter-spacing:-.025em;margin:0 0 14px;max-width:22ch}
.page-head .lede{font-size:1.18rem;color:var(--muted);max-width:62ch;margin:0}
.page-head.with-photo .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:end}
.page-head.with-photo img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ---------- sections ---------- */
.sec{border-top:1px solid var(--rule);padding-block:64px}
.sec > .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:40px}
.sec > .wrap.wide{grid-template-columns:1fr;gap:28px}
.sec h2{font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.15;letter-spacing:-.015em;font-weight:800;margin:0;max-width:15ch}
.wide > h2{max-width:none}
.body{min-width:0}
.body > :first-child{margin-top:0}
.body > :last-child{margin-bottom:0}
.sec p{max-width:68ch}
.sec h3{font-size:1.12rem;font-weight:700;margin:0 0 6px}
.muted{color:var(--muted)}
.band{background:var(--panel)}

/* facts row */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:28px 0 0;border-top:3px solid var(--bright)}
.facts > div{padding:18px 18px 0 0}
.facts dt{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.1;color:var(--deep)}
.facts dd{margin:6px 0 0;color:var(--muted);font-size:.95rem}

/* rows that link */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.rows li{border-bottom:1px solid var(--rule)}
.rows a{display:grid;grid-template-columns:minmax(0,13rem) 1fr;gap:6px 24px;padding:18px 0;text-decoration:none;color:var(--ink)}
.rows a:hover .row-name{color:var(--link);text-decoration:underline}
.row-name{font-family:var(--display);font-weight:700;font-size:1.1rem}
.row-text{color:var(--muted)}

.grid2{display:grid;grid-template-columns:1fr 1fr;margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.grid2 > li{padding:18px 0;border-bottom:1px solid var(--rule)}
.grid2 > li:nth-child(odd){padding-right:28px}
.grid2 p{margin:0;color:var(--muted)}
.stack{display:grid;gap:26px}
.stack p{margin:0;color:var(--muted)}

.checks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.checks li{padding-left:24px;position:relative}
.checks li::before{content:"";position:absolute;left:3px;top:.62em;width:9px;height:9px;background:var(--steel);transform:rotate(45deg)}

/* ---------- the ripple timeline ---------- */
.ripple{list-style:none;margin:0;padding:0;position:relative}
.ripple::before{content:"";position:absolute;left:5.6rem;top:6px;bottom:6px;width:2px;background:var(--rule)}
.ripple > li{display:grid;grid-template-columns:4.6rem 2rem minmax(0,1fr);gap:0 0;padding-bottom:36px;position:relative}
.ripple > li:last-child{padding-bottom:0}
.r-year{font-family:var(--display);font-weight:800;color:var(--deep);font-size:1.05rem;line-height:1.5;text-align:right;padding-right:6px}
.r-dot{position:relative}
.r-dot::after{content:"";position:absolute;left:calc(1rem - 7px);top:.42em;width:14px;height:14px;background:var(--steel);transform:rotate(45deg);box-shadow:0 0 0 4px var(--paper)}
.band .r-dot::after{box-shadow:0 0 0 4px var(--panel)}
.ripple .key .r-dot::after{background:var(--bright);width:18px;height:18px;left:calc(1rem - 9px);top:.3em}
.r-body h3{margin:0 0 4px;font-size:1.12rem}
.r-body p{margin:0;color:var(--muted);max-width:62ch}
.r-body figure{margin:14px 0 0;max-width:520px}
.r-body figure img{width:100%;border:1px solid var(--rule)}
.r-body figcaption{font-size:.85rem;color:var(--muted);margin-top:6px}

/* ---------- ventures ---------- */
.venture{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:40px;padding-block:28px;border-top:1px solid var(--rule)}
.venture:first-child{border-top:0;padding-top:0}
.v-meta{color:var(--muted);font-size:.95rem}
.v-meta strong{display:block;font-family:var(--display);font-size:1.3rem;color:var(--ink);line-height:1.2;margin-bottom:6px}
.venture p{margin:0 0 10px;max-width:66ch}

.v-logo{height:64px;width:auto;margin-bottom:12px}
.v-fig figure{margin:6px 0 0;max-width:560px}
.v-fig figcaption{font-size:.88rem;color:var(--muted);margin-top:6px}
.network{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.network a{display:flex;flex-direction:column;height:100%;background:var(--panel);border:1px solid var(--rule);padding:18px;text-decoration:none;color:var(--ink)}
.network a:hover{border-color:var(--steel)}
.n-logo{height:92px;display:grid;place-items:center;margin-bottom:14px}
.n-logo img{max-height:92px;width:auto;max-width:100%}
.n-name{font-family:var(--display);font-weight:700}
.n-url{color:var(--link);font-size:.92rem;overflow-wrap:anywhere}
.book{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:start}
.book img{width:120px;border:1px solid var(--rule)}

/* ---------- figures and galleries ---------- */
.photo{margin:0}
.photo img{width:100%;object-fit:cover}
.photo figcaption{font-size:.88rem;color:var(--muted);margin-top:8px}
.photos2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.photos2 img{aspect-ratio:4/3}
.photos3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.photos3 img{aspect-ratio:4/3;object-fit:cover}
.photos3 img.top{object-position:50% 20%}
.news{max-width:640px}
.news img{border:1px solid var(--rule)}
.programs{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 22px}
.programs li{min-width:0;background:var(--panel);border:1px solid var(--rule);padding:0 0 18px}
.programs .p-img{display:block;border-bottom:1px solid var(--rule)}
.programs .p-img img{width:100%;aspect-ratio:1/1;object-fit:cover}
.programs h3{margin:14px 18px 2px;font-size:1.2rem}
.programs p{margin:4px 18px 0;color:var(--muted);font-size:.95rem}
.programs .p-focus{color:var(--deep);font-weight:600}
.programs strong{color:var(--ink)}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 22px;margin:0;padding:0;list-style:none}
.gallery li{min-width:0}
.gallery a{display:block;text-decoration:none;color:var(--ink)}
.gallery .frame{background:var(--panel);border:1px solid var(--rule);height:260px;display:grid;place-items:center;padding:10px;overflow:hidden}
.gallery .frame img{max-height:238px;width:auto;max-width:100%;object-fit:contain}
.gallery .g-title{font-weight:600;margin:10px 0 2px;line-height:1.35}
.gallery .g-meta{font-size:.88rem;color:var(--muted)}
.gallery a:hover .g-title{color:var(--link);text-decoration:underline}

/* ---------- lists ---------- */
.honors{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.honors li{display:grid;grid-template-columns:7rem 1fr;gap:4px 20px;padding:12px 0;border-bottom:1px solid var(--rule)}
.honors .h-year{font-family:var(--display);font-weight:700;color:var(--deep);font-variant-numeric:tabular-nums}
.pubs{margin:0;padding-left:1.3em;display:grid;gap:14px;color:var(--muted)}
.pubs cite{font-style:italic}
.pubs a{overflow-wrap:anywhere}
.channels{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.channels a{display:block;height:100%;background:var(--panel);border:1px solid var(--rule);padding:20px 20px 22px;text-decoration:none;color:var(--ink)}
.channels a:hover{border-color:var(--steel)}
.channels strong{display:block;font-family:var(--display);font-size:1.08rem;margin-bottom:4px}
.channels span{color:var(--muted);font-size:.95rem}
.channels .handle{display:block;color:var(--link);font-weight:600;margin-top:10px;overflow-wrap:anywhere}

.social{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.social li{display:grid;grid-template-columns:9rem 1fr;gap:4px 20px;padding:13px 0;border-bottom:1px solid var(--rule)}
.social .s-name{font-weight:600}
.social a{overflow-wrap:anywhere}

.note{border-left:3px solid var(--bright);background:var(--panel);padding:14px 18px;color:var(--muted);font-size:.95rem;max-width:68ch}
blockquote.urdu-quote{margin:0;padding:18px 22px;background:var(--panel);border-right:3px solid var(--bright);max-width:40rem}
blockquote.urdu-quote p{margin:0;font-size:1.25rem;text-align:right}
blockquote.urdu-quote footer{margin-top:8px;font-family:var(--text);direction:ltr;text-align:left;color:var(--muted);font-size:.9rem;line-height:1.5}

/* ---------- call to action ---------- */
.cta{background:var(--ink);color:#fff;padding-block:64px;position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;background:var(--bright);opacity:.18;transform:rotate(45deg)}
.cta .wrap{display:grid;grid-template-columns:2fr 1fr;gap:32px;align-items:center;position:relative;z-index:1}
.cta h2{color:#fff;font-size:clamp(1.7rem,3.2vw,2.4rem);margin:0 0 10px;line-height:1.12;letter-spacing:-.02em}
.cta p{margin:0;color:#C8D6E6;max-width:56ch}
.cta .btn{background:#fff;color:var(--ink);border-color:#fff;justify-self:start}
.cta .btn:hover{background:var(--wash);border-color:var(--wash);color:var(--ink)}
.cta :focus-visible{outline-color:#fff}

/* ---------- footer ---------- */
.site-foot{background:var(--panel);border-top:1px solid var(--rule);padding-block:44px 30px;font-size:.93rem;color:var(--muted)}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
.foot-grid img{height:96px;width:auto;margin-bottom:12px}
.foot-grid h2{font-size:1rem;margin:0 0 10px}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot-grid a{color:var(--muted);text-decoration:none}
.foot-grid a:hover{color:var(--ink);text-decoration:underline}
.foot-base{margin-top:28px;padding-top:20px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .menu-btn{display:inline-flex}
  .tabs{display:none;position:absolute;left:0;right:0;top:100%;background:var(--panel);border-bottom:1px solid var(--rule);flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 16px}
  .tabs.open{display:flex}
  .tabs a{padding:12px 4px;border-bottom:1px solid var(--rule)}
  .tabs a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--bright);padding-left:12px}
  .tabs a.tab-cta{margin:12px 0 0;text-align:center;border-bottom:0}
  .no-js .tabs{display:flex;position:static;flex-direction:row;flex-wrap:wrap;padding:0 0 12px}
  .no-js .menu-btn{display:none}
}
@media (max-width:860px){
  .hero{padding-block:36px 56px}
  .hero .wrap,.sec > .wrap,.cta .wrap,.page-head.with-photo .wrap,.venture{grid-template-columns:1fr;gap:24px}
  .portrait{max-width:520px}
  .facts{grid-template-columns:1fr 1fr}
  .grid2,.photos2{grid-template-columns:1fr}
  .grid2 > li:nth-child(odd){padding-right:0}
  .gallery{grid-template-columns:1fr 1fr}
  .channels{grid-template-columns:1fr}
  .network{grid-template-columns:1fr 1fr}
  .photos3,.programs{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid > div:first-child{grid-column:1 / -1}
  .rows a{grid-template-columns:1fr}
}
@media (max-width:560px){
  .wrap{padding-inline:16px}
  .head-row{min-height:68px}
  .brand img{height:30px}
  .tabs{padding-inline:16px}
  :root{--cut:18px}
  .ripple::before{left:3.9rem}
  .ripple > li{grid-template-columns:3.1rem 1.6rem minmax(0,1fr)}
  .r-year{font-size:.95rem}
  .r-dot::after{left:calc(.8rem - 7px)}
  .ripple .key .r-dot::after{left:calc(.8rem - 9px)}
  .gallery{grid-template-columns:1fr}
  .photos3,.programs{grid-template-columns:1fr}
  .honors li,.social li{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}
.signature{margin:6px 0 18px}
.signature img{width:min(260px,70%);height:auto;display:block}
.yr{display:inline-block;font-weight:700;color:var(--deep);margin-right:4px}