/*
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.2.4
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: #128c4a;
	--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; 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: none; }
.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.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 Ahmed. */
.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.png"); 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.png"); 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.png") 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.png") 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"] { --ur: var(--lat); --ui: var(--lat); --lh-head: 1.22; --lh-body: 1.6; }
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(--lat); font-weight: 700; }
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; }
}