/*
Theme Name: Atemad - A Newspaper Theme by Salman Javid S/O Javid Ahmad
Theme URI: https://dailyatemad.com/
Author: Salman Javid S/O Javid Ahmad
Description: The newspaper theme of Daily Atemad, Quetta (since October 1970). Quetta-first homepage, Urdu Nastaliq typography, e-paper, tenders and automatic news.
Version: 0.3.5
Requires at least: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: atemad
*/

/* Layout: a Quetta-first news front — one strong lead, a live Balochistan wire, then one band per desk; no story appears twice. */
:root {
	--red: #ee0000;          /* the masthead red, matched to the logo */
	--red-ink: var(--blue);      /* text accent on white: dark blue (red is kept for the logo and small marks) */
	--blue: var(--blue);
	--blue-2: var(--blue-2);
	--ink: #16171a;
	--ink-2: #4a4a50;
	--muted: #74737a;
	--paper: #ffffff;
	--paper-2: var(--paper-2);
	--rule: var(--rule);
	--rule-strong: #16171a;
	--chip: #fbeaea;
	--wa: #0a6b35;          /* WhatsApp green, deepened for 4.5:1 on white text (PageSpeed, 23 Oct) */
	--green: #01411c;        /* Pakistan flag green */
	--green-2: #0b7a3e;      /* the same green, light enough for bars and text */
	--gold: #e0a42a;         /* Balochistan sand-gold */

	--ur: "Mehr Nastaliq Web", "Nastaliq Fallback", "Noto Sans", serif; /* Gulzar and Noto Nastaliq only on the ?font= trial (21 Oct): a fallback in the stack made browsers fetch Gulzar for every digit */
	--ui: "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;
	--lat: "Noto Sans", "Segoe UI", Arial, sans-serif;
	--lh-head: 1.95;
	--lh-body: 2.2;
	--w: 1240px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--ur); direction: rtl; }
a { color: inherit; text-decoration: none; }
a:hover .h, a.h:hover { color: var(--red-ink); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; top: -40px; inset-inline-start: 8px; background: var(--ink); color: #fff; padding: 6px 10px; z-index: 50; font-family: var(--ui); }
.skip:focus { top: 8px; }
.wrap { max-width: var(--w); margin: 0 auto; padding-inline: 16px; }
.wrap.narrow { max-width: 860px; }

/* ---------- masthead: shaded red band ----------
   The logo keeps its own red; everything around it is jet black and greys, with thin light dividers. */
.masthead { background: #161513; color: #fff; }
.masthead :focus-visible { outline-color: #fff; }
.util { background: #161513; border-bottom: 1px solid rgba(255, 255, 255, .14); font-family: var(--ui); font-size: 13.5px; color: #fff; }
.util .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px; padding-block: 7px; }
.util .links { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; }
.util .links a { color: #fff; }
.util .links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.mast { background: linear-gradient(to left, #1c1d21 0, #1c1b19 55%, #161513 100%); border-bottom: 1px solid rgba(255, 255, 255, .14); }
.mast .wrap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; padding-block: 10px 14px; }
.logo-link { display: block; width: 420px; max-width: 100%; }
.logo { width: 100%; height: auto; }
.mast-tag { font-family: var(--ui); color: #fff; font-size: 15px; line-height: 1.75; text-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
.mast-tag strong { display: block; color: #fff; font-size: 18px; font-weight: 700; }
.mast-tag span { opacity: .92; }
.mast-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

.btn { font-family: var(--ui); font-size: 14.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 4px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); white-space: nowrap; cursor: pointer; line-height: 1.6; }
.btn svg { width: 17px; height: 17px; flex: none; }
/* "red" buttons are the primary buttons; they wear the dark blue, not red. */
.btn.red { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.red:hover { background: var(--blue-2); border-color: var(--blue-2); }
.btn.wa { background: var(--wa); border-color: var(--wa); color: #fff; }
.btn.light { background: #fff; border-color: #fff; color: var(--ink); }
.btn.outline { background: transparent; border-color: rgba(255, 255, 255, .75); color: #fff; }

/* ---------- menu ---------- */
.nav { position: sticky; top: 0; z-index: 20; background: #1c1b19; border-bottom: 2px solid var(--red); }
.admin-bar .nav { top: 32px; }
.nav .wrap { display: flex; align-items: stretch; }
.nav .menu { list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.nav .menu::-webkit-scrollbar { display: none; }
/* Menu after Jang / Express: compact Naskh, one quiet line between rules; the red is kept for the current section. */
.nav .menu { justify-content: space-between; }
.nav .menu a { display: block; padding: 14px 12px 13px; font-family: var(--ui); font-size: 16px; font-weight: 600; line-height: 1.9; color: #eee8dc; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; transition: color .15s; }
.nav .menu a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.nav .menu li + li > a { position: relative; }
.nav .menu li + li > a::before { content: ""; position: absolute; inset-inline-start: 0; top: 30%; bottom: 30%; width: 1px; background: rgba(255, 255, 255, .18); }
.nav .menu .current-menu-item > a, .nav .menu .current-category-ancestor > a, .nav .menu .current-post-ancestor > a { border-bottom-color: var(--gold); color: #fff; background: rgba(255, 255, 255, .08); }
.search-toggle { background: none; border: 0; padding-inline: 10px; color: #eee8dc; cursor: pointer; display: flex; align-items: center; }
.search-toggle svg { width: 20px; height: 20px; }
.search-bar { border-top: 1px solid var(--rule); background: var(--paper-2); }
.search-bar form, .inline-search { display: flex; gap: 8px; padding-block: 10px; }
.search-bar input, .inline-search input { flex: 1; min-width: 0; font: 17px var(--ui); padding: 7px 12px; border: 1px solid var(--rule); border-radius: 4px; background: #fff; }

/* ---------- ticker ---------- */
.latest { background: #f1ebdf; color: var(--ink); border-bottom: 1px solid var(--rule); }
.latest .wrap { display: flex; gap: 16px; align-items: stretch; padding-block: 0; }
/* Ticker: the stories run slowly left-to-right (Urdu direction), loop without a jump, pause on hover. */
.tick-view { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; -webkit-mask-image: linear-gradient(to left, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(to left, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); }
.tick-track { display: flex; width: max-content; }
.tick-track a { padding-inline: 0 22px; margin-inline-end: 22px; border-inline-end: 1px solid #cfcfd3; color: var(--ink); }
.tick-track a:hover { color: var(--blue); }
.tick-track.run { animation: atemad-tick var(--tick-dur, 120s) linear infinite; }
.tick-view:hover .tick-track, .tick-view:focus-within .tick-track { animation-play-state: paused; }
@keyframes atemad-tick { from { transform: translateX(0); } to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) { .tick-view { overflow-x: auto; } .tick-track.run { animation: none; } }
.latest .wrap::-webkit-scrollbar { display: none; }
.latest .k { font-family: var(--ui); font-weight: 700; color: #fff; background: var(--ink); font-size: 14px; white-space: nowrap; display: flex; align-items: center; padding-inline: 14px; }
.latest .k .live-dot { background: var(--red); }
.latest a { white-space: nowrap; font-size: 16.5px; line-height: 2.6; padding-block: 6px 4px; }
.latest time { font-family: var(--ui); color: var(--muted); font-size: 12.5px; margin-inline-start: 8px; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); margin-inline-end: 6px; vertical-align: middle; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }

/* ---------- outside wire: English headlines from other publishers (Atemad Core feeds) ---------- */
.wire-bar { background: #fff; border-bottom: 1px solid var(--rule); font-family: var(--lat); }
.wire-bar .wrap { display: flex; gap: 16px; align-items: stretch; padding-block: 0; }
.wire-bar .k { font-family: var(--lat); font-weight: 600; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); background: var(--paper-2); border-inline-end: 1px solid var(--rule); white-space: nowrap; display: flex; align-items: center; padding-inline: 14px; }
.wire-bar .tick-view { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); }
.wire-bar a { white-space: nowrap; font-size: 14px; line-height: 1.6; padding-block: 11px 10px; padding-inline: 0 22px; margin-inline-end: 22px; border-inline-end: 1px solid var(--rule); color: var(--ink); }
.wire-bar a:hover { color: var(--blue); }
.wire-bar a b { font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-inline-end: 8px; }
.wire-bar a time { font-size: 11.5px; color: var(--muted); margin-inline-start: 8px; }
.wire-track.run { animation-name: atemad-wire; }
@keyframes atemad-wire { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Story page: the Urdu latest list reads first and scrolls away; the wire box (last in the column) is the one that sticks. */
.art-aside .aside-box.sticky-box { position: static; }
.art-aside .wire-box { position: sticky; top: 76px; }
/* ---------- markets, Quetta today, earthquakes (Atemad Core markets) ---------- */
.today-line { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-family: var(--ui); font-size: 13px; color: #d9d7d8; }
.today-line b { color: #fff; font-weight: 700; }
.today-line .tl-mm { color: #9d9b9e; margin-inline-start: 4px; }
.today-line .tl-p { display: flex; gap: 12px; padding-inline-start: 14px; border-inline-start: 1px solid rgba(255, 255, 255, .2); }
.mkt-bar { background: #fff; border-bottom: 1px solid var(--rule); font-family: var(--ui); }
.mkt-bar .wrap { display: flex; gap: 16px; align-items: stretch; }
.mkt-bar .k { font-family: var(--ui); font-weight: 700; font-size: 13px; color: #fff; background: var(--blue); white-space: nowrap; display: flex; align-items: center; padding-inline: 14px; }
/* The market figures scroll slowly like the news tickers (theme.js animates every .tick-track). */
.mkt-view { flex: 1; min-width: 0; }
.mkt-row { display: flex; width: max-content; padding-block: 8px; }
.mk { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; font-size: 13px; padding-inline-end: 22px; margin-inline-end: 22px; border-inline-end: 1px solid var(--rule); }
.mk-l { color: var(--muted); }
.mk-v { font-family: var(--lat); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.mk-v small { font-family: var(--ui); font-weight: 400; font-size: 11px; color: var(--muted); margin-inline-start: 4px; }
.mk-c { font-family: var(--lat); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mk-c.up { color: var(--green-2); }
.mk-c.down { color: #c62828; }
.mk-c.flat { color: var(--muted); }
.biz-band { background: #fbfafa; }
.biz-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: start; }
.biz-box { background: #fff; border: 1px solid var(--rule); border-radius: 6px; padding: 16px 18px 6px; }
.biz-h { font-family: var(--ui); font-size: 16px; font-weight: 700; margin: 0 0 10px; display: grid; gap: 2px; }
.biz-h small { font-weight: 400; font-size: 12px; color: var(--muted); }
.biz-tbl td { padding: 8px 4px; font-family: var(--ui); font-size: 14px; }
.biz-tbl td.num { font-family: var(--lat); font-variant-numeric: tabular-nums; font-weight: 600; text-align: end; white-space: nowrap; }
.biz-tbl td.num small { font-family: var(--ui); font-weight: 400; color: var(--muted); font-size: 11px; }
.biz-tbl td .meta { font-size: 11px; }
.quake-band { padding-block: 26px 30px; }
.quake-tbl .mag { font-family: var(--lat); font-size: 16px; font-weight: 700; color: var(--blue); }
.quake-tbl .mag.strong { color: #c62828; }
.quake-tbl td.num { width: 60px; }
@media (max-width: 1020px) { .biz-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 640px) { .biz-grid { grid-template-columns: minmax(0, 1fr); } .today-line .tl-p { display: none; } .mkt-bar .k { display: none; } .util .wrap { gap: 4px 12px; } .util .links { display: none; } }

/* prayer times */
.prayer-band { background: #fbfafa; }
.pr-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 36px; align-items: start; }
.pr-quetta { background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--blue); border-radius: 6px; padding: 18px 20px 14px; }
.pr-city-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pr-city-h b { font-family: var(--ur); font-weight: 400; font-size: 30px; line-height: 1.5; }
.pr-list { list-style: none; margin: 0; padding: 0; }
.pr-list li { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--rule); font-family: var(--ui); font-size: 15.5px; }
.pr-list li:last-child { border-bottom: 0; }
.pr-list .pr-n { flex: 1; }
.pr-list .pr-t { font-family: var(--lat); font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
.pr-list li.next { background: var(--paper-2); margin-inline: -12px; padding-inline: 14px; border-radius: 4px; color: var(--blue); }
.pr-tag { font-size: 11.5px; font-weight: 700; color: #fff; background: var(--blue); border-radius: 999px; padding: 1px 9px; }
.pr-note { font-family: var(--ui); font-size: 12px; color: var(--muted); margin: 12px 0 0; line-height: 1.8; }
.pr-tables { display: grid; gap: 22px; }
.pr-gh { font-family: var(--ui); font-size: 15px; font-weight: 700; margin: 0 0 8px; color: var(--ink-2); }
.pr-tbl th { text-align: center; }
.pr-tbl th:first-child { text-align: start; }
.pr-tbl th { padding: 4px 6px; }
.pr-tbl td { font-family: var(--lat); font-size: 14px; font-variant-numeric: tabular-nums; text-align: center; padding: 3px 6px; line-height: 1.5; vertical-align: middle; }
.pr-tbl td.pr-c { font-family: var(--ur); font-size: 16px; line-height: 1.7; text-align: start; white-space: nowrap; }
.pr-more { margin-top: 4px; }
.pr-more summary { cursor: pointer; font-family: var(--ui); font-size: 14px; font-weight: 600; color: var(--blue); padding: 8px 0; list-style: none; }
.pr-more summary::-webkit-details-marker { display: none; }
.pr-more summary::before { content: "+"; display: inline-block; width: 18px; font-weight: 700; }
.pr-more[open] summary::before { content: "−"; }
.pr-more .pr-group { margin-top: 10px; }
@media (max-width: 1020px) { .pr-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .pr-tbl th:nth-child(3), .pr-tbl td:nth-child(3) { display: none; } .pr-tbl td { padding: 7px 3px; font-size: 13px; } .pr-tbl td.pr-c { font-size: 15px; } }

/* weather band and widget */
.weather-band { background: #fff; }
.wx-grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 36px; align-items: start; }
.wx-quetta { background: linear-gradient(180deg, #f3f7fb, #fff 70%); border: 1px solid var(--rule); border-top: 3px solid var(--blue); border-radius: 6px; padding: 18px 20px 14px; }
.wx-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.wx-head b { font-family: var(--ur); font-weight: 400; font-size: 30px; line-height: 1.5; }
.wx-main { display: flex; align-items: center; gap: 14px; margin: 6px 0 10px; }
.wx-main .wx-ic { font-size: 44px; line-height: 1; width: 52px; height: 52px; display: grid; place-items: center; }
.wx-temp { font-family: var(--lat); font-size: 56px; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.wx-desc { display: grid; gap: 2px; font-family: var(--ui); font-size: 17px; }
.wx-desc small { font-size: 13px; color: var(--muted); }
.wx-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; padding: 10px 0; border-block: 1px solid var(--rule); }
.wx-facts div { display: grid; gap: 2px; text-align: center; }
.wx-facts dt { font-family: var(--ui); font-size: 11.5px; color: var(--muted); }
.wx-facts dd { margin: 0; font-family: var(--lat); font-weight: 600; font-size: 15px; }
.ww-days { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.ww-days li { display: grid; gap: 2px; justify-items: center; padding: 8px 4px; background: var(--paper-2); border-radius: 4px; font-family: var(--ui); font-size: 12.5px; }
.ww-days li:first-child { background: var(--blue); color: #fff; }
.ww-days li:first-child .meta, .ww-days li:first-child .wx-dn { color: rgba(255, 255, 255, .85); }
.ww-days b { font-family: var(--lat); font-size: 15px; }
.wx-dn { color: var(--muted); }
.wx-ic { display: inline-grid; place-items: center; width: 28px; height: 28px; font-size: 20px; line-height: 1; vertical-align: middle; }
.wx-glyph { font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.wx-tbl td { font-family: var(--ui); font-size: 13.5px; padding: 4px 6px; text-align: center; vertical-align: middle; line-height: 1.6; }
.wx-tbl th { text-align: center; padding: 4px 6px; }
.wx-tbl th:first-child, .wx-tbl td.wx-c { text-align: start; }
.wx-tbl td.wx-c { font-family: var(--ur); font-size: 16px; line-height: 1.7; white-space: nowrap; }
.wx-tbl td.wx-now b { font-family: var(--lat); font-size: 16px; font-weight: 700; }
.wx-tbl td[dir="ltr"] { font-family: var(--lat); font-variant-numeric: tabular-nums; }
.wx-tbl .wx-sky, .wx-tbl .wx-tom { white-space: nowrap; }
.weather-widget { background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--blue); border-radius: 6px; padding: 12px 16px 10px; }
.ww-now { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.ww-icon .wx-ic { width: 40px; height: 40px; font-size: 32px; }
.ww-temp { font-family: var(--lat); font-size: 36px; font-weight: 600; line-height: 1; }
.ww-desc { display: grid; gap: 2px; font-family: var(--ui); font-size: 14px; min-width: 0; }
.ww-desc .meta { font-size: 12px; }
.ww-days li { padding: 6px 2px; font-size: 11.5px; }
.ww-days .wx-ic { width: 22px; height: 22px; font-size: 16px; }
.daily-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.daily-pair .prayer-widget.pw-band, .daily-pair .weather-widget.pw-band { margin: 6px 0 22px; display: block; }
.daily-pair .pw-band .pw-row { margin-top: 10px; }
.daily-pair .pw-band .pw-note { margin-top: 8px; text-align: start; max-width: none; }
@media (max-width: 1020px) { .wx-grid { grid-template-columns: minmax(0, 1fr); } .daily-pair { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .wx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wx-tbl th:nth-child(5), .wx-tbl td:nth-child(5), .wx-tbl th:nth-child(6), .wx-tbl td:nth-child(6) { display: none; } .wx-temp { font-size: 44px; } }

/* آیتِ روز */
.ayah { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); display: grid; gap: 6px; }
.ayah-k { font-family: var(--ui); font-size: 12px; font-weight: 700; color: var(--blue); letter-spacing: .02em; }
.ayah-ar { font-family: "Noto Naskh Arabic", "Amiri", serif; font-size: 20px; line-height: 2; margin: 0; color: var(--ink); }
.ayah-ur { font-size: 16px; line-height: 2; margin: 0; color: var(--ink-2); }
.ayah-ref { font-family: var(--ui); font-size: 11.5px; color: var(--muted); }
.ayah-compact { margin: 8px 0 0; padding-top: 8px; gap: 4px; }
.ayah-compact .ayah-ar { font-size: 17px; line-height: 1.9; }
.ayah-compact .ayah-ur { font-size: 14px; line-height: 1.9; }
.ayah-compact .ayah-k { margin-inline-end: 6px; }

/* compact prayer widget (story column, section pages) */
.prayer-widget { background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--blue); border-radius: 6px; padding: 12px 16px 10px; }
.prayer-widget.pw-band { margin: 6px 0 22px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 28px; align-items: center; }
.pw-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pw-title { font-family: var(--ui); font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.pw-title .motif { width: 28px; height: 28px; margin: 0; }
.pw-title .dot { display: none; }
.pw-select, .ww-select { font: 14px var(--ui); padding: 4px 8px; border: 1px solid var(--rule); border-radius: 4px; background: var(--paper-2); color: var(--ink); max-width: 150px; }
.pw-row { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.pw-band .pw-row { margin: 0; gap: 10px; }
.pw-row li { display: grid; gap: 2px; text-align: center; padding: 6px 4px; border-radius: 4px; background: var(--paper-2); font-family: var(--ui); }
.pw-row li.next { background: var(--blue); color: #fff; }
.pw-n { font-size: 12px; color: var(--muted); }
.pw-row li.next .pw-n { color: rgba(255, 255, 255, .85); }
.pw-t { font-family: var(--lat); font-weight: 700; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.pw-note { font-family: var(--ui); font-size: 11.5px; color: var(--muted); margin: 8px 0 0; line-height: 1.7; }
.pw-band .pw-note { margin: 0; text-align: end; max-width: 220px; }
.pw-note a { color: var(--blue); font-weight: 600; }
@media (max-width: 1020px) { .prayer-widget.pw-band { grid-template-columns: minmax(0, 1fr); } .pw-band .pw-note { text-align: start; max-width: none; } }
@media (max-width: 640px) { .pw-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* picture strip from the wire (homepage, section pages) */
.wire-strip-band { padding-block: 26px 30px; background: #fbfafa; }
.wire-strip-band .band-head { margin-bottom: 22px !important; }
.wire-strip-band .band-head .hint { font-family: var(--lat); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.wire-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 16px; }
.ws-card { display: grid; gap: 8px; align-content: start; }
.ws-img { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; border-radius: 5px; background: var(--paper-2); box-shadow: 0 1px 2px rgba(20, 10, 10, .08), 0 4px 10px -3px rgba(20, 10, 10, .18); }
.ws-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ws-card:hover .ws-img img { transform: scale(1.04); }
.ws-src { position: absolute; bottom: 8px; inset-inline-start: 8px; font-family: var(--lat); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(14, 14, 16, .78); padding: 2px 7px; border-radius: 3px; }
.ws-h { font-family: var(--ui); font-size: 14.5px; line-height: 1.6; font-weight: 600; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; unicode-bidi: plaintext; text-align: start; }
.ws-card:hover .ws-h { color: var(--blue); }
.ws-time { font-family: var(--lat); font-size: 11.5px; color: var(--muted); text-align: start; }
@media (max-width: 1020px) { .wire-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .wire-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; } .wire-strip-band .band-head .hint { display: none; } }

.wire-box .stack-title .hint { font-family: var(--lat); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); align-self: center; }
.wire-list { list-style: none; margin: 0; padding: 0; font-family: var(--lat); text-align: left; }
.wire-list li { border-bottom: 1px solid var(--rule); }
.wire-list a { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding-block: 12px; align-items: start; }
.wire-list li:last-child { border-bottom: 0; }
.wire-list a:not(:has(.wl-img)) { grid-template-columns: minmax(0, 1fr); }
.wl-img { display: block; aspect-ratio: 4/3; overflow: hidden; border-radius: 4px; background: var(--paper-2); box-shadow: 0 1px 2px rgba(20, 10, 10, .08), 0 3px 8px -2px rgba(20, 10, 10, .16); }
.wl-img img { width: 100%; height: 100%; object-fit: cover; }
.wl-body { display: grid; gap: 3px; }
.wl-src { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.wl-h { font-size: 14.5px; line-height: 1.45; font-weight: 600; color: var(--ink); }
.wire-list a:hover .wl-h { color: var(--blue); }

/* ---------- type ---------- */
.h { font-family: var(--ur); font-weight: 400; line-height: var(--lh-head); margin: 0; text-wrap: balance; }
.h1 { font-size: 38px; }
.h2 { font-size: 25px; }
.h3 { font-size: 20px; }
.h4 { font-size: 17.5px; }
.dek { font-size: 18px; line-height: var(--lh-body); color: var(--ink-2); margin: 0; }
.kick { font-family: var(--ui); font-size: 13px; line-height: 1.6; font-weight: 700; color: var(--red-ink); display: flex; gap: 8px; align-items: center; }
.kick .place { color: var(--ink-2); font-weight: 600; }
.kick.wa { color: var(--wa); }
.meta, .hint { font-family: var(--ui); font-size: 12.5px; color: var(--muted); }
.hint { font-size: 13px; }

/* image box; red panel when a story has no picture */
.ph { position: relative; overflow: hidden; background: var(--paper-2); aspect-ratio: 16/9; max-width: 100%; }
.ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
/* Photos: soft rounded corners and a gentle lift so they don't sit flat on the page. */
.ph { border-radius: 6px; box-shadow: 0 1px 2px rgba(20, 10, 10, .08), 0 6px 16px -4px rgba(20, 10, 10, .18); }
.row .ph, .sec-block .row .ph { border-radius: 4px !important; box-shadow: 0 1px 2px rgba(20, 10, 10, .08), 0 3px 8px -2px rgba(20, 10, 10, .16); }
a:hover .ph img { transform: scale(1.03); }
.ph-text { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(135deg, #fbeaea, var(--paper-2)); color: var(--red-ink); font-family: var(--ur); font-size: 24px; }
.ph-text::before { content: "ع"; position: absolute; inset-inline-end: 14px; bottom: 6px; font-size: 72px; line-height: 1; color: var(--blue); opacity: .12; }
/* ---------- homepage v2 (newspaper-style blocks) ---------- */
.tb-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: start; }

.sec-block { padding-block: 40px 48px; }
.sec-block:nth-of-type(even) { background: #fbfafa; }
.sb-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.sb-big .sb-lead { gap: 16px; }
.sb-big .h2 { font-size: 26px; line-height: 1.85; }
.sb-mid, .sb-list { display: grid; align-content: start; }
.sb-mid { padding-inline: 32px; border-inline: 1px solid var(--rule); }
.sb-mid .sb-card { margin-bottom: 14px; }
.sb-mid .sb-card .h3 { font-size: 19px; }
.sec-block .row { grid-template-columns: 104px minmax(0, 1fr); padding-block: 18px; }
.sec-block .row .ph { aspect-ratio: 4/3 !important; border-radius: 2px; }
.sec-block .row .h4 { font-size: 17px; line-height: 1.95; }
.sb-list .row:first-child, .sb-mid .row:first-child { padding-top: 0; }

.band-head h2 { font-weight: 700; }
/* Section heads: broadsheet double rule (hairline over a heavier rule) with a red bar under the title. */
.band-head { position: relative; border-bottom: 1px solid var(--ink) !important; padding-bottom: 12px !important; margin-bottom: 32px !important; align-items: center !important; }
.band-head::after { content: ""; position: absolute; inset-inline: 0; bottom: -6px; height: 3px; background: var(--ink); }
.band-head h2 { position: relative; display: flex; align-items: center; }
.band-head h2::after { content: ""; position: absolute; inset-inline-start: 0; inset-inline-end: 0; bottom: -19px; height: 3px; background: var(--blue); }
.band-head .motif { width: 48px; height: 48px; object-fit: contain; margin-inline-end: 14px; flex: none; }
.band-head .dot { transform: rotate(45deg); width: 9px !important; height: 9px !important; margin-inline-end: 14px !important; }
.district-chips a { font-size: 17px; padding: 6px 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); line-height: 1.8; display: inline-flex; gap: 8px; align-items: center; }
.district-chips a:hover { border-color: var(--blue); color: var(--red-ink); }
.district-chips b { font-family: var(--ui); font-size: 12px; color: var(--ink-2); background: var(--paper-2); border-radius: 999px; padding: 0 7px; line-height: 1.7; }

@media (max-width: 1020px) {
.tb-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sb-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sb-big { grid-column: 1 / -1; }
.sb-mid { border: 0; padding: 0; }
}
@media (max-width: 640px) {
.tb-grid, .sb-grid { grid-template-columns: minmax(0, 1fr); }
.sb-big .h2 { font-size: 23px; }
}

/* ---------- broadsheet section pages: text only, ruled grid ---------- */
.sec-title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 4px double var(--rule-strong); padding-bottom: 6px; }
.sec-title p { margin: 0; }
.broadsheet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; }
.bs-item { border-bottom: 1px solid var(--rule); border-inline-start: 1px solid var(--rule); }
.bs-item:nth-child(3n + 2) { border-inline-start: 0; } /* first column (right side in RTL) after the lead */
.bs-item > a { display: grid; gap: 8px; padding: 18px 20px 16px; height: 100%; align-content: start; }
.bs-item > a:hover { background: var(--paper-2); }
.bs-item > a:hover .h { color: var(--red-ink); }
.bs-kick { font-family: var(--ui); font-size: 12.5px; color: var(--muted); display: flex; gap: 10px; }
.bs-kick b { color: var(--red-ink); font-weight: 700; }
.bs-item .h { font-size: 21px; line-height: 1.7; }
.bs-sum { margin: 0; font-size: 16.5px; line-height: 1.95; color: var(--ink-2); }
.bs-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 6px; font-family: var(--ui); font-size: 12.5px; color: var(--muted); }
/* Summary under every picture card: same size everywhere, three lines at most. */
.card-dek { font-size: 16px; line-height: 2.05; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.e-paper .card-dek { display: none; }

.row-dek { margin: 6px 0 0; font-size: 15px; line-height: 2; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* photos on section pages */
.bs-item > a { gap: 16px; padding: 22px 22px 20px; }
.bs-body { display: grid; gap: 10px; align-content: start; height: 100%; }
.bs-lead > a > .ph { order: 2; } /* photo on the left, text on the right (RTL) */
/* Stories without a photo: text items, a little more headline, no tile. */
.bs-item.bs-text > a { grid-template-columns: minmax(0, 1fr); }
.bs-item.bs-text .h { font-size: 23px; }
.bs-item.bs-text .bs-sum { -webkit-line-clamp: 4; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }

/* pagination */
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-block: 28px 44px; border-top: 4px double var(--rule-strong); margin-top: 0; }
.pager-info { font-family: var(--ui); font-size: 14px; color: var(--ink-2); }
.pager-links { display: flex; flex-wrap: wrap; gap: 6px; }
.pg { font-family: var(--ui); font-size: 15px; font-weight: 600; min-width: 42px; height: 42px; padding: 0 12px; display: inline-grid; place-items: center; border: 1px solid var(--rule); border-radius: 3px; background: var(--paper); font-variant-numeric: tabular-nums; }
a.pg:hover { border-color: var(--ink); }
.pg.current { background: var(--ink); border-color: var(--ink); color: #fff; }
.pg.gap { border: 0; min-width: 20px; padding: 0; color: var(--muted); }
.pg.nav { color: var(--red-ink); }

@media (max-width: 1020px) {
.broadsheet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bs-item:nth-child(3n + 2) { border-inline-start: 1px solid var(--rule); }
.bs-item:nth-child(2n) { border-inline-start: 0; }
}
@media (max-width: 640px) {
.broadsheet { grid-template-columns: minmax(0, 1fr); }
.bs-item { border-inline-start: 0 !important; }
.bs-item > a { padding-inline: 2px; }
.pager { justify-content: center; }
}

/* text card: stories without a photo */
.text-card { border-top: 3px solid var(--blue); background: var(--paper-2); padding: 14px 16px 16px; gap: 8px; align-content: start; }
.text-card .h3 { font-size: 21px; }
.text-card .dek { font-size: 16.5px; line-height: 1.95; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tc-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; }
.read-more { font-family: var(--ui); font-size: 13.5px; font-weight: 700; color: var(--red-ink); white-space: nowrap; }
.text-card:hover .read-more { text-decoration: underline; }
.sec-list .card.text-card.first { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); background: var(--paper); border-top-width: 4px; }
.sec-list .text-card.first .h3 { font-size: 30px; }
.sec-list .text-card.first .dek { -webkit-line-clamp: 3; font-size: 18px; }
@media (max-width: 640px) { .sec-list .text-card:not(.first) { grid-template-columns: minmax(0, 1fr); } }

/* ---------- sections ---------- */
.band { padding-block: 40px 44px; border-bottom: 1px solid var(--rule); }
.band-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 26px; border-bottom: 2px solid var(--rule-strong); padding-bottom: 8px; }
.band-head h2 { font-weight: 400; font-size: 27px; line-height: 1.7; margin: 0; }
.band-head .dot { display: inline-block; width: 10px; height: 10px; background: var(--blue); margin-inline-end: 10px; vertical-align: middle; }
.band-head a { font-family: var(--ui); font-size: 14px; color: var(--red-ink); font-weight: 600; white-space: nowrap; }

.lead { padding-block: 24px 28px; border-bottom: 1px solid var(--rule); }
.lead .wrap { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 28px; }
.lead-story { display: grid; gap: 16px; align-content: start; }
.stack { display: grid; align-content: start; }
.stack-title { font-family: var(--ui); font-weight: 700; font-size: 14px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 2px solid var(--rule-strong); display: flex; justify-content: space-between; gap: 8px; }
.row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding-block: 18px; border-bottom: 1px solid var(--rule); align-items: start; }
.row.noimg { grid-template-columns: minmax(0, 1fr); }
.row .when { font-family: var(--ui); font-size: 12.5px; color: var(--muted); display: flex; gap: 8px; margin-bottom: 4px; }
.row .when b { color: var(--red-ink); }
.tl { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding-block: 10px; border-bottom: 1px solid var(--rule); }
.tl time { font-family: var(--ui); font-size: 13px; color: var(--red-ink); font-weight: 700; padding-top: 6px; }
.more-link { display: inline-block; margin-top: 16px; font-family: var(--ui); font-size: 14px; color: var(--red-ink); font-weight: 600; }

.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
.card { display: grid; gap: 14px; align-content: start; }
.split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; }

/* today's paper + WhatsApp */
.today { background: var(--paper-2); }
.today .split { align-items: center; }
.paper-thumb { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 22px; align-items: center; }
.paper-img img { border: 1px solid var(--rule); box-shadow: 0 6px 20px rgba(0, 0, 0, .12); background: #fff; }
.paper-cta { margin-top: 12px; }
.paper-dates { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.paper-dates a { font-family: var(--ui); font-size: 13px; padding: 4px 9px; border: 1px solid var(--rule); border-radius: 3px; background: var(--paper); }
.wa-box { border: 1px solid var(--rule); background: var(--paper); padding: 20px; border-radius: 6px; display: grid; gap: 10px; }

/* tenders */
.tbl { overflow-x: auto; overflow-y: clip; } /* never a vertical scrollbar on a table */
@media (min-width: 761px) { .ov-body .tbl { overflow: visible; } }
.tz { width: 100%; border-collapse: collapse; }
.tz th { font-family: var(--ui); font-size: 13px; color: var(--muted); font-weight: 600; text-align: start; padding: 8px 10px; border-bottom: 2px solid var(--rule-strong); white-space: nowrap; }
.tz td { padding: 12px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tz .en { font-family: var(--lat); direction: ltr; text-align: start; font-size: 14.5px; font-weight: 600; unicode-bidi: plaintext; }
.tz .dist { font-size: 17px; white-space: nowrap; }
.tz .dt { font-family: var(--ui); font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.tz .view { font-family: var(--ui); font-size: 13px; color: var(--red-ink); font-weight: 600; white-space: nowrap; }

/* tenders page: chips, month groups, notice rows */
.tender-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.tf { font: 600 14px var(--ui); padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); color: var(--ink-2); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.tf b { font-family: var(--lat); font-size: 12px; color: var(--muted); font-weight: 600; }
.tf:hover { border-color: var(--blue); color: var(--blue); }
.tf.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.tf.on b { color: rgba(255, 255, 255, .8); }
.tender-month { font-family: var(--ui); font-size: 14px; font-weight: 700; color: var(--muted); margin: 26px 0 6px; padding-bottom: 6px; border-bottom: 2px solid var(--rule-strong); letter-spacing: .02em; }
.tender-rows { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
/* each notice is a box: Urdu kicker (district, date) on top, the English title in its own left-to-right block, the link below */
.tender-row > a { display: grid; gap: 10px; align-content: start; height: 100%; padding: 14px 16px 12px; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); box-shadow: 0 1px 2px rgba(20, 10, 10, .04); transition: border-color .2s, box-shadow .2s; }
.tender-row > a:hover { border-color: var(--blue); box-shadow: 0 6px 16px -8px rgba(13, 59, 102, .35); }
.tr-kick { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: var(--ui); font-size: 12.5px; color: var(--muted); padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.tr-place { font-family: var(--ur); font-size: 17px; font-weight: 400; color: var(--blue); }
.tr-title.latin { display: block; font-family: var(--lat); font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--ink); text-align: left; }
.tender-row > a:hover .tr-title { color: var(--blue); }
.tr-foot { display: flex; justify-content: flex-start; font-family: var(--ui); font-size: 13px; }
@media (max-width: 760px) { .tender-rows { grid-template-columns: minmax(0, 1fr); } }
/* most read */
.most-read .numbered a::before { color: var(--blue); }
/* quiet footer link to today's paper */
.foot-paper-quiet { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; padding: 12px 14px; background: transparent; border: 1px solid rgba(255, 255, 255, .14); box-shadow: none; }
.foot-paper-quiet img { transform: none; box-shadow: none; }
.foot-paper-quiet b { font-size: 18px; }

/* ---------- story page ---------- */
.art { padding-block: 28px 40px; }
.art > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; }
.art.page > .wrap { display: block; }
.crumb { font-family: var(--ui); font-size: 13.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.crumb a { color: var(--red-ink); font-weight: 600; }
.art-h { font-size: 40px; }
.byline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; padding-block: 14px; margin-block: 14px 18px; border-block: 1px solid var(--rule); }
.byline .who { font-family: var(--ui); font-size: 14px; display: grid; }
.byline .who b { font-size: 15px; }
.share { display: flex; gap: 8px; flex-wrap: wrap; }
.share .btn { padding: 6px 11px; font-size: 13.5px; }
.fig { margin: 0 0 18px; }
.fig figcaption { font-family: var(--ui); font-size: 13px; color: var(--muted); padding-top: 8px; line-height: 1.8; }
.tools { display: flex; gap: 6px; align-items: center; font-family: var(--ui); font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.tools button { border: 1px solid var(--rule); background: var(--paper); border-radius: 4px; padding: 2px 10px; cursor: pointer; font-family: var(--ui); }
.body { font-size: var(--body-size, 21px); line-height: var(--lh-body); max-width: 38em; }
.body p { margin: 0 0 1em; }
.body p:empty, .body p:has(> br:only-child) { display: none; }
.body img, .body iframe, .body video { max-width: 100%; }
.body a { color: var(--red-ink); text-decoration: underline; text-underline-offset: 4px; }
.body blockquote { margin: 0 0 1em; padding-inline-start: 18px; border-inline-start: 4px solid var(--blue); color: var(--ink-2); }
.paper-body { max-width: none; }
.paper-body iframe { width: 100% !important; min-height: 80vh; border: 1px solid var(--rule); }
.paper-nav { display: flex; justify-content: space-between; gap: 12px; margin-block: 16px; font-family: var(--ui); font-weight: 600; color: var(--red-ink); }
.topics { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-block: 8px 20px; font-family: var(--ui); }
.topics .k { font-size: 13px; color: var(--muted); }
.topics a { font-size: 14px; padding: 4px 12px; border: 1px solid var(--rule); border-radius: 999px; }
.short { font-family: var(--lat); font-size: 13px; color: var(--ink-2); background: var(--paper-2); padding: 6px 10px; border-radius: 4px; justify-self: start; }
.aside-box { border-top: 3px solid var(--rule-strong); padding-top: 10px; margin-bottom: 28px; }
.aside-box .stack-title { border: 0; padding-bottom: 0; }
.aside-paper { display: grid; gap: 8px; padding-top: 12px; }
.aside-paper img { border: 1px solid var(--rule); }

/* ---------- story page v2 ---------- */
.story .art-main { display: grid; gap: 0; align-content: start; }
.story-head { display: grid; gap: 10px; margin-bottom: 18px; }
.story .art-h { font-size: 44px; line-height: 1.65; }
.standfirst { font-size: 22px; line-height: 2; color: var(--ink-2); margin: 0; }
.crumb-place { color: var(--ink); font-weight: 600; }
.story .byline { margin: 6px 0 0; padding-block: 12px; }
.story .byline .who { display: flex; gap: 12px; align-items: center; }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-family: var(--ur); font-size: 22px; line-height: 1; flex: none; }
.story .byline .who > div { display: grid; }
.share.icons { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ic { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--rule); background: var(--paper); display: grid; place-items: center; color: var(--ink); cursor: pointer; padding: 0; }
.ic svg { width: 17px; height: 17px; }
.ic.wa { background: var(--wa); border-color: var(--wa); color: #fff; }
.ic:hover { border-color: var(--ink); }
.share.icons .tools { margin: 0 6px 0 0; padding-inline-start: 10px; border-inline-start: 1px solid var(--rule); }
.story .fig .ph { aspect-ratio: 16/9; border-radius: 2px; }
.story .fig { margin-bottom: 22px; }
.story .body { max-width: 40em; }
.body.lede > p:first-of-type { font-size: 1.12em; color: var(--ink); }
.share-cta { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; padding: 16px 18px; background: var(--paper-2); border-inline-start: 4px solid var(--wa); max-width: 40em; }
.share-cta > div { display: grid; gap: 6px; }
.share-cta strong { font-family: var(--ui); font-size: 16px; }
.share-cta .short { background: #fff; }
.sticky-box { position: sticky; top: 76px; }
.numbered { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.numbered li { counter-increment: n; border-bottom: 1px solid var(--rule); }
.numbered a { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; padding-block: 12px; }
.numbered a::before { content: counter(n); grid-row: span 2; font-family: var(--ui); font-weight: 700; font-size: 22px; color: var(--blue); line-height: 1.4; }
.numbered .meta { grid-column: 2; }
.aside-paper { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 16px; padding: 10px; background: var(--paper-2); }
.aside-paper img { border: 1px solid var(--rule); }
.aside-paper b { display: block; font-family: var(--ui); font-size: 15px; }
.related { background: var(--paper-2); border-bottom: 0; margin-top: 12px; }
.grid4 .dek { font-size: 16.5px; }

/* English-only text (tender titles, release numbers): Latin face, left to right */
.latin { font-family: var(--lat) !important; direction: ltr; unicode-bidi: plaintext; text-align: start; line-height: 1.45; font-weight: 600; letter-spacing: 0; }
.h.latin { font-size: .82em; }

/* ---------- tender notice ---------- */
.tender .art-main { display: grid; gap: 18px; align-content: start; }
.notice-head { border-top: 4px solid var(--blue); background: var(--paper-2); padding: 18px 22px 20px; display: grid; gap: 10px; }
.notice-title { font-size: 26px; margin: 0; color: var(--ink); text-transform: none; }
.facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 4px 0 0; }
.facts div { display: grid; gap: 2px; }
.facts dt { font-family: var(--ui); font-size: 12.5px; color: var(--muted); }
.facts dd { margin: 0; font-size: 18px; }
.facts dd.latin { font-size: 15px; }
.notice-doc { margin: 0; display: grid; justify-items: center; gap: 10px; background: #e9e6e6; padding: 24px 16px; border-radius: 4px; }
.notice-doc img { width: 100%; max-width: 680px; height: auto; background: #fff; border: 1px solid #d6d1d1; box-shadow: 0 10px 30px rgba(0, 0, 0, .14); }
.notice-doc figcaption { font-family: var(--ui); font-size: 14px; }
.notice-doc figcaption a { color: var(--red-ink); font-weight: 600; }
.notice-note { font-family: var(--ui); font-size: 14px; color: var(--ink-2); margin: 0; line-height: 1.9; }
.tender-list { list-style: none; margin: 0; padding: 0; }
.tender-list a { display: grid; gap: 4px; padding-block: 12px; border-bottom: 1px solid var(--rule); }
.tender-list .t { font-size: 14px; color: var(--ink); }
.tender-list a:hover .t { color: var(--red-ink); }
.tender-list .m { font-family: var(--ui); font-size: 12.5px; color: var(--muted); }
.tender-list .m b { color: var(--red-ink); font-weight: 600; }
.aside-box .stack-title .more-link { margin: 0; font-weight: 600; }

/* ---------- section pages ---------- */
.sec-hero { padding-block: 24px 18px; }
.sec-hero h1 { font-weight: 400; font-size: 44px; line-height: 1.6; margin: 0; }
.sec-hero p { font-family: var(--ui); color: var(--ink-2); font-size: 15px; margin: 4px 0 0; }
.sec-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; padding-bottom: 28px; }
.sec-list .card.first { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: 28px; align-items: center; }
.sec-list .card.first .ph { grid-row: span 4; }
.empty { font-family: var(--ui); color: var(--muted); padding: 30px 0; }
.notfound { padding-block: 48px; display: grid; gap: 14px; }
.pagination { padding-block: 10px 40px; }
.pagination .page-numbers { padding: 6px 12px; border: 1px solid var(--rule); border-radius: 4px; }
.pagination .current { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- footer (after Jang / Express: full columns, districts, red base strip) ---------- */
.foot { background: #1c1b19; color: #ecebeb; border-top: 1px solid #2a2a2e; }
.foot-top { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: center; padding-block: 44px 36px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.foot-brand p { font-family: var(--ui); font-size: 15px; line-height: 2; margin: 0; color: #c9c7c8; max-width: 34em; }
.foot-brand .editor { margin-top: 6px; color: #9d9b9e; }
.foot-brand .editor b { color: #fff; font-weight: 700; }
.foot-mast { display: inline-grid; gap: 2px; margin-bottom: 16px; }
.foot-mast .fm-img { width: 280px; max-width: 100%; height: auto; display: block; margin-bottom: 8px; }
.foot-mast .fm-en { font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: .18em; font-size: 13px; color: #9d9b9e; direction: ltr; text-align: start; }
.foot .social { display: flex; gap: 10px; margin-top: 18px; }
.foot .social a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: #fff; transition: background .2s; }
.foot .social a:hover { background: var(--blue-2); }
.foot .social svg { width: 18px; height: 18px; }
.foot-paper { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 20px; align-items: center; padding: 18px; border-radius: 8px; background: linear-gradient(135deg, #232326, #1b1b1e); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6); }
.foot-paper img { border-radius: 3px; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); transform: rotate(-2deg); transition: transform .3s; }
.foot-paper:hover img { transform: rotate(0); }
.foot-paper > span { display: grid; gap: 4px; justify-items: start; }
.foot-paper small { font-family: var(--ui); font-size: 12px; color: var(--gold); font-weight: 700; }
.foot-paper b { font-family: var(--ur); font-weight: 400; font-size: 24px; line-height: 1.8; color: #fff; }
.foot-paper .d { font-family: var(--ui); font-size: 13px; color: #9d9b9e; }
.foot-paper .btn { margin-top: 8px; }
.foot-cols { display: grid; grid-template-columns: 1fr 1.4fr 1fr 1.1fr; gap: 40px; padding-block: 40px 48px; }
.foot h4 { font-family: var(--ui); font-size: 15px; margin: 0 0 18px; color: #fff; font-weight: 700; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .12); position: relative; }
.foot h4::after { content: ""; position: absolute; inset-inline-start: 0; bottom: -1px; width: 36px; height: 2px; background: #fff; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-family: var(--ui); font-size: 15px; line-height: 1.7; }
.foot ul.two { grid-template-columns: 1fr 1fr; column-gap: 20px; }
.foot ul a { color: #d9d7d8; transition: color .15s; }
.foot ul a::before { content: "‹"; color: #6d6b70; margin-inline-end: 8px; }
.foot ul a:hover { color: #fff; }
.foot ul a:hover::before { color: #fff; }
.foot .fc p { font-family: var(--ui); font-size: 15px; line-height: 2; margin: 0 0 12px; color: #c9c7c8; }
.foot .fc .addr { color: #fff; }
.foot-base { background: #0a0a0b; border-top: 1px solid rgba(255, 255, 255, .12); color: #c9c7c8; font-family: var(--ui); font-size: 13.5px; }
.foot-base .wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 12px; flex-wrap: wrap; }
.foot-base .to-top { color: #fff; font-weight: 700; opacity: .9; }
.foot-base .to-top:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* Section accents: Balochistan gold, Pakistan green, everything else dark blue. */
.bh-balochistan h2::after, .bh-districts h2::after { background: var(--gold) !important; }
.bh-balochistan .dot, .bh-districts .dot { background: var(--gold) !important; }
.bh-pakistan-news h2::after { background: var(--green-2) !important; }
.bh-pakistan-news .dot { background: var(--green-2) !important; }

/* ---------- section desk: stories + tight side column ---------- */
.sec-hero { padding-block: 18px 10px; }
.sec-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0 36px; align-items: start; }
.sec-side { padding-top: 18px; display: grid; gap: 22px; }
.sec-side .aside-box { margin-bottom: 0; }
.sec-side .wire-box { position: static; }
.sec-side .wire-list a { grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding-block: 9px; }
.sec-side .wire-list a:not(:has(.wl-img)) { grid-template-columns: minmax(0, 1fr); }
.sec-side .wl-h { font-size: 13.5px; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.sec-side .stack-title .hint { font-family: var(--lat); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; align-self: center; }
.biz-stack { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 8px; }
.biz-stack .biz-box { padding: 10px 12px 2px; }
.biz-stack .biz-tbl td { padding: 5px 2px; font-size: 13px; }
.biz-stack .biz-h { font-size: 14px; }
.quake-list { list-style: none; margin: 0; padding: 0; }
.quake-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding-block: 9px; border-bottom: 1px solid var(--rule); align-items: start; }
.quake-list .mag { font-family: var(--lat); font-size: 18px; font-weight: 700; color: var(--blue); line-height: 1.3; }
.quake-list .mag.strong { color: #c62828; }
.quake-list .ql-body { display: grid; gap: 2px; }
.quake-list .ql-body a { font-size: 13px; font-weight: 600; }
.pw-foot { margin-top: 10px; }
/* two-column ruled grid inside the desk */
.broadsheet.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
.broadsheet.two-col .bs-item:nth-child(3n + 2) { border-inline-start: 1px solid var(--rule); }
.broadsheet.two-col .bs-item:nth-child(2n) { border-inline-start: 0; }
.broadsheet.two-col .bs-item > a { padding: 16px 16px 14px; gap: 12px; }
.broadsheet.two-col .bs-item .h { font-size: 20px; line-height: 1.7; }
.broadsheet.two-col .bs-sum { font-size: 15.5px; line-height: 1.9; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1020px) { .sec-layout { grid-template-columns: minmax(0, 1fr); } .sec-side { padding-top: 8px; } }
@media (max-width: 640px) { .broadsheet.two-col { grid-template-columns: minmax(0, 1fr); } .broadsheet.two-col .bs-item { border-inline-start: 0 !important; } }

/* ---------- motifs in their places ---------- */
.biz-h .motif, .stack-title .motif, .pw-title .motif { width: 26px; height: 26px; object-fit: contain; vertical-align: middle; margin-inline-end: 8px; }
.biz-h { display: block; }
.biz-h small { display: block; margin-top: 2px; }
.mkt-bar .k .motif { width: 20px; height: 20px; margin-inline-end: 8px; filter: brightness(0) invert(1); }
.live-band .motif { filter: brightness(0) invert(1); }
.live-band .band-head h2 .live-dot { margin-inline: 2px 10px; }
.prayer-band { background: #fbfafa url("assets/motifs/prayer-texture.png") center/900px repeat; background-blend-mode: normal; position: relative; }
.prayer-band::before { content: ""; position: absolute; inset: 0; background: rgba(251, 250, 250, .9); pointer-events: none; }
.prayer-band > .wrap { position: relative; }
.paper-placeholder { background: #fff; border: 1px solid var(--rule); }
/* The banner sits behind a navy wash that deepens on the title side (right in RTL) so the Nastaliq stays legible. */
.mag-hero-banner { background-color: var(--blue); background-image: linear-gradient(to left, rgba(13, 59, 102, .94) 0, rgba(13, 59, 102, .78) 40%, rgba(13, 59, 102, .35) 100%), var(--banner); background-size: cover; background-position: center bottom; /* 29 Oct 2026: banners are 1600×500 with the Atemad stamp at bottom-left; anchoring to the bottom keeps the stamp whole when the box is wider than 3.2:1 */ border-radius: 8px; padding: 34px 36px 30px; margin-top: 16px; min-height: 260px; color: #fff; display: grid; align-content: end; }
.mag-hero-banner .sec-title h1 { text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.mag-hero-banner .crumb, .mag-hero-banner .crumb a { color: rgba(255, 255, 255, .8); }
.mag-hero-banner .sec-title { border-bottom-color: rgba(255, 255, 255, .45); }
.mag-hero-banner .sec-title h1, .mag-hero-banner .sec-title p, .mag-hero-banner .mag-intro { color: #fff; }
.mag-hero-banner .mag-intro { color: rgba(255, 255, 255, .9); }
@media (max-width: 640px) { .mag-hero-banner { padding: 22px 18px; } }

/* ---------- E-Magazine: landing ---------- */
.mag-intro { font-size: 19px; line-height: 2.05; color: var(--ink-2); max-width: 44em; margin: 14px 0 0; }
.ms-card { display: grid; gap: 12px; align-content: start; padding: 18px 18px 16px; background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--blue); border-radius: 6px; transition: border-color .2s, box-shadow .2s; }
.ms-card:hover { border-color: var(--blue); box-shadow: 0 8px 22px -10px rgba(13, 59, 102, .35); }
.ms-card .motif { width: 56px; height: 56px; object-fit: contain; }
.ms-card .dot { width: 10px; height: 10px; background: var(--blue); transform: rotate(45deg); margin: 10px 0 14px; display: inline-block; }
.ms-body { display: grid; gap: 6px; }
.ms-dek { font-family: var(--ui); font-size: 14px; line-height: 1.9; color: var(--ink-2); }
.ms-count { font-family: var(--ui); font-size: 12.5px; color: var(--muted); margin-top: 4px; }
@media (max-width: 640px) { .mag-intro { font-size: 17px; } }

.mag-hero h1 { display: flex; align-items: center; gap: 14px; }
.mag-hero h1 .motif { width: 52px; height: 52px; object-fit: contain; margin: 0; }
.mag-hero h1 .dot { display: none; }
.mag-coming { margin: 30px 0 44px; }
.coming-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.coming-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.coming-list .cl-n { font-family: var(--ui); font-weight: 700; color: var(--blue); font-size: 15px; text-align: center; }
.coming-list .h4 { min-width: 0; }
.coming-list .h4 { font-size: 18px; }
@media (max-width: 640px) { .coming-list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- E-Magazine: long reads ---------- */
.art.mag > .wrap { display: block; max-width: 820px; }
.mag-head { display: grid; gap: 12px; margin-bottom: 22px; padding-top: 10px; }
.mag-kicker { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-family: var(--ui); font-size: 13px; color: var(--blue); font-weight: 700; }
.mag-kicker .mag-part { color: var(--muted); font-weight: 600; }
.mag-kicker .mag-part::before { content: "·"; margin-inline-end: 14px; color: var(--rule-strong); }
.mag-h { font-size: 44px; line-height: 1.7; }
.mag-head .standfirst { font-size: 21px; line-height: 2.05; color: var(--ink-2); margin: 0; }
.mag-byline { margin: 4px 0 0; padding-block: 12px; }
.mag-byline .who { display: flex; gap: 12px; align-items: center; }
.mag-byline .who > div { display: grid; }
.mag-body { max-width: none; font-size: var(--body-size, 21px); line-height: 2.25; }
.mag-body > p:first-of-type { font-size: 1.1em; }
.mag-body h2 { font-family: var(--ur); font-weight: 400; font-size: 29px; line-height: 1.8; margin: 1.6em 0 .5em; padding-top: .6em; border-top: 1px solid var(--rule); }
.mag-body h3 { font-family: var(--ur); font-weight: 400; font-size: 23px; line-height: 1.8; margin: 1.3em 0 .4em; }
.mag-body ul, .mag-body ol { margin: 0 0 1.2em; padding-inline-start: 1.4em; }
.mag-body li { margin-bottom: .5em; }
.mag-body li::marker { color: var(--blue); font-family: var(--ui); }
.mag-body em { font-style: normal; color: var(--ink-2); }
.mag-sources { margin-top: 2.4em; padding: 22px 26px 8px; background: var(--paper-2); border-top: 3px solid var(--blue); font-size: 15.5px; line-height: 1.9; }
.mag-sources h2 { border: 0; margin: 0 0 .6em; padding: 0; font-size: 24px; }
.mag-sources ol { padding-inline-start: 1.6em; }
.mag-sources li { margin-bottom: .7em; unicode-bidi: plaintext; text-align: start; }
.mag-sources ol { direction: ltr; font-family: var(--lat); font-size: 14px; line-height: 1.7; }
.mag-sources ol li::marker { font-family: var(--lat); }
.mag-sources a { font-family: var(--lat); font-size: 13px; word-break: break-all; color: var(--blue); text-decoration: none; }
.mag-sources a:hover { text-decoration: underline; }
.mag-sources em { font-style: italic; }
.mag-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 34px; padding-top: 20px; border-top: 4px double var(--rule-strong); }
.mag-nav .mn { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 6px; }
.mag-nav .mn:hover { border-color: var(--blue); }
.mag-nav .mn.next { text-align: end; }
.mag-nav .mn .h4 { font-size: 18px; }
.mag-all { margin: 18px 0 0; }
.mag-card.mag-card-text { background: var(--paper-2); border-top: 3px solid var(--blue); padding: 16px 18px 18px; gap: 10px; }
.mag-card .read-more { justify-self: start; }
.band-head.bh-e-magazine h2::after { background: var(--blue) !important; }
@media (max-width: 640px) {
.mag-h { font-size: 30px; }
.mag-head .standfirst { font-size: 18px; }
.mag-nav { grid-template-columns: 1fr; }
.mag-sources { padding: 18px 16px 6px; }
.mag-byline { flex-direction: column; align-items: flex-start; }
}

/* ---------- multimedia: YouTube live channels and video categories ---------- */
.live-band { background: #161513; color: #fff; border-bottom: 0; }
.live-band .band-head { border-bottom-color: rgba(255, 255, 255, .25) !important; }
.live-band .band-head::after { background: rgba(255, 255, 255, .25); }
.live-band .band-head h2::after { background: var(--red); }
.live-band .band-head h2 { color: #fff; }
.live-band .band-head .hint, .live-band .yt-ch { color: #c9c7c8; }
.band-head .hint { font-family: var(--ui); font-size: 13px; color: var(--muted); align-self: center; }
.yt-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px 20px; }
.yt-live { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.yt-card { display: grid; gap: 10px; align-content: start; text-align: start; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.yt-thumb { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; border-radius: 6px; background: #1c1b19; box-shadow: 0 1px 2px rgba(20, 10, 10, .08), 0 6px 16px -4px rgba(20, 10, 10, .18); }
.yt-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.yt-card:hover .yt-thumb img { transform: scale(1.04); }
.yt-btn { position: absolute; inset: 0; margin: auto; width: 52px; height: 36px; border-radius: 10px; background: rgba(14, 14, 16, .78); display: grid; place-items: center; transition: background .2s; }
.yt-btn::after { content: ""; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; margin-inline-start: 2px; }
.yt-card:hover .yt-btn { background: var(--red); }
.yt-badge { position: absolute; top: 10px; inset-inline-start: 10px; font-family: var(--lat); font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #fff; background: var(--red); padding: 3px 8px; border-radius: 3px; }
.yt-meta { display: grid; gap: 4px; }
.yt-title { font-family: var(--ui); font-size: 15px; line-height: 1.6; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-title[dir="auto"] { unicode-bidi: plaintext; }
.yt-card:hover .yt-title { color: var(--blue); }
.yt-sub { font-family: var(--ui); font-size: 12.5px; color: var(--muted); }
.yt-ch { font-weight: 700; color: var(--ink-2); }
.yt-live .yt-ch { font-family: var(--ui); font-size: 15px; }
.yt-band .band-head h2::after { background: var(--blue); }
body.yt-open { overflow: hidden; }
.yt-lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(10, 10, 11, .9); display: grid; place-items: center; padding: 16px; }
.yt-lightbox[hidden] { display: none; }
.yt-box { width: min(1100px, 100%); display: grid; gap: 8px; }
.yt-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #fff; font-family: var(--ui); font-size: 15px; }
.yt-now { unicode-bidi: plaintext; }
.yt-close { background: none; border: 1px solid rgba(255, 255, 255, .4); color: #fff; width: 36px; height: 36px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; }
.yt-frame { aspect-ratio: 16/9; background: #000; border-radius: 6px; overflow: hidden; }
.yt-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 1020px) { .yt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .yt-live { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .yt-grid, .yt-live { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; } .yt-title { font-size: 14px; } .band-head .hint { display: none; } }

/* ---------- WordPress pieces ---------- */
.alignleft { float: left; margin: 0 1em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1em; }
.aligncenter { margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-family: var(--ui); font-size: 13px; color: var(--muted); }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
.lead .wrap, .art > .wrap { grid-template-columns: minmax(0, 1fr); }
.grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split { grid-template-columns: minmax(0, 1fr); }
.foot .grid, .foot-cols { grid-template-columns: 1fr 1fr; }
.foot-top { grid-template-columns: minmax(0, 1fr); }
.sec-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 782px) {
.admin-bar .nav { top: 0; }
}
@media (max-width: 640px) {
.mast .wrap { grid-template-columns: 1fr auto; }
.mast { background: #1c1b19; }
.mast-tag { display: block; grid-column: 1 / -1; font-size: 12.5px; line-height: 1.7; padding-top: 2px; }
.mast-tag strong { font-size: 14px; display: inline; }
.mast-tag strong::after { content: " · "; font-weight: 400; }
.logo-link { width: 210px; }
.mast-actions .long { display: none; }
.h1, .art-h, .story .art-h { font-size: 30px; }
.standfirst { font-size: 19px; }
.story .byline { flex-direction: column; align-items: flex-start; }
.sticky-box { position: static; }
.sec-hero h1 { font-size: 34px; }
.grid4, .sec-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
	/* Phone: one picture story per band, the rest as compact rows (photo beside the headline), so the page stays short. */
.grid4 .card:not(:first-child), .sb-mid .sb-card, .sec-list .card:not(.first) { grid-template-columns: 110px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding-block: 16px; border-bottom: 1px solid var(--rule); }
.grid4 .card:not(:first-child) .ph, .sb-mid .sb-card .ph, .sec-list .card:not(.first) .ph { aspect-ratio: 4/3 !important; grid-row: span 4; border-radius: 4px; }
.grid4 .card:not(:first-child) .dek, .sb-mid .sb-card .dek { display: none; }
.grid4 .card:not(:first-child) .h3, .sb-mid .sb-card .h3 { font-size: 17px; line-height: 1.95; }
.grid4 .card:first-child { padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.sb-mid .sb-card { margin-bottom: 0; }
.band, .sec-block { padding-block: 28px 32px; }
.band-head { margin-bottom: 22px !important; }
.sb-grid { gap: 0; }
.nav .menu { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
.sec-list .card.first { grid-template-columns: minmax(0, 1fr); }
.paper-thumb { grid-template-columns: 110px minmax(0, 1fr); }
.foot .grid, .foot-cols { grid-template-columns: 1fr; }
.tz thead { display: none; }
.tz tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding-block: 12px; border-bottom: 1px solid var(--rule); }
.tz td { padding: 0; border: 0; }
.tz td.en { grid-column: 1 / -1; }
.body { --body-size: 20px; }
.nav .menu a { font-size: 18px; padding-inline: 11px; }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
/* ---- ویڈیوز band on the front page (0.2.3): lead tile + four, dark like the live band ---- */
.videos-band .band-head a { color: #c9c7c8; }
.videos-band .band-head a:hover { color: #fff; }
.videos-band .yt-title { color: #fff; }
.videos-band .yt-card:hover .yt-title { color: #c9c7c8; }
.videos-band .yt-sub { color: #9c9a9b; }
.vb-live-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; }
.vb-live-grid .yt-title { font-family: var(--lat); font-size: 17px; font-weight: 700; }
.vb-live-grid .yt-sub { font-size: 12px; }
@media (max-width: 1020px) { .vb-live-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .vb-live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; } .vb-live-grid .yt-title { font-size: 15px; } }

/* ===== Front page, 17 Oct (Salman): prayer and weather in the side column only, with a full-screen detail; section blocks filled ===== */
.ov-lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(10, 10, 11, .88); overflow-y: auto; padding: 24px 16px; }
.ov-lightbox[hidden] { display: none; }
.ov-box { width: min(1180px, 100%); margin: 0 auto; background: #fff; border-radius: 8px; padding: 10px 24px 28px; }
.ov-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0 10px; border-bottom: 1px solid var(--rule); margin-bottom: 8px; font-family: var(--ui); font-weight: 700; font-size: 16px; }
.ov-close { background: none; border: 1px solid var(--rule-strong); color: var(--ink); width: 36px; height: 36px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; }
.ov-close:hover { background: var(--paper-2); }
.ov-body .band { padding-block: 14px 24px; border-bottom: 0; background: #fff; }
.ov-body .band::before { content: none; }
.ov-body .wrap { max-width: none; padding-inline: 0; }
.ov-body .band-head { margin-bottom: 20px !important; }
.ov-body .prayer-band { background: #fff; }
body.has-overlay { overflow: hidden; }
/* Section blocks: the headlines under the major story */
.sb-under { margin-top: 18px; border-top: 2px solid var(--rule-strong); }
.sb-under .row { padding-block: 13px; }
.sb-under .row .h4 { font-size: 17px; line-height: 1.9; }
.sb-big .card-dek { -webkit-line-clamp: 2; }
.sb-list .row:last-child, .sb-mid .row:last-child, .sb-under .row:last-child { border-bottom: 0; }
@media (max-width: 640px) { .ov-box { padding: 8px 12px 20px; border-radius: 4px; } .ov-lightbox { padding: 12px 8px; } }
/* The overlay sits inside the dark video band's ancestry in the DOM, which paints text white; reset it here so the tables read. */
.ov-lightbox, .ov-lightbox * { -webkit-text-fill-color: currentColor; }
.ov-box { color: var(--ink); }
.ov-body .pr-group + .pr-group { margin-top: 26px; }
/* Pictures inside the story body (DGPR handouts carry their own): the caption and credit are small UI text, never body Nastaliq. */
.body figure, .body .wp-block-image { margin: 0 0 1.4em; max-width: 100%; }
.body figure img { display: block; width: 100%; height: auto; border-radius: 4px; }
.body figcaption, .body .wp-element-caption, .body .wp-caption-text { font-family: var(--ui); font-size: 13px; line-height: 1.8; color: var(--muted); padding-top: 8px; margin: 0; text-align: start; }
.body .photo-credit { font-family: var(--ui); font-size: 12.5px; line-height: 1.8; color: var(--muted); margin: -1em 0 1.6em; }
.body .photo-credit em { font-style: normal; }
/* Section blocks: every summary in the middle column is clamped so the three columns stay level (Salman, 17 Oct) */
.sb-mid .dek, .sb-mid .row-dek { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
/* Section blocks levelled: lead column carries five headlines and a three-line summary; the middle column's summaries stay short */
.sb-big .card-dek { -webkit-line-clamp: 3; }
.sb-mid .dek, .sb-mid .row-dek { -webkit-line-clamp: 2; }
/* The narrow middle column cannot carry thumbnail rows (one word per line beside the picture): its rows are text only */
.sb-mid .row { grid-template-columns: minmax(0, 1fr); }
.sb-mid .row .ph { display: none; }
/* ---- Prayer and weather widgets, tidied (17 Oct): one head row, quiet chips, the next prayer the only accent ---- */
.prayer-widget, .weather-widget { padding: 12px 16px 12px; box-shadow: 0 1px 2px rgba(20, 10, 10, .04); }
.pw-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.pw-title { font-size: 15px; }
.pw-select, .ww-select { font-size: 13px; padding: 3px 8px; max-width: 140px; border-radius: 999px; }
.pw-row { margin-top: 12px; gap: 5px; }
.pw-row li { padding: 7px 3px 6px; background: var(--paper); border: 1px solid var(--rule); }
.pw-row li.next { background: var(--blue); border-color: var(--blue); }
.pw-n { font-size: 11.5px; }
.pw-t { font-size: 14px; }
.pw-note { margin-top: 10px; font-size: 11.5px; line-height: 1.7; }
.prayer-widget .ayah-compact { border-top: 1px solid var(--rule); margin-top: 10px; padding-top: 10px; }
.weather-widget .ww-now { margin: 12px 0 10px; }
.ww-temp { font-size: 34px; }
.ww-days { gap: 5px; }
.ww-days li { background: var(--paper); border: 1px solid var(--rule); padding: 6px 2px; }
.ww-days li:first-child { background: var(--blue); border-color: var(--blue); }
.ww-days b { font-size: 14px; }
.weather-widget .pw-note { margin-top: 10px; font-size: 11.5px; }
/* تلاوت button on the verse of the day */
.ayah-play { display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px var(--ui); color: var(--blue); background: var(--paper); border: 1px solid var(--rule); border-radius: 999px; padding: 4px 12px 4px 10px; cursor: pointer; justify-self: start; }
.ayah-play::before { content: ""; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; }
.ayah-play.playing { background: var(--blue); border-color: var(--blue); color: #fff; }
.ayah-play.playing::before { border: 0; width: 8px; height: 10px; background: linear-gradient(to right, #fff 0 3px, transparent 3px 5px, #fff 5px 8px); }
.ayah-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
/* تازہ ترین list on story pages: number, thumbnail, headline */
.numbered li.has-img a { grid-template-columns: 30px 72px minmax(0, 1fr); }
.numbered li.has-img a::before { grid-row: span 2; }
.numbered .ph { grid-row: span 2; display: block; aspect-ratio: 4/3; border-radius: 4px; overflow: hidden; background: var(--paper-2); }
.numbered .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.numbered li.has-img .meta { grid-column: 3; }
/* Top band: no column may outrun the others — every summary in the middle column is clamped */
/* ---- Weather and prayer widgets look different (Salman, 17 Oct): weather = sky, blue; prayer = parchment, green ---- */
.weather-widget { background: linear-gradient(180deg, #eef4fa, #fff 65%); border: 1px solid #d6e2ee; border-top: 3px solid var(--blue); border-radius: 8px; }
.weather-widget .pw-head { border-bottom-color: #d6e2ee; }
.weather-widget .pw-title { color: var(--blue); }
.ww-temp { color: var(--blue); }
.ww-days li { background: #fff; border-color: #d6e2ee; border-radius: 6px; }
.ww-days li:first-child { background: var(--blue); border-color: var(--blue); }
.weather-widget .pw-note { color: #5f7187; }
.prayer-widget { background: #fbf8f2; border: 1px solid #e6dcc8; border-top: 3px solid #1f5e3a; border-radius: 4px; position: relative; overflow: hidden; }
.prayer-widget::before { content: ""; position: absolute; inset: 0; background: url("assets/motifs/prayer-texture.png") center/420px repeat; opacity: .07; pointer-events: none; }
.prayer-widget > * { position: relative; }
.prayer-widget .pw-head { border-bottom-color: #e6dcc8; }
.prayer-widget .pw-title { color: #1f5e3a; }
.prayer-widget .pw-select { background: #fff; border-color: #e6dcc8; }
.prayer-widget .pw-row li { background: rgba(255, 255, 255, .8); border-color: #e6dcc8; border-radius: 2px; }
.prayer-widget .pw-row li.next { background: #1f5e3a; border-color: #1f5e3a; color: #fff; }
.prayer-widget .pw-t { color: var(--ink); }
.prayer-widget .pw-row li.next .pw-t { color: #fff; }
.prayer-widget .pw-note { color: #6f6655; }
.prayer-widget .pw-note a { color: #1f5e3a; }
.prayer-widget .ayah-compact { border-top-color: #e6dcc8; }
.prayer-widget .ayah-k { color: #1f5e3a; }
.prayer-widget .ayah-play { color: #1f5e3a; border-color: #cfe0d5; background: #fff; }
.prayer-widget .ayah-play.playing { background: #1f5e3a; border-color: #1f5e3a; color: #fff; }
.prayer-band .pr-quetta { border-top-color: #1f5e3a; }
.prayer-band .pr-list li.next { color: #1f5e3a; }
.prayer-band .pr-tag { background: #1f5e3a; }
/* Column levelling: extra headlines rendered hidden; theme.js reveals them to match the tallest column */
.fill-extra[hidden] { display: none; }

/* =================== Home page, 17 Oct 2026: main news | بلوچستان | rail =================== */
.home-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.05fr) minmax(0, 1fr); gap: 0 36px; align-items: start; padding-block: 26px 44px; }
.hm-main { min-width: 0; }
.hm-lead .h1 { font-size: 40px; line-height: 1.75; }
.hm-lead .dek { font-size: 18px; line-height: 2; color: var(--ink-2); }
.hm-lead .meta { font-family: var(--ui); font-size: 12.5px; color: var(--muted); }
.hm-second { display: none; } /* retired 22 Oct, top ten */ .hm-second-old { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--rule); }
.hm-second .card .h3 { font-size: 20px; }
.desk { margin-top: 34px; }
.desk-head { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; padding-bottom: 8px; border-bottom: 2px solid var(--rule-strong); font-family: var(--ui); font-size: 15px; font-weight: 700; }
.desk-head .motif { width: 26px; height: 26px; margin: 0; }
.desk-head .dot { display: none; }
.desk-head a { color: var(--ink); }
.desk-head .desk-more { margin-inline-start: auto; font-size: 13px; font-weight: 600; }
.desk-head .desk-more a { color: var(--red-ink); }
.desk .row { padding-block: 14px; }
.desk .row:last-of-type, .desk .fill-extra:last-child .row { border-bottom: 0; }
.desk .desk-card { margin: 10px 0 6px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.desk .desk-card .h3 { font-size: 21px; }
.hm-main .desk-latest .row .h4 { font-size: 19px; }
.desk-latest .desk-head .live-dot { margin-inline-end: 2px; }
.desk-dgpr { margin-top: 26px; }
.desk-dgpr .row .h4 { font-size: 16px; line-height: 1.85; }
.hm-rail { min-width: 0; display: grid; gap: 22px; align-content: start; }
.hm-rail .rail-box { margin: 0; }
.hm-rail .rail-box.most-read { border-top: 3px solid var(--rule-strong); padding-top: 10px; }
.rail-districts .stack-title, .rail-mag .stack-title { display: flex; align-items: center; justify-content: space-between; }
.rail-districts .stack-title span, .rail-mag .stack-title span { display: inline-flex; align-items: center; gap: 8px; }
.rail-districts .motif, .rail-mag .motif { width: 26px; height: 26px; margin: 0; }
.rail-districts .district-chips { margin-top: 10px; gap: 6px; }
.rail-districts .district-chips a { font-size: 13.5px; padding: 4px 10px; }
.rail-mag .more-link { margin: 0; font-size: 13px; }
@media (max-width: 1020px) {
.home-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; }
.hm-main { grid-column: 1 / -1; padding-bottom: 30px; border-bottom: 1px solid var(--rule); margin-bottom: 26px; }
}
@media (max-width: 640px) {
.home-grid { grid-template-columns: minmax(0, 1fr); padding-block: 16px 30px; }
.hm-main { grid-column: auto; }
.hm-lead .h1 { font-size: 28px; line-height: 1.7; }
.hm-second { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.hm-rail { margin-top: 26px; }
}
/* Weather overlay: Pakistan's cities as compact cards under the Quetta card */
/* Prayer overlay: Hijri panel and the Pakistan table under the verse */
.pr-hijri { margin-top: 14px; padding: 12px 14px; border: 1px solid #e6dcc8; border-radius: 4px; background: #fbf8f2; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; align-items: center; }
.pr-hijri-k { grid-column: 1 / -1; font-family: var(--ui); font-size: 12px; font-weight: 700; color: #1f5e3a; margin-bottom: 4px; }
.pr-hijri-d { grid-row: span 2; font-family: var(--lat); font-size: 44px; font-weight: 700; line-height: 1; color: #1f5e3a; }
.pr-hijri-m { font-family: var(--ur); font-size: 18px; line-height: 1.6; }
.pr-hijri .meta { font-family: var(--ui); font-size: 12px; }
.pr-pk { margin-top: 16px; }
/* Weather overlay: Quetta's seven-day table under the Quetta card */
.wx-week { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--rule); }
.wx-week .pr-gh { margin-bottom: 4px; }
.wx-week-tbl th { text-align: start; padding: 4px 6px; font-size: 12px; }
.wx-week-tbl td { padding: 6px 6px; font-family: var(--ui); font-size: 13px; vertical-align: middle; border-bottom: 1px solid var(--rule); }
.wx-week-tbl td.wx-c { font-family: var(--ur); font-size: 15px; line-height: 1.6; white-space: nowrap; }
.wx-week-tbl td.wx-c small { display: block; font-family: var(--lat); font-size: 11px; color: var(--muted); line-height: 1.3; }
.wx-week-tbl td[dir="ltr"] { font-family: var(--lat); font-variant-numeric: tabular-nums; text-align: center; }
.wx-week-tbl .wx-sky { white-space: nowrap; }
/* Prayer overlay: the previous days' verses under آیتِ روز */
.ayah-more-wrap { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); display: grid; gap: 14px; }
.ayah-more { margin: 0; padding: 0; border: 0; gap: 4px; }
.ayah-more .ayah-ar { font-size: 17px; line-height: 1.9; }
.ayah-more .ayah-ur { font-size: 14.5px; line-height: 1.9; }
/* Weather overlay: Quetta three-hourly strip; Pakistan table full width under both columns; roomier week rows */
.wx-hours { margin: 4px 0 10px; }
.wx-hours .pr-gh { margin-bottom: 6px; }
.wx-hours ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.wx-hours li { display: grid; gap: 2px; justify-items: center; padding: 6px 2px; background: var(--paper-2); border-radius: 4px; font-family: var(--ui); }
.wx-hours .wx-hh { font-family: var(--lat); font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.wx-hours .wx-ic { width: 22px; height: 22px; font-size: 16px; }
.wx-hours b { font-family: var(--lat); font-size: 13px; }
.wx-week-tbl td { padding: 13px 6px; }
/* Overlay tables: fixed, identical column widths in every table; headings centred over their columns */
.ov-body .wx-tbl, .ov-body .pr-tbl { table-layout: fixed; width: 100%; }
.ov-body .wx-tbl th, .ov-body .wx-tbl td, .ov-body .pr-tbl th, .ov-body .pr-tbl td { text-align: center; }
.ov-body .wx-tbl th:first-child, .ov-body .wx-tbl td:first-child, .ov-body .pr-tbl th:first-child, .ov-body .pr-tbl td:first-child { text-align: start; width: 15%; }
.ov-body .wx-tbl th:nth-child(2), .ov-body .wx-tbl td:nth-child(2) { width: 9%; }
.ov-body .wx-tbl th:nth-child(3), .ov-body .wx-tbl td:nth-child(3) { width: 18%; }
.ov-body .wx-tbl th:nth-child(4), .ov-body .wx-tbl td:nth-child(4) { width: 15%; }
.ov-body .wx-tbl th:nth-child(5), .ov-body .wx-tbl td:nth-child(5) { width: 10%; }
.ov-body .wx-tbl th:nth-child(6), .ov-body .wx-tbl td:nth-child(6) { width: 13%; }
.ov-body .wx-tbl td.wx-sky, .ov-body .wx-tbl td.wx-tom { text-align: center; }
.ov-body .wx-tbl .wx-sky .wx-ic, .ov-body .wx-tbl .wx-tom .wx-ic { vertical-align: middle; }
/* Nastaliq descenders (کشمکش، گزر) need room: more air between the kicker line and the headline, taller line box */
.bs-body { gap: 14px; }
.bs-item .h { line-height: 1.95; padding-top: 6px; }
.bs-kick { padding-bottom: 2px; }

/* ===== Section pages, 17 Oct: three tiers (6 in two columns, 9 in three, 16 in four), rail of the other desks ===== */
.sec-main .broadsheet { margin-top: 14px; }
.sec-main .broadsheet + .broadsheet { margin-top: 30px; border-top: 3px solid var(--ink); padding-top: 6px; }
.sec-main .broadsheet .bs-item:first-child { border-inline-start: 0; }
.broadsheet.two-col .bs-item:nth-child(3n + 2) { border-inline-start: 1px solid var(--rule); }
.broadsheet.two-col .bs-item:nth-child(2n + 1) { border-inline-start: 0; }
.broadsheet.two-col .bs-item:nth-child(2n) { border-inline-start: 1px solid var(--rule); }
.broadsheet.three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.broadsheet.three-col .bs-item:nth-child(3n + 1) { border-inline-start: 0; }
.broadsheet.three-col .bs-item > a { padding: 14px 14px 12px; gap: 10px; }
.broadsheet.three-col .bs-item .h { font-size: 17.5px; line-height: 1.85; }
.broadsheet.three-col .bs-sum { font-size: 14.5px; line-height: 1.9; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.broadsheet.three-col .bs-foot { font-size: 12px; }
.broadsheet.four-col { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.broadsheet.four-col .bs-item:nth-child(4n + 1) { border-inline-start: 0; }
.broadsheet.four-col .bs-item:nth-child(3n + 2) { border-inline-start: 1px solid var(--rule); }
.broadsheet.four-col .bs-item:nth-child(4n + 1) { border-inline-start: 0; }
.bs-mini > a { padding: 12px 12px 12px; gap: 8px; }
.bs-mini .bs-body { gap: 8px; }
.bs-mini .h { font-size: 15.5px; line-height: 1.85; padding-top: 2px; }
.bs-mini .bs-kick { font-size: 11.5px; }
.bs-mini.bs-text .h { font-size: 16px; }
.sec-side .rail-desk { margin-top: 0; }
.sec-side .rail-desk .row { padding-block: 10px; }
.sec-side .rail-desk .row .h4 { font-size: 15.5px; line-height: 1.85; }
.sec-side .rail-desk .row:last-child { border-bottom: 0; }
.sec-side .rail-box { margin: 0; }
@media (max-width: 1020px) { .broadsheet.four-col { grid-template-columns: repeat(2, minmax(0, 1fr)); } .broadsheet.four-col .bs-item:nth-child(2n + 1) { border-inline-start: 0; } .broadsheet.three-col { grid-template-columns: repeat(2, minmax(0, 1fr)); } .broadsheet.three-col .bs-item:nth-child(2n + 1) { border-inline-start: 0; } }
@media (max-width: 640px) { .broadsheet.two-col, .broadsheet.three-col, .broadsheet.four-col { grid-template-columns: minmax(0, 1fr); } .broadsheet .bs-item { border-inline-start: 0 !important; } }

/* ---- Structure (18 Oct): drop-down menu, story-page desk block, districts hub ---- */
/* Nine desks across; the depth sits below: بلوچستان ▾ opens the offices, ڈی جی پی آر and اضلاع ▸ (every district). */
.nav .menu li { position: relative; }
.nav .menu .menu-item-has-children > a { padding-inline-end: 24px; }
.nav .menu .menu-item-has-children > a::after { content: ""; position: absolute; inset-inline-end: 9px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border: solid currentColor; border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg); opacity: .7; }
.nav .menu .sub-menu .menu-item-has-children > a::after { transform: rotate(45deg); margin-top: -3px; }
.nav .sub-menu { list-style: none; margin: 0; padding: 6px 0; position: absolute; top: 100%; inset-inline-start: 0; min-width: 230px; background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--blue); box-shadow: 0 14px 30px rgba(0, 0, 0, .18); z-index: 30; display: none; }
.nav .sub-menu .sub-menu { top: -9px; inset-inline-start: 100%; min-width: 300px; display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nav .menu li:hover > .sub-menu, .nav .menu li:focus-within > .sub-menu { display: block; }
.nav .menu .sub-menu li:hover > .sub-menu, .nav .menu .sub-menu li:focus-within > .sub-menu { display: grid; }
.nav .sub-menu li + li > a::before { display: none; }
.nav .sub-menu a { color: var(--ink); font-size: 15px; font-weight: 600; padding: 7px 16px; line-height: 1.9; border-bottom: 0; margin: 0; white-space: nowrap; }
.nav .sub-menu a:hover { color: var(--red-ink); background: var(--paper-2); }
.nav .sub-menu .current-menu-item > a { color: var(--red-ink); background: var(--paper-2); border-bottom: 0; }
@media (min-width: 641px) { .nav .menu { overflow: visible; } }
@media (max-width: 640px) { .nav .sub-menu { display: none !important; } .nav .menu .menu-item-has-children > a { padding-inline-end: 12px; } .nav .menu .menu-item-has-children > a::after { display: none; } }

/* Story page: twelve more from the story's desk, four across, headline and time only. */
.related-grid { gap: 30px 28px; }
.related-grid .card .h3 { font-size: 18px; line-height: 1.9; }
.related-grid .card { gap: 10px; }
.art-aside .numbered .h4 { font-size: 16.5px; }

/* Districts hub: a card per district, count and newest headline. */
.district-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-block: 8px 48px; }
.district-card { display: grid; gap: 8px; align-content: start; padding: 16px 18px 18px; border: 1px solid var(--rule); border-top: 3px solid var(--blue); border-radius: 6px; background: var(--paper); transition: border-color .15s, box-shadow .15s; }
.district-card:hover { border-color: var(--blue); box-shadow: 0 10px 24px rgba(13, 59, 102, .10); }
.district-card .dc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.district-card .dc-name { font-size: 24px; line-height: 1.6; }
.district-card .dc-count { font-family: var(--ui); font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--paper-2); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.district-card .dc-latest { font-size: 16px; line-height: 1.95; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.district-card .meta { font-family: var(--ui); font-size: 12.5px; color: var(--muted); }
@media (max-width: 1020px) { .district-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .district-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .district-card { padding: 12px 12px 14px; } .district-card .dc-name { font-size: 20px; } }
/* Section rail: the desks with counts, and the topics cloud (Salman, 18 Oct: "I am still not clear what we have"). */
.rail-topics { background: #1c1b19; border-top-color: #1c1b19; padding: 14px 16px 18px; border-radius: 4px; }
.rail-topics .stack-title { color: #fff; border: 0; padding-bottom: 6px; }
/* Salman, 18 Oct: the box is black; the tags are plain white words, sized by count, no pills, no borders. */
.rail-topics .tag-cloud { margin-top: 6px; gap: 4px 14px; }
.rail-topics .tag-cloud a { padding: 2px 0; border: 0; border-radius: 0; background: none; color: #fff; line-height: 1.9; gap: 5px; transition: transform .18s ease, color .18s ease; }
.rail-topics .tag-cloud b { background: none; color: #fff; padding: 0; font-size: 11.5px; }
.rail-topics .tag-cloud a:hover { transform: translateY(-2px); color: #d9cfbd; background: none; box-shadow: none; }
.rail-topics .tag-cloud a:hover b { color: #d9cfbd; background: none; }
.rail-topics .tag-cloud a.current { color: var(--gold); background: none; }
@media (prefers-reduced-motion: reduce) { .rail-topics .tag-cloud a:hover { transform: none; } }
/* Salman, 18 Oct: each structure box = a darker heading band with a thin grey rule, then the body; words centred, bigger, airier. */
:is(.sec-side, .hm-rail, .art-aside) .rail-topics, :is(.sec-side, .hm-rail, .art-aside) .rail-districts { padding: 0; overflow: hidden; }
:is(.sec-side, .hm-rail, .art-aside) .rail-topics .stack-title, :is(.sec-side, .hm-rail, .art-aside) .rail-districts .stack-title { justify-content: center; padding: 11px 16px 9px; margin: 0; font-size: 15px; border-bottom: 1px solid rgba(255, 255, 255, .28); }
:is(.sec-side, .hm-rail, .art-aside) .rail-topics .stack-title { background: #000; }
:is(.sec-side, .hm-rail, .art-aside) .rail-districts .stack-title { background: #243a4d; }
:is(.sec-side, .hm-rail, .art-aside) .rail-districts .stack-title .more-link { position: absolute; inset-inline-end: 16px; }
:is(.sec-side, .hm-rail, .art-aside) .rail-districts .stack-title { position: relative; }
:is(.sec-side, .hm-rail, .art-aside) .rail-topics .tag-cloud, :is(.sec-side, .hm-rail, .art-aside) .rail-districts .district-chips { margin: 0; padding: 16px 18px 20px; justify-content: center; gap: 10px 20px; }
:is(.sec-side, .hm-rail, .art-aside) .rail-topics .tag-cloud a { line-height: 1.7; gap: 6px; }
:is(.sec-side, .hm-rail, .art-aside) .rail-topics .tag-cloud b { font-size: 12.5px; }
:is(.sec-side, .hm-rail, .art-aside) .rail-districts .district-chips a { font-size: 16.5px; }
/* اضلاع dark blue, حصے charcoal, موضوعات black — all white text and digits (Salman, 18 Oct). */
:is(.sec-side, .hm-rail, .art-aside) .rail-districts { background: var(--blue); border-top-color: var(--blue); border-radius: 4px; }
:is(.sec-side, .hm-rail, .art-aside) .rail-districts .stack-title, :is(.sec-side, .hm-rail, .art-aside) .rail-districts .stack-title a { color: #fff; border-bottom-color: rgba(255, 255, 255, .28); }
:is(.sec-side, .hm-rail, .art-aside) .rail-districts .district-chips a { padding: 2px 0; border: 0; border-radius: 0; background: none; color: #fff; gap: 6px; transition: transform .18s ease, color .18s ease; }
:is(.sec-side, .hm-rail, .art-aside) .rail-districts .district-chips b { background: none; color: #fff; padding: 0; font-size: 12.5px; }
:is(.sec-side, .hm-rail, .art-aside) .rail-districts .district-chips a:hover { transform: translateY(-2px); color: #d9cfbd; }
@media (prefers-reduced-motion: reduce) { :is(.sec-side, .hm-rail, .art-aside) .rail-districts .district-chips a:hover { transform: none; } }
:is(.sec-side, .hm-rail, .art-aside) .rail-topics .tag-cloud, :is(.sec-side, .hm-rail, .art-aside) .rail-districts .district-chips { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 22px; }
:is(.sec-side, .hm-rail, .art-aside) .rail-topics .tag-cloud a, :is(.sec-side, .hm-rail, .art-aside) .rail-districts .district-chips a { padding: 4px 6px; }
/* Salman, 18 Oct: the three structure boxes are one black-to-grey stack — no white between them, black heading bands throughout. */
:is(.sec-side, .hm-rail, .art-aside) .rail-districts { background: #1c1b19; border-top-color: #1c1b19; border-radius: 6px 6px 0 0; }
:is(.sec-side, .hm-rail, .art-aside) .rail-topics { background: #36322c; border-top-color: #36322c; border-radius: 0 0 6px 6px; margin-top: -22px; }
:is(.sec-side, .hm-rail, .art-aside) .rail-districts .stack-title, :is(.sec-side, .hm-rail, .art-aside) .rail-topics .stack-title { background: #000; border-bottom: 1px solid rgba(255, 255, 255, .22); }
:is(.sec-side, .hm-rail, .art-aside) .rail-topics .stack-title { border-top: 1px solid rgba(255, 255, 255, .10); }
/* ای میگزین as one tile in the section rail (Salman, 18 Oct): the magazine banner, a line of what it holds, a link. */
:is(.sec-side, .hm-rail, .art-aside) .rail-mag-tile { display: grid; gap: 6px; align-content: end; min-height: 190px; padding: 16px 18px; border-radius: 6px; border-top: 0; margin: 0; color: #fff; background: linear-gradient(to top, rgba(8, 18, 32, .92) 0%, rgba(8, 18, 32, .45) 55%, rgba(8, 18, 32, .15) 100%), var(--banner) center / cover no-repeat, var(--blue); transition: transform .18s ease, box-shadow .18s ease; }
:is(.sec-side, .hm-rail, .art-aside) .rail-mag-tile:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .22); color: #fff; }
:is(.sec-side, .hm-rail, .art-aside) .rail-mag-tile .rmt-kicker { display: flex; align-items: center; gap: 8px; font-family: var(--ui); font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--gold); }
:is(.sec-side, .hm-rail, .art-aside) .rail-mag-tile .rmt-kicker .motif { width: 24px; height: 24px; margin: 0; filter: brightness(0) invert(1); }
:is(.sec-side, .hm-rail, .art-aside) .rail-mag-tile .rmt-title { font-size: 19px; line-height: 1.8; }
:is(.sec-side, .hm-rail, .art-aside) .rail-mag-tile .rmt-more { font-family: var(--ui); font-size: 13px; font-weight: 600; opacity: .85; }
:is(.sec-side, .hm-rail, .art-aside) .rail-topics { margin-top: -22px; }
:is(.sec-side, .hm-rail, .art-aside) .rail-districts .district-chips { gap: 7px 18px; padding: 14px 16px 16px; }
:is(.sec-side, .hm-rail, .art-aside) .rail-topics .tag-cloud { gap: 9px 18px; padding: 14px 16px 18px; }
/* اضلاع box: the official districts, then the divisions as a quieter second row (19 Oct). */
:is(.sec-side, .hm-rail, .art-aside) .rail-districts .stack-sub { font-family: var(--ui); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: rgba(255, 255, 255, .7); padding: 10px 16px 0; border-top: 1px solid rgba(255, 255, 255, .14); margin-top: 4px; }
:is(.sec-side, .hm-rail, .art-aside) .rail-districts .division-chips { padding-top: 8px; }
:is(.sec-side, .hm-rail, .art-aside) .rail-districts .division-chips a { font-size: 14.5px; color: rgba(255, 255, 255, .88); }
:is(.sec-side, .hm-rail, .art-aside) .rail-topics .stack-title .more-link { position: absolute; inset-inline-end: 16px; font-size: 12px; color: #d9cfbd; margin: 0; }
:is(.sec-side, .hm-rail, .art-aside) .rail-topics .stack-title { position: relative; }
/* تمام موضوعات page: letter rail, then every tag A–Z in columns with its count. */
.topics-page { padding-bottom: 48px; }
.topics-letters { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 26px; }
.topics-letters a { font-family: var(--ui); font-weight: 700; font-size: 15px; min-width: 36px; text-align: center; padding: 4px 8px; border: 1px solid var(--rule); border-radius: 4px; color: var(--ink); }
.topics-letters a:hover { border-color: var(--blue); color: var(--red-ink); }
.topics-group { padding: 14px 0 18px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; }
.topics-letter { margin: 0; font-size: 34px; line-height: 1.3; color: var(--blue); font-weight: 400; }
.topics-list { list-style: none; margin: 0; padding: 0; columns: 4; column-gap: 28px; }
.topics-list li { break-inside: avoid; }
.topics-list a { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dotted var(--rule); font-size: 16.5px; line-height: 1.85; }
.topics-list a:hover { color: var(--red-ink); }
.topics-list b { font-family: var(--ui); font-size: 12px; font-weight: 600; color: var(--muted); align-self: center; }
@media (max-width: 1020px) { .topics-list { columns: 3; } }
@media (max-width: 640px) { .topics-group { grid-template-columns: minmax(0, 1fr); gap: 6px; } .topics-list { columns: 2; column-gap: 18px; } .topics-letter { font-size: 26px; } }
/* Visible search field in the top strip (Salman, 19 Oct); the menu magnifier stays for phones. */
.util .usearch { display: flex; align-items: center; gap: 0; margin-inline-start: auto; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: rgba(255, 255, 255, .08); padding: 0 4px 0 4px; transition: border-color .15s, background-color .15s; }
.util .usearch:focus-within { border-color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .14); }
.util .usearch input { width: 180px; background: none; border: 0; color: #fff; font: 13.5px var(--ui); padding: 4px 10px; outline: none; }
.util .usearch input::placeholder { color: rgba(255, 255, 255, .6); }
.util .usearch button { background: none; border: 0; color: #fff; padding: 2px 6px; cursor: pointer; display: flex; align-items: center; }
.util .usearch button svg { width: 15px; height: 15px; }
@media (min-width: 641px) { .nav .search-toggle { display: none; } }
@media (max-width: 1020px) { .util .usearch input { width: 130px; } }
@media (max-width: 640px) { .util .usearch { display: none; } }
/* اہم خبریں on the home page (19 Oct): the desk's ordered picks, numbered, two columns wide. */
.desk-top { margin-top: 26px; }
.desk-top .desk-head { border-bottom: 3px solid var(--ink); font-size: 16px; }
/* اہم خبریں: one column of numbered headlines, no thumbnails (the picture slots above carry the pictures). */
/* Text widget (desk brief, 19 Oct): the stories without a picture, newest first, as a compact two-column list under the picture tiers. */
/* First band split (Salman, 19 Oct): headlines column of the picture-less stories beside the two-column picture tier; both newest first, shared top edge. */
.run-top { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 0 28px; align-items: start; margin-top: 14px; }
.run-top + .broadsheet { margin-top: 30px; border-top: 3px solid var(--ink); padding-top: 6px; }
@media (max-width: 1020px) { .run-top { grid-template-columns: minmax(0, 1fr) 200px; gap: 0 20px; } }
@media (max-width: 640px) { .run-top { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1200px) and (min-width: 641px) { .run-top { grid-template-columns: minmax(0, 1fr) 208px; gap: 0 22px; } }
/* Headlines column (Salman, 19 Oct): on the right, first on phones; reversed heading, a summary line per story; the leveller fills it to the picture tier's height. */
.run-top { grid-template-columns: 240px minmax(0, 1fr); }
@media (max-width: 1200px) and (min-width: 641px) { .run-top { grid-template-columns: 216px minmax(0, 1fr); } }
@media (max-width: 1020px) { .run-top .fill-extra[hidden] { display: block; } }
@media (max-width: 640px) { .run-top { grid-template-columns: minmax(0, 1fr); } }
/* Text tile (Salman, 19 Oct): a picture-less story inside the chronological grid — a reversed band where the picture would be, the headline, a longer summary. */
.broadsheet .bs-item.bs-text > a { background: var(--paper-2); }
.broadsheet .bs-item.bs-text > a:hover { background: #ebe9e4; }
.bs-band { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; background: var(--ink); color: #fff; padding: 8px 14px 7px; border-radius: 4px; font-family: var(--ui); font-size: 13px; font-weight: 700; }
.bs-band time { font-weight: 600; font-size: 12px; opacity: .8; }
.broadsheet .bs-item.bs-text .h { font-size: 21px; }
.broadsheet .bs-item.bs-text .bs-sum { -webkit-line-clamp: 6; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.broadsheet.four-col .bs-item.bs-text .h { font-size: 18px; }
.broadsheet.four-col .bs-item.bs-text .bs-sum { font-size: 14.5px; line-height: 1.9; -webkit-line-clamp: 3; }
.broadsheet.four-col .bs-item.bs-text .bs-band { font-size: 12px; padding: 6px 12px 5px; }
.sec-main .broadsheet.three-col { margin-top: 14px; }
@media (max-width: 640px) { .broadsheet .bs-item.bs-text > a { padding: 14px 14px 12px; } }
/* Three-column text tile (Salman, 19 Oct): headline at the picture cards' size, summary long enough to fill the card. */
.broadsheet.three-col .bs-item.bs-text .h { font-size: 21px; line-height: 1.8; padding-top: 2px; }
.broadsheet.three-col .bs-item.bs-text .bs-sum { font-size: 16px; line-height: 1.95; -webkit-line-clamp: 8; }
.broadsheet.three-col .bs-item.bs-text .bs-body { gap: 10px; }
.broadsheet.four-col .bs-item.bs-text .bs-sum { -webkit-line-clamp: 4; }
.bs-band { padding: 7px 14px 6px; }
/* Text-tile plate (Salman, 19 Oct): picture-sized, so the tile keeps a picture card's shape. */
.bs-plate { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; }
.broadsheet .bs-item.bs-text > a { background: transparent; }
.broadsheet .bs-item.bs-text > a:hover { background: var(--paper-2); }
.broadsheet.three-col .bs-item.bs-text .bs-sum { -webkit-line-clamp: 4; }
.broadsheet.four-col .bs-item.bs-text .bs-sum { -webkit-line-clamp: 2; }
/* Trial A (Salman, 19 Oct): the plate is a dark ink block carrying the headline in white; place and time in a gold line; summary below in the body. */
.broadsheet.four-col .bs-text.tile-a .bs-sum { -webkit-line-clamp: 3 !important; }/* Four-column plate: room for the headline (no clipping). */
/* Plate headline (Salman, 19 Oct): Nastaliq descenders need a tall line box and room beneath the last line; the plate grows with the headline, never clips it. */
/* Text tile foot (Salman, 19 Oct): the story's tags as reversed chips, pinned to the bottom so the tile is covered edge to edge. */
.bs-text .bs-body { grid-template-rows: auto 1fr auto; }
.bs-text .bs-tags { display: flex; flex-wrap: wrap; gap: 6px; align-self: end; margin-top: 4px; }
.bs-text .bs-tags span { font-family: var(--ui); font-size: 12px; font-weight: 600; color: #fff; background: var(--ink); padding: 3px 10px; border-radius: 999px; line-height: 1.7; white-space: nowrap; }
.broadsheet.four-col .bs-text .bs-tags span { font-size: 11px; padding: 2px 8px; }
/* Text tile, final (Salman, 19 Oct): a reversed band on top with place and time, the headline in normal dark text, a longer summary, tags at the foot. No plate. */
.bs-text.tile-b .bs-plate { aspect-ratio: auto; min-height: 0; background: none; border-radius: 0; overflow: visible; padding: 0; color: inherit; display: block; }
.bs-text.tile-b .bs-plate .bs-band { position: static; border-radius: 4px; margin: 0; }
.broadsheet .bs-item.bs-text.tile-b > a { background: var(--paper-2); }
.broadsheet .bs-item.bs-text.tile-b > a:hover { background: #ebe9e4; }
.broadsheet.three-col .bs-text.tile-b .h { font-size: 21px; line-height: 1.95; }
.broadsheet.three-col .bs-text.tile-b .bs-sum { font-size: 16px; line-height: 1.95; -webkit-line-clamp: 6; }
.broadsheet.four-col .bs-text.tile-b .h { font-size: 18px; line-height: 1.9; }
.broadsheet.four-col .bs-text.tile-b .bs-sum { font-size: 14.5px; line-height: 1.9; -webkit-line-clamp: 4; }
/* Text tiles use the picture cards' exact headline and summary styles in every tier (Salman, 19 Oct): nothing of their own. */
.broadsheet.three-col .bs-item.bs-text .h, .broadsheet.three-col .bs-text.tile-b .h { font-size: 17.5px; line-height: 1.85; padding-top: 0; color: inherit; font-weight: inherit; }
.broadsheet.three-col .bs-item.bs-text .bs-sum, .broadsheet.three-col .bs-text.tile-b .bs-sum { font-size: 14.5px; line-height: 1.9; -webkit-line-clamp: 6; }
.broadsheet.four-col .bs-item.bs-text .h, .broadsheet.four-col .bs-text.tile-b .h, .broadsheet.four-col .bs-mini.bs-text .h { font-size: inherit; line-height: inherit; color: inherit; font-weight: inherit; }
.broadsheet.four-col .bs-item.bs-text .bs-sum, .broadsheet.four-col .bs-text.tile-b .bs-sum { font-size: 14px; line-height: 1.9; -webkit-line-clamp: 4; }
.broadsheet.four-col .bs-item.bs-text .h, .broadsheet.four-col .bs-text.tile-b .h, .broadsheet.four-col .bs-mini.bs-text .h { font-size: 15.5px; line-height: 1.85; padding-top: 2px; }
/* Band as in treatment A (Salman, 19 Oct): dark block, place and time in gold, a thin light rule beneath them. */
.bs-text.tile-b .bs-band { background: var(--ink); color: var(--gold); padding: 10px 14px 0; border-radius: 4px; display: block; }
.bs-text.tile-b .bs-band > span, .bs-text.tile-b .bs-band > time { display: inline; }
.bs-text.tile-b .bs-band { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bs-text.tile-b .bs-band::after { content: ""; position: absolute; }
.bs-text.tile-b .bs-plate { padding: 0; }
.bs-text.tile-b .bs-plate .bs-band { padding: 10px 14px 9px; border-bottom: 0; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .28); padding-bottom: 14px; }
.bs-text.tile-b .bs-band time { color: var(--gold); opacity: .9; font-weight: 600; }
.broadsheet.four-col .bs-text.tile-b .bs-plate .bs-band { padding: 8px 12px 12px; font-size: 12px; }
/* Chips at the very foot (Salman, 19 Oct): the body stretches to the card and the summary takes the slack. */
.broadsheet .bs-item.bs-text > a { grid-template-rows: auto minmax(0, 1fr); align-content: stretch; }
.broadsheet .bs-item.bs-text .bs-body { height: auto; align-content: start; grid-template-rows: auto minmax(0, 1fr) auto auto; }
.broadsheet .bs-item.bs-text .bs-tags { align-self: end; }
.bs-text.tile-b .bs-plate .bs-band { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .34); }
/* Section rail (Salman, 19 Oct): one تازہ ترین list of 24 by quota; a single line to the topics page instead of the cloud. */
.sec-side .rail-latest .desk-head .live-dot { margin-inline-end: 2px; }
.sec-side .rail-latest .row { padding-block: 9px; }
.sec-side .rail-latest .row .h4 { font-size: 15.5px; line-height: 1.85; }
.sec-side .rail-latest .row .when { margin-bottom: 2px; }
:is(.sec-side, .hm-rail, .art-aside) .rail-topics-link { display: block; text-align: center; font-family: var(--ui); font-size: 13.5px; font-weight: 700; color: #fff; background: #1c1b19; padding: 11px 16px; border-radius: 4px; }
:is(.sec-side, .hm-rail, .art-aside) .rail-topics-link:hover { background: var(--blue); color: #fff; }
:is(.sec-side, .hm-rail, .art-aside) .rail-districts { border-radius: 6px; }
:is(.sec-side, .hm-rail, .art-aside) .rail-districts + .rail-topics-link { margin-top: -22px; border-radius: 0 0 6px 6px; }
:is(.sec-side, .hm-rail, .art-aside) .rail-districts:has(+ .rail-topics-link) { border-radius: 6px 6px 0 0; }
/* Story page (Salman, 19 Oct): the desk block sits under the story inside the main column, four across; the rail is the same تازہ ترین list as the desks. */
.art-main .related-in { margin-top: 34px; padding: 0; background: none; border-top: 3px solid var(--ink); }
.art-main .related-in .band-head { margin-top: 10px; }
.art-main .related-in .related-grid { gap: 26px 22px; }
.art-main .related-in .related-grid .card .h3 { font-size: 17px; line-height: 1.9; }
.art-aside .rail-latest { margin-top: 0; }
.art-aside .rail-latest .row { padding-block: 9px; }
.art-aside .rail-latest .row .h4 { font-size: 15.5px; line-height: 1.85; }
.art-aside .aside-paper { margin-top: 18px; }
@media (max-width: 1020px) { .art-main .related-in .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Story page desk block (Salman, 19 Oct): the «مزید» link closes the block beneath the grid, not beside the heading. */
.art-main .related-in .related-more { display: block; margin-top: 26px; padding: 11px 16px; text-align: center; font-family: var(--ui); font-size: 14px; font-weight: 700; color: var(--red-ink); border: 1px solid var(--rule); border-radius: 4px; }
.art-main .related-in .related-more:hover { border-color: var(--red-ink); background: var(--paper-2); }
/* Room between the section rail and the footer (Salman, 19 Oct). */
.sec-layout { padding-bottom: 48px; }
.sec-side { padding-bottom: 8px; }
.story .wrap { padding-bottom: 32px; }
/* Figures inside Urdu text sit in Noto Sans so they read crisp beside the Nastaliq. */
.h, .bs-sum, .dek, .body, .row .h4 { font-variant-numeric: lining-nums; }
.num, .h .num, .body .num { font-family: var(--lat); font-size: .92em; }
/* Contrast (PageSpeed, 19 Oct): times and hints on light panels read in a darker grey. */
.latest time { color: #5c5c63; }
.aside-paper .hint, .hint { color: #55555c; }
.row .when, .bs-kick, .card .meta, .lead-story .meta { color: #5c5c63; }
/* ---- Masthead, smaller (Salman, 20 Oct): the logo is a nameplate, not a poster; the first story starts higher. ---- */
.mast .wrap { padding-block: 6px 8px; gap: 20px; }
.logo-link { width: 250px; }
.mast-tag { font-size: 13.5px; line-height: 1.7; }
.mast-tag strong { font-size: 16px; }
@media (max-width: 640px) {
.util .wrap { padding-block: 5px; }
.util .dateline-top { font-size: 12px; }
.mast .wrap { padding-block: 6px; gap: 10px; }
.logo-link { width: 128px; }
.mast-actions .btn { padding: 6px 9px; }
}
/* ---- Hamburger drawer on phones (Salman, 20 Oct) ---- */
.menu-toggle { display: none; background: none; border: 0; color: #fff; padding: 0 12px 0 4px; cursor: pointer; align-items: center; gap: 8px; font-family: var(--ui); font-weight: 700; font-size: 14px; }
.menu-toggle .bars { display: inline-grid; gap: 4px; width: 20px; }
.menu-toggle .bars i { display: block; height: 2px; background: currentColor; border-radius: 2px; }
.drawer { position: fixed; inset: 0; z-index: 60; background: #161513; color: #fff; overflow-y: auto; padding: 0 18px 32px; }
.drawer[hidden] { display: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 10px; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.drawer-title { font-size: 22px; }
.drawer-close { background: none; border: 0; color: #fff; font-size: 34px; line-height: 1; padding: 0 4px; cursor: pointer; }
.drawer-search { display: flex; margin: 14px 0 6px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; overflow: hidden; }
.drawer-search input { flex: 1; min-width: 0; background: none; border: 0; color: #fff; font: 16px var(--ui); padding: 10px 14px; outline: none; }
.drawer-search input::placeholder { color: rgba(255, 255, 255, .6); }
.drawer-search button { background: none; border: 0; color: #fff; padding: 0 14px; display: flex; align-items: center; }
.drawer-search button svg { width: 18px; height: 18px; }
.drawer-menu, .drawer-menu .sub-menu, .drawer-links { list-style: none; margin: 0; padding: 0; }
.drawer-menu > li { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.drawer-menu > li > a { display: block; padding: 13px 4px; font-size: 21px; color: #fff; }
.drawer-menu .sub-menu { display: flex; flex-wrap: wrap; gap: 6px 8px; padding: 0 4px 14px; }
.drawer-menu .sub-menu a { display: inline-block; padding: 4px 12px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; color: #fff; font-size: 14.5px; font-family: var(--ui); font-weight: 600; }
.drawer-menu .sub-menu .sub-menu { display: none; }
.drawer-menu .current-menu-item > a { color: var(--gold); }
.drawer-links { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 18px; font-family: var(--ui); font-size: 14px; }
.drawer-links a { color: rgba(255, 255, 255, .8); }
body.drawer-open { overflow: hidden; }
@media (max-width: 760px) {
.menu-toggle { display: inline-flex; }
.nav .menu { display: none; }
.nav .wrap { justify-content: space-between; }
.nav .search-toggle { display: flex; }
}
/* Overlays on phones (Salman, 20 Oct): the prayer and weather tables stay real tables that scroll sideways inside their box; the overlay never grows past the screen. */
@media (max-width: 760px) {
.ov-lightbox { padding: 12px 10px 24px; width: 100vw; max-width: 100vw; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ov-lightbox .ov-body, .ov-lightbox .wrap, .pr-grid, .wx-grid, .pr-tables { max-width: 100%; min-width: 0; }
.ov-body .tbl { overflow-x: auto; overflow-y: clip; max-width: 100%; -webkit-overflow-scrolling: touch; }
.ov-body .tz { table-layout: auto; width: auto; min-width: 100%; }
.ov-body .tz thead { display: table-header-group; }
.ov-body .tz tr { display: table-row; padding: 0; border: 0; }
.ov-body .tz th, .ov-body .tz td { display: table-cell; padding: 8px 8px; border-bottom: 1px solid var(--rule); white-space: nowrap; font-size: 13.5px; }
.ov-body .wx-tbl th:first-child, .ov-body .wx-tbl td:first-child, .ov-body .pr-tbl th:first-child, .ov-body .pr-tbl td:first-child { width: auto; position: sticky; inset-inline-start: 0; background: #fff; text-align: right; }
.ov-body .wx-tbl th, .ov-body .wx-tbl td { width: auto !important; }
.ov-body .wx-hours { overflow-x: auto; }
.ov-body .pr-group { min-width: 0; }
}
body.has-overlay { overflow: hidden; }
/* ---- Contact page (Salman, 20 Oct): native form, no plugin ---- */
.contact .sec-hero { padding-block: 22px 10px; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; padding-bottom: 48px; }
.cform { display: grid; gap: 16px; max-width: 640px; }
.cform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cform label { display: grid; gap: 6px; font-family: var(--ui); font-size: 14px; font-weight: 700; color: var(--ink-2); }
.cform input, .cform select, .cform textarea { font: 17px var(--ui); padding: 10px 12px; border: 1px solid var(--rule-strong); border-radius: 4px; background: #fff; color: var(--ink); width: 100%; }
.cform textarea { font-family: var(--ur); font-size: 18px; line-height: 1.9; resize: vertical; }
.cform input:focus, .cform select:focus, .cform textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.cform .btn { justify-self: start; font-size: 15px; padding: 10px 22px; }
.cform-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* no negative offset: in an RTL page that becomes scrollable width */
.cform-note { padding: 12px 16px; border-radius: 4px; margin-bottom: 18px; font-family: var(--ui); font-size: 15px; }
.cform-note.ok { background: #e8f3ec; color: #1f5e3a; border: 1px solid #bfdcc9; }
.cform-note.bad { background: #fbeaea; color: #8a1c1c; border: 1px solid #f0c4c4; }
.contact-side { display: grid; gap: 14px; }
.cside-box { border: 1px solid var(--rule); border-top: 3px solid var(--blue); border-radius: 6px; padding: 14px 16px; background: var(--paper); }
.cside-box h2 { margin: 0 0 6px; font-family: var(--ui); font-size: 14px; font-weight: 700; color: var(--ink-2); }
.cside-box p { margin: 0; font-size: 17px; line-height: 1.9; }
.cside-link { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.cside-link svg { width: 26px; height: 26px; color: #1f8a4c; flex: none; }
.cside-link b { display: block; font-family: var(--ui); font-size: 15px; }
.cside-link small { display: block; font-family: var(--ui); font-size: 13px; color: var(--ink-2); }
.cside-link:hover { border-color: var(--blue); }
@media (max-width: 760px) { .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; } .cform-row { grid-template-columns: 1fr; } }
/* ===== Home 3 + 1 (Salman, 20 Oct): the day's run in the desks' tiers; the rail is the Kaaba, Quetta, live channels, magazine, districts, topics ===== */
.home-grid.home-31 { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 0 36px; }
.home-31 .hm-second { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin-top: 26px; }
.home-31 .desk-top { margin-top: 28px; }
.home-run { margin-top: 34px; }
.home-run .run-head { border-bottom: 3px solid var(--ink); font-size: 16px; }
.home-run .broadsheet { margin-top: 12px; }
.home-run .broadsheet + .broadsheet { margin-top: 30px; border-top: 3px solid var(--ink); padding-top: 6px; }
.home-run .broadsheet.three-col .bs-item:nth-child(3n + 1), .home-run .broadsheet.four-col .bs-item:nth-child(4n + 1) { border-inline-start: 0; }
@media (max-width: 1020px) { .home-grid.home-31 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .home-31 .hm-second { grid-template-columns: minmax(0, 1fr); } }
/* Tickers: two, no words, just the dot — red for the run, dark blue for بلوچستان. */
.latest .k { padding-inline: 12px 10px; min-width: 0; }
.latest .k .live-dot { margin: 0; width: 9px; height: 9px; }
/* Quetta only (Salman, 20 Oct): the city menus and the all-cities overlays are gone. */
.pw-city, .pw-select, .ww-select, .pw-note a { display: none !important; }
.pw-title::after { content: " · کوئٹہ"; font-weight: 600; color: var(--muted); }
/* The Kaaba tile: the Makkah stream, first in every rail. */
.rail-kaaba { padding: 0; border: 0; }
.kaaba-tile { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #000; border-radius: 6px; overflow: hidden; cursor: pointer; aspect-ratio: 16 / 10; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.kaaba-tile img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; transition: transform .5s ease; }
.kaaba-tile:hover img { transform: scale(1.04); }
.kaaba-cap { position: absolute; inset-inline: 0; bottom: 0; padding: 36px 14px 12px; background: linear-gradient(to top, rgba(0, 0, 0, .82), transparent); color: #fff; text-align: start; display: grid; gap: 2px; }
.kaaba-cap b { font-size: 21px; line-height: 1.6; }
.kaaba-live { font-family: var(--ui); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--gold); display: inline-flex; align-items: center; gap: 6px; }
.kaaba-live .live-dot { margin: 0; width: 7px; height: 7px; }
.kaaba-tile .yt-btn { top: 38%; }
/* Live channels: eight small tiles, two across. */
.rail-live .live-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.live-tile { display: grid; gap: 5px; padding: 0; border: 0; background: none; cursor: pointer; text-align: start; color: var(--ink); }
.live-tile img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; background: #1c1b19; display: block; }
.live-tile span { font-family: var(--ui); font-size: 12.5px; font-weight: 700; line-height: 1.5; }
.live-tile:hover span { color: var(--red-ink); }
.sec-side .rail-kaaba, .art-aside .rail-kaaba { margin-bottom: 4px; }
.art-aside .rail-box { margin-bottom: 22px; }
/* Tickers (Salman, 20 Oct): a plain dot on the strip, no block behind it; the بلوچستان ticker runs the other way. */
.latest .k { background: none !important; padding-inline: 14px 6px; }
.latest.tick-all .k .live-dot { background: var(--red); }
/* Kaaba tile without the dark screen (Salman, 20 Oct): the picture as it is, caption in a thin shadow, a light play button. */
.kaaba-tile img { opacity: 1; }
.kaaba-cap { background: none; padding: 10px 12px; text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 0 12px rgba(0, 0, 0, .6); }
.kaaba-tile .yt-btn { background: rgba(255, 255, 255, .88); top: 0; }
.kaaba-tile .yt-btn::after { border-color: transparent transparent transparent var(--ink); }
.kaaba-tile:hover .yt-btn { background: #fff; }
.hm-rail .rail-districts, .art-aside .rail-districts { margin: 0; }
.hm-rail .rail-topics-link, .art-aside .rail-topics-link { margin-top: -22px; }
/* ===== Palette (Salman, 20 Oct): five colours drawn from the Balochistan banners — paper, sand, dune, slate, terracotta — the logo keeps its red ===== */
:root {
	--paper: #faf7f1;        /* warm paper */
	--paper-2: #efe8da;      /* sand */
	--rule: #ddd3c3;         /* dune line */
	--rule-strong: #1c1b19;
	--ink: #1c1b19;
	--ink-2: #4b4842;
	--muted: #78736a;
	--blue: #34506a;         /* slate: the mountains behind Quetta */
	--blue-2: #4a6a88;
	--red-ink: #34506a;
	--gold: #c7a56a;         /* dune */
	--terra: #a8462f;        /* terracotta: the ticker dot, the live marks */
}
body { background: var(--paper); }
.latest { background: #f1ebdf; border-bottom-color: #ddd3c3; }
.latest .k .live-dot, .live-dot { background: var(--terra); }
.mkt-bar { background: #fbf9f4; }
.sec-hero:not(.mag-hero-banner) { background: linear-gradient(135deg, #e7dcc6, #cfd9df); border-radius: 8px; padding-inline: 22px; }
.sec-hero:not(.mag-hero-banner) h1, .sec-hero:not(.mag-hero-banner) .crumb, .sec-hero:not(.mag-hero-banner) .crumb a, .sec-hero:not(.mag-hero-banner) p { color: var(--ink); }
.prayer-widget, .weather-widget { background: #fffdf9; }
.foot { background: #1c1b19; border-top-color: #2b2925; }
.foot .social a:hover { background: var(--blue); }
.nav { background: #1c1b19; border-bottom-color: var(--terra); }
.nav .menu .current-menu-item > a, .nav .menu .current-category-ancestor > a { border-bottom-color: var(--gold); }
.masthead, .util, .mast { background: #1c1b19; }
.mast { background: linear-gradient(to left, #262420 0, #1f1e1b 55%, #1c1b19 100%); }
.bs-band { color: var(--gold); }
/* ===== Phones (Salman, 20 Oct) ===== */
@media (max-width: 760px) {
	/* phones: the menu bar sticks (Salman, 22 Oct) — rule below in the phone-header block */
.admin-bar .nav { top: auto; }
}
@media (max-width: 640px) {
	/* story page: the desk block is one column, picture beside the headline, bigger than before */
.art-main .related-in .related-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.grid4 .card:not(:first-child), .related-grid .card { grid-template-columns: 136px minmax(0, 1fr); column-gap: 14px; }
.related-grid .card:first-child { grid-template-columns: 136px minmax(0, 1fr); padding-top: 4px; }
.related-grid .card .ph { aspect-ratio: 4/3 !important; grid-row: span 4; border-radius: 4px; }
.related-grid .card .h3 { font-size: 17px; line-height: 1.9; }
	/* archive tiles: the picture spans the tile; text tiles keep their band */
.broadsheet .bs-item > a { padding-inline: 4px; }
.sec-hero:not(.mag-hero-banner) { padding-inline: 16px; }
}
/* ===== House grammar (20 Oct, learned from Fortune One, ukvisa.blog and Connaughts): warm paper page, one sand band, cream cards, one accent, a small ornament under section heads ===== */
.card, .bs-item > a, .prayer-widget, .weather-widget, .cside-box, .district-card, .rail-mag-tile, .live-tile img { background-color: #fffdf8; }
.broadsheet .bs-item.bs-text > a { background: #f4eee2; }
.broadsheet .bs-item.bs-text.tile-b > a { background: #f4eee2 !important; }
.sec-main .broadsheet + .broadsheet, .home-run .broadsheet + .broadsheet { border-top-color: var(--rule); }
.home-run, .related-in { border-top-color: var(--rule) !important; }
.desk-head, .run-head { border-bottom-color: var(--rule) !important; }
.band-head { border-bottom-color: var(--rule) !important; }
.band-head::after { background: var(--gold); height: 2px; }
.band-head h2::after { background: var(--terra); }
.hm-second .card, .related-grid .card { padding: 0; }
/* the sand band: the aside rail sits on sand so it reads as one piece */
.hm-rail, .sec-side, .art-aside { background: var(--paper-2); padding: 16px; border-radius: 8px; }
.sec-side, .art-aside { padding-top: 16px; }
.sec-side .rail-desk, .art-aside .rail-latest { background: #fffdf8; border-radius: 6px; padding: 10px 14px 6px; }
/* ornament under section heads: assets/motifs/ornament.png (brand/motifs-2.md), shown when the file exists */
.band-head h2, .desk-head, .run-head { position: relative; }
.sec-hero .sec-title h1 { font-weight: 400; }
@media (max-width: 640px) { .hm-rail, .sec-side, .art-aside { padding: 12px; border-radius: 6px; } }
/* The districts / topics stack in sand, not black (Salman, 20 Oct): dark text on dune, slate chips. */
:is(.sec-side, .hm-rail, .art-aside) .rail-districts, :is(.sec-side, .hm-rail, .art-aside) .rail-topics { background: #e9e0cc; border-top-color: #e9e0cc; }
:is(.sec-side, .hm-rail, .art-aside) .rail-districts .stack-title, :is(.sec-side, .hm-rail, .art-aside) .rail-topics .stack-title { background: var(--gold); color: var(--ink); border-bottom-color: rgba(0, 0, 0, .12); border-top: 0; }
:is(.sec-side, .hm-rail, .art-aside) .rail-districts .stack-title a { color: var(--ink); }
:is(.sec-side, .hm-rail, .art-aside) .rail-districts .district-chips a, :is(.sec-side, .hm-rail, .art-aside) .rail-districts .division-chips a, :is(.sec-side, .hm-rail, .art-aside) .rail-topics .tag-cloud a { color: var(--ink); }
:is(.sec-side, .hm-rail, .art-aside) .rail-districts .district-chips b, :is(.sec-side, .hm-rail, .art-aside) .rail-topics .tag-cloud b { color: var(--blue); }
:is(.sec-side, .hm-rail, .art-aside) .rail-districts .district-chips a:hover, :is(.sec-side, .hm-rail, .art-aside) .rail-topics .tag-cloud a:hover { color: var(--terra); }
:is(.sec-side, .hm-rail, .art-aside) .rail-districts .stack-sub { color: var(--ink-2); border-top-color: rgba(0, 0, 0, .12); }
:is(.sec-side, .hm-rail, .art-aside) .rail-topics-link { background: var(--gold); color: var(--ink); }
:is(.sec-side, .hm-rail, .art-aside) .rail-topics-link:hover { background: var(--blue); color: #fff; }
.rail-districts .stack-title .motif { filter: none; }
/* Search in the masthead's empty side (Salman, 20 Oct), not the top strip. */
.mast .wrap { grid-template-columns: auto 1fr auto auto; align-items: center; }
.mast-search { margin: 0; justify-self: end; }
.mast-search input { width: 240px; font-size: 14.5px; padding: 7px 12px; }
.mast-search button svg { width: 17px; height: 17px; }
@media (max-width: 1020px) { .mast-search input { width: 170px; } }
@media (max-width: 640px) { .mast-search { display: none; } .mast .wrap { grid-template-columns: 1fr auto; } }
/* پٹرولیم نرخ panel (Salman, 20 Oct): price, change since the last notification, unit. */
.fuel-panel { background: #fffdf8; border: 1px solid var(--rule); border-top: 3px solid var(--gold); border-radius: 6px; padding: 12px 16px 12px; }
.fuel-panel .stack-title { border: 0; padding-bottom: 6px; align-items: baseline; }
.fuel-panel .stack-title .hint { font-family: var(--ui); font-size: 11.5px; font-weight: 600; color: var(--muted); }
.fuel-list { list-style: none; margin: 4px 0 0; padding: 0; }
.fuel-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.fuel-list li:last-child { border-bottom: 0; }
.fuel-n { font-family: var(--ui); font-size: 14px; font-weight: 700; }
.fuel-n small { display: block; font-size: 11px; font-weight: 600; color: var(--muted); }
.fuel-p { font-family: var(--lat); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fuel-d { font-family: var(--lat); font-size: 12px; font-weight: 700; min-width: 58px; text-align: end; }
.fuel-d small { display: block; font-family: var(--ui); font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.fuel-d.up { color: var(--terra); }
.fuel-d.down { color: #1f6b3a; }
.fuel-d.flat { color: var(--muted); }
.fuel-panel .pw-note { margin-top: 8px; }
/* ===== کھیل / شوبز glamour strip (Salman, 20 Oct): full-bleed slides, scroll-snap, caption rising from a dark foot, dune kicker ===== */
.glam { position: relative; margin: 16px 0 8px; border-radius: 10px; overflow: hidden; background: #1c1b19; box-shadow: 0 10px 30px rgba(28, 27, 25, .18); }
.glam-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.glam-track::-webkit-scrollbar { display: none; }
.glam-slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 21 / 9; display: block; color: #fff; }
.glam-slide img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.08); transition: transform 6s ease; }
.glam-slide:hover img { transform: scale(1.04); }
.glam-cap { position: absolute; inset-inline: 0; bottom: 0; padding: 120px 36px 30px; background: linear-gradient(to top, rgba(20, 18, 14, .92) 0%, rgba(20, 18, 14, .55) 45%, transparent 100%); display: grid; gap: 6px; max-width: 70%; }
.glam-k { font-family: var(--ui); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; color: var(--gold); }
.glam-h { font-size: 34px; line-height: 1.7; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.glam-dek { font-size: 16px; line-height: 1.9; color: rgba(255, 255, 255, .86); }
.glam-dots { position: absolute; inset-inline-start: 36px; bottom: 14px; display: flex; gap: 8px; }
.glam-dots a { width: 26px; height: 3px; background: rgba(255, 255, 255, .45); border-radius: 2px; }
.glam-dots a:hover { background: var(--gold); }
.glam:has(.glam-slide:nth-child(1):target) .glam-dots a:nth-child(1), .glam:has(.glam-slide:nth-child(2):target) .glam-dots a:nth-child(2), .glam:has(.glam-slide:nth-child(3):target) .glam-dots a:nth-child(3), .glam:has(.glam-slide:nth-child(4):target) .glam-dots a:nth-child(4), .glam:has(.glam-slide:nth-child(5):target) .glam-dots a:nth-child(5) { background: var(--gold); }
.glam-slide:target { scroll-margin-top: 90px; }
@media (max-width: 760px) { .glam { border-radius: 6px; } .glam-slide { aspect-ratio: 4 / 3; } .glam-cap { max-width: 100%; padding: 70px 16px 24px; } .glam-h { font-size: 22px; line-height: 1.8; } .glam-dek { display: none; } .glam-dots { inset-inline-start: 16px; bottom: 10px; } }
/* کرکٹ اسکور panel */
/* The dedication line (Salman, 20 Oct): the Quran's prayer for parents, Al-Isra 17:24, above the masthead — for Javid Ahmad. */
.dua { background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.dua .wrap { display: flex; align-items: center; justify-content: center; gap: 14px; padding-block: 7px 6px; flex-wrap: wrap; }
.dua-ar { font-family: "Noto Naskh Arabic", "Amiri", serif; font-size: 19px; line-height: 1.6; color: var(--ink); font-weight: 600; }
.dua-ur { font-family: var(--ur); font-size: 14.5px; line-height: 1.8; color: var(--ink-2); }
.dua-ref { font-family: var(--ui); font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.dua-orn { flex: none; width: 56px; height: 10px; background: url("assets/motifs/ornament.png") center / contain no-repeat; opacity: .75; }
.dua-orn:first-child { transform: scaleX(-1); }
@media (max-width: 760px) { .dua .wrap { gap: 6px 10px; padding-block: 6px 5px; } .dua-ar { font-size: 16px; } .dua-ur { font-size: 13px; } .dua-orn { display: none; } .dua-ref { display: none; } }
/* کرکٹ اسکور: the score on the page — two rows per match, the batting side marked. */
/* ===== Motifs set 2 (Opus, 20 Oct): the ornament under section heads, dune rule-dots between tiers, faint backgrounds ===== */
.band-head { flex-wrap: wrap; }
.band-head::before { content: ""; order: 3; flex-basis: 100%; height: 12px; margin-top: 6px; background: url("assets/motifs/ornament.png") center / 180px 12px no-repeat; opacity: .8; }
.band-head::after { display: none; }
.band-head h2::after { display: none; }
.sec-main .broadsheet + .broadsheet, .home-run .broadsheet + .broadsheet { border-top: 0; position: relative; padding-top: 22px; }
.sec-main .broadsheet + .broadsheet::before, .home-run .broadsheet + .broadsheet::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 10px; background: url("assets/motifs/rule-dots.png") center / 420px 10px no-repeat; opacity: .7; }
.desk-head { position: relative; }
.rail-box .stack-title::after { content: none; }
.foot-top { position: relative; }
.foot { background-image: url("assets/motifs/bg-mountains.png"); background-repeat: no-repeat; background-position: center bottom; background-size: 1600px auto; }
.foot::before { content: none; }
.latest, .mkt-bar { background-image: url("assets/motifs/bg-dunes.png"); background-repeat: repeat-x; background-position: center; background-size: 1600px auto; background-blend-mode: multiply; }
.latest { background-color: #f1ebdf; }
.hm-rail, .sec-side, .art-aside { background-image: url("assets/motifs/bg-carpet.webp"); background-size: 600px 600px; background-blend-mode: multiply; }
.hm-rail, .sec-side, .art-aside { background-color: #efe8da; }
.hm-rail > *, .sec-side > *, .art-aside > * { position: relative; }
.sec-hero:not(.mag-hero-banner) { background-image: url("assets/motifs/bg-mountains.png"), linear-gradient(135deg, #e7dcc6, #cfd9df); background-repeat: no-repeat; background-position: center bottom, center; background-size: 1600px auto, cover; }
.empty { text-align: center; padding: 40px 16px 60px; font-family: var(--ui); color: var(--muted); }
.empty::before { content: ""; display: block; width: 160px; height: 160px; margin: 0 auto 10px; background: url("assets/motifs/empty.png") center / contain no-repeat; opacity: .7; }
.error404 .art-h::before { content: ""; display: block; width: 100%; max-width: 480px; aspect-ratio: 2 / 1; margin: 0 auto 14px; background: url("assets/motifs/error-404.png") center / contain no-repeat; }
.district-card { position: relative; overflow: hidden; }
.district-card::after { content: ""; position: absolute; inset-inline-start: -6px; bottom: -6px; width: 70px; height: 70px; background: url("assets/motifs/corner.png") center / contain no-repeat; opacity: .35; transform: scaleX(-1); pointer-events: none; }
/* Backgrounds at a whisper (20 Oct): the carpet and dune lines sit under a near-opaque wash so they read as texture, not pattern. */
.hm-rail, .sec-side, .art-aside { background-image: linear-gradient(rgba(239, 232, 218, .94), rgba(239, 232, 218, .94)), url("assets/motifs/bg-carpet.webp"); background-size: auto, 480px 480px; background-blend-mode: normal; }
.latest, .mkt-bar { background-image: linear-gradient(rgba(241, 235, 223, .9), rgba(241, 235, 223, .9)), url("assets/motifs/bg-dunes.png"); background-blend-mode: normal; }
.mkt-bar { background-image: linear-gradient(rgba(251, 249, 244, .93), rgba(251, 249, 244, .93)), url("assets/motifs/bg-dunes.png"); }
.foot { background-image: linear-gradient(rgba(28, 27, 25, .9), rgba(28, 27, 25, .9)), url("assets/motifs/bg-mountains.png"); background-size: auto, 1600px auto; background-position: center, center bottom; }
.sec-hero:not(.mag-hero-banner) { background-image: linear-gradient(135deg, rgba(231, 220, 198, .9), rgba(207, 217, 223, .9)), url("assets/motifs/bg-mountains.png"); background-size: cover, 1600px auto; background-position: center, center bottom; }
/* Ornament under every heading that opens a block (20 Oct): band heads, desk heads, rail box titles, the run head. */
.desk-head, .run-head, .rail-box .stack-title, .aside-box .stack-title { padding-bottom: 20px !important; background: url("assets/motifs/ornament-sm.png") center bottom 2px / 120px 8px no-repeat; }
.rail-box .stack-title, .aside-box .stack-title { background-position: center bottom 4px; }
:is(.sec-side, .hm-rail, .art-aside) .rail-districts .stack-title, :is(.sec-side, .hm-rail, .art-aside) .rail-topics .stack-title { background-image: url("assets/motifs/ornament-sm.png"); background-color: var(--gold); background-repeat: no-repeat; background-position: center bottom 3px; background-size: 120px 8px; padding-bottom: 18px !important; }
.sec-hero.mag-hero-banner .sec-title h1 { padding-bottom: 14px; background: url("assets/motifs/ornament.png") right bottom / 180px 12px no-repeat; }
.foot-cols h3 { padding-bottom: 18px; background: url("assets/motifs/ornament-sm.png") right bottom 2px / 110px 7px no-repeat; }
.foot-cols h3 { filter: brightness(1.6); }
.foot-cols h3 { filter: none; background-image: url("assets/motifs/ornament-sm.png"); opacity: 1; }
.home-31 .glam { margin-top: 34px; }
.home-31 .glam .run-head { background-color: transparent; color: #fff; border-bottom: 0; margin: 0; padding: 12px 18px 16px; position: absolute; top: 0; inset-inline: 0; z-index: 2; background: linear-gradient(to bottom, rgba(20, 18, 14, .7), transparent) !important; }
.home-31 .glam-slide { aspect-ratio: 21 / 9; }
/* Pagination (Salman, 20 Oct): next/prev read like the numbers — ink text on cream, no slate block. */
.pagination .page-numbers { background: #fffdf8; color: var(--ink); }
.pagination .page-numbers.next, .pagination .page-numbers.prev { background: #fffdf8; color: var(--ink); font-weight: 700; }
.pagination .page-numbers:hover { border-color: var(--gold); background: var(--paper-2); }
.pagination .current { background: var(--ink); color: #fff; }
/* Rail padding: tighter sides (Salman, 20 Oct). */
.hm-rail, .sec-side, .art-aside { padding: 12px 10px; }
.rail-box, .aside-box { margin-inline: 0; }
:is(.sec-side, .hm-rail, .art-aside) .rail-districts .district-chips, :is(.sec-side, .hm-rail, .art-aside) .rail-topics .tag-cloud { padding: 12px 10px 14px; }
.fuel-panel, .prayer-widget, .weather-widget { padding-inline: 12px; }
.rail-mag-tile { padding-inline: 14px; }
/* Subtle hovers only (Salman, 20 Oct): a full colour swap fails on touch screens, so every hover is a small lift or a tone shift. */
:is(.sec-side, .hm-rail, .art-aside) .rail-topics-link:hover { background: var(--gold); color: var(--ink); filter: brightness(.96); }
.rail-topics .tag-cloud a:hover, .district-chips a:hover { color: var(--ink); transform: none; opacity: .75; }
.live-tile:hover span, .bs-item > a:hover .h { color: var(--ink); opacity: .8; }
.bs-item > a:hover { background: var(--paper-2); }
.district-card:hover { box-shadow: 0 6px 16px rgba(13, 59, 102, .08); border-color: var(--rule); }
.kaaba-tile:hover img, .glam-slide:hover img { transform: none; }
.rail-mag-tile:hover { transform: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .14); }
.yt-card:hover .yt-btn { background: rgba(14, 14, 16, .9); }
.nav .menu a:hover { background: rgba(255, 255, 255, .05); }
/* Motif gallery (review page) */
.mg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding-bottom: 48px; }
.mg-item { margin: 0; background: #fffdf8; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
.mg-plate { aspect-ratio: 1; display: grid; place-items: center; background: var(--paper-2); padding: 16px; }
.mg-plate img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mg-bg { grid-column: span 2; }
.mg-bg .mg-plate { aspect-ratio: 2.5; background: #fff; }
.mg-item figcaption { padding: 10px 14px 12px; display: grid; gap: 2px; }
.mg-item b { font-size: 18px; }
.mg-item span { font-family: var(--ui); font-size: 13px; color: var(--ink-2); }
.mg-item code { font-family: var(--lat); font-size: 11px; color: var(--muted); direction: ltr; text-align: end; }
@media (max-width: 760px) { .mg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mg-bg { grid-column: span 2; } }
/* Districts box: room above the topics link (Salman, 20 Oct); pagination next/prev in light tones. */
:is(.sec-side, .hm-rail, .art-aside) .rail-districts .division-chips { padding-bottom: 22px; }
:is(.sec-side, .hm-rail, .art-aside) .rail-districts .district-chips { padding-bottom: 18px; }
:is(.sec-side, .hm-rail, .art-aside) .rail-topics-link { padding: 13px 16px; }
.pagination .page-numbers.next, .pagination .page-numbers.prev { background: var(--paper-2) !important; color: var(--ink-2) !important; border-color: var(--rule); }
.pagination .page-numbers.next:hover, .pagination .page-numbers.prev:hover { background: #e9e0cc !important; }
.pagination a.page-numbers:not(.current) { background: #fffdf8 !important; color: var(--ink) !important; }
/* Pager (Salman, 20 Oct): next/prev in light tones like the numbers; the double rule in dune. */
.pager { border-top-color: var(--rule); }
.pg { background: #fffdf8; color: var(--ink); border-color: var(--rule); }
.pg.nav { background: var(--paper-2); color: var(--ink-2); font-weight: 700; }
a.pg:hover { border-color: var(--gold); background: #e9e0cc; }
.pg.current { background: var(--ink); color: #fff; }
/* Districts box: clear room between the last chips and the topics link. */
:is(.sec-side, .hm-rail, .art-aside) .rail-districts { padding-bottom: 26px; }
/* Page description under the heading (Salman, 20 Oct): the term's own words, and on a district page the way into its e-zine profile. */
.sec-desc { margin: 10px 0 0; max-width: 60em; font-size: 16.5px; line-height: 1.95; color: var(--ink-2); }
.sec-desc-link { font-family: var(--ui); font-size: 13.5px; font-weight: 700; color: var(--red-ink); white-space: nowrap; }
.mag-hero-banner .sec-desc, .mag-hero-banner .sec-desc-link { color: #fff; }
.mag-hero-banner .sec-desc-link { color: var(--gold); }
@media (max-width: 640px) { .sec-desc { font-size: 15px; } }
/* ===== بلوچستان حکومت cluster (Salman, 21 Oct): a framed block, the CM in the centre, offices right, handouts left ===== */
.govt { margin-top: 30px; border: 1px solid #36322c; border-top: 3px solid var(--gold); border-radius: 8px; background: #26241f; color: var(--paper); padding: 0 0 16px; position: relative; overflow: hidden; }
.govt::before, .rev::before { content: ""; position: absolute; inset: 0; background: url("assets/motifs/bg-carpet.webp") center / 260px repeat; opacity: .06; filter: invert(1); pointer-events: none; }
.govt > *, .rev > * { position: relative; z-index: 1; }
.govt-head, .rev-head { display: flex; align-items: center; gap: 14px; margin: 0; padding: 13px 18px 16px; font-family: var(--ui); font-size: 17px; font-weight: 700; color: var(--paper); border-bottom: 1px solid #3e3a33; background: #2e2b26 url("assets/motifs/ornament-sm.png") center bottom 4px / 120px 8px no-repeat; }
.govt-head .govt-more { margin-inline-start: auto; font-size: 13px; font-weight: 600; color: var(--gold); }
.govt a, .govt .h { color: var(--paper); }
.govt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr); gap: 0 22px; padding: 14px 18px 0; align-items: start; }
.gv-col { display: grid; align-content: start; }
.gv-row { display: grid; gap: 3px; padding: 11px 0 12px; border-bottom: 1px solid #3e3a33; }
.gv-row:last-child { border-bottom: 0; }
.gv-k { display: flex; justify-content: space-between; gap: 8px; font-family: var(--ui); font-size: 12px; color: #a39b8c; }
.gv-k b { color: var(--gold); font-weight: 700; }
.gv-row .h4 { font-size: 16.5px; line-height: 1.9; }
.govt a:hover .h, .govt a:hover .h4, .govt a:hover .gv-cm-h { color: #e8dcc4; opacity: 1; }
.gv-cm { display: grid; gap: 10px; align-content: start; }
.gv-cm img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; display: block; }
.gv-cm-cap { display: grid; gap: 4px; }
.gv-cm-h { font-size: 24px; line-height: 1.75; }
.gv-cm-dek { font-size: 15.5px; line-height: 1.9; color: #d9d2c4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.govt-head .govt-more:hover { color: #e8dcc4; }
@media (max-width: 1020px) { .govt-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .gv-cm { grid-column: 1 / -1; order: -1; } }
@media (max-width: 640px) { .govt-grid { grid-template-columns: minmax(0, 1fr); padding: 12px 14px 0; } .gv-cm { order: -1; } .gv-right { order: 0; } .gv-left { order: 1; } .gv-cm-h { font-size: 21px; } .govt-head { padding: 10px 14px 13px; } }
/* ===== The reverse as the home page's second register (Salman, 21 Oct): slate text boxes for lists, pictures only where a face or a scene earns one ===== */
.rev { margin-top: 34px; border: 1px solid #36322c; border-top: 3px solid var(--gold); border-radius: 8px; background: #26241f; color: var(--paper); padding: 0 0 6px; position: relative; overflow: hidden; }
.rev a, .rev .h { color: var(--paper); }
.rev a:hover .h, .rev a:hover .h4 { color: #e8dcc4; }
.rev-head .rev-more { margin-inline-start: auto; font-size: 13px; font-weight: 600; color: var(--gold); }
.rev-head .rev-more:hover { color: #e8dcc4; }
.rev-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 26px; padding: 4px 18px 8px; }
.rev-grid .gv-row { border-bottom: 1px solid #3e3a33; }
.rev-grid .gv-row:nth-last-child(-n + 3) { border-bottom: 0; }
@media (max-width: 900px) { .rev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rev-grid .gv-row:nth-last-child(-n + 3) { border-bottom: 1px solid #3e3a33; } .rev-grid .gv-row:nth-last-child(-n + 2) { border-bottom: 0; } }
@media (max-width: 560px) { .rev-grid { grid-template-columns: minmax(0, 1fr); padding: 2px 14px 8px; } .rev-grid .gv-row { border-bottom: 1px solid #3e3a33 !important; } .rev-grid .gv-row:last-child { border-bottom: 0 !important; } }
/* سیاست row: three faces side by side */
.pol { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--rule); }
.pol-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.pol-tile { display: grid; gap: 8px; align-content: start; }
.pol-tile .ph { aspect-ratio: 4 / 3; }
.pol-tile .gv-k { color: var(--muted); }
.pol-tile .gv-k b { color: var(--terra); }
.pol-tile .h3 { font-size: 18px; line-height: 1.85; }
@media (max-width: 640px) { .pol-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } .pol-tile { grid-template-columns: 120px minmax(0, 1fr); column-gap: 14px; } .pol-tile .ph { grid-row: 1 / 3; aspect-ratio: 1; } .pol-tile .h3 { font-size: 17px; } }
.home-run-b .run-head { border-bottom-color: var(--rule); }
/* Hover on every dark surface (Salman, 21 Oct): never the slate-blue link colour on a dark ground — a sand tint only. */
:is(.glam, .govt, .rev, .foot) a:hover :is(.h, .h3, .h4, .glam-h, .gv-cm-h), .glam-slide:hover .glam-h, .rail-mag-tile:hover .h { color: #e8dcc4 !important; }
/* The video lightbox is an overlay wherever it is printed (21 Oct): the rail's "every child relative" rule must not catch it. */
.yt-lightbox { position: fixed !important; inset: 0 !important; z-index: 1000 !important; margin: 0 !important; }
/* ===== Header on the paper (Salman, 21 Oct): the nameplate in ink on paper like a printed front page; one slate bar (the menu) anchors it; the dark masthead block is gone ===== */
.masthead, .util, .mast { background: var(--paper); color: var(--ink); }
.masthead :focus-visible { outline-color: var(--ink); }
.util { background: var(--paper-2); border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.util .links a { color: var(--ink-2); }
.util .links a:hover { color: var(--ink); }
.mast { background: var(--paper); border-bottom: 1px solid var(--rule); }
.logo { filter: brightness(0); opacity: .94; }
.mast-tag { color: var(--ink-2); text-shadow: none; }
.mast-tag strong { color: var(--ink); }
.mast-tag span { opacity: 1; color: var(--muted); }
.mast-search, .util .usearch { border: 1px solid var(--rule-strong); background: #fff; border-radius: 999px; }
.mast-search:focus-within, .util .usearch:focus-within { border-color: var(--ink); background: #fff; }
.mast-search input, .util .usearch input { color: var(--ink); }
.mast-search input::placeholder, .util .usearch input::placeholder { color: var(--muted); }
.mast-search button, .util .usearch button { color: var(--ink); }
.nav { background: #26241f; border-bottom: 2px solid var(--gold); }
.nav .menu a { color: #eee8dc; }
.nav .menu a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.nav .menu .current-menu-item > a, .nav .menu .current-category-ancestor > a, .nav .menu .current-post-ancestor > a { background: rgba(255, 255, 255, .08); color: #fff; }
.menu-toggle, .search-toggle { color: #eee8dc; }
.drawer { background: #26241f; }
/* Phone search bar: the form took its own width and pushed the header sideways; it fills the bar now. */
.search-bar { background: var(--paper-2); border-top: 1px solid var(--rule); }
.search-bar .wrap { display: block; }
.search-bar form { width: 100%; }
.search-bar input { width: 100%; }
.nav { overflow-x: clip; }
/* Phone dua line: the chapter reference stays, small, after the translation. */
@media (max-width: 760px) { .dua-ref { display: inline; font-size: 10.5px; } .dua .wrap { padding-block: 7px 6px; } .dua-ur { flex-basis: 100%; text-align: center; } }
@media (max-width: 640px) { .mast .wrap { grid-template-columns: 1fr; justify-items: center; padding-block: 8px 6px; } .logo-link { width: 150px; } .mast-actions { display: none; } .util .wrap { justify-content: center; text-align: center; } }
.search-bar button { background: #26241f; color: var(--paper); border: 0; border-radius: 4px; padding: 0 16px; font: 600 15px var(--ui); }
/* Header fine-tuning (Salman, 21 Oct): the util line in ink on sand, the search as one clean pill, the dua reference beside the Arabic on phones. */
.today-line { color: var(--ink-2); }
.today-line b { color: var(--ink); }
.today-line .tl-mm { color: var(--muted); }
.today-line .tl-p { border-inline-start-color: var(--rule-strong); }
.util .dateline-top { color: var(--ink); }
.mast-search { display: flex; align-items: center; padding: 0 6px 0 4px; }
.mast-search input { border: 0 !important; background: none !important; outline: none; box-shadow: none; padding: 7px 10px; }
.mast-search button { background: none; border: 0; padding: 4px 6px; display: flex; align-items: center; cursor: pointer; }
.dua-orn { opacity: .55; }
@media (max-width: 760px) {
.dua .wrap { row-gap: 2px; }
.dua-ar { order: 0; }
.dua-ref { order: 1; display: inline; align-self: center; }
.dua-ur { order: 2; flex-basis: 100%; text-align: center; }
}
@media (max-width: 640px) { .mast-search { display: none !important; } }
/* ===== ای میگزین rebuilt (21 Oct): a shelf of covers on the landing page, a book's table of contents on each series page ===== */
.mag-shelf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; margin: 26px 0 40px; }
.mag-shelf .ms-card { padding: 0; border-top: 1px solid var(--rule); overflow: hidden; gap: 0; }
.mag-shelf .ms-card:hover { border-color: var(--rule-strong); box-shadow: 0 10px 24px -12px rgba(28, 27, 25, .35); }
.ms-cover { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--paper-2); overflow: hidden; }
.ms-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.ms-card:hover .ms-cover img { transform: scale(1.03); }
.ms-cover .motif { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; object-fit: contain; opacity: .8; }
.mag-shelf .ms-count { position: absolute; inset-inline-start: 10px; bottom: 10px; margin: 0; padding: 3px 9px; border-radius: 999px; background: rgba(28, 27, 25, .78); color: var(--paper); font-size: 11.5px; }
.mag-shelf .ms-body { padding: 12px 14px 14px; gap: 5px; }
.mag-shelf .ms-body .h3 { font-size: 19px; line-height: 1.8; }
.mag-shelf .ms-dek { font-size: 13.5px; line-height: 1.85; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mag-fresh { margin-top: 10px; }
@media (max-width: 1100px) { .mag-shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .mag-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 640px) { .mag-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .mag-shelf .ms-body { padding: 10px 11px 12px; } .mag-shelf .ms-body .h3 { font-size: 17px; } .mag-shelf .ms-dek { display: none; } }
/* Series page: open the book, then the contents */
.govt-head .motif { width: 44px; height: 44px; margin: 0; filter: brightness(1.35); }
.ms-cover .motif { width: 96px; height: 96px; opacity: .9; }
/* ===== E-zine tables and references (Salman, 21 Oct) ===== */
.mag-body table, .mag-table { width: 100% !important; max-width: 40em; margin: 18px auto 24px !important; border-collapse: collapse !important; font-size: 15px; line-height: 1.7; background: #fffdf8; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
.mag-body th, .mag-body td { padding: 7px 14px !important; border: 0 !important; border-bottom: 1px solid var(--rule) !important; text-align: start; vertical-align: middle; }
.mag-body thead th, .mag-body tr:first-child th { background: var(--paper-2); font-family: var(--ui); font-size: 13.5px; font-weight: 700; color: var(--ink-2); border-bottom: 2px solid var(--rule-strong) !important; }
.mag-body tbody th { font-family: var(--ur); font-weight: 400; font-size: 16px; color: var(--ink); background: none; }
.mag-body td { font-family: var(--lat); font-variant-numeric: tabular-nums lining-nums; color: var(--ink); direction: ltr; text-align: end; }
.mag-body td:first-child:not([dir]) { font-family: var(--ur); font-size: 16px; direction: rtl; text-align: start; }
.mag-body tbody tr:nth-child(even) { background: rgba(239, 232, 218, .45); }
.mag-body tr:last-child td, .mag-body tr:last-child th { border-bottom: 0 !important; }
.mag-body table caption { caption-side: top; font-family: var(--ui); font-size: 13px; color: var(--muted); padding: 0 0 6px; text-align: start; }
@media (max-width: 640px) { .mag-body table, .mag-table { font-size: 14px; } .mag-body th, .mag-body td { padding: 6px 10px !important; } }
sup.ref { font-family: var(--ui); font-size: 11px; line-height: 0; vertical-align: super; margin-inline-start: 2px; }
sup.ref a { color: var(--terra); text-decoration: none; padding: 0 2px; border-bottom: 0; }
sup.ref a:hover { color: var(--ink); }
.mag-sources { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--rule); }
.mag-sources h2 { font-family: var(--ui); font-size: 15px; font-weight: 700; color: var(--ink-2); margin: 0 0 8px; }
.mag-sources ol { margin: 0; padding-inline-start: 1.6em; font-family: var(--ui); font-size: 13.5px; line-height: 1.8; color: var(--ink-2); }
.mag-sources li { padding: 3px 0; scroll-margin-top: 90px; }
.mag-sources li:target { background: var(--paper-2); }
.mag-sources a { color: var(--blue); word-break: break-all; }
/* ===== E-zine series page (Salman, 21 Oct): the whole series as a four-column grid of picture and name, nothing featured, nothing numbered ===== */
.mag-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 22px; margin: 26px 0 44px; }
.mg-card { display: grid; gap: 9px; align-content: start; }
.mg-card .ph { aspect-ratio: 4 / 3; display: grid; place-items: center; }
.mg-card .ph .motif { width: 64px; height: 64px; opacity: .7; }
.mg-card .h4 { font-size: 17px; line-height: 1.85; }
.mg-card:hover .h4 { color: var(--red-ink); }
@media (max-width: 1020px) { .mag-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 18px; } }
@media (max-width: 640px) { .mag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; } .mg-card .h4 { font-size: 15.5px; } }
/* بلوچستان حکومت emblem (Opus, 21 Oct, from the Assembly photo): a wide drawing, so it sits at full height rather than in a 44px square. */
.govt-head .motif { width: auto; height: 50px; margin: -4px 0; filter: brightness(1.15); }
@media (max-width: 640px) { .govt-head .motif { height: 40px; } }
.mag-shelf .ms-cover { background: var(--paper-2) url("assets/motifs/bg-carpet.webp") center / 220px repeat; background-blend-mode: multiply; }
.mag-shelf .ms-cover::before { content: ""; position: absolute; inset: 0; background: rgba(239, 232, 218, .82); }
.ms-cover .motif { width: 104px; height: 104px; opacity: 1; z-index: 1; }
/* ای میگزین سے مزید at the foot of a piece (21 Oct): one card per other series, picture, series name, title, with its own padding. */
.mag-more-grid { gap: 26px 22px; }
.mm-card { display: grid; align-content: start; background: #fffdf8; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
.mm-card .ph { aspect-ratio: 4 / 3; border-radius: 0; box-shadow: none; display: grid; place-items: center; }
.mm-card .ph .motif { width: 64px; height: 64px; opacity: .7; }
.mm-body { display: grid; gap: 6px; padding: 12px 16px 16px; }
.mm-card .kick { font-size: 12.5px; color: var(--terra); }
.mm-card .h3 { font-size: 17.5px; line-height: 1.85; }
.mm-card:hover .h3 { color: var(--red-ink); }
@media (max-width: 1020px) { .mag-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .mag-more-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; } .mm-card { grid-template-columns: 120px minmax(0, 1fr); } .mm-card .ph { aspect-ratio: 1; } .mm-body { padding: 10px 12px; } }
/* کھیل اور شوبز strip: desktop only (Salman, 22 Oct) — on phones the head and the caption collided. */
@media (max-width: 760px) { .glam { display: none !important; } }
/* Contrast (PageSpeed, 22 Oct): small grey lines on sand read at 4.5:1 or better. */
.today-line .tl-mm, .util .today-line, .util .dateline-top { color: #4a4743; }
.art-head .meta, .art-head .meta time, .lead-story .meta, .card .meta, .bs-kick, .row .when { color: #4f4c47; }
/* Contrast (PageSpeed, 22 Oct): the muted grey passes 4.5:1 on paper and sand everywhere; the font-size tools read in ink. */
:root { --muted: #5f5b55; }
.byline .meta, .byline .meta time, .mag-head .meta { color: #5a5650; }
.tools .fs-down, .tools .fs-up { color: var(--ink); border-color: var(--rule-strong); }
/* Sticky columns (Salman, 22 Oct): the grid must not stretch the columns to one height, or the shorter one can never stick. */
.art > .wrap, .home-grid, .sec-layout { align-items: start; }
/* تازہ ترین rail rows with pictures (Salman, 22 Oct): thumbnail, desk or place, headline. */
.rl-list { display: grid; }
.rl-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.rl-row:last-child { border-bottom: 0; }
.rl-row .ph { aspect-ratio: 4 / 3; border-radius: 4px; box-shadow: none; grid-row: span 2; }
.rl-body { display: grid; gap: 2px; min-width: 0; }
.rl-row .gv-k { font-size: 11.5px; color: var(--muted); }
.rl-row .gv-k b { color: var(--terra); }
.rl-row .h4 { font-size: 15px; line-height: 1.8; }
.rl-row:hover .h4 { color: var(--red-ink); }
/* ===== Phone header (Salman, 22 Oct): slate dua, sand date + nameplate, slate menu (taller, sticky), sand ticker ===== */
@media (max-width: 640px) {
	.dua { background: #26241f; border-bottom: 0; }
	.dua .wrap { padding-block: 9px 8px; row-gap: 3px; }
	.dua-ar { color: var(--paper); font-size: 17px; }
	.dua-ur { color: #d9d2c4; font-size: 12.5px; }
	.dua-ref { color: var(--gold); }
	.util, .mast, .masthead { background: var(--paper-2); }
	.util { border-bottom: 0; }
	.util .wrap { padding-block: 8px 0; }
	.util .today-line { display: none; }
	.util .dateline-top { font-size: 12px; color: var(--ink-2); }
	.mast { border-bottom: 0; }
	.mast .wrap { padding-block: 4px 10px; }
	.nav { border-bottom: 0; }
	.nav .wrap { min-height: 56px; }
	.menu-toggle { font-size: 15px; padding-inline: 14px 6px; }
	.menu-toggle .bars { width: 24px; gap: 5px; }
	.search-toggle { padding-inline: 16px; }
	.search-toggle svg { width: 23px; height: 23px; }
	.latest { background: var(--paper-2); border-bottom: 1px solid var(--rule); }
}
@media (max-width: 640px) { .nav { position: sticky; top: 0; z-index: 30; overflow-x: visible; } }
/* ===== The top ten (Salman + Opus, 22 Oct): two leads, three, four, then the government block with slot 10 ===== */
.top-leads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.top-lead { display: grid; gap: 10px; align-content: start; }
.top-lead .h1 { font-size: 27px; line-height: 1.75; }
.top-lead .dek { font-size: 16px; line-height: 2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.top-row { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rule); }
.top-row .broadsheet { margin-top: 0; }
@media (max-width: 1020px) { .top-lead .h1 { font-size: 23px; } }
@media (max-width: 640px) {
	.top-leads { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.top-lead .h1 { font-size: 24px; }
	/* slots 3–9 as thumbnail rows: picture at the side, kicker and headline */
	.top-row { margin-top: 16px; padding-top: 6px; }
	.top-row .broadsheet { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
	.top-row .bs-item { border: 0; padding: 0; }
	.top-row .bs-item > a { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--rule); background: none; }
	.top-row .bs-item .ph { aspect-ratio: 4 / 3; border-radius: 4px; margin: 0; }
	.top-row .bs-item .bs-body { display: grid; gap: 3px; min-width: 0; }
	.top-row .bs-item .h { font-size: 16px; line-height: 1.8; }
	.top-row .bs-item .bs-kick { font-size: 11.5px; }
	.top-row .bs-item .bs-sum, .top-row .bs-item .bs-foot, .top-row .bs-item .bs-tags { display: none; }
	.top-row .bs-text .bs-plate { aspect-ratio: 4 / 3; }
	.top-four .bs-item:last-child > a { border-bottom: 0; }
}
/* کھیل اور شوبز (Salman, 22 Oct): five cards across; the one-at-a-time strip read as a single banner, so it is retired. */
.glam { display: none !important; }
.home-run-glam-list .top-row { border-top: 0; padding-top: 0; margin-top: 4px; }
.home-run-glam-list .broadsheet.four-col { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.home-run-glam-list .broadsheet.four-col .bs-item:nth-child(4n + 1) { border-inline-start: 1px solid var(--rule); }
.home-run-glam-list .broadsheet.four-col .bs-item:nth-child(5n + 1) { border-inline-start: 0; }
.home-run-glam-list .bs-item .h { font-size: 15.5px; }
@media (max-width: 1020px) { .home-run-glam-list .broadsheet.four-col { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .home-run-glam-list .broadsheet.four-col { grid-template-columns: minmax(0, 1fr); } }
/* ===== Compact footer (Salman, 22 Oct): the nameplate and three columns on one row; a floating TOP button ===== */
.foot-top { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important; gap: 36px; align-items: start; padding-block: 34px 30px; border-bottom: 0; }
.foot-top .foot-cols { display: contents; }
.foot-top .fc { padding-top: 6px; }
.foot-brand .fm-img { width: 220px; }
.foot-brand p { font-size: 14px; line-height: 1.9; max-width: 30em; }
.foot-cols .fc-title { font-size: 20px; }
.foot-cols li, .foot-cols .addr, .fc-contact p { font-size: 14px; line-height: 1.9; }
.foot-base .wrap { justify-content: center; }
@media (max-width: 1020px) { .foot-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; } .foot-top .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .foot-top { grid-template-columns: minmax(0, 1fr) !important; gap: 22px; padding-block: 26px 22px; } }
/* Floating TOP: appears after a screen of scrolling; slate disc, sand mark */
.to-top { position: fixed; inset-inline-start: 18px; bottom: 18px; z-index: 40; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: #26241f; color: var(--paper); font: 700 12px/1 var(--lat); letter-spacing: .08em; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.to-top span { font-size: 15px; line-height: 1; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
@media (max-width: 640px) { .to-top { inset-inline-start: 12px; bottom: 14px; padding: 10px 12px; } }
/* ===== 22 Oct (Salman): e-zine covers and cards in the pieces' own 16:9 frame; the count line stacks on phones ===== */
.mag-shelf .ms-cover { aspect-ratio: 16 / 9; }
.mag-shelf .ms-card.has-cover .ms-cover { background: #1c1b19; }
.mag-shelf .ms-card.has-cover .ms-cover::before { content: none; }
.mm-card .ph { aspect-ratio: 16 / 9; }
.mag-more-series { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--rule); }
.mms-label { font-family: var(--ui); font-size: 13px; font-weight: 700; color: var(--muted); margin-inline-end: 6px; }
.mag-more-series a { font-family: var(--ui); font-size: 13.5px; color: var(--ink); background: #fffdf8; border: 1px solid var(--rule); border-radius: 999px; padding: 6px 13px; line-height: 1.4; }
.mag-more-series a b { font-weight: 600; color: var(--muted); margin-inline-start: 4px; }
.mag-more-series a:hover { border-color: var(--blue); color: var(--blue); }
@media (max-width: 640px) {
	.sec-title { display: block; }
	.sec-title p { margin-top: 6px; }
	.mag-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
	.mm-card { grid-template-columns: minmax(0, 1fr); }
	.mm-card .ph { aspect-ratio: 16 / 9; }
	.mm-card .h3 { font-size: 15.5px; line-height: 1.8; }
}
/* Contact page: language tabs and the English form (22 Oct) */
.cform-lang { display: inline-flex; gap: 0; margin: 14px 0 0; border: 1px solid var(--rule-strong); border-radius: 999px; overflow: hidden; font-family: var(--ui); font-size: 14px; }
.cform-lang a { padding: 6px 16px; color: var(--ink-2); }
.cform-lang a.on { background: #26241f; color: var(--paper); }
.cform-lang a[lang="en"] { font-family: var(--lat); }
.cform-en, .cform-en input, .cform-en select, .cform-en textarea, .cform-en label, .cform-en .btn { font-family: var(--lat); text-align: left; }
.cform-en .cform-note { text-align: left; }
.cform-privacy { font-family: var(--ui); font-size: 12px; color: var(--muted); margin: 10px 0 0; }
.cform-en .cform-privacy { font-family: var(--lat); }
.cform-privacy a { color: var(--muted); text-decoration: underline; }
.grecaptcha-badge { visibility: hidden; }
/* ===== Contact page rebuilt (23 Oct): facts column beside a framed form, the paper's register ===== */
.contact-hero { padding-block: 22px 6px; }
.contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; padding-block: 34px 60px; }
.contact-facts { padding-top: 6px; }
.cf-kicker { font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--terra); margin: 0 0 8px; }
.cf-head { font-size: 34px; line-height: 1.5; margin: 0; }
.cf-rule { display: block; width: 96px; height: 1px; background: var(--rule-strong); margin: 18px 0 6px; position: relative; }
.cf-rule::after { content: ""; position: absolute; left: 50%; top: -3px; width: 7px; height: 7px; margin-left: -3px; background: var(--gold); transform: rotate(45deg); }
.cf-list { margin: 10px 0 0; }
.cf-list > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.cf-list dt { font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--muted); padding-top: 6px; }
.cf-list dd { margin: 0; font-size: 17px; line-height: 1.95; color: var(--ink); }
.cf-list dd a { color: var(--ink); border-bottom: 1px solid var(--rule-strong); }
.cf-list dd a:hover { color: var(--red-ink); border-color: var(--red-ink); }
.cf-note { font-family: var(--ui); font-size: 14px; line-height: 1.9; color: var(--ink-2); margin: 20px 0 0; max-width: 34em; }
.contact-form-card { background: var(--paper-2); border-top: 3px solid #26241f; padding: 30px 34px 34px; }
.cfc-head { font-size: 26px; line-height: 1.6; margin: 0; }
.cfc-sub { font-family: var(--ui); font-size: 14px; color: var(--ink-2); margin: 4px 0 22px; }
.contact-form-card .cform { max-width: none; gap: 18px; }
.cform .cf-l { display: block; font-family: var(--ui); font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.cform input, .cform select, .cform textarea { border: 1px solid var(--rule-strong); border-radius: 3px; background: #fffdf8; font-size: 16px; padding: 12px 14px; }
.cform input::placeholder, .cform textarea::placeholder { color: #9a948a; }
.cform textarea { font-family: var(--ur); font-size: 17px; }
.cform input:focus, .cform select:focus, .cform textarea:focus { outline: 2px solid #26241f; outline-offset: 0; border-color: #26241f; }
.cf-hint { display: block; font-family: var(--ui); font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 5px; }
.cform .btn.red { background: #26241f; color: var(--paper); border: 0; border-radius: 3px; padding: 13px 28px; font: 700 15px var(--ui); letter-spacing: .02em; }
.cform .btn.red:hover { background: var(--gold); color: var(--ink); }
.cform-note { margin-bottom: 20px; }
/* English register */
.contact-en .cf-kicker, .contact-en .cf-list dt, .contact-en .cf-note, .contact-en .cfc-sub, .contact-en .cf-l, .contact-en .cf-hint, .contact-en .cform .btn { font-family: var(--lat); }
.contact-en .cf-head, .contact-en .cfc-head, .contact-en .cf-list dd, .contact-en .sec-title h1, .contact-en .sec-title p, .contact-en .crumb { font-family: var(--lat); }
.contact-en .cf-head { font-size: 30px; }
.contact-en .cform textarea { font-family: var(--lat); font-size: 16px; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-block: 20px 44px; } .contact-form-card { padding: 22px 18px 26px; } .cf-head { font-size: 28px; } }
@media (max-width: 640px) { .cf-list > div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 0; } .cform-row { grid-template-columns: minmax(0, 1fr); } }

/* ===== Left-to-right editions (F2, 23 Oct 2026): roman.atemad.news and english.atemad.news =====
   The html element carries dir="ltr" and the text comes from inc/strings/<lang>.php. Nastaliq needs tall lines and
   large sizes; Latin needs neither, so the two line-height variables and the type faces change here and the
   Urdu rules stay untouched. Physical left/right rules above were made logical where they applied to both. */
html[dir="ltr"] { --lat: "Source Sans 3", "Noto Sans", "Segoe UI", Arial, sans-serif; --serif: "Source Serif 4", Georgia, "Times New Roman", serif; --ur: var(--lat); --ui: var(--lat); --lh-head: 1.18; --lh-body: 1.6; }
html[dir="ltr"] .h, html[dir="ltr"] .sec-title h1, html[dir="ltr"] .band-head h2, html[dir="ltr"] .cf-head, html[dir="ltr"] .cfc-head, html[dir="ltr"] .notice-title, html[dir="ltr"] .standfirst, html[dir="ltr"] .body, html[dir="ltr"] .dek { font-family: var(--serif); }
html[dir="ltr"] .body { font-size: var(--body-size, 19px); }
html[dir="ltr"] body { direction: ltr; }
html[dir="ltr"] .h { font-weight: 700; letter-spacing: -.012em; text-wrap: balance; }
html[dir="ltr"] .h1 { font-size: 34px; }
html[dir="ltr"] .h2 { font-size: 23px; }
html[dir="ltr"] .h3 { font-size: 18.5px; }
html[dir="ltr"] .h4 { font-size: 16px; line-height: 1.3; }
html[dir="ltr"] .art-h { font-size: 36px; }
html[dir="ltr"] .mag-h { font-size: 38px; line-height: 1.2; }
html[dir="ltr"] .dek { font-size: 16px; line-height: 1.55; }
html[dir="ltr"] .body { --body-size: 18px; max-width: 42em; }
html[dir="ltr"] .standfirst, html[dir="ltr"] .mag-head .standfirst { font-size: 19px; line-height: 1.55; }
html[dir="ltr"] .bs-item .h { font-size: 18px; line-height: 1.3; }
html[dir="ltr"] .band-head h2 { font-size: 22px; line-height: 1.3; font-weight: 700; }
html[dir="ltr"] .gv-cm-h, html[dir="ltr"] .top-lead .h { line-height: 1.22; }
html[dir="ltr"] .nav .menu a { font-size: 15px; line-height: 1.5; font-weight: 600; }
html[dir="ltr"] .mast-tag { line-height: 1.45; }
html[dir="ltr"] .mast-tag strong { font-size: 15px; }
html[dir="ltr"] .mast-tag span { font-size: 13px; }
html[dir="ltr"] .pr-city-h b, html[dir="ltr"] .wx-head b { font-size: 24px; font-weight: 700; line-height: 1.2; }
html[dir="ltr"] .pr-tbl td.pr-c { font-size: 14px; line-height: 1.4; }
html[dir="ltr"] .latin, html[dir="ltr"] .tr-title.latin, html[dir="ltr"] .fm-en { text-align: start; }
html[dir="ltr"] .dua .dua-ur { font-family: var(--lat); font-size: 13px; }
html[dir="ltr"] .avatar { font-family: var(--ur-mark, "Mehr Nastaliq Web", "Nastaliq Fallback", serif); font-weight: 400; font-size: 22px; line-height: 1; } /* the paper's own ع on every edition (Salman, 24 Oct) */
html[dir="ltr"] .cform input, html[dir="ltr"] .cform select, html[dir="ltr"] .cform textarea { font-family: var(--lat); }
html[dir="ltr"] .mag-sources ol, html[dir="ltr"] .mg-item code { direction: ltr; }
html[dir="ltr"] .crumb, html[dir="ltr"] .kick, html[dir="ltr"] .meta, html[dir="ltr"] .hint, html[dir="ltr"] .when { letter-spacing: 0; }
@media (max-width: 760px) {
	html[dir="ltr"] .h1, html[dir="ltr"] .art-h, html[dir="ltr"] .story .art-h { font-size: 27px; }
	html[dir="ltr"] .mag-h { font-size: 28px; }
	html[dir="ltr"] .body { --body-size: 17px; }
}

/* ===== Edition switch (F5): the same page in the other editions, in the utility bar and the phone drawer ===== */
.ed-switch { display: inline-flex; align-items: center; gap: 0; font-family: var(--lat); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; border: 1px solid rgba(255, 255, 255, .35); border-radius: 3px; overflow: hidden; }
.ed-switch a, .ed-switch .on { padding: 3px 10px; color: #fff; line-height: 1.6; white-space: nowrap; }
.ed-switch a + a, .ed-switch a + .on, .ed-switch .on + a { border-inline-start: 1px solid rgba(255, 255, 255, .35); }
.ed-switch .on { background: #fff; color: #161513; }
.ed-switch a:hover { background: rgba(255, 255, 255, .14); text-decoration: none; }
.ed-switch [lang="ur"] { font-family: var(--ui); font-size: 13.5px; }
.ed-switch-drawer { margin-inline-start: auto; margin-inline-end: 12px; }
@media (max-width: 640px) { .util .ed-switch { display: none; } }
/* LTR editions (Salman, 23 Oct 23:57): the switch sits on the paper-coloured bar, so ink, not white; the ticker runs the other way. */
.ed-switch { border-color: var(--rule-strong); }
.ed-switch a, .ed-switch .on { color: var(--ink); }
.ed-switch a + a, .ed-switch a + .on, .ed-switch .on + a { border-inline-start-color: var(--rule-strong); }
.ed-switch .on { background: var(--ink); color: #fff; }
.ed-switch a:hover { background: rgba(0, 0, 0, .06); }
.drawer .ed-switch { border-color: rgba(255, 255, 255, .35); }
.drawer .ed-switch a { color: #fff; }
.drawer .ed-switch .on { background: #fff; color: #161513; }
html[dir="ltr"] .tick-track.run { animation-name: atemad-tick-ltr; }
@keyframes atemad-tick-ltr { from { transform: translateX(0); } to { transform: translateX(-50%); } }
html[dir="ltr"] .tick-view { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); }
/* Phones (Salman, 24 Oct): the menu is short, so it scrolls as a strip instead of hiding behind a hamburger; the edition switch stays visible beside the date. */
@media (max-width: 760px) {
	.menu-toggle { display: none; }
	.nav .menu { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; justify-content: flex-start; padding-inline-end: 24px; -webkit-mask-image: linear-gradient(to left, transparent 0, #000 32px, #000 100%); mask-image: linear-gradient(to left, transparent 0, #000 32px, #000 100%); }
	html[dir="ltr"] .nav .menu { -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%); }
	.nav .menu a { padding: 16px 11px 15px; font-size: 15px; line-height: 1.6; scroll-snap-align: start; }
	.nav .menu .current-menu-item > a { border-bottom-color: var(--gold); }
}
@media (max-width: 640px) {
	.util .ed-switch { display: inline-flex; font-size: 11.5px; }
	.util .ed-switch a, .util .ed-switch .on { padding: 2px 8px; }
	.util .ed-switch [lang="ur"] { font-size: 12.5px; }
}

/* Newspaper clippings in the story body (desk, 27 Oct 2026): shown at their natural width, centred, never stretched. */
.atemad-clipping { margin: 18px 0 22px; text-align: center; }
.atemad-clipping img { display: inline-block; width: auto; max-width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 4px; }
.atemad-clipping figcaption { font-family: var(--ui); font-size: 13px; color: var(--muted); margin-top: 6px; }

/* 29 Oct 2026: the section/tag banners carry the Atemad stamp at their bottom-left (about 170px wide at the box's usual width).
   Keep the title row and the intro clear of that corner on wide screens so the story count (RTL) or the heading (LTR) and a long
   intro line never sit on the stamp. Phones keep the full width: the stamp is behind the text there anyway. */
@media (min-width: 641px) {
	.mag-hero-banner .sec-title, .mag-hero-banner .sec-desc, .mag-hero-banner .mag-intro { margin-left: 190px; }
}

/* footer legal line (3 Nov 2026) */
.foot-base .wrap { flex-wrap: wrap; row-gap: 6px; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.foot-legal a { color: inherit; opacity: .85; text-decoration: none; }
.foot-legal a:hover { opacity: 1; text-decoration: underline; }
/* AdSense places (3 Nov 2026): printed only when a unit id is set. Fixed sizes per breakpoint, reserved before the ad
   loads, so CLS stays zero; the rail unit is not shown on phones (few ads on mobile). */
.ad { margin: 22px auto; text-align: center; max-width: 100%; overflow: hidden; }
.ad .ad-label { display: block; font: 11px/1.6 var(--ui); color: var(--muted); letter-spacing: .04em; margin-bottom: 4px; }
.ad .adsbygoogle { display: inline-block; }
.ad:has(.adsbygoogle[data-ad-status="unfilled"]) { display: none; } /* no ad from Google = no box at all (places sit low on the page, so no visible shift) */
.ad-top { margin: 18px 0 26px; min-height: 82px; }
.ad-top .adsbygoogle { width: 468px; height: 60px; }
.ad-after_article { margin: 26px 0 30px; min-height: 82px; }
.ad-after_article .adsbygoogle { width: 468px; height: 60px; }
.ad-rail { margin: 0 0 22px; min-height: 272px; }
.ad-rail .adsbygoogle { width: 300px; height: 250px; }
@media (max-width: 760px) {
	.ad-top { min-height: 72px; }
	.ad-top .adsbygoogle { width: 320px; height: 50px; }
	.ad-after_article { min-height: 72px; }
	.ad-after_article .adsbygoogle { width: 320px; height: 50px; }
	.ad-rail { display: none; }
}

/* Home: four light desks in two rows of five small cards (4 Nov 2026) — Business 3 + Technology 2, Sports 3 + Showbiz 2. */
.home-split { margin-top: 34px; }
.home-split .split-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; }
.home-split .split-row + .split-row { margin-top: 30px; }
.home-split .desk-span-3 { grid-column: span 3; }
.home-split .desk-span-2 { grid-column: span 2; }
.home-split .split-desk + .split-desk { border-inline-start: 1px solid var(--rule); padding-inline-start: 14px; }
.home-split .split-desk:first-child { padding-inline-end: 14px; }
.home-split .run-head { border-bottom: 3px solid var(--ink); font-size: 16px; margin: 0; }
.home-split .broadsheet { margin-top: 0; }
.home-split .desk-span-3 .broadsheet { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-split .desk-span-2 .broadsheet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-split .bs-item { border-inline-start: 1px solid var(--rule); }
.home-split .bs-item:first-child { border-inline-start: 0 !important; }
.home-split .bs-item > a { padding: 10px 8px 12px; }
.home-split .bs-item:last-child { border-bottom: 0; }
@media (max-width: 1020px) {
	.home-split .split-row { grid-template-columns: minmax(0, 1fr); }
	.home-split .desk-span-3, .home-split .desk-span-2 { grid-column: auto; }
	.home-split .split-desk + .split-desk { border-inline-start: 0; padding-inline-start: 0; margin-top: 24px; }
	.home-split .split-desk:first-child { padding-inline-end: 0; }
	.home-split .desk-span-3 .broadsheet, .home-split .desk-span-2 .broadsheet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.home-split .bs-item:nth-child(2n + 1) { border-inline-start: 0 !important; }
	.home-split .bs-item:nth-child(2n) { border-inline-start: 1px solid var(--rule) !important; }
}
@media (max-width: 640px) {
	.home-split .desk-span-3 .broadsheet, .home-split .desk-span-2 .broadsheet { grid-template-columns: minmax(0, 1fr); }
	.home-split .bs-item { border-inline-start: 0 !important; }
	.home-split .bs-item > a { padding-inline: 2px; }
}