/* Ustad Hub — Redesign sample (preview only). Mobile-first, readability-first.
   Theme: golden (#D4AF37 / #E9CF7A) + dark navy (#0A1A33 / #060F22) + cream. */
:root{
  --navy-900:#060F22;
  --navy-800:#0A1A33;
  --navy-700:#12284A;
  --gold:#D4AF37;
  --gold-light:#E9CF7A;
  --gold-soft:#F6E8BE;
  --cream:#FBF7EC;
  --paper:#FFFFFF;
  --ink:#1C2433;
  --muted:#5C6675;
  --line:#E7DFC9;
  --radius:14px;
  --shadow:0 10px 30px rgba(6,15,34,.12);
  --font:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --arabic:'Amiri',serif;
  --urdu:'Noto Nastaliq Urdu',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  font-family:var(--font);
  background:var(--cream);
  color:var(--ink);
  line-height:1.75;
  font-size:1rem;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
.wrap{width:min(1180px,92%);margin-inline:auto}
.section{padding:3.2rem 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1.6rem;flex-wrap:wrap}
.section-head h2{font-size:clamp(1.4rem,3.4vw,2rem);font-weight:700;color:var(--navy-800);line-height:1.3}
.section-head .kicker{display:block;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#9A7B1E;margin-bottom:.35rem}
.section-head a.more{font-weight:600;color:var(--navy-800);text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:2px;white-space:nowrap}
.section-head a.more:hover{color:#9A7B1E}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(10,26,51,.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(212,175,55,.35);
}
.header-in{display:flex;align-items:center;gap:1rem;padding:.7rem 0}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;margin-right:auto}
.brand-mark{width:44px;height:44px;flex:none}
.brand-name{font-weight:700;font-size:1.18rem;color:#fff;letter-spacing:.01em;line-height:1.15}
.brand-name em{font-style:normal;color:var(--gold-light)}
.brand-tag{display:block;font-size:.66rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.main-nav{display:flex;align-items:center;gap:.15rem}
.main-nav a,.main-nav .drop-btn{
  color:#F3EDDC;text-decoration:none;font-weight:500;font-size:.95rem;
  padding:.55rem .8rem;border-radius:8px;background:none;border:0;cursor:pointer;font-family:inherit;
}
.main-nav a:hover,.main-nav .drop-btn:hover{background:rgba(212,175,55,.16);color:#fff}
.main-nav a.cta{
  background:linear-gradient(135deg,var(--gold),#B8912A);color:var(--navy-900);
  font-weight:600;margin-left:.4rem;padding:.6rem 1.1rem;
}
.main-nav a.cta:hover{background:linear-gradient(135deg,var(--gold-light),var(--gold));color:var(--navy-900)}
.has-drop{position:relative}
.dropdown{
  position:absolute;top:calc(100% + 6px);left:0;min-width:210px;
  background:var(--navy-800);border:1px solid rgba(212,175,55,.35);border-radius:12px;
  padding:.5rem;box-shadow:var(--shadow);display:none;
}
.has-drop.open .dropdown{display:block}
.dropdown a{display:block;padding:.6rem .9rem;border-radius:8px}
.nav-toggle{
  display:none;background:none;border:1px solid rgba(212,175,55,.5);border-radius:10px;
  padding:.55rem .7rem;cursor:pointer;
}
.nav-toggle svg{width:22px;height:22px;stroke:var(--gold-light);stroke-width:2;fill:none}

/* ---------- Featured article ---------- */
.featured{
  display:grid;gap:0;background:var(--paper);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);
}
.featured-art{background:var(--navy-800);min-height:240px}
.featured-art svg{width:100%;height:100%}
.featured-body{padding:1.8rem}
.pill-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.9rem}
.pill{
  display:inline-flex;align-items:center;font-size:.74rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  padding:.28rem .75rem;border-radius:999px;
}
.pill.cat{background:var(--navy-800);color:var(--gold-light)}
.pill.time{background:var(--gold-soft);color:#7A5E14}
.featured-body h2{font-size:clamp(1.5rem,4vw,2.2rem);line-height:1.32;font-weight:700;margin-bottom:.7rem}
.featured-body h2 a{color:var(--navy-800);text-decoration:none}
.featured-body h2 a:hover{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:5px}
.byline{display:flex;align-items:center;gap:.6rem;color:var(--muted);font-size:.88rem;margin-bottom:.9rem}
.byline .avatar{
  width:34px;height:34px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--gold),#9A7B1E);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:.9rem;
}
.excerpt{color:#3A4354;max-width:68ch;margin-bottom:1.3rem}
.btn{
  display:inline-block;text-decoration:none;font-weight:600;
  padding:.75rem 1.5rem;border-radius:10px;transition:transform .15s ease;
}
.btn.gold{background:linear-gradient(135deg,var(--gold),#B8912A);color:var(--navy-900)}
.btn.gold:hover{transform:translateY(-1px)}
.btn.ghost{border:2px solid var(--navy-800);color:var(--navy-800);margin-left:.6rem}
.btn.ghost:hover{background:var(--navy-800);color:#fff}

/* ---------- Post cards ---------- */
.cards{display:grid;gap:1.3rem}
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 4px 14px rgba(6,15,34,.06);
  display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card-art{aspect-ratio:16/8;background:var(--navy-800)}
.card-art svg{width:100%;height:100%}
.card-body{padding:1.25rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.card-body h3{font-size:1.08rem;line-height:1.45;font-weight:600}
.card-body h3 a{color:var(--navy-800);text-decoration:none}
.card-body h3 a:hover{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.card-body .excerpt{font-size:.93rem;color:var(--muted);line-height:1.7;margin:0}
.card-meta{display:flex;align-items:center;gap:.55rem;color:var(--muted);font-size:.8rem;margin-top:auto;padding-top:.5rem}
.card-meta .dot{opacity:.5}

/* ---------- Category tiles ---------- */
.cat-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.cat-tile{
  display:flex;align-items:center;gap:.9rem;text-decoration:none;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem 1.1rem;transition:transform .18s ease,box-shadow .18s ease;
}
.cat-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.cat-tile .icon{
  width:46px;height:46px;flex:none;border-radius:12px;
  background:linear-gradient(135deg,var(--navy-800),var(--navy-700));
  display:grid;place-items:center;
}
.cat-tile .icon svg{width:26px;height:26px;stroke:var(--gold-light);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cat-tile b{color:var(--navy-800);font-size:.98rem;display:block;line-height:1.35}
.cat-tile small{color:var(--muted);font-size:.8rem}

/* ---------- Promo bands ---------- */
.promos{display:grid;gap:1.3rem}
.promo{
  border-radius:var(--radius);padding:2rem;overflow:hidden;position:relative;
  text-decoration:none;display:block;box-shadow:var(--shadow);
}
.promo.navy{background:linear-gradient(135deg,var(--navy-800),var(--navy-900));color:#fff}
.promo.goldband{background:linear-gradient(135deg,#E9CF7A,#D4AF37 60%,#B8912A);color:var(--navy-900)}
.promo .kicker{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.75;display:block;margin-bottom:.5rem}
.promo h3{font-size:clamp(1.25rem,3vw,1.6rem);line-height:1.35;margin-bottom:.5rem}
.promo p{font-size:.95rem;opacity:.85;max-width:52ch;margin-bottom:1.1rem}
.promo .btn{background:#fff;color:var(--navy-800)}
.promo.goldband .btn{background:var(--navy-900);color:#fff}
.promo svg.deco{position:absolute;right:-30px;bottom:-30px;width:190px;height:190px;opacity:.16}

/* ---------- Social row ---------- */
.social-row{display:flex;flex-wrap:wrap;gap:.9rem}
.social-card{
  flex:1 1 200px;display:flex;align-items:center;gap:.9rem;text-decoration:none;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem;
}
.social-card:hover{box-shadow:var(--shadow)}
.social-card svg{width:30px;height:30px;fill:var(--navy-800);flex:none}
.social-card b{color:var(--navy-800);display:block;font-size:.95rem}
.social-card small{color:var(--muted);font-size:.8rem}

/* ---------- Newsletter ---------- */
.news-card{
  background:linear-gradient(135deg,var(--navy-800),var(--navy-700));
  border-radius:var(--radius);padding:2.2rem;color:#fff;box-shadow:var(--shadow);
  display:grid;gap:1.2rem;
}
.news-card h2{font-size:clamp(1.3rem,3vw,1.7rem);line-height:1.4}
.news-card h2 span{color:var(--gold-light)}
.news-card p{color:rgba(255,255,255,.78);font-size:.95rem;max-width:56ch}
.news-form{display:flex;gap:.6rem;flex-wrap:wrap}
.news-form input{
  flex:1 1 240px;padding:.8rem 1rem;border-radius:10px;border:1px solid rgba(212,175,55,.4);
  background:rgba(255,255,255,.08);color:#fff;font-family:inherit;font-size:.95rem;
}
.news-form input::placeholder{color:rgba(255,255,255,.5)}
.news-note{font-size:.8rem;color:rgba(255,255,255,.55)}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-900);color:rgba(255,255,255,.78);margin-top:3rem}
.footer-cols{display:grid;gap:2rem;padding:3rem 0 2rem}
.f-brand .brand-name{font-size:1.3rem}
.f-brand p{font-size:.9rem;margin:.9rem 0 1.1rem;max-width:34ch;line-height:1.7}
.f-social{display:flex;gap:.6rem}
.f-social a{
  width:40px;height:40px;border-radius:10px;display:grid;place-items:center;
  background:rgba(212,175,55,.12);border:1px solid rgba(212,175,55,.3);
}
.f-social a:hover{background:rgba(212,175,55,.28)}
.f-social svg{width:20px;height:20px;fill:var(--gold-light)}
.f-col h4{color:#fff;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.9rem}
.f-col a{display:block;color:rgba(255,255,255,.72);text-decoration:none;font-size:.92rem;padding:.28rem 0}
.f-col a:hover{color:var(--gold-light)}
.footer-bottom{border-top:1px solid rgba(212,175,55,.22);padding:1.1rem 0}
.footer-bottom .wrap{display:flex;justify-content:space-between;gap:.8rem;flex-wrap:wrap;font-size:.84rem;color:rgba(255,255,255,.55)}
.f-note{color:var(--gold-light)}

/* ---------- Back to top ---------- */
.to-top{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:60;
  width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--gold),#B8912A);color:var(--navy-900);
  font-size:1.3rem;font-weight:700;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.to-top.show{opacity:1;pointer-events:auto}

/* ---------- Breakpoints ---------- */
@media (min-width:640px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .cat-tiles{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:900px){
  .featured{grid-template-columns:1.05fr 1fr}
  .featured-art{min-height:100%}
  .cat-tiles{grid-template-columns:repeat(5,1fr)}
  .promos{grid-template-columns:1fr 1fr}
  .news-card{grid-template-columns:1.2fr 1fr;align-items:center}
  .footer-cols{grid-template-columns:1.4fr 1fr 1fr 1fr}
}
@media (min-width:1080px){
  .cards{grid-template-columns:repeat(4,1fr)}
}
.nav-close-x{display:none}
@media (max-width:899px){
  .nav-toggle{display:block}
  .nav-close-x{display:block}
  .main-nav{
    position:fixed;inset:0 0 0 auto;width:min(320px,84vw);flex-direction:column;align-items:stretch;
    background:var(--navy-800);padding:4.5rem 1.4rem 1.4rem;gap:.2rem;
    transform:translateX(105%);transition:transform .25s ease;box-shadow:var(--shadow);
  }
  .main-nav.open{transform:none}
  .main-nav a,.main-nav .drop-btn{text-align:left;padding:.8rem .9rem;font-size:1.02rem}
  .main-nav a.cta{margin:.8rem 0 0;text-align:center}
  .dropdown{position:static;box-shadow:none;border:0;background:rgba(255,255,255,.04);margin:.2rem 0 .6rem}
  .nav-close-x{
    position:absolute;top:1rem;right:1.1rem;background:none;border:0;color:var(--gold-light);
    font-size:1.8rem;cursor:pointer;line-height:1;
  }
}

/* ============ article.css ============ */
/* Ustad Hub — Redesign sample PHASE 2: article layout + sidebar (preview only).
   Extends /preview/preview.css design tokens. Mobile-first, readability-first. */

.read-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,#D4AF37,#E9CF7A);z-index:120}

/* Breadcrumb */
.crumbs{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;font-size:.85rem;color:#5C6675;margin:1.4rem 0 1.1rem}
.crumbs a{color:#5C6675;text-decoration:none}
.crumbs a:hover{color:#0A1A33;text-decoration:underline}
.crumbs span{color:#D4AF37}

/* Layout: single column on mobile, article + sidebar on desktop */
.article-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:2.2rem;margin-bottom:3rem}
@media(min-width:1024px){
  .article-layout{grid-template-columns:minmax(0,1fr) 320px;gap:2.6rem;align-items:start}
  .sidebar{position:sticky;top:96px}
}

/* Article hero */
.pills{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.9rem}
.pill{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.38rem .8rem;border-radius:999px}
.pill-cat{background:#0A1A33;color:#E9CF7A}
.pill-time{background:#F6E8BE;color:#8a6d1f}
.article-title{font-size:clamp(1.7rem,1.2rem+2.4vw,2.5rem);line-height:1.22;color:#0A1A33;margin:0 0 .9rem;max-width:22ch}
.byline{display:flex;align-items:center;gap:.65rem;color:#5C6675;font-size:.92rem;margin-bottom:1.4rem}
.byline-avatar{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:#D4AF37;color:#0A1A33;font-weight:700;flex:none}
.byline strong{color:#0A1A33}

/* Featured art */
.article-col .featured-art{min-height:0;aspect-ratio:1200/420;border-radius:14px;overflow:hidden;margin:0 0 1.6rem;box-shadow:0 10px 30px rgba(6,15,34,.12);background:#060F22}
.article-col .featured-art svg{display:block;width:100%;height:100%}

/* TOC card */
.toc-card{background:#fff;border:1px solid #E7DFC9;border-left:4px solid #D4AF37;border-radius:12px;padding:1.1rem 1.3rem;margin:0 0 1.8rem}
.toc-card strong{color:#0A1A33;font-size:.95rem}
.toc-card ol{margin:.6rem 0 0;padding-left:1.3rem;color:#1C2433;font-size:.93rem;line-height:1.9}
.toc-card a{color:#1C2433;text-decoration:none}
.toc-card a:hover{color:#8a6d1f;text-decoration:underline}

/* Article body typography */
.article-body{max-width:72ch;font-size:1.02rem;line-height:1.85;color:#1C2433}
.article-body p{margin:0 0 1.15rem}
.article-body .lead{font-size:1.14rem;line-height:1.75;color:#3a4453}
.article-body .kicker{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8a6d1f;margin-bottom:.4rem}
.article-body h2{font-size:1.35rem;line-height:1.4;color:#0A1A33;margin:2.1rem 0 .8rem;scroll-margin-top:110px}
.article-body h2 .hnum{color:#D4AF37;margin-right:.45rem}
.article-body blockquote{border-left:4px solid #D4AF37;background:#FDF9EE;border-radius:0 12px 12px 0;padding:1rem 1.3rem;margin:1.6rem 0;font-style:italic;color:#3a4453}
.article-body a{color:#0A1A33;text-decoration:underline;text-decoration-color:#D4AF37;text-underline-offset:3px}
.article-body a:hover{color:#8a6d1f}
.article-body strong{color:#0A1A33}

/* Share row */
.share-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:2.2rem 0;padding:1.1rem 1.2rem;background:#fff;border:1px solid #E7DFC9;border-radius:12px}
.share-label{font-weight:600;color:#0A1A33;font-size:.92rem;margin-right:.3rem}
.share-btn{display:inline-flex;align-items:center;gap:.45rem;border:1px solid #E7DFC9;background:#FBF7EC;color:#0A1A33;font-family:inherit;font-size:.86rem;font-weight:500;padding:.55rem .95rem;border-radius:999px;cursor:pointer;text-decoration:none;transition:border-color .15s,background .15s}
.share-btn:hover{border-color:#D4AF37;background:#FDF9EE}
.share-btn svg{width:17px;height:17px;fill:#0A1A33;flex:none}

/* Author box */
.author-box{display:flex;gap:1rem;align-items:flex-start;background:#0A1A33;color:#E9CF7A;border-radius:14px;padding:1.3rem 1.4rem;margin:0 0 1.8rem}
.author-box .avatar-sm{flex:none}
.author-box strong{color:#fff;font-size:1.02rem}
.author-box p{margin:.35rem 0 0;font-size:.9rem;line-height:1.65;color:#cdd6e4}

/* Prev / next */
.prevnext{display:grid;grid-template-columns:1fr;margin:0 0 .5rem}
.pn-card{display:block;background:#fff;border:1px solid #E7DFC9;border-radius:12px;padding:1.1rem 1.3rem;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.pn-card:hover{border-color:#D4AF37;box-shadow:0 10px 30px rgba(6,15,34,.12)}
.pn-dir{display:block;font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8a6d1f;margin-bottom:.35rem}
.pn-title{display:block;font-weight:600;color:#0A1A33;font-size:1rem;line-height:1.5}
.pn-meta{display:block;color:#5C6675;font-size:.83rem;margin-top:.3rem}

/* Sidebar */
.sidebar{display:grid;gap:1.3rem;align-content:start}
.widget{background:#fff;border:1px solid #E7DFC9;border-radius:14px;padding:1.25rem 1.3rem}
.widget-title{font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#0A1A33;margin:0 0 .9rem;padding-bottom:.6rem;border-bottom:2px solid #F6E8BE}

/* Search */
.search-wrap{position:relative}
.search-wrap input[type=search]{width:100%;font-family:inherit;font-size:.92rem;padding:.7rem .9rem;border:1px solid #E7DFC9;border-radius:10px;background:#FBF7EC;color:#1C2433}
.search-wrap input[type=search]:focus{outline:2px solid #D4AF37;border-color:#D4AF37}
.search-results{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid #E7DFC9;border-radius:10px;box-shadow:0 14px 34px rgba(6,15,34,.16);z-index:30;overflow:hidden}
.search-results.show{display:block}
.search-results a{display:block;padding:.65rem .9rem;text-decoration:none;border-bottom:1px solid #f1ead6}
.search-results a:last-child{border-bottom:0}
.search-results a span{display:block;color:#0A1A33;font-size:.87rem;font-weight:500;line-height:1.45}
.search-results a em{display:block;font-style:normal;color:#8a6d1f;font-size:.75rem;margin-top:.15rem}
.search-results a:hover{background:#FDF9EE}
.no-hit{display:block;padding:.7rem .9rem;color:#5C6675;font-size:.87rem}

/* Popular posts */
.pop-item{display:block;text-decoration:none;padding:.7rem 0;border-bottom:1px solid #f1ead6}
.pop-item:last-child{border-bottom:0;padding-bottom:0}
.pop-item:first-of-type{padding-top:0}
.pop-title{display:block;color:#0A1A33;font-size:.92rem;font-weight:500;line-height:1.5}
.pop-item:hover .pop-title{color:#8a6d1f;text-decoration:underline}
.pop-meta{display:block;color:#5C6675;font-size:.78rem;margin-top:.25rem}

/* Categories */
.cat-row{display:flex;justify-content:space-between;align-items:center;text-decoration:none;color:#1C2433;font-size:.92rem;padding:.55rem 0;border-bottom:1px solid #f1ead6}
.cat-row:last-child{border-bottom:0}
.cat-row:hover{color:#8a6d1f}
.cat-count{background:#F6E8BE;color:#8a6d1f;font-size:.75rem;font-weight:600;padding:.15rem .6rem;border-radius:999px}

/* CTA widgets */
.widget-cta h3{margin:0 0 .4rem;color:#0A1A33;font-size:1.02rem}
.widget-cta p{font-size:.88rem;line-height:1.65;color:#3a4453;margin:0 0 .9rem}
.widget-dua{background:linear-gradient(135deg,#0A1A33,#12284A);border-color:#0A1A33}
.widget-dua h3{color:#E9CF7A}
.widget-dua p{color:#cdd6e4}
.widget-trial{background:linear-gradient(135deg,#F6E8BE,#FBF7EC)}
.btn-gold,.btn-navy{display:inline-block;font-family:inherit;font-size:.88rem;font-weight:600;text-decoration:none;padding:.65rem 1.2rem;border-radius:10px;transition:transform .15s}
.btn-gold{background:#D4AF37;color:#0A1A33}
.btn-gold:hover{background:#E9CF7A}
.btn-navy{background:#0A1A33;color:#E9CF7A}
.btn-navy:hover{background:#12284A}
.btn-gold:active,.btn-navy:active{transform:scale(.97)}

/* Newsletter mini (sample / placeholder) */
.sample-note{font-size:.78rem;color:#8a6d1f;background:#FDF9EE;border:1px dashed #D4AF37;border-radius:8px;padding:.5rem .7rem;margin:0 0 .8rem}
.news-mini{display:grid;gap:.6rem}
.news-mini input{font-family:inherit;font-size:.9rem;padding:.65rem .85rem;border:1px solid #E7DFC9;border-radius:10px;background:#FBF7EC}
.news-mini input:focus{outline:2px solid #D4AF37;border-color:#D4AF37}
.news-mini button{font-family:inherit;font-size:.9rem;font-weight:600;background:#0A1A33;color:#E9CF7A;border:0;border-radius:10px;padding:.7rem;cursor:pointer}
.news-mini button:hover{background:#12284A}

@media(prefers-reduced-motion:reduce){
  .btn-gold,.btn-navy{transition:none}
}

/* Related articles */
.related{margin:2.4rem 0 .5rem}
.related-title{font-size:1.3rem;font-weight:700;color:var(--navy-800,#0A1A33);margin:0 0 1rem}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.rel-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line,#E7DFC9);border-radius:12px;overflow:hidden;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}
.rel-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(6,15,34,.12)}
.rel-art{display:block;background:#0A1A33;padding:.6rem}
.rel-art svg{display:block;width:100%;height:64px}
.rel-body{display:flex;flex-direction:column;gap:.35rem;padding:.9rem 1rem 1rem}
.rel-cat{font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8a6d1c}
.rel-name{font-weight:600;color:#1C2433;line-height:1.45}
.rel-meta{font-size:.8rem;color:#5C6675}
@media (max-width:640px){.related-grid{grid-template-columns:1fr}}


/* ============================================================
   Legacy article support — rules copied from styles.css for classes
   still used in posts/*.html article bodies but not defined above.
   Bare .drop-btn selectors are scoped to nav.links (old header) so
   they cannot leak into the redesigned header.
   ============================================================ */
:root{
  --ease:cubic-bezier(.22,.61,.36,1);
  --faint:#8A97B3;
  --gold-deep:#C9A227;
  --navy:#0A1A33;
  --navy-2:#0E2242;
  --navy-deep:#060F22;
  --radius-lg:20px;
}

.nav-wrap{display:flex;align-items:center;gap:14px;padding:12px 0}

.links{display:flex;align-items:center;gap:4px}

.links> a,.links .drop-btn{position:relative;display:inline-flex;align-items:center;gap:6px;
  padding:10px 15px;border-radius:10px;text-decoration:none;color:#DCE4F5;
  font-weight:500;font-size:14.5px;background:transparent;border:0;font-family:inherit;cursor:pointer;
  transition:color .22s var(--ease),background .22s var(--ease)}

.links> a:hover,.links .drop-btn:hover{color:#fff;background:rgba(212,175,55,.14)}

.links> a.active,.links .drop-btn.active{color:var(--gold-soft);background:rgba(212,175,55,.15)}

.links> a.active::after,.links .drop-btn.active::after{content:"";position:absolute;left:15px;right:15px;bottom:5px;
  height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold-deep),var(--gold-soft))}

.caret{font-size:10px;opacity:.75;transition:transform .22s var(--ease)}

.has-drop:hover .caret,.has-drop.open .caret{transform:rotate(180deg)}

.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
  background:rgba(212,175,55,.12);border:1px solid rgba(212,175,55,.35);border-radius:10px;padding:0 11px}

.hamburger span{display:block;height:2px;background:var(--gold-soft);border-radius:2px;transition:transform .25s var(--ease),opacity .2s}

.nav-close{display:none}

.post-meta{font-size:12px;color:var(--faint);font-weight:500;margin-bottom:8px;letter-spacing:.02em}

.article{max-width:780px;margin:0 auto}

.article-hero{background:linear-gradient(135deg,var(--navy-2),var(--navy-deep));color:#fff;
  border-radius:var(--radius-lg);padding:56px 46px;margin:40px 0 8px;position:relative;overflow:hidden}

.article-hero::before{content:"";position:absolute;inset:0;opacity:.1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='1'%3E%3Crect x='18' y='18' width='20' height='20'/%3E%3Crect x='18' y='18' width='20' height='20' transform='rotate(45 28 28)'/%3E%3C/g%3E%3C/svg%3E");
  background-size:56px 56px}

.article-hero .post-meta{color:var(--gold-soft);position:relative}

.article-hero h1{color:#fff;font-size:clamp(30px,4vw,46px);margin:10px 0 14px;position:relative}

.article-hero p.lead{color:#C9D4EA;font-size:18px;font-weight:300;margin:0;position:relative}

.toc{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:22px 26px;margin:0 0 1.9em}

.toc strong{display:block;margin-bottom:10px;color:var(--navy)}

.toc ol{margin:0;padding-left:1.3em}

.toc li{margin-bottom:5px;font-size:15px}

.toc a{color:var(--gold-deep);text-decoration:none;font-weight:500}

.toc a:hover{text-decoration:underline}

.back-link{display:inline-flex;align-items:center;gap:6px;margin:28px 0 0;color:var(--gold-deep);
  font-weight:600;text-decoration:none;transition:gap .2s var(--ease)}

.back-link:hover{gap:10px}

.video-embed{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:var(--radius);
  margin:0 0 1.6em;background:var(--navy-deep)}

.video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

.reading-progress{position:fixed;top:0;left:0;right:0;height:4px;z-index:90;background:rgba(10,26,51,.08)}

.reading-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-deep),var(--gold-soft))}

@media(max-width:900px){
  .hamburger{display:flex}
  .links{position:fixed;top:0;right:0;bottom:0;height:100vh;height:100dvh;width:min(330px,86vw);background:linear-gradient(160deg,var(--navy-2),var(--navy-deep));
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px;padding:88px 22px 30px;
    transform:translateX(102%);transition:transform .32s var(--ease);z-index:85;overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    box-shadow:-14px 0 44px rgba(0,0,0,.45);border-left:1px solid rgba(212,175,55,.25)}
  .links.open{transform:none}
  .links> a,.links .drop-btn{width:100%;text-align:left;font-size:16px;padding:13px 16px;color:#DCE4F5}
  .links> a.active::after,.links .drop-btn.active::after{left:16px;right:auto;width:34px;bottom:8px}
  .nav-close{position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:10px;
    border:1px solid rgba(212,175,55,.4);background:transparent;color:var(--gold-soft);font-size:20px;display:grid;place-items:center}
}

@media(max-width:640px){
  .article-hero{padding:36px 22px}
}

.ar-quote{background:linear-gradient(135deg,var(--navy-2),var(--navy-deep));border:1px solid rgba(212,175,55,.4);
  border-radius:var(--radius);padding:30px 28px;margin:1.8em 0;position:relative;overflow:hidden}

.ar-quote::before{content:"";position:absolute;inset:0;opacity:.1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='1'%3E%3Crect x='18' y='18' width='20' height='20'/%3E%3Crect x='18' y='18' width='20' height='20' transform='rotate(45 28 28)'/%3E%3C/g%3E%3C/svg%3E");
  background-size:56px 56px}

.ar-quote p{font-family:"Amiri",serif;direction:rtl;text-align:center;font-size:26px;line-height:2;
  color:var(--gold-soft);margin:0;position:relative}

.ar-quote .ar-src{display:block;margin-top:12px;font-family:"Poppins",sans-serif;font-size:13px;
  color:#AEBBDA;direction:ltr;letter-spacing:.04em}

@media(max-width:640px){
  .ar-quote p{font-size:22px}
}

/* Urdu/Arabic content classes (copied from styles.css for article-body parity) */
.arabic{font-family:"Amiri","Noto Nastaliq Urdu",serif;direction:rtl;text-align:right}
.urdu{font-family:"Noto Nastaliq Urdu","Amiri",serif;direction:rtl;text-align:right;line-height:2.3}
.urdu-lead{font-family:"Noto Nastaliq Urdu",serif;direction:rtl;text-align:center;line-height:2.4;font-size:19px}
.ar-callig{font-family:"Amiri",serif;direction:rtl;font-size:1.35em;letter-spacing:0}