/*
Theme Name: Daily Pakistan Online
Theme URI: https://www.facebook.com/people/Daily-Pakistan-Online/61593950745928/
Author: Muhammad Imran Khan
Author URI: https://x.com/dpakistanonline
Description: ڈیلی پاکستان آن لائن کی مکمل اردو نیوز ویب سائٹ ایک تھیم میں (2TheSports 4.7 پر مبنی)۔ نستعلیق خطاطی والا لوگو، بریکنگ نیوز سلائیڈر، پاکستان، دنیا، کھیل، کاروبار، شوبز، صحت، ٹیکنالوجی اور دیگر کیٹگریز، مقبول ہیش ٹیگ، سوشل میڈیا بٹن، ای میل الرٹس اور گوگل ایڈسینس۔ بلٹ اِن اے آئی نیوز روم ہر 20 منٹ بعد جیو، اے آر وائی، ایکسپریس، بی بی سی اردو، سٹی 42، دنیا نیوز اور روزنامہ پاکستان سے خبریں لے کر مفت گوگل جیمنائی سے اپنے الفاظ میں نئی خبر لکھتا ہے، پاکستان اور افواجِ پاکستان مخالف مواد شائع نہیں کرتا، کھیلوں کی خبریں محمد عمران خان کے نام سے لگاتا ہے؛ خبریں کم از کم 6 ماہ تک ڈیلیٹ نہیں ہوتیں اور روزانہ خودکار بیک اپ بنتا ہے۔
Version: 1.4.0
Tested up to: 7.1
Requires at least: 6.4
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: dpo
*/
[hidden]{display:none!important}

/* Layout: night masthead → breaking ticker → score centre carousel → top stories (hero · stack · must-reads) beside sticky rail → Asian Games package with medal chart → sport sections → by-the-numbers band → around the web → intro/about → footer */
:root{
  --bg:#f3f5f4; --paper:#ffffff; --ink:#0c1512; --sub:#59675f; --rule:#dce3df; --soft:#ebf0ed;
  --night:#08140f; --night-2:#10231a; --on-night:#e9f1ed; --on-night-sub:#9db3a8;
  --brand:#0b9a55; --brand-deep:#06603a; --brand-ink:#ffffff; --brand-soft:#e2f3ea;
  --gold:#f2b705; --gold-ink:#1b1400; --hot:#e01e37; --hot-ink:#ffffff;
  --bar:#9fc9b2;
  --head:"Archivo","Arial Narrow",Arial,sans-serif;
  --text:"Source Serif 4",Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0a0f0d; --paper:#111916; --ink:#e7eeea; --sub:#9aaaa2; --rule:#22302a; --soft:#16211c;
  --night:#050c09; --night-2:#0c1913; --on-night:#e9f1ed; --on-night-sub:#91a89c;
  --brand:#22b46c; --brand-deep:#0b9a55; --brand-ink:#03120a; --brand-soft:#11281c;
  --gold:#f5c13a; --gold-ink:#1b1400; --hot:#ff3b52; --hot-ink:#ffffff; --bar:#2f5a43; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0a0f0d; --paper:#111916; --ink:#e7eeea; --sub:#9aaaa2; --rule:#22302a; --soft:#16211c;
  --night:#050c09; --night-2:#0c1913; --on-night:#e9f1ed; --on-night-sub:#91a89c;
  --brand:#22b46c; --brand-deep:#0b9a55; --brand-ink:#03120a; --brand-soft:#11281c;
  --gold:#f5c13a; --gold-ink:#1b1400; --hot:#ff3b52; --hot-ink:#ffffff; --bar:#2f5a43; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--ink);font-family:var(--head);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
.wrap{max-width:1280px;margin:0 auto;padding-inline:16px}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
h1,h2,h3,h4{margin:0;font-family:var(--head);font-stretch:80%;font-weight:800;line-height:1.06;letter-spacing:-.01em;text-wrap:balance}
.lbl{font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;font-stretch:100%}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* ---------- intro ---------- */
#intro{position:fixed;inset:0;z-index:200;background:radial-gradient(120% 90% at 50% 40%,var(--night-2),var(--night) 70%);color:var(--on-night);display:grid;place-items:center;animation:introOut .55s ease 2.5s forwards}
#intro .in{display:flex;flex-direction:column;align-items:center;gap:18px;padding:16px;text-align:center}
#intro .mark{width:min(30vw,132px);height:auto}
#intro .mark .two{stroke-dasharray:120;stroke-dashoffset:120;animation:draw .9s cubic-bezier(.6,0,.2,1) .25s forwards}
#intro .mark .ball{transform-origin:47px 15px;transform:scale(0);animation:pop .4s cubic-bezier(.3,1.6,.5,1) 1s forwards}
#intro .mark .bg{opacity:0;animation:fade .5s ease .05s forwards}
#intro .wm{font-size:clamp(40px,9vw,84px);clip-path:inset(0 100% 0 0);animation:wipe .7s cubic-bezier(.7,0,.2,1) 1.05s forwards}
#intro .tag{font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--on-night-sub);opacity:0;animation:fade .5s ease 1.6s forwards}
#intro .line{width:min(60vw,320px);height:3px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
#intro .line i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--brand),var(--gold));transform:scaleX(0);transform-origin:left;animation:grow 2.3s linear forwards}
#intro .skip{position:absolute;inset-block-end:calc(24px + env(safe-area-inset-bottom,0px));inset-inline-end:24px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-night-sub);border:1px solid rgba(255,255,255,.2);padding:7px 12px;border-radius:999px}
#intro .skip:hover{color:var(--on-night);border-color:var(--on-night-sub)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{to{transform:scale(1)}}
@keyframes fade{to{opacity:1}}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}
@keyframes grow{to{transform:scaleX(1)}}
@keyframes introOut{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){#intro{display:none}}

/* ---------- wordmark ---------- */
.wm{font-family:var(--head);font-style:italic;font-weight:900;font-stretch:72%;letter-spacing:-.01em;line-height:.9;color:var(--on-night);white-space:nowrap}
.wm b{color:var(--brand);font-weight:900}
.wm b em{font-style:italic;color:var(--gold)}

/* ---------- top bar ---------- */
.util{background:var(--night);color:var(--on-night-sub);font-size:12.5px;border-bottom:1px solid rgba(255,255,255,.06)}
.util .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:6px;flex-wrap:wrap}
.util b{color:var(--on-night);font-weight:700}
.upd{display:inline-flex;gap:6px;align-items:center}
.upd::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px rgba(34,180,108,.25)}

.social{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.social a{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--on-night);background:rgba(255,255,255,.07);transition:background .15s,transform .15s}
.social a svg{width:15px;height:15px}
.social a:hover{transform:translateY(-1px)}
.social a.fb:hover{background:#1877f2}.social a.x:hover{background:#000}.social a.ig:hover{background:#d62976}
.social a.yt:hover{background:#ff0000}.social a.tt:hover{background:#111}.social a.wa:hover{background:#1fa855}
.social.big a{width:42px;height:42px}
.social.big a svg{width:19px;height:19px}

/* ---------- masthead ---------- */
.mast{background:var(--night);color:var(--on-night);position:sticky;top:env(safe-area-inset-top,0px);z-index:40;box-shadow:0 1px 0 rgba(255,255,255,.06)}
.mast .wrap{display:flex;align-items:center;gap:22px;min-height:64px}
.logo{display:flex;align-items:center;gap:10px;flex:none}
.logo svg{width:42px;height:42px}
.logo .wm{font-size:30px}
nav.cats{display:flex;align-items:center;gap:0;flex:1;min-width:0}
nav.cats .scroll{display:flex;overflow-x:auto;scrollbar-width:none;min-width:0}
nav.cats .scroll::-webkit-scrollbar{display:none}
nav.cats button.nv{padding:22px 9px 19px;font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;color:var(--on-night-sub);border-bottom:3px solid transparent}
nav.cats button.nv:hover{color:var(--on-night)}
nav.cats button.nv[aria-current="page"]{color:var(--on-night);border-bottom-color:var(--brand)}
.more{position:relative;flex:none}
.more>button{padding:22px 9px 19px;font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--on-night-sub);display:flex;gap:4px;align-items:center}
.more>button:hover,.more>button[aria-expanded="true"]{color:var(--on-night)}
.more .menu{position:absolute;inset-inline-end:0;top:100%;background:var(--paper);color:var(--ink);border:1px solid var(--rule);border-radius:4px;box-shadow:0 14px 34px rgba(0,0,0,.22);padding:10px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;width:min(440px,calc(100vw - 32px));z-index:50}
.more .menu[hidden]{display:none}
.more .menu button{text-align:start;padding:8px 10px;border-radius:3px;font-weight:600;font-size:14px}
.more .menu button:hover{background:var(--soft)}
.tools{display:flex;gap:8px;align-items:center;flex:none}
.search{position:relative}
.search input{width:170px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:var(--on-night);padding:8px 12px 8px 32px;border-radius:999px;font:inherit;font-size:14px}
.search input::placeholder{color:var(--on-night-sub)}
.search svg{position:absolute;inset-inline-start:11px;top:50%;width:14px;height:14px;transform:translateY(-50%);color:var(--on-night-sub)}
.alertbtn{display:inline-flex;gap:6px;align-items:center;background:var(--brand);color:var(--brand-ink);padding:8px 14px;border-radius:999px;font-weight:800;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.alertbtn svg{width:15px;height:15px}
.alertbtn[aria-pressed="true"]{background:var(--gold);color:var(--gold-ink)}
@media (max-width:1300px){.search input{width:130px}.logo .wm{font-size:27px}}
@media (max-width:1180px){
  .mast .wrap{flex-wrap:wrap;gap:0 12px;padding-top:10px}
  .tools{margin-inline-start:auto}
  nav.cats{order:3;flex-basis:100%}
  nav.cats button.nv,.more>button{padding:11px 10px 9px}
  .search input{width:130px}
}
@media (max-width:520px){.search{display:none}.logo .wm{font-size:26px}}

/* ---------- breaking ---------- */
.breaking{background:var(--hot);color:var(--hot-ink)}
.breaking .wrap{display:flex;gap:14px;align-items:center;min-height:44px}
.breaking .tagb{display:inline-flex;align-items:center;gap:7px;background:var(--hot-ink);color:var(--hot);padding:3px 9px;border-radius:2px;flex:none}
.breaking .tagb i{width:7px;height:7px;border-radius:50%;background:var(--hot);animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.25}}
.breaking .item{flex:1;min-width:0;text-align:start;font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .25s}
.breaking .item:hover{text-decoration:underline;text-underline-offset:3px}
.breaking .ctl{display:flex;gap:2px;flex:none;align-items:center;font-variant-numeric:tabular-nums;font-size:12px;opacity:.9}
.breaking .ctl button{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:15px}
.breaking .ctl button:hover{background:rgba(255,255,255,.18)}
@media (prefers-reduced-motion:reduce){.breaking .tagb i{animation:none}}

/* ---------- score centre ---------- */
.scores{background:var(--paper);border-bottom:1px solid var(--rule)}
.scores .head{display:flex;align-items:center;gap:12px;padding-top:10px;flex-wrap:wrap}
.scores .head h2{font-size:15px;font-stretch:100%;letter-spacing:.1em;text-transform:uppercase}
.chips{display:flex;gap:4px;flex-wrap:wrap}
.chip{padding:4px 11px;border-radius:999px;font-size:12.5px;font-weight:700;border:1px solid var(--rule);color:var(--sub)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.scores .arrows{margin-inline-start:auto;display:flex;gap:4px}
.scores .arrows button{width:30px;height:30px;border-radius:50%;border:1px solid var(--rule);display:grid;place-items:center;font-size:16px}
.scores .arrows button:hover{background:var(--soft)}
.strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-block:10px 14px;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.match{flex:none;width:220px;scroll-snap-align:start;border:1px solid var(--rule);border-radius:6px;padding:10px 12px;font-size:14px;font-variant-numeric:tabular-nums;display:flex;flex-direction:column;gap:5px;background:var(--paper)}
.match .st{display:flex;justify-content:space-between;gap:8px;color:var(--sub);font-size:11.5px}
.match .st span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill{font-size:10.5px;font-weight:800;letter-spacing:.08em;padding:1px 6px;border-radius:2px;flex:none}
.pill.TODAY{background:var(--gold);color:var(--gold-ink)}
.pill.LIVE{background:var(--hot);color:var(--hot-ink)}
.pill.RESULT,.pill.FT{background:var(--soft);color:var(--sub)}
.match .tm{display:flex;justify-content:space-between;gap:8px;font-weight:600}
.match .tm.w{font-weight:800}
.match .tm.w span:first-child::after{content:" ◂";color:var(--brand);font-size:11px}
.match .nt{font-size:12px;color:var(--sub);border-top:1px dashed var(--rule);padding-top:5px;margin-top:2px}

/* ---------- ads ---------- */
.ad{display:grid;place-items:center;color:var(--sub);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;background:repeating-linear-gradient(135deg,var(--soft) 0 12px,transparent 12px 24px);border:1px solid var(--rule);border-radius:4px}
.ad.leader{height:90px;max-width:728px;margin:22px auto 0}
.ad.mpu{height:250px}

/* ---------- page grid ---------- */
div.page{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:36px;padding-block:24px 40px}
@media (max-width:1180px){div.page{grid-template-columns:minmax(0,1fr)}}
main{min-width:0}

/* ---------- images ---------- */
.img{position:relative;aspect-ratio:16/9;background:var(--night);overflow:hidden;max-width:100%;border-radius:4px}
.img svg,.img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.story:hover .img svg,.story:hover .img img{transform:scale(1.035)}
@media (prefers-reduced-motion:reduce){.story:hover .img svg,.story:hover .img img{transform:none}}
.credit{position:absolute;inset-block-end:0;inset-inline-end:0;font-size:10px;color:#fff;background:rgba(0,0,0,.55);padding:1px 6px}
.flag{position:absolute;inset-block-start:10px;inset-inline-start:10px;background:var(--hot);color:var(--hot-ink);padding:2px 7px;border-radius:2px}

.story{display:flex;flex-direction:column;gap:8px;text-align:start;cursor:pointer;min-width:0}
.story:hover h2,.story:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.meta{font-size:12.5px;color:var(--sub);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.meta .k{color:var(--brand)}
.meta i{width:3px;height:3px;border-radius:50%;background:currentColor;display:inline-block}
.meta .src{font-weight:600}

/* ---------- top stories ---------- */
.top{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:26px}
@media (max-width:760px){.top{grid-template-columns:1fr}}
.hero h2{font-size:clamp(28px,3.8vw,46px);font-stretch:76%}
.hero p{margin:0;font-family:var(--text);font-size:18px;color:var(--sub);max-width:60ch}
.stack{display:flex;flex-direction:column}
.stack .story{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:12px;padding-block:13px;border-top:1px solid var(--rule)}
.stack .story:first-child{border-top:0;padding-top:0}
.stack h3{font-size:18px}
.must{margin-top:22px;border-top:3px solid var(--ink);padding-top:10px}
.must h2{font-size:14px;font-stretch:100%;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.must ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
@media (max-width:560px){.must ol{grid-template-columns:1fr}}
.must li button{display:flex;gap:10px;text-align:start;padding-block:9px;border-bottom:1px solid var(--rule);width:100%;font-weight:700;font-size:15px;line-height:1.25}
.must li button:hover{color:var(--brand)}
.must li button span{color:var(--brand);font-weight:900;flex:none}

/* ---------- section heads ---------- */
.sec{padding-top:36px}
.sec-h{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:4px solid var(--ink);padding-top:9px;margin-bottom:16px}
.sec-h h2{font-size:28px;text-transform:uppercase;font-stretch:70%;letter-spacing:.005em;display:flex;align-items:center;gap:10px}
.sec-h h2 .dot{width:10px;height:10px;border-radius:2px;background:var(--brand);display:inline-block}
.sec-h button{font-size:12.5px;font-weight:800;color:var(--brand);letter-spacing:.06em;text-transform:uppercase}
.sec-h button:hover{text-decoration:underline}
.row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.row.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.row.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.row.two h3{font-size:22px}
@media (max-width:900px){.row,.row.three,.row.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.row,.row.three,.row.two{grid-template-columns:1fr}}
.row h3{font-size:18.5px}
.row .sf{margin:0;font-family:var(--text);font-size:15px;color:var(--sub)}
.empty{color:var(--sub);padding:26px 0;font-family:var(--text);font-size:17px}

/* ---------- Asian Games package ---------- */
.pkg{margin-top:36px;background:var(--night);color:var(--on-night);border-radius:6px;overflow:hidden}
.pkg .in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:28px;padding:26px}
@media (max-width:820px){.pkg .in{grid-template-columns:1fr;padding:20px}}
.pkg .k{color:var(--gold)}
.pkg h2{font-size:clamp(28px,3.4vw,40px);font-stretch:72%;margin:6px 0 10px}
.pkg p{font-family:var(--text);color:var(--on-night-sub);margin:0 0 16px;font-size:16.5px;max-width:52ch}
.tally{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.tally div{background:rgba(255,255,255,.06);border-radius:4px;padding:10px 12px;min-width:70px}
.tally b{display:block;font-size:34px;font-weight:900;font-stretch:72%;line-height:1;font-variant-numeric:tabular-nums}
.tally span{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-night-sub)}
.tally .g b{color:#e9c75d}.tally .s b{color:#c7d0d6}.tally .bz b{color:#d49a6a}
.chart{min-width:0}
.chart h3{font-size:13px;font-stretch:100%;letter-spacing:.12em;text-transform:uppercase;color:var(--on-night-sub);margin-bottom:6px}
.chart svg{width:100%;height:auto;display:block}
.pkg .cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding:0 26px 26px}
@media (max-width:900px){.pkg .cards{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 20px 20px}}
@media (max-width:480px){.pkg .cards{grid-template-columns:1fr}}
.pkg .cards h3{font-size:17px}
.pkg .meta{color:var(--on-night-sub)}
.pkg .meta .k{color:var(--gold)}

/* ---------- numbers ---------- */
.nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:6px;overflow:hidden}
@media (max-width:700px){.nums{grid-template-columns:repeat(2,minmax(0,1fr))}}
.nums div{background:var(--paper);padding:18px 18px 16px;display:flex;flex-direction:column;gap:4px}
.nums b{font-size:44px;font-weight:900;font-stretch:66%;line-height:1;color:var(--brand);font-variant-numeric:tabular-nums}
.nums b small{font-size:14px;font-weight:700;font-stretch:100%;color:var(--sub);margin-inline-start:4px;letter-spacing:.02em}
.nums p{margin:0;font-family:var(--text);font-size:15px}

/* ---------- web headlines ---------- */
.web{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
@media (max-width:700px){.web{grid-template-columns:1fr}}
.web a{display:flex;flex-direction:column;gap:3px;padding-block:11px;border-bottom:1px solid var(--rule)}
.web a b{font-size:16px;line-height:1.25}
.web a:hover b{color:var(--brand)}
.web a span{font-size:12px;color:var(--sub)}

/* ---------- rail ---------- */
.rail{display:flex;flex-direction:column;gap:26px;min-width:0}
@media (min-width:1181px){.rail{position:sticky;top:88px;align-self:start;max-height:calc(100vh - 100px);overflow-y:auto;scrollbar-width:thin;padding-inline-end:4px}}
.box h2{font-size:19px;text-transform:uppercase;font-stretch:72%;border-top:4px solid var(--ink);padding-top:8px;margin-bottom:8px;letter-spacing:.01em}
.fix{list-style:none;margin:0;padding:0}
.fix li{display:grid;grid-template-columns:48px 1fr;gap:10px;padding-block:9px;border-bottom:1px solid var(--rule)}
.fix .d{background:var(--soft);border-radius:4px;text-align:center;padding:4px 0;line-height:1.05}
.fix .d b{display:block;font-size:20px;font-weight:900;font-stretch:72%;font-variant-numeric:tabular-nums}
.fix .d span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--sub);font-weight:700}
.fix .d.today{background:var(--gold);color:var(--gold-ink)}
.fix .d.today span{color:var(--gold-ink)}
.fix .w{font-weight:700;font-size:14.5px;line-height:1.25}
.fix .w small{display:block;font-weight:500;color:var(--sub);font-size:12.5px;margin-top:2px}
ol.most{list-style:none;margin:0;padding:0;counter-reset:n}
ol.most li{counter-increment:n}
ol.most button{display:grid;grid-template-columns:34px 1fr;gap:6px;padding-block:10px;border-bottom:1px solid var(--rule);text-align:start;font-weight:700;font-size:15px;line-height:1.25;width:100%}
ol.most button::before{content:counter(n);font-weight:900;font-stretch:66%;font-size:32px;line-height:.85;color:var(--brand)}
ol.most button:hover{color:var(--brand)}
.cloud{display:flex;flex-wrap:wrap;gap:6px}
.cloud button{font-size:13px;font-weight:700;color:var(--brand);background:var(--brand-soft);padding:4px 10px;border-radius:999px}
.cloud button.own{background:var(--brand);color:var(--brand-ink)}
.cloud button:hover{filter:brightness(1.08)}

/* ---------- about / newsletter ---------- */
.about{background:var(--night);color:var(--on-night);position:relative;overflow:hidden}
.about::before{content:"";position:absolute;inset:-40% -10% auto auto;width:640px;height:640px;background:radial-gradient(closest-side,rgba(11,154,85,.35),transparent);pointer-events:none}
.about .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;padding-block:52px}
@media (max-width:860px){.about .wrap{grid-template-columns:1fr;gap:28px;padding-block:40px}}
.about .eyebrow{color:var(--gold)}
.about h2{font-size:clamp(34px,5vw,58px);font-stretch:68%;margin:10px 0 14px;font-style:italic;font-weight:900}
.about h2 em{color:var(--brand);font-style:italic}
.about p{font-family:var(--text);font-size:17.5px;color:var(--on-night-sub);margin:0 0 14px;max-width:58ch}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
@media (max-width:560px){.pillars{grid-template-columns:1fr}}
.pillars div{border-top:2px solid var(--brand);padding-top:10px}
.pillars b{display:block;font-size:16px;margin-bottom:3px}
.pillars span{font-size:13.5px;color:var(--on-night-sub);font-family:var(--text)}
.signup{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:24px;display:flex;flex-direction:column;gap:14px;align-self:start}
.signup h3{font-size:26px;font-stretch:72%}
.signup p{font-size:15px;margin:0}
.signup form{display:flex;gap:6px;flex-wrap:wrap}
.signup input{flex:1;min-width:0;padding:11px 12px;border-radius:4px;border:0;font:inherit;background:var(--paper);color:var(--ink)}
.signup button{background:var(--brand);color:var(--brand-ink);padding:11px 18px;border-radius:4px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:13px}
#subMsg{font-size:14px;color:var(--on-night-sub);min-height:1em;margin:0}

footer{background:var(--night);color:var(--on-night-sub);border-top:1px solid rgba(255,255,255,.07)}
footer .wrap{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:30px;padding-block:40px 22px}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr 1fr}}
footer .wm{font-size:34px}
footer p{font-family:var(--text);margin:12px 0 16px;max-width:40ch;font-size:15px}
footer h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-night);margin-bottom:12px;font-stretch:100%}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:14px}
footer ul button:hover,footer ul a:hover{color:var(--on-night)}
.legal{border-top:1px solid rgba(255,255,255,.08);font-size:12px;padding-block:14px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* ---------- toast ---------- */
.toast{position:fixed;inset-inline:16px;bottom:calc(18px + env(safe-area-inset-bottom,0px));margin:0 auto;max-width:440px;background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:6px;font-size:14px;z-index:120;box-shadow:0 10px 30px rgba(0,0,0,.28)}

/* ---------- reader ---------- */
.reader{position:fixed;inset:0;z-index:90;background:var(--bg);overflow-y:auto}
.reader .bar{position:sticky;top:0;background:var(--night);color:var(--on-night);z-index:2}
.reader .bar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:58px;gap:12px}
.reader .back{font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:12.5px;display:flex;gap:8px;align-items:center}
.reader .bar .logo svg{width:30px;height:30px}
.reader .bar .logo .wm{font-size:22px}
.reader article{max-width:780px;margin:0 auto;padding:30px 16px 64px;display:flex;flex-direction:column;gap:16px}
.reader h1{font-size:clamp(32px,5.2vw,54px);font-stretch:74%}
.reader .standfirst{font-family:var(--text);font-size:21px;color:var(--sub);margin:0;line-height:1.45}
.byline{display:flex;gap:12px;align-items:center;border-block:1px solid var(--rule);padding-block:11px;flex-wrap:wrap;justify-content:space-between}
.byline .who{display:flex;gap:10px;align-items:center}
.byline .who svg{width:34px;height:34px}
.byline b{font-size:14px;display:block}
.byline small{color:var(--sub);font-size:12.5px}
.share{display:flex;gap:6px;flex-wrap:wrap}
.share a,.share button{display:inline-flex;gap:6px;align-items:center;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:7px 11px;border:1px solid var(--rule);border-radius:999px}
.share svg{width:14px;height:14px}
.share a:hover,.share button:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.reader .body p{font-family:var(--text);font-size:19.5px;line-height:1.68;margin:0 0 20px;max-width:65ch}
.reader .body p:first-child::first-letter{font-family:var(--head);font-weight:900;font-stretch:70%;float:left;font-size:64px;line-height:.82;padding:6px 8px 0 0;color:var(--brand)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags button{font-size:13px;font-weight:700;color:var(--brand);background:var(--brand-soft);padding:4px 10px;border-radius:999px}
.tags button.own{background:var(--brand);color:var(--brand-ink)}
.srcline{font-size:13.5px;color:var(--sub);border-top:1px solid var(--rule);padding-top:12px}
.srcline a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.archive-h{border-top:4px solid var(--ink);padding-top:10px;margin-bottom:20px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.archive-h h1{font-size:clamp(36px,5vw,56px);text-transform:uppercase;font-stretch:66%}
.archive-h button{font-size:12.5px;font-weight:800;color:var(--brand);letter-spacing:.06em;text-transform:uppercase}

/* ---------- WordPress additions ---------- */
.more .menu a{display:block;padding:8px 10px;border-radius:3px;font-weight:600;font-size:14px}
.more .menu a:hover{background:var(--soft)}
nav.cats a.nv{display:block;padding:22px 9px 19px;font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;color:var(--on-night-sub);border-bottom:3px solid transparent}
nav.cats a.nv:hover{color:var(--on-night)}
nav.cats a.nv[aria-current="page"]{color:var(--on-night);border-bottom-color:var(--brand)}
@media (max-width:1180px){nav.cats a.nv{padding:11px 10px 9px}}
.breaking .item{display:block}
.breaking .item[hidden]{display:none}
.must li a{display:flex;gap:10px;text-align:start;padding-block:9px;border-bottom:1px solid var(--rule);width:100%;font-weight:700;font-size:15px;line-height:1.25}
.must li a:hover{color:var(--brand)}
.must li a span{color:var(--brand);font-weight:900;flex:none}
.sec-h a{font-size:12.5px;font-weight:800;color:var(--brand);letter-spacing:.06em;text-transform:uppercase}
.sec-h a:hover{text-decoration:underline}
ol.most a{display:grid;grid-template-columns:34px 1fr;gap:6px;padding-block:10px;border-bottom:1px solid var(--rule);font-weight:700;font-size:15px;line-height:1.25}
ol.most a::before{content:counter(n);font-weight:900;font-stretch:66%;font-size:32px;line-height:.85;color:var(--brand)}
ol.most a:hover{color:var(--brand)}
.cloud a,.tags a{font-size:13px;font-weight:700;color:var(--brand);background:var(--brand-soft);padding:4px 10px;border-radius:999px}
.cloud a.own,.tags a.own{background:var(--brand);color:var(--brand-ink)}
.single-wrap{max-width:780px;margin:0 auto;padding:30px 0 40px;display:flex;flex-direction:column;gap:16px}
.single-wrap h1{font-size:clamp(32px,5.2vw,54px);font-stretch:74%}
.single-wrap .standfirst{font-family:var(--text);font-size:21px;color:var(--sub);margin:0;line-height:1.45}
.entry p,.entry li{font-family:var(--text);font-size:19.5px;line-height:1.68;max-width:65ch}
.entry p{margin:0 0 20px}
.entry>p:first-of-type::first-letter{font-family:var(--head);font-weight:900;font-stretch:70%;float:left;font-size:64px;line-height:.82;padding:6px 8px 0 0;color:var(--brand)}
.entry a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.entry h2{font-size:30px;margin:28px 0 12px}
.entry h3{font-size:23px;margin:22px 0 10px}
.entry img{height:auto;border-radius:4px}
.entry .wp-block-image figcaption,.entry figcaption{font-size:13px;color:var(--sub)}
.page-entry p,.page-entry li{font-size:18px}
.page-entry>p:first-of-type::first-letter{all:unset}
.pagination{display:flex;gap:6px;justify-content:center;padding-top:30px;flex-wrap:wrap}
.pagination .page-numbers{padding:7px 13px;border:1px solid var(--rule);border-radius:999px;font-weight:700}
.pagination .current{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.adslot{margin:22px auto 0;max-width:970px;min-height:90px;text-align:center}
.adslot.mpu{min-height:250px;margin:0}
.adslot.inarticle{margin:0 0 20px}
.widget{margin:0}
.widget-title{font-size:19px;text-transform:uppercase;font-stretch:72%;border-top:4px solid var(--ink);padding-top:8px;margin-bottom:8px}
.contact-card{background:var(--soft);border-radius:6px;padding:16px 18px;font-family:var(--head)}
.contact-card b{display:block;margin-bottom:4px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.screen-reader-text:focus{clip:auto;width:auto;height:auto;z-index:300;background:var(--paper);padding:10px;top:10px;left:10px}

/* rail social buttons sit on a light ground */
.rail .social a{color:var(--ink);background:var(--soft)}
.rail .social a:hover{color:#fff}
/* widgets */
.widget ul,.widget ol{list-style:none;margin:0;padding:0}
.widget li{padding-block:7px;border-bottom:1px solid var(--rule);font-weight:600}
.widget input[type=search],.widget input[type=text]{width:100%;min-width:0;padding:9px 12px;border:1px solid var(--rule);border-radius:999px;background:var(--paper);color:var(--ink);font:inherit}
.widget .wp-block-search__inside-wrapper{display:flex;gap:6px}
.widget .wp-block-search__button,.widget button{background:var(--brand);color:var(--brand-ink);border:0;border-radius:999px;padding:8px 14px;font-weight:800}
.widget h2,.widget .wp-block-heading{font-size:19px;text-transform:uppercase;font-stretch:72%;border-top:4px solid var(--ink);padding-top:8px;margin-bottom:8px}
.comment-respond input[type=text],.comment-respond input[type=email],.comment-respond input[type=url],.comment-respond textarea{width:100%;padding:10px 12px;border:1px solid var(--rule);border-radius:4px;background:var(--paper);color:var(--ink);font:inherit}
/* keep all main sports visible in the menu bar */
@media (min-width:1181px){
  nav.cats a.nv,.more>button{padding-inline:7px;letter-spacing:.035em}
  .search input{width:150px}
  .mast .wrap{gap:16px}
}
@media (min-width:1181px) and (max-width:1320px){.search{display:none}}
nav.cats .scroll.overflow{mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent)}

/* ---------- 3.1: sport pages, headline cards, live scores ---------- */
.sport-hero{position:relative;overflow:hidden;background:var(--night);color:var(--on-night);border-radius:6px;margin-top:20px;min-height:220px;display:flex;align-items:flex-end}
.sport-hero .bg{position:absolute;inset:0}
.sport-hero .bg svg{width:100%;height:100%;display:block}
.sport-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,12,9,.92) 0%,rgba(5,12,9,.7) 45%,rgba(5,12,9,.15) 100%)}
.sport-hero .in{position:relative;z-index:1;padding:28px 28px 26px;max-width:720px;display:flex;flex-direction:column;gap:8px}
.sport-hero .lbl{color:var(--gold)}
.sport-hero h1{font-size:clamp(44px,7vw,84px);font-stretch:66%;font-style:italic;font-weight:900;text-transform:uppercase;line-height:.9;letter-spacing:-.01em}
.sport-hero p{margin:0;font-family:var(--text);font-size:17px;color:var(--on-night-sub);max-width:52ch}
.sport-hero .stats{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--on-night)}
@media (max-width:640px){.sport-hero{min-height:180px}.sport-hero .in{padding:20px}}
.lead-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:22px;align-items:center;margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--rule)}
.lead-row h2{font-size:clamp(26px,3vw,36px);font-stretch:76%}
.lead-row .txt{display:flex;flex-direction:column;gap:8px;min-width:0}
.lead-row p{margin:0;font-family:var(--text);font-size:17px;color:var(--sub)}
@media (max-width:720px){.lead-row{grid-template-columns:1fr}}
.story.ext h3::after{content:" ↗";font-size:.7em;color:var(--sub);font-weight:600}
.srcbadge{position:absolute;inset-block-start:10px;inset-inline-start:10px;background:rgba(5,12,9,.78);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:2px;backdrop-filter:blur(4px)}
.meta .official{color:var(--brand);font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:11px}
.sec-h .meta{font-size:12px}
@media (max-width:640px){.sec-h{flex-wrap:wrap}.sec-h .meta{flex-basis:100%}}
.breaking.latest{background:var(--ink)}
.breaking.latest .tagb{background:var(--brand);color:var(--brand-ink)}
.breaking.latest .tagb i{background:var(--brand-ink)}
.livecount{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--hot)}
.livecount i{width:8px;height:8px;border-radius:50%;background:var(--hot);animation:pulse 1.4s infinite}
.pill.NEXT{background:var(--brand-soft);color:var(--brand)}
.match .tm span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.match .tm span:last-child{flex:none}
.match .nt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scores .strip.updating{opacity:.6;transition:opacity .2s}

/* ---------- 3.2: clickable matches and fixtures, headline pictures ---------- */
a.match{color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
a.match:hover{border-color:var(--brand);box-shadow:0 6px 18px rgba(0,0,0,.08);transform:translateY(-1px)}
a.match .go{font-size:11.5px;font-weight:800;letter-spacing:.04em;color:var(--brand);margin-top:2px}
.fix li{padding:0;display:block}
.fix li a{display:grid;grid-template-columns:48px 1fr;gap:10px;padding-block:9px;color:inherit;text-decoration:none}
.fix li a:hover .w{color:var(--brand)}
.fix .ext{font-size:.8em;color:var(--sub)}
.img .pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.img .srcbadge,.img .flag,.img .credit{z-index:2}

/* Cricinfo-style cricket cards */
.match .tm span:last-child small.ov{font-size:11.5px;font-weight:500;color:var(--sub);margin-inline-end:4px}
.match .tm span:last-child b{font-weight:800}
.match .lg{font-size:11px;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.match{width:250px}
.match .nt{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}

/* ---------- 3.2: score centre in the cricket.com.au style ---------- */
.scores{background:var(--night);border-bottom:0;color:var(--on-night)}
.scores .head h2{color:var(--on-night)}
.scores .chip{border-color:rgba(255,255,255,.18);color:var(--on-night-sub)}
.scores .chip[aria-pressed="true"]{background:var(--on-night);border-color:var(--on-night);color:var(--night)}
.scores .arrows button{border-color:rgba(255,255,255,.2);color:var(--on-night)}
.scores .arrows button:hover{background:rgba(255,255,255,.08)}
.scores .livecount{color:#c6f432}
.scores .livecount i{background:#c6f432}
.strip{gap:8px}
.match{width:300px;background:var(--night-2);border:0;border-radius:4px;color:var(--on-night);padding:12px 14px 12px;gap:7px}
a.match:hover{background:#163126;box-shadow:none;transform:none}
.match .st{justify-content:flex-start;align-items:center;gap:8px;color:var(--on-night-sub);font-size:12.5px}
.match .st .ttl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.match .pill{flex:none;border-radius:2px;font-size:11px;padding:2px 7px}
.match .pill.LIVE{background:#c6f432;color:#0b1a06;position:relative;padding-inline-end:20px}
.match .pill.LIVE::after{content:"";position:absolute;inset-inline-end:6px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#0b1a06;box-shadow:0 0 0 0 rgba(11,26,6,.5);animation:ping 1.6s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(11,26,6,.45)}100%{box-shadow:0 0 0 7px rgba(11,26,6,0)}}
.match .pill.TODAY{background:var(--gold);color:var(--gold-ink)}
.match .pill.FT,.match .pill.RESULT{background:rgba(255,255,255,.12);color:var(--on-night)}
.match .pill.NEXT{background:rgba(255,255,255,.08);color:var(--on-night-sub)}
.match .nt{order:0;border-top:0;padding-top:0;margin:0;color:var(--on-night);font-size:13.5px;font-weight:600;min-height:2.6em}
.match .tm{font-size:15px;font-weight:600;align-items:center;position:relative;padding-inline-start:12px}
.match .tm span:first-child{display:flex;align-items:center;gap:8px}
.match .tm.bat::before{content:"";position:absolute;inset-inline-start:0;top:50%;margin-top:-4px;border-block:4px solid transparent;border-inline-start:6px solid var(--on-night)}
.match .tm.w span:first-child::after{content:none}
.match .tm.w{font-weight:800}
.match .tm b{font-weight:800;font-variant-numeric:tabular-nums}
.match .tm small.ov{color:var(--on-night-sub);font-weight:500}
.tb{font-style:normal;flex:none;width:30px;height:20px;border-radius:3px;display:grid;place-items:center;font-size:9.5px;font-weight:900;letter-spacing:.02em;color:#fff;background:hsl(var(--h) 55% 34%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.match .go{color:#c6f432;margin-top:4px}
.match .lg{display:none}
@media (prefers-reduced-motion:reduce){.match .pill.LIVE::after{animation:none}}

/* ---------- 3.3: live news bar ---------- */
.breaking{position:relative}
.breaking .ticker{position:relative;flex:1;min-width:0;height:28px;overflow:hidden}
.breaking .item{position:absolute;inset:0;display:flex;align-items:center;gap:10px;white-space:nowrap;opacity:0;transform:translateY(100%);transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s;pointer-events:none;font-weight:700;font-size:15px;color:inherit;text-decoration:none}
.breaking .item[hidden]{display:flex}
.breaking .item.on{opacity:1;transform:none;pointer-events:auto}
.breaking .item.out-up{opacity:0;transform:translateY(-100%)}
.breaking .item.out-down{opacity:0;transform:translateY(100%)}
.breaking .item span{overflow:hidden;text-overflow:ellipsis;min-width:0}
.breaking .item:hover span{text-decoration:underline;text-underline-offset:3px}
.breaking .item .src{flex:none;font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:2px;background:rgba(255,255,255,.16)}
.breaking.latest .item .src{background:var(--brand);color:var(--brand-ink)}
.brbar{position:absolute;inset-inline:0;bottom:0;height:2px;background:rgba(255,255,255,.08)}
.brbar i{display:block;height:100%;width:0;background:#c6f432}
.breaking:not(.latest) .brbar i{background:#fff}
@media (prefers-reduced-motion:reduce){.breaking .item{transition:opacity .2s;transform:none}.breaking .item.out-up,.breaking .item.out-down{transform:none}.brbar i{transition:none!important}}
@media (max-width:640px){.breaking .item .src{display:none}.breaking .item{font-size:14px}}

/* 3.3: compact phone header (date and social icons on one line, logo and alerts on one line) */
@media (max-width:640px){
  .util .wrap{flex-wrap:nowrap;gap:8px}
  .util .wrap>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .util .dom{display:none}
  .util .wrap>span:has(.upd) .dt{display:none}
  .util .wrap>span:has(.upd){font-size:0}
  .util .upd{font-size:12.5px}
  .util .social a{width:26px;height:26px}
  .util .social{gap:4px;flex:none}
  .mast .wrap{flex-wrap:wrap}
  .logo .mark,.logo svg{width:34px;height:34px}
  .logo .wm{font-size:23px}
  .alertbtn{padding:9px!important;min-width:0}
  .alertbtn #alertTxt{display:none}
}

/* 3.4: editor photo in bylines and the About band */
.byline .who img.avatar-ed{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--brand)}
.editor-card{display:flex;gap:16px;align-items:center;margin-top:26px;padding:16px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);max-width:560px}
.editor-card img{width:88px;height:88px;border-radius:50%;object-fit:cover;flex:none;border:3px solid var(--brand)}
.editor-card .lbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);font-weight:800}
.editor-card b{display:block;font-size:19px;color:var(--on-night);margin:2px 0 4px}
.editor-card p{margin:0;font-size:13.5px;line-height:1.5;color:var(--on-night-sub)}
@media (max-width:480px){.editor-card img{width:68px;height:68px}}
.page-content ul.credits,.entry ul.credits{font-size:14px;line-height:1.6}

/* 3.8: complete pictures. The whole photo is shown (nothing cut off); a blurred copy of it fills the frame behind. */
.img img:not(.blur),.img .pic{object-fit:contain;z-index:1}
.img img.blur{object-fit:cover;z-index:0;filter:blur(22px) saturate(1.15) brightness(.72);transform:scale(1.2)}
.story:hover .img img.blur{transform:scale(1.25)}
.img img.blur + img{background:transparent}
@media (prefers-reduced-motion:reduce){.story:hover .img img.blur{transform:scale(1.2)}}

/* 4.3: email alerts sign-up */
.alerts-modal{position:fixed;inset:0;z-index:1000;background:rgba(5,12,9,.62);display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(3px)}
.alerts-modal[hidden]{display:none!important}
.am-box{position:relative;background:var(--paper,#fff);color:var(--ink,#0c1a14);width:min(440px,100%);border-radius:18px;padding:28px 26px 22px;box-shadow:0 30px 80px rgba(0,0,0,.35);text-align:center}
.am-x{position:absolute;top:10px;right:12px;border:0;background:none;font-size:26px;line-height:1;cursor:pointer;color:inherit;opacity:.6}
.am-ic{display:inline-flex;width:54px;height:54px;border-radius:50%;background:var(--brand,#12a150);color:#fff;align-items:center;justify-content:center;margin-bottom:10px}
.am-ic svg{width:26px;height:26px}
.am-box h2{margin:0 0 6px;font-size:22px}
.am-box p{margin:0 0 14px;font-size:14.5px;line-height:1.5;opacity:.85}
.am-f{display:flex;gap:8px}
.am-f input[type=email]{flex:1;min-width:0;padding:12px 14px;border-radius:30px;border:1px solid rgba(0,0,0,.18);font-size:15px}
.am-f button{border:0;border-radius:30px;padding:0 18px;background:var(--brand,#12a150);color:#fff;font-weight:800;cursor:pointer}
.am-f button[disabled]{opacity:.6}
.am-f .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.am-msg{min-height:20px;margin:10px 0 0!important;font-weight:600}
.am-push{margin-top:6px;border:0;background:none;color:var(--brand,#12a150);font-weight:700;cursor:pointer;font-size:13px;text-decoration:underline}
@media (max-width:420px){.am-f{flex-direction:column}.am-f button{padding:12px}}

/* =====================================================================
   Daily Pakistan Online 1.0: Urdu (RTL) typography, Pakistan green brand
   Headlines in Nastaliq; reading text and small UI labels in Naskh,
   which stays legible at small sizes. Arabic script must never be
   letter-spaced, upper-cased, italicised or condensed.
   ===================================================================== */
:root{
  --brand:#0a7a3c; --brand-deep:#065c2c; --brand-soft:#e3f2e8;
  --night:#06231a; --night-2:#0b3325; --on-night:#f1f7f3; --on-night-sub:#a9c4b6;
  --head:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Urdu Typesetting",serif;
  --text:"Noto Naskh Arabic","Noto Nastaliq Urdu",Tahoma,serif;
  --ui:"Noto Naskh Arabic",Tahoma,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--brand:#2bb466;--brand-deep:#0a7a3c;--brand-soft:#0f2a1c;--night:#03140e;--night-2:#082419}}
:root[data-theme="dark"]{--brand:#2bb466;--brand-deep:#0a7a3c;--brand-soft:#0f2a1c;--night:#03140e;--night-2:#082419}
html{direction:rtl}
body{font-family:var(--ui);font-size:16px;line-height:1.8}
*,*::before,*::after{letter-spacing:0!important;font-stretch:normal!important}
h1,h2,h3,h4,.lbl,.wm,.sec-h h2,.box h2,.widget-title,.archive-h h1,.sport-hero h1,.about h2,.must h2,.scores .head h2,
nav.cats a.nv,.more>button,.alertbtn,.share a,.share button,.signup button,.sec-h a,.archive-h a,.pill,.srcbadge,.tally span,
.chart h3,footer h4,.fix .d span,.meta .official,.livecount,.breaking .item .src,#intro .tag,#intro .skip,.reader .back,.sport-hero .stats{
  text-transform:none!important;font-style:normal!important}
h1,h2,h3,h4{font-family:var(--head);font-weight:700;line-height:1.95;text-wrap:pretty}
.lbl{font-family:var(--ui);font-size:12.5px;font-weight:700}
.meta,.util,nav.cats,.more,.tools,.breaking,.share,.tags,.cloud,.srcline,.byline,.pagination,.fix,.scores,.signup,.legal,footer ul{font-family:var(--ui)}

/* wordmark: ڈیلی پاکستان آن لائن */
.wm{font-family:var(--head);font-weight:700;line-height:1.5;color:var(--on-night);white-space:nowrap;display:inline-flex;align-items:baseline;gap:.28em}
.wm b{color:#7fe0a6;font-weight:700;font-size:.72em}
.logo .wm{font-size:27px}
.logo img.custom-logo{max-height:56px;width:auto;display:block}
.logo svg{display:none}
footer .wm{font-size:32px}
#intro .wm{font-size:clamp(44px,10vw,92px);clip-path:inset(0 0 0 100%)}
#intro .line i{transform-origin:right}
@media (max-width:1300px){.logo .wm{font-size:25px}}
@media (max-width:640px){.logo .wm{font-size:22px}}

/* masthead and menu */
nav.cats a.nv,.more>button{font-size:15.5px;font-weight:700;padding:18px 10px 15px}
@media (max-width:1180px){nav.cats a.nv,.more>button{padding:9px 10px 7px}}
.more .menu a{font-size:15px}
.search input{padding:7px 32px 7px 12px;font-family:var(--ui)}
.alertbtn{font-size:13.5px;font-family:var(--ui)}
nav.cats .scroll.overflow{mask-image:linear-gradient(270deg,#000 calc(100% - 18px),transparent);-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 18px),transparent)}

/* breaking ticker */
.breaking .wrap{min-height:48px}
.breaking .ticker{height:36px}
.breaking .item{font-size:16px;font-weight:700;line-height:36px}
.breaking .tagb{font-weight:700;font-size:13.5px;padding:2px 10px}
.breaking .item .src{font-size:12px}

/* cards and headlines */
.hero h2{font-size:clamp(26px,3.3vw,40px);line-height:1.9}
.hero p,.row .sf,.lead-row p,.sport-hero p,.pkg p,.about p,.empty,footer p{font-family:var(--text);line-height:1.95}
.stack h3{font-size:17px;line-height:1.9}
.row h3{font-size:17.5px;line-height:1.9}
.row.two h3{font-size:21px}
.lead-row h2{font-size:clamp(24px,2.6vw,32px)}
.sec-h h2{font-size:25px;line-height:1.7}
.box h2,.widget-title,.widget h2,.widget .wp-block-heading{font-size:20px;line-height:1.7}
.must h2{font-size:18px}
.must li a,ol.most a,.web a b{font-family:var(--head);font-weight:700;font-size:15.5px;line-height:1.95}
ol.most a::before{font-family:var(--ui);font-size:28px;line-height:1.3}
.cloud a,.tags a{font-size:14px;font-weight:700}
.sport-hero h1{font-size:clamp(40px,6vw,70px);line-height:1.6}
.sport-hero::after{background:linear-gradient(270deg,rgba(3,20,14,.93) 0%,rgba(3,20,14,.72) 45%,rgba(3,20,14,.15) 100%)}
.archive-h h1{font-size:clamp(32px,4.4vw,48px);line-height:1.7}
.about h2{font-size:clamp(30px,4.4vw,50px);line-height:1.7}
.signup h3{font-size:24px}
.story.ext h3::after{content:" ↖"}

/* story page: Naskh body, no Latin drop cap (it would break the joined letters) */
.single-wrap h1{font-size:clamp(28px,4.4vw,44px);line-height:1.85}
.single-wrap .standfirst{font-size:20px;line-height:1.95}
.entry p,.entry li{font-size:19.5px;line-height:2.05;max-width:70ch}
.entry>p:first-of-type::first-letter,.reader .body p:first-child::first-letter{all:unset}
.entry h2{font-size:27px}
.entry h3{font-size:22px}
.byline b{font-size:15px}
.byline .desk{width:44px;height:44px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-family:var(--head);font-size:20px;line-height:1;flex:none}
.byline .desk span{transform:translateY(-6px)}

/* small physical-direction fixes for RTL */
.am-x{right:auto;left:12px}
.am-f .hp{left:auto;right:-9999px}
.screen-reader-text:focus{left:auto;right:10px}
.match .tm b,.match .tm small.ov,.tb{direction:ltr;unicode-bidi:isolate}
.pagination .page-numbers{font-family:var(--ui)}
.contact-card{font-family:var(--ui)}
.social a.pi:hover{background:#e60023}.social a.em:hover{background:#c5221f}
.editor-card b{font-family:var(--head);font-size:20px}
.am-box h2{font-size:21px}
.fix .w{font-family:var(--ui)}
@media (max-width:760px){footer .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}footer .wrap>div:first-child{grid-column:1/-1}footer .wm{font-size:28px}}
html,body{overflow-x:clip}
.sport-hero .in{gap:2px}
.sport-hero h1{margin:18px 0 14px}

/* ---------- 1.1: the Daily Pakistan Online calligraphy logo ---------- */
.wm-logo{display:block;height:70px;width:auto;max-width:none}
.mast .wrap{min-height:84px}
.logo{padding-block:6px}
footer .wm-logo{height:110px;margin-bottom:6px}
#intro .wm-logo{height:clamp(150px,28vw,260px);clip-path:inset(0 0 0 100%);animation:wipe .8s cubic-bezier(.7,0,.2,1) .3s forwards}
.logo img.custom-logo{max-height:64px}
@media (max-width:1300px){.wm-logo{height:56px}}
@media (max-width:640px){.mast .wrap{min-height:64px}.wm-logo{height:50px}footer .wm-logo{height:90px}}

/* ---------- 1.1: every picture is shown complete, never cut ---------- */
.img img:not(.blur),.img .pic{object-fit:contain!important}
/* On the story page the photo keeps its own shape (tall or wide), shown whole. */
.single-wrap>.img{aspect-ratio:auto;background:var(--soft);display:flex;justify-content:center}
.single-wrap>.img>img:not(.blur){position:relative;inset:auto;width:auto;max-width:100%;height:auto;max-height:80vh;margin:0 auto;z-index:1}
.single-wrap>.img>img.blur{display:none}
.single-wrap>.img>svg{position:relative;width:100%;height:auto;aspect-ratio:16/9}
.single-wrap>.img:has(>img:not(.blur))>svg{position:absolute;inset:0;height:100%;opacity:0}
.entry img,.entry figure img{max-width:100%;height:auto;object-fit:contain}
.entry .wp-block-image img{width:auto}

/* ---------- 1.2: white header, green writing ---------- */
:root{--mast:#ffffff;--mast-ink:#0a6b3a;--mast-sub:#3f7d5c;--mast-rule:#dbe8e0}
.util,.mast{background:var(--mast)!important;color:var(--mast-ink)!important}
.util{border-bottom:1px solid var(--mast-rule)!important;color:var(--mast-sub)!important}
.util b{color:var(--mast-ink)!important}
.util .today{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.util .today>span+span{padding-inline-start:14px;border-inline-start:1px solid var(--mast-rule)}
.util .dt{color:var(--mast-ink);font-weight:700}
.upd::before{background:#1fa855}
.mast{box-shadow:0 1px 0 var(--mast-rule),0 6px 18px rgba(10,107,58,.06)!important}
.util .social a,.mast .social a{color:var(--mast-ink)!important;background:#e8f3ec!important}
.util .social a:hover{color:#fff!important}
nav.cats a.nv,.more>button{color:var(--mast-ink)!important;font-weight:700}
nav.cats a.nv:hover,.more>button:hover,.more>button[aria-expanded="true"]{color:#06401f!important}
nav.cats a.nv[aria-current="page"]{color:#06401f!important;border-bottom-color:var(--mast-ink)!important}
.search input{background:#f2f8f4!important;border-color:var(--mast-rule)!important;color:var(--mast-ink)!important}
.search input::placeholder{color:var(--mast-sub)!important}
.search svg{color:var(--mast-sub)!important}
.alertbtn{background:var(--mast-ink)!important;color:#fff!important}
.logo .wm-logo{filter:none}

/* ---------- 1.2: columns ---------- */
.colrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:700px){.colrow{grid-template-columns:1fr}}
.colcard{display:flex;gap:14px;align-items:flex-start;padding:16px;border:1px solid var(--rule);border-radius:10px;background:var(--paper);transition:border-color .15s,box-shadow .15s}
.colcard:hover{border-color:var(--brand);box-shadow:0 6px 18px rgba(10,107,58,.08)}
.colcard:hover h3{text-decoration:underline;text-underline-offset:3px}
.colav{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid var(--brand);background:var(--brand);color:#fff;display:grid;place-items:center;font-family:var(--head);font-size:24px;line-height:1}
.colav span{transform:translateY(-6px)}
.colcard .who{display:block;color:var(--brand);font-size:14px;font-weight:700;font-family:var(--ui)}
.colcard h3{font-size:19px;margin:2px 0 4px}
.colcard p{margin:0 0 4px;font-family:var(--text);color:var(--sub);font-size:15px;line-height:1.9}
@media (max-width:640px){
  .util .wrap>span.today{font-size:12px!important;display:flex;flex-wrap:nowrap;gap:8px;white-space:nowrap}
  .util .today .dt{display:inline!important}
  .util .today .upd{display:none}
  .util .today>span+span{padding-inline-start:8px}
}

/* ---------- 1.3: header sizes, breaking bar aligned edge to edge ---------- */
html,body{margin:0;padding:0}
.util{font-size:14.5px!important}
.util .wrap{padding-block:9px!important}
.util .dt{font-size:15px}
.util .social a{width:32px;height:32px}
.wm-logo{height:84px!important}
.mast .wrap{min-height:104px!important}
.logo{padding-block:8px}
@media (max-width:1300px){.wm-logo{height:76px!important}}
@media (max-width:640px){.wm-logo{height:58px!important}.mast .wrap{min-height:72px!important}.util{font-size:13px!important}}
.breaking .wrap{min-height:52px;gap:16px;align-items:center}
.breaking .tagb{height:34px;padding:0 12px;border-radius:4px;font-size:14.5px;display:inline-flex;align-items:center}
.breaking .ticker{height:34px;display:flex;align-items:center}
.breaking .item{line-height:34px;font-size:16.5px}
.breaking .ctl{gap:8px}
.breaking .ctl button{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center}
.breaking .ctl button:hover{background:rgba(255,255,255,.3)}
.breaking .ctl svg{width:16px;height:16px}
.brbar{height:3px;background:rgba(0,0,0,.18)!important}
.brbar i{background:rgba(255,255,255,.75)!important}
@media (max-width:640px){.util .social{display:none!important}.util .wrap{justify-content:center}}


/* ---------- 1.4: no category banner, smaller sidebar headings and hashtags, tags and follow at the page end ---------- */
body,body *{letter-spacing:normal!important}
:is(h1,h2,h3,h4,em,i,.lbl,.about h2 em){font-style:normal!important}
.rail .box h2{font-size:15.5px!important;line-height:2!important;white-space:nowrap;overflow:hidden;text-overflow:clip;font-stretch:normal!important}
@media (max-width:1180px) and (min-width:961px){.rail .box h2{font-size:13.5px!important}}
.cloud{display:flex;flex-wrap:wrap;gap:6px}
.cloud a,.tags a{font-size:12px!important;padding:2px 9px!important;line-height:1.9;font-weight:600!important}
.img .credit{display:none!important}
.storycredits{margin:22px 0 6px;padding:12px 14px;border-inline-start:3px solid var(--brand);background:var(--brand-soft);border-radius:4px;font-family:var(--text);font-size:14px;line-height:1.9;color:var(--sub)}
.storycredits p{margin:0}
.storycredits p+p{margin-top:4px}
.storycredits b{color:var(--ink);font-weight:700}
.storycredits a{color:var(--brand)}
.archive-h{margin-top:22px}
.endband{background:var(--paper,#fff);border-top:1px solid var(--rule);padding:26px 0 30px}
.endband .wrap{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:start}
.endband h2{font-size:17px;line-height:1.9;margin:0 0 8px;border-top:3px solid var(--ink);padding-top:6px}
.endband .social.big{display:flex;gap:10px}
@media (max-width:760px){.endband .wrap{grid-template-columns:1fr}}
.about .pillars{display:none}

/* ---------- 1.4: headline font = Gulzar (a newspaper-style Nastaliq that joins letters correctly, e.g. "پڑھی", "بریفنگ") ---------- */
@font-face{font-family:"DPO Nastaliq";src:url("assets/fonts/gulzar-arabic.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;size-adjust:118%;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+25CC}
:root{--head:"DPO Nastaliq","Noto Nastaliq Urdu","Jameel Noori Nastaleeq",serif}
h1,h2,h3,h4,.must li a,ol.most a,.web a b,.wm{font-synthesis:none}


/* ---------- 1.4b: newspaper layout (cards: picture, date, centred headline), green-and-red ticker, icon-only sharing ---------- */
:root{--dpo-green:#0a7a3c;--dpo-red:#c8102e}
/* Ticker */
.breaking,.breaking.latest{background:var(--dpo-red)!important;color:#fff!important}
.breaking .wrap{min-height:50px!important;gap:0!important;padding-inline:0!important}
.breaking .tagb,.breaking.latest .tagb{background:var(--dpo-green)!important;color:#fff!important;height:50px!important;min-width:96px;justify-content:center;border-radius:0!important;padding:0 18px!important;font-family:var(--head)!important;font-size:21px!important;line-height:1!important;font-weight:700}
.breaking .tagb i{display:none}
.breaking .ticker{height:50px!important;padding-inline:18px}
.breaking .item{line-height:50px!important;font-family:var(--head)!important;font-size:18px!important;font-weight:400!important;color:#fff!important}
.breaking .item span{padding-top:2px}
.breaking .ctl,.brbar,.breaking .item .src{display:none!important}
/* Section heads */
.sec-h,.archive-h{border-top:0!important;padding-top:0!important;border-bottom:2px solid #dcdcdc;padding-bottom:6px;margin-bottom:22px!important;display:flex;justify-content:space-between;align-items:flex-end}
.sec-h h2,.archive-h h1{font-family:var(--head)!important;font-size:24px!important;line-height:1.9!important;font-weight:700;color:var(--ink);margin:0}
.archive-h h1{font-size:30px!important}
.sec-h h2 .dot{display:none}
.sec-h a,.archive-h a{font-size:13px!important;font-weight:600;color:var(--sub)!important}
.sec-h a:hover{color:var(--dpo-green)!important}
/* Cards */
.row{gap:26px 28px!important}
.story.card{display:flex;flex-direction:column;gap:0;text-align:center}
.story.card .img{border-radius:0;aspect-ratio:16/10}
.story.card .cdate{display:block;text-align:start;font-family:var(--ui);font-size:13.5px;font-weight:700;color:#5b5b5b;margin:10px 4px 2px;direction:rtl}
.story.card h3{font-family:var(--head)!important;font-size:19px!important;line-height:2!important;font-weight:400;color:var(--ink);margin:0 4px}
.row.two .story.card h3{font-size:21px!important}
.story.card:hover h3{color:var(--dpo-green)}
.story.card .sf{display:none}
.story:hover .img img,.story:hover .img svg{transform:none!important}
.img .flag,.img .srcbadge,.img .credit{display:none!important}
/* Front page lead: smaller, calmer type */
.hero h2{font-size:clamp(24px,2.5vw,32px)!important;line-height:1.9!important}
.hero p{font-size:16px!important}
.stack .story h3{font-size:16.5px!important;line-height:1.95!important}
.must h2{font-size:20px!important}
.must li a,ol.most a{font-size:14.5px!important;line-height:1.95!important}
ol.most a::before{font-size:22px!important}
.lead-row h2{font-size:clamp(22px,2.3vw,28px)!important}
.single-wrap h1{font-size:clamp(26px,3vw,36px)!important;line-height:1.85!important}
.standfirst{font-size:17px!important}
.entry p{font-size:18px;line-height:2.05}
/* Byline: logo instead of a letter */
.byline .who img.avatar-logo{width:48px;height:48px;border-radius:50%;background:#fff;border:1px solid var(--rule);object-fit:contain;padding:3px;flex:none}
.byline b{font-size:15.5px!important}
/* Icon-only share buttons and follow icons */
.share{gap:8px!important;align-items:center}
.share a,.share button{width:38px;height:38px;padding:0!important;border:0!important;border-radius:50%!important;display:inline-grid!important;place-items:center;color:#fff!important;transition:transform .15s ease,filter .15s ease}
.share a svg,.share button svg{width:18px;height:18px;fill:currentColor}
.share button svg{fill:none}
.share .s-fb{background:#1877f2}.share .s-x{background:#000}.share .s-wa{background:#25d366}.share .s-pi{background:#e60023}.share .s-ln{background:#5f6b66}
.share a:hover,.share button:hover{transform:translateY(-2px);filter:brightness(1.08);background-color:inherit}
.social.big a{width:44px;height:44px;border-radius:50%;display:inline-grid;place-items:center;color:#fff!important;border:0!important}
.social.big a svg{width:20px;height:20px}
.social.big a.fb{background:#1877f2}.social.big a.x{background:#000}.social.big a.pi{background:#e60023}.social.big a.yt{background:#ff0000}.social.big a.ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}.social.big a.wa{background:#25d366}.social.big a.tt{background:#111}.social.big a.email,.social.big a.em{background:var(--dpo-green)}
.social.big a:hover{transform:translateY(-2px)}
@media (max-width:640px){.breaking .tagb,.breaking.latest .tagb{min-width:70px;font-size:18px!important;padding:0 12px!important}.breaking .item{font-size:16px!important}.story.card h3{font-size:18px!important}}

/* ---------- 1.4c: design pass — white newspaper page, one heading style everywhere, calmer type, polished pictures ---------- */
:root{--bg:#ffffff;--soft:#f4f6f5;--rule:#e3e7e5}
body{background:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0d1311}body{background:var(--bg)}}
/* One heading style: title with a short green bar, over a light full-width rule */
.sec-h,.archive-h,.must,.rail .box h2,.endband h2{border-top:0!important}
.sec-h,.archive-h{position:relative;border-bottom:1px solid var(--rule)!important;padding-bottom:4px!important}
.sec-h::after,.archive-h::after{content:"";position:absolute;inset-inline-start:0;bottom:-2px;width:64px;height:3px;background:var(--dpo-green);border-radius:2px}
.rail .box h2,.must h2,.endband h2{position:relative;padding:0 0 4px!important;margin-bottom:12px!important;border-bottom:1px solid var(--rule)}
.rail .box h2::after,.must h2::after,.endband h2::after{content:"";position:absolute;inset-inline-start:0;bottom:-2px;width:48px;height:3px;background:var(--dpo-green);border-radius:2px}
.rail .box h2,.must h2,.endband h2{font-family:var(--head)!important;font-size:18px!important;line-height:2!important;font-weight:700}
.must{border-top:0!important;padding-top:0!important;margin-top:26px!important}
/* Pictures: soft corners, quiet frame, gentle lift on hover */
.img{border-radius:6px!important;background:#e9eeeb}
.story.card .img{border-radius:6px!important;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.story.card{transition:transform .18s ease}
.story.card:hover{transform:translateY(-2px)}
.story.card:hover .img{box-shadow:0 8px 22px rgba(0,0,0,.12)}
.hero .img{border-radius:8px!important}
/* Lead story */
.top{gap:30px!important;padding-bottom:26px;border-bottom:1px solid var(--rule);margin-bottom:28px}
.hero h2{font-size:clamp(24px,2.4vw,30px)!important;margin:8px 0 4px}
.hero h2:hover,.stack .story:hover h3{color:var(--dpo-green)}
.stack .story{grid-template-columns:minmax(0,1fr) 120px!important;align-items:center}
.stack .story .img{aspect-ratio:4/3}
/* "ضرور پڑھیں": one clear list with green numbers */
.must ol{grid-template-columns:1fr!important}
.must li a{gap:12px!important;padding-block:8px!important;align-items:baseline}
.must li a span{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:50%;background:var(--dpo-green);color:#fff!important;font-family:var(--ui);font-size:12.5px;line-height:1}
/* Most read: numbers in green circles */
ol.most a{grid-template-columns:30px 1fr!important;align-items:baseline;gap:10px!important}
ol.most a::before{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--soft);color:var(--dpo-green)!important;font-family:var(--ui)!important;font-size:14px!important;font-weight:800;line-height:1!important}
ol.most li:first-child a::before{background:var(--dpo-green);color:#fff!important}
/* Story page */
.single-wrap{max-width:780px}
.single-wrap .meta .lbl{font-size:13px}
.entry p{color:#1d2622}
.entry h2,.entry h3{font-family:var(--head);line-height:2;margin:26px 0 6px}
.storynote{margin:24px 0 8px;padding:10px 14px;background:var(--soft);border-inline-start:3px solid var(--dpo-green);border-radius:4px;font-family:var(--text);font-size:14.5px;line-height:1.9;color:var(--sub)}
.tags{margin-top:18px}
/* Columns cards on white */
.colcard{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.colcard:hover{border-color:var(--dpo-green)}
/* Header polish */
.mast{box-shadow:0 1px 0 var(--rule)}
nav.cats a.nv{font-size:16px}
nav.cats a.nv[aria-current="page"]{color:var(--dpo-green)}
.util{background:#fff;border-bottom:1px solid var(--rule)}