/* around.pk — Guardian-style news theme (DM Serif Display + Lora + Inter) */
:root{
  --brand:#052962; --brand-ink:#0a3a7a;
  --ink:#121212; --ink-2:#2b2b2b; --muted:#6b6b6b; --faint:#8a8a8a;
  --line:#dcdcdc; --line-2:#ededed; --bg:#ffffff; --tint:#f6f6f6;
  --news:#c70000;
  --head:"DM Serif Display",Georgia,"Times New Roman",serif;
  --serif:"Lora",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --urdu:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq",serif;
  --wrap:1260px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* ---------- masthead ---------- */
.masthead{background:var(--brand);color:#fff}
.mast-row{display:flex;align-items:baseline;justify-content:space-between;padding:14px 20px 12px}
.brand{font-family:var(--head);font-size:34px;letter-spacing:-.5px;color:#fff;line-height:1}
.brand span{color:#9db8e6}
.mast-right{display:flex;align-items:center;gap:18px}
.mast-date{font-size:13px;color:#c7d6ef}
.lang{display:flex;gap:10px;font-size:13px;font-weight:700}
.lang a{color:#c7d6ef;padding-bottom:2px;border-bottom:2px solid transparent}
.lang a.on{color:#fff;border-color:#e0a526}
.lang .nastaliq{font-family:var(--urdu);font-size:15px}

/* ---------- section nav ---------- */
.sections{background:var(--brand-ink);border-bottom:3px solid #e0a526}
.sec-row{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.sec-row::-webkit-scrollbar{display:none}
.sections a{color:#dfe8f6;font-weight:700;font-size:15px;padding:11px 14px;white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-3px}
.sections a:hover{background:rgba(255,255,255,.08)}
.sections a.on{color:#fff;border-color:#fff;background:rgba(255,255,255,.08)}

/* ---------- weather strip ---------- */
.wxstrip{background:var(--tint);border-bottom:1px solid var(--line)}
.wx-row{display:flex;gap:22px;padding:7px 20px;font-size:13px;color:var(--ink-2);overflow-x:auto}
.wx b{font-style:normal}

/* ---------- kickers / meta ---------- */
.kicker{display:inline-block;font-family:var(--sans);font-weight:800;font-size:12px;letter-spacing:.3px;text-transform:uppercase;color:var(--news);margin-bottom:6px}
.meta{display:block;font-family:var(--sans);font-size:12.5px;color:var(--faint);margin-top:6px}

/* ---------- front: lead ---------- */
main.wrap{padding-top:22px;padding-bottom:40px}
.lead-grid{display:grid;grid-template-columns:1fr 320px;gap:0;border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:22px}
.lead{padding-inline-end:26px;border-inline-end:1px solid var(--line)}
.lead-img{margin-bottom:12px;background:var(--tint)}
.lead-img img{width:100%;aspect-ratio:16/9;object-fit:cover}
.lead-h{font-family:var(--head);font-weight:400;font-size:clamp(1.9rem,1.1rem+2.6vw,3rem);line-height:1.08;margin:.1em 0 .25em;color:var(--ink)}
.lead:hover .lead-h{color:var(--brand-ink)}
.standfirst{font-family:var(--serif);font-size:1.15rem;line-height:1.5;color:var(--ink-2);margin:.2em 0 0}
.lead-side{padding-inline-start:24px;display:flex;flex-direction:column}
.side-item{padding:14px 0;border-bottom:1px solid var(--line-2)}
.side-item:first-child{padding-top:0}
.side-item:last-child{border-bottom:none}
.side-item h3{font-family:var(--head);font-weight:400;font-size:1.25rem;line-height:1.14;margin:0;color:var(--ink)}
.side-item:hover h3{color:var(--brand-ink)}

/* ---------- columns: river + rail ---------- */
.cols{display:grid;grid-template-columns:1fr 300px;gap:34px}
.sec-head{display:flex;align-items:center;justify-content:space-between;border-top:3px solid var(--ink);padding-top:8px;margin:28px 0 16px}
.sec-head:first-child{margin-top:0}
.sec-head h1,.sec-head h2{font-family:var(--head);font-weight:400;font-size:1.5rem;margin:0;color:var(--ink)}
.sec-head .more{font-family:var(--sans);font-weight:700;font-size:13px;color:var(--news)}

/* cards grid */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:0 24px}
.cards-3{grid-template-columns:repeat(3,1fr)}
.card{border-top:1px solid var(--line);padding:16px 0}
.card:first-child,.cards.cards-3 .card:nth-child(-n+3),.cards:not(.cards-3) .card:nth-child(-n+2){border-top:none;padding-top:0}
.card-img{margin-bottom:10px;background:var(--tint)}
.card-img img{width:100%;aspect-ratio:16/9;object-fit:cover}
.card h3{font-family:var(--head);font-weight:400;font-size:1.22rem;line-height:1.16;margin:0;color:var(--ink)}
.card:hover h3{color:var(--brand-ink)}
.card-ex{font-family:var(--serif);font-size:.95rem;color:var(--muted);margin:.4em 0 0;line-height:1.5}
.block{margin-top:30px}

/* ---------- rail / widgets ---------- */
.rail{border-inline-start:1px solid var(--line);padding-inline-start:24px}
.widget{margin-bottom:28px}
.widget-head{font-family:var(--sans);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink);border-top:3px solid var(--ink);padding-top:8px;margin-bottom:6px}
.most{list-style:none;margin:0;padding:0;counter-reset:n}
.most li{border-top:1px solid var(--line-2)}
.most li:first-child{border-top:none}
.most a{display:flex;gap:12px;align-items:flex-start;padding:12px 0}
.most .num{font-family:var(--head);font-size:1.5rem;line-height:1;color:var(--faint);min-width:26px}
.most .mt{font-family:var(--head);font-weight:400;font-size:1.05rem;line-height:1.16}
.most a:hover .mt{color:var(--brand-ink)}

/* ---------- article ---------- */
.artwrap{display:grid;grid-template-columns:minmax(0,720px) 300px;gap:40px;justify-content:center}
.art-kicker{font-family:var(--sans);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.3px}
.art-h{font-family:var(--head);font-weight:400;font-size:clamp(2rem,1.3rem+2.4vw,3rem);line-height:1.08;margin:.15em 0 .2em}
.art-stand{font-family:var(--serif);font-size:1.3rem;line-height:1.45;color:var(--ink-2);margin:0 0 1rem;font-weight:500}
.art-meta{font-family:var(--sans);font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.art-fig{margin:18px 0}
.art-fig img{width:100%}
.art-fig figcaption{font-family:var(--sans);font-size:12px;color:var(--faint);padding-top:6px}
.art-body{font-family:var(--serif);font-size:1.19rem;line-height:1.75;color:#1a1a1a}
.art-body p{margin:0 0 1.25rem}
.rel{list-style:none;margin:0;padding:0}
.rel li{border-top:1px solid var(--line-2);padding:12px 0}
.rel li:first-child{border-top:none}
.rel a{display:grid;grid-template-columns:84px 1fr;gap:12px;align-items:start}
.rel-img img{width:84px;height:56px;object-fit:cover;background:var(--tint)}
.rel h4{font-family:var(--head);font-weight:400;font-size:1rem;line-height:1.14;margin:0}
.empty{color:var(--muted);padding:30px 0}

/* ---------- footer ---------- */
.foot{background:var(--brand);color:#cdd9ef;margin-top:40px;padding:30px 0}
.foot .brand{font-size:28px;margin-bottom:12px;display:inline-block}
.foot-secs{display:flex;flex-wrap:wrap;gap:16px;padding:12px 0;border-top:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.15)}
.foot-secs a{color:#cdd9ef;font-weight:600;font-size:14px}
.foot-note{font-size:13px;color:#9db1d6;margin:14px 0 0}

/* ---------- Urdu / RTL (Nastaliq) ---------- */
.rtl{font-family:var(--urdu)}
.rtl .lead-h,.rtl .side-item h3,.rtl .card h3,.rtl .sec-head h1,.rtl .sec-head h2,
.rtl .art-h,.rtl .most .mt,.rtl .rel h4{font-family:var(--urdu);font-weight:500;line-height:1.9;padding-bottom:.25em}
.rtl .standfirst,.rtl .art-stand,.rtl .art-body,.rtl .card-ex{font-family:var(--urdu);line-height:2.4}
.rtl .art-body{font-size:1.15rem}
.rtl .art-body p{margin-bottom:1.6rem}
.rtl .kicker,.rtl .art-kicker,.rtl .widget-head,.rtl .meta{font-family:var(--sans)}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .cols,.artwrap{grid-template-columns:1fr}
  .rail{border:none;padding:0;margin-top:20px;border-top:2px solid var(--ink)}
  .lead-grid{grid-template-columns:1fr}
  .lead{border:none;padding-inline-end:0}
  .lead-side{padding-inline-start:0;margin-top:16px;border-top:2px solid var(--ink);padding-top:10px}
  .cards-3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .cards,.cards-3{grid-template-columns:1fr}
  .card{border-top:1px solid var(--line)!important;padding-top:16px!important}
  .brand{font-size:28px}.mast-date{display:none}
}

/* ---------- logo ---------- */
.brand{display:inline-flex;align-items:center;gap:10px}
.logo-svg{width:34px;height:34px;flex:none}
.logo-word{font-family:var(--head);font-size:32px;letter-spacing:-.5px;color:#fff;line-height:1}
.logo-word b{font-weight:400;color:#fff;opacity:.92}
.foot .logo-svg{width:28px;height:28px}.foot .logo-word{font-size:26px}
.rtl .brand{flex-direction:row-reverse}

/* ---------- markets widget (business/finance) ---------- */
.mkt .widget-head{border-top-color:#107e7d;color:#0c5f5e}
.mkt-tbl{width:100%;border-collapse:collapse;font-family:var(--sans)}
.mkt-tbl td{padding:8px 0;border-top:1px solid var(--line-2);font-size:14px}
.mkt-tbl tr:first-child td{border-top:none}
.mkt-lbl{color:var(--ink-2);font-weight:600}
.mkt-val{text-align:end;font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)}
.mkt-chg{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.up{color:#0b7a3b}.down{color:#c70000}
.mkt-note{font-size:11px;color:var(--faint);margin-top:6px}
.rtl .mkt-val{text-align:start}

/* markets band on home */
.mkt-band{border-top:3px solid #107e7d;margin:26px 0;padding-top:10px}
.mkt-band .bh{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.mkt-band h2{font-family:var(--head);font-weight:400;color:#0c5f5e;margin:0;font-size:1.5rem}
.mkt-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.mkt-card{border-inline-start:1px solid var(--line);padding:4px 16px}
.mkt-card:first-child{border:none;padding-inline-start:0}
.mkt-card .mc-lbl{font-family:var(--sans);font-size:12px;font-weight:700;text-transform:uppercase;color:var(--muted);letter-spacing:.3px}
.mkt-card .mc-val{font-family:var(--head);font-size:1.7rem;color:var(--ink);line-height:1.1;margin-top:3px;font-variant-numeric:tabular-nums}
.mkt-card .mc-sub{font-size:12.5px;font-weight:700;font-family:var(--sans);margin-top:2px}
@media(max-width:800px){.mkt-cards{grid-template-columns:repeat(2,1fr);gap:16px 0}.mkt-card:nth-child(3){border:none;padding-inline-start:0}}

/* ---------- tags + timeline ---------- */
.art-tags{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 4px}
.art-tags .tg{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--brand-ink);background:var(--tint);border:1px solid var(--line);border-radius:3px;padding:5px 11px}
.art-tags .tg:hover{background:#eef3fb;border-color:#b9ccea}
.tl-head{border-top:3px solid var(--news);padding-top:8px;margin-bottom:6px}
.tl-head h1{font-family:var(--head);font-weight:400;font-size:2rem;margin:0}
.tl-sub{font-family:var(--sans);color:var(--muted);font-size:14px;margin:2px 0 20px}
.timeline{list-style:none;margin:0;padding:0;position:relative;border-inline-start:2px solid var(--line);margin-inline-start:6px}
.timeline li{position:relative;padding:0 0 22px 22px}
.rtl .timeline li{padding:0 22px 22px 0}
.timeline li::before{content:"";position:absolute;inset-inline-start:-7px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--news);border:2px solid #fff}
.tl-date{font-family:var(--sans);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--news)}
.tl-h{font-family:var(--head);font-weight:400;font-size:1.3rem;line-height:1.16;margin:3px 0 0;color:var(--ink)}
.timeline a:hover .tl-h{color:var(--brand-ink)}

/* ---------- footer (Guardian-style) ---------- */
.foot{background:#041d4a;color:#aebfdd;margin-top:46px;padding:36px 0 20px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:34px}
.foot-col h4{font-family:var(--sans);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#fff;margin:0 0 14px}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin-bottom:9px}
.foot-col a{color:#aebfdd;font-size:14px}.foot-col a:hover{color:#fff;text-decoration:underline}
.foot-brand .brand{margin-bottom:12px}
.foot-tag{font-size:14px;line-height:1.6;color:#9db1d6;margin:0 0 14px;max-width:34ch}
.foot-social{display:flex;gap:9px}
.foot-social a{width:34px;height:34px;display:grid;place-items:center;border:1px solid #284a86;border-radius:50%;color:#cdd9ef;font-weight:700;font-size:14px}
.foot-social a:hover{background:#e0a526;border-color:#e0a526;color:#041d4a;text-decoration:none}
.foot-push p{font-size:13.5px;line-height:1.55;color:#9db1d6;margin:0 0 12px}
.push-btn{background:#e0a526;color:#041d4a;border:none;border-radius:6px;font-family:var(--sans);font-weight:800;font-size:14px;padding:10px 16px;cursor:pointer}
.push-btn:hover{background:#f0c14b}
.push-ok{color:#7fe0a0;font-weight:700;font-size:14px}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-top:28px;padding-top:16px;border-top:1px solid #1d3a6e;font-size:13px;color:#8aa0cc}
.foot-bottom a{color:#aebfdd}.foot-bottom a:hover{color:#fff}
.foot-langs .nastaliq{font-family:var(--urdu)}
.rtl .foot-grid{direction:rtl}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media(max-width:480px){.foot-grid{grid-template-columns:1fr}}

.foot-social a svg{width:17px;height:17px;fill:currentColor}
[hidden]{display:none!important}

/* ---------- ads ---------- */
.adbox{margin:26px 0;text-align:center;overflow:hidden}
.adbox .adlbl{display:block;font-family:var(--sans);font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--faint);margin-bottom:4px}
.adbox ins{background:transparent}
.adbox-rail{margin:0 0 26px}
.adbox-leader{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);padding:14px 0}

.art-more{margin-top:40px}
.art-more .cards{margin-top:4px}