@charset "UTF-8";
/* =========================================================================
   روزنامہ تعمیرِ وطن — main.css  (package A)
   RTL only: logical properties throughout, never left/right.
   Mobile-first — base is the phone, then 768px, then 1024px.
   Fonts arrive from assets/fonts/fonts.css. Sections follow CONTRACT.md §3.
   ========================================================================= */


/* ---- tokens ---- */

:root {
	/* palette — CONTRACT.md §2, do not alter */
	--tw-green:      #2D6248;
	--tw-green-dark: #1C4433;
	--tw-green-mid:  #7BA37E;
	--tw-green-pale: #D1E1C7;
	--tw-ground:     #E8E9ED;
	--tw-card:       #FFFFFF;
	--tw-ink:        #10171C;
	--tw-body:       #1F282E;
	--tw-muted:      #5A6670;
	--tw-rule:       #D8DCDA;
	--tw-red:        #C8102E;
	--tw-gold:       #8A6A14;
	--tw-blue:       #1B4F8A;

	--tw-urdu: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;
	--tw-lat:  'Archivo', system-ui, sans-serif;
	/* `.tw-lat` lands on whole localised dates ("3 اکتوبر 2026"), so Urdu
	   glyphs inside it must fall back to Nastaliq and not to system-ui */
	--tw-lat-mixed: 'Archivo', 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', system-ui, sans-serif;

	--tw-wrap:   1320px;
	--tw-gap:    24px;
	--tw-radius: 10px;

	/* derived — see CONTRACT.md "Additions" */
	--tw-gutter:       16px;  /* grows to 24px at 768px                 */
	--tw-hairline:     1px solid var(--tw-rule);
	--tw-on-green:     #F4F7F3; /* text on the green chrome             */
	--tw-ribbon-accent: var(--tw-green); /* overridden inline per block */
	--tw-nav-h:        54px; /* sticky nav height, reused by the offsets */
	--tw-ticker-dur:   45s;
	--tw-rail-w:       352px;
	--tw-read-scale:   1;    /* reading-size control multiplier         */
	--tw-bottomnav-h:  58px;

	/* 1.4.11 control boundary. NOT --tw-rule: that is a 1.38:1 decorative
	   hairline, and `--tw-hairline` freezes it at #D8DCDA on :root -- a
	   var() inside a custom property is substituted where the property is
	   DECLARED, so a mode block redefining --tw-rule never reaches it.
	   This token is referenced straight from `border`, so the mode blocks
	   below do reach it. 4.18:1 on --tw-card, 3.44:1 on --tw-ground.     */
	--tw-control-edge: #767E79;
	/* --tw-gold as TEXT: #8A6A14 is only 4.17:1 on --tw-ground.          */
	--tw-gold-text:    #7A5D10;
}


/* ---- base ---- */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-block-start: calc(var(--tw-nav-h) + 22px); /* clears the sticky nav on anchors */
	/* 2.4.11: and the fixed phone bar at the other end, which otherwise
	   covers a tabbed-to control outright (measured 100% at 390px).
	   `body { padding-block-end }` only protects the end of the document. */
	scroll-padding-block-end: calc(var(--tw-bottomnav-h) + 6px);
}

body {
	margin: 0;
	background: var(--tw-ground);
	color: var(--tw-body);
	font-family: var(--tw-urdu);
	font-size: 17px;
	line-height: 2;
	text-align: start;
	overflow-wrap: break-word;
}

img, svg, video, iframe, canvas { max-inline-size: 100%; }
img { block-size: auto; border: 0; }

a {
	color: var(--tw-green);
	text-decoration: none;
}
a:hover, a:focus-visible { color: var(--tw-green-dark); }

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	color: var(--tw-ink);
	font-weight: 700;
	line-height: 1.9; /* Nastaliq minimum — never tighten */
}

p, ul, ol, figure, blockquote, table { margin: 0; }
ul, ol { padding-inline-start: 0; list-style: none; }

button {
	margin: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

input, select, textarea { font: inherit; color: inherit; }

input[type="search"], input[type="text"], input[type="email"],
input[type="url"], input[type="tel"], textarea, select {
	inline-size: 100%;
	min-block-size: 44px;
	padding: 8px 12px;
	/* 1.4.11: the comment fields are #FFF on the #E8E9ED page -- 1.21:1 --
	   so the border is the ONLY thing marking the field. It has to carry 3:1. */
	border: 1px solid var(--tw-control-edge);
	border-radius: 8px;
	background: var(--tw-card);
	color: var(--tw-body);
	font-size: 17px;
	line-height: 1.9;
	text-align: start;
}
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--tw-green); }
::placeholder { color: var(--tw-muted); opacity: 1; }
textarea { min-block-size: 120px; }

:focus-visible {
	outline: 2px solid var(--tw-green);
	outline-offset: 2px;
	border-radius: 3px;
}
.tw-topbar :focus-visible,
.tw-nav :focus-visible,
.tw-breaking :focus-visible,
.tw-footer :focus-visible,
.tw-latest__head :focus-visible { outline-color: #FFFFFF; }

/* inline stroke icons — scoped so the logo <img>/<svg> is untouched */
.tw-btn svg, .tw-social__link svg, .tw-nav__search svg, .tw-nav__toggle svg,
.tw-breaking__close svg, .tw-bottomnav__item svg, .tw-reading button svg,
.tw-article__share a svg, .tw-article__share button svg, .tw-epaper__bar svg,
.tw-share__icon {
	display: block;
	inline-size: 1.15em;
	block-size: 1.15em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
}


/* ---- topbar + social ---- */

.tw-topbar {
	background: var(--tw-green-dark);
	color: var(--tw-on-green);
	font-size: 14px;
	line-height: 1.9;
}

.tw-topbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 18px;
	padding-block: 7px;
}

/* `order` decides placement, not DOM order: the date hugs the inline start
   (the right edge in RTL), links and social run to the far end. */
.tw-topbar__date { order: 1; font-size: 14px; }
.tw-topbar__meta { order: 2; display: flex; flex-wrap: wrap; gap: 4px 16px; color: #C6D6C9; }
.tw-topbar__links { order: 3; display: flex; flex-wrap: wrap; gap: 4px 16px; margin-inline-start: auto; }
.tw-topbar .tw-social { order: 4; }

.tw-topbar__meta > * { display: inline-flex; align-items: center; gap: 6px; }

.tw-topbar__links a { color: var(--tw-on-green); }
.tw-topbar__links a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }

.tw-social { display: flex; align-items: center; gap: 6px; }

.tw-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 30px;
	block-size: 30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: var(--tw-on-green);
	font-size: 14px;
	transition: background-color .15s linear;
}
.tw-social__link:hover { background: rgba(255, 255, 255, .22); color: #FFFFFF; }


/* ---- breaking ---- */

.tw-breaking {
	background: var(--tw-red);
	color: #FFFFFF;
	font-size: 15px;
	line-height: 1.9;
}
.tw-breaking[hidden] { display: none; }

/* Breaking has no `__inner`, so the flex row sits on the `.tw-wrap` when
   there is one and on `.tw-breaking` when there isn't. Two rules: an
   unparsable `:has()` must not take the plain selector with it. */
.tw-breaking > .tw-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	padding-block: 9px;
}
.tw-breaking:not(:has(> .tw-wrap)) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	padding-block: 9px;
	padding-inline: var(--tw-gutter);
}

.tw-breaking__label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: none;
	padding-inline: 12px;
	padding-block: 3px;
	border-radius: 999px;
	background: #FFFFFF;
	color: var(--tw-red);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

.tw-breaking__dot {
	inline-size: 8px;
	block-size: 8px;
	border-radius: 50%;
	background: var(--tw-red);
	animation: tw-pulse 1.8s ease-in-out infinite;
}

.tw-breaking__text {
	flex: 1 1 14em;
	min-inline-size: 0;
	color: #FFFFFF;
	font-size: 17px;
	font-weight: 500;
}
.tw-breaking__text:hover { text-decoration: underline; text-underline-offset: 4px; }

.tw-breaking__time { flex: none; color: rgba(255, 255, 255, .85); font-size: 14px; }

.tw-breaking__cta {
	flex: none;
	min-block-size: 32px;
	display: inline-flex;
	align-items: center;
	padding-inline: 14px;
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 999px;
	color: #FFFFFF;
	font-size: 14px;
}
.tw-breaking__cta:hover { background: #FFFFFF; color: var(--tw-red); }

.tw-breaking__close {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	margin-inline-start: auto;
	border-radius: 50%;
	color: #FFFFFF;
}
.tw-breaking__close:hover { background: rgba(255, 255, 255, .18); }

@keyframes tw-pulse {
	0%, 100% { transform: scale(1);   opacity: 1; }
	50% { transform: scale(1.5); opacity: .4; }
}


/* ---- masthead + market ---- */

.tw-masthead {
	background: var(--tw-card);
	border-block-end: var(--tw-hairline);
}

.tw-masthead__inner {
	display: grid;
	justify-items: center;
	gap: 6px;
	padding-block: 18px;
}

.tw-masthead__logo { display: block; }
.tw-masthead__logo img { display: block; block-size: auto; max-block-size: 76px; }

/* phones: logo only */
.tw-masthead__market,
.tw-masthead__ad { display: none; }

.tw-market { display: grid; gap: 8px; }

.tw-market__item {
	display: grid;
	gap: 0 10px;
	grid-template-columns: auto auto;
	align-items: baseline;
	min-inline-size: 150px;
	padding: 8px 12px;
	border: var(--tw-hairline);
	border-radius: var(--tw-radius);
	background: var(--tw-card);
}

.tw-market__label { color: var(--tw-muted); font-size: 14px; line-height: 1.9; }
.tw-market__note { grid-column: 1 / -1; font-size: 13px; } /* package B */

.tw-market__value {
	justify-self: end;
	color: var(--tw-ink);
	font-family: var(--tw-lat);
	font-variant-numeric: tabular-nums lining-nums;
	font-size: 16px;
	font-weight: 600;
}


/* ---- nav ---- */

.tw-nav {
	position: sticky;
	inset-block-start: 0;
	z-index: 50;
	background: var(--tw-green);
	color: var(--tw-on-green);
	box-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}

.tw-nav__inner {
	display: flex;
	align-items: center;
	gap: 8px;
	min-block-size: var(--tw-nav-h);
}

.tw-nav__list {
	display: flex;
	flex: 1 1 auto;
	align-items: stretch;
	min-inline-size: 0;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.tw-nav__list::-webkit-scrollbar { display: none; }

.tw-nav__item { display: flex; }

.tw-nav__link {
	display: inline-flex;
	align-items: center;
	/* 48px, not 44: "کھیل" inks 40.7px at 18px and sat flush on a 44px row */
	min-block-size: 48px;
	padding-block: 5px;
	padding-inline: 13px;
	border-block-end: 3px solid transparent;
	color: var(--tw-on-green);
	font-size: 18px;
	line-height: 1.9;
	white-space: nowrap;
	transition: background-color .15s linear;
}
.tw-nav__link:hover { background: rgba(0, 0, 0, .16); color: #FFFFFF; }

.tw-nav__link--active {
	border-block-end-color: #FFFFFF;
	background: rgba(0, 0, 0, .12);
	color: #FFFFFF;
	font-weight: 600;
}

.tw-nav__live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	padding-inline: 11px;
	padding-block: 3px;
	border-radius: 999px;
	background: var(--tw-red);
	color: #FFFFFF;
	font-family: var(--tw-lat);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.tw-nav__live::before {
	content: "";
	inline-size: 7px;
	block-size: 7px;
	border-radius: 50%;
	background: #FFFFFF;
	animation: tw-pulse 1.8s ease-in-out infinite;
}

.tw-nav__search,
.tw-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex: none;
	min-inline-size: 44px;
	min-block-size: 44px;
	border-radius: 8px;
	color: var(--tw-on-green);
}
.tw-nav__search:hover,
.tw-nav__toggle:hover { background: rgba(0, 0, 0, .18); color: #FFFFFF; }

/* The two panels the nav can drop (package B). `.tw-nav__searchbar` sets no
   `display` on purpose, so the `hidden` it ships with still closes it. */
.tw-nav__searchbar,
.tw-nav__item--has-children > ul {
	position: absolute;
	inset-block-start: 100%;
	z-index: 1;
	background: var(--tw-green-dark);
	border-block-start: 1px solid rgba(255, 255, 255, .18);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
}
.tw-nav__searchbar { inset-inline: 0; padding: 12px var(--tw-gutter); }

/* a parent item, once a real menu is assigned to `primary` */
.tw-nav__item--has-children { position: relative; }
.tw-nav__item--has-children > ul {
	inset-inline-start: 0;
	min-inline-size: 210px;
	padding-block: 4px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .12s linear;
}
.tw-nav__item--has-children:hover > ul,
.tw-nav__item--has-children:focus-within > ul { opacity: 1; visibility: visible; }

/* Phone drop-panel. max-width on purpose: cheaper to gate a phone-only
   layout here than to build it into the base and unpick it at 768px. Only a
   toggle reporting itself CLOSED hides the list, so a missing toggle or a
   missing aria-expanded leaves a usable row rather than no nav at all.
   No position:relative — `.tw-nav` is sticky, so the panel already anchors. */
@media (max-width: 767.98px) {
	.tw-nav:has(.tw-nav__toggle) .tw-nav__list {
		position: absolute;
		inset-inline: 0;
		inset-block-start: 100%;
		flex-direction: column;
		align-items: stretch;
		max-block-size: 70vh;
		overflow-y: auto;
		background: var(--tw-green);
		border-block-start: 1px solid rgba(255, 255, 255, .18);
		box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
	}
	.tw-nav:has(.tw-nav__toggle) .tw-nav__item { display: block; }
	.tw-nav:has(.tw-nav__toggle) .tw-nav__link {
		inline-size: 100%;
		padding-inline: var(--tw-gutter);
		border-block-end: 0;
		border-block-start: 1px solid rgba(255, 255, 255, .1);
	}
	.tw-nav:has(.tw-nav__toggle) .tw-nav__link--active {
		border-inline-start: 3px solid #FFFFFF;
		border-block-end-color: transparent;
	}
	.tw-nav__item--has-children > ul {
		position: static;
		opacity: 1;
		visibility: visible;
		min-inline-size: 0;
		background: rgba(0, 0, 0, .14);
		box-shadow: none;
	}
	/* two rules, never one list: a `:has()` an engine cannot parse must not
	   take the plain sibling fallback down with it */
	.tw-nav__toggle[aria-expanded="false"] ~ .tw-nav__list { display: none; }
	.tw-nav:has(.tw-nav__toggle[aria-expanded="false"]) .tw-nav__list { display: none; }
}


/* ---- ticker ---- */

.tw-ticker {
	background: var(--tw-card);
	border-block-end: var(--tw-hairline);
}

.tw-ticker__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	min-block-size: 46px;
}

.tw-ticker__label {
	flex: none;
	padding-inline: 13px;
	padding-block: 4px;
	border-radius: 999px;
	background: var(--tw-ribbon-accent, var(--tw-green));
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
}

.tw-ticker__viewport {
	flex: 1 1 auto;
	align-self: stretch; /* fill the row — `overflow: hidden` on a box only as
	                        tall as the line box shaves the tops off the kafs */
	min-inline-size: 0;
	overflow: hidden;
	/* symmetric edge fade — identical on both sides, so it is direction-neutral */
	mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}

/* Printed twice, so 50% is exactly one copy and the loop restarts unseen.
   The shift is POSITIVE, not the contract's -50% → 0: in RTL that negative
   translate drags the track clean out of the viewport (measured 0% coverage).
   CONTRACT.md Additions #1. */
.tw-ticker__track {
	display: flex;
	align-items: center;
	block-size: 100%; /* centre the items in the full row, clear of the clip */
	inline-size: max-content;
	min-inline-size: 200%; /* each half still fills the row when the editor
	                          has only one or two ticker items */
	will-change: transform;
	animation: tw-marquee var(--tw-ticker-dur) linear infinite;
}

@keyframes tw-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(50%); }
}

.tw-ticker:hover .tw-ticker__track,
.tw-ticker:focus-within .tw-ticker__track { animation-play-state: paused; }

/* `pause_hover` and `mobile` from tw_ticker_settings() (package B). Written as
   opt-OUTS, so the default behaviour needs no attribute on the markup. */
.tw-ticker[data-tw-pause="0"]:hover .tw-ticker__track,
.tw-ticker[data-tw-pause="0"]:focus-within .tw-ticker__track { animation-play-state: running; }
.tw-ticker[data-tw-mobile="0"] { display: none; }

/* 2.2.2: the actual pause mechanism. `"1"` is written by the toggle in
   header.php; `"0"` above is the editor's `pause_hover` opt-out. One
   attribute cannot hold both values, so the two rules never fight -- and
   the script restores whichever value it found when the button is let up. */
.tw-ticker[data-tw-pause="1"] .tw-ticker__track { animation-play-state: paused; }

.tw-ticker__pause {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-inline-size: 44px;
	min-block-size: 44px;
	padding-inline: 11px;
	border: 1px solid var(--tw-control-edge);
	border-radius: 999px;
	background: var(--tw-card);
	color: var(--tw-green-dark);
	font-family: var(--tw-urdu);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.9;
}
/* Ships hidden and the script unhides it, like `.tw-reading` and the share
   row. The author `display` above would otherwise beat the UA [hidden]. */
.tw-ticker__pause[hidden] { display: none; }
.tw-ticker__pause:hover { border-color: var(--tw-green); background: rgba(45, 98, 72, .06); }
.tw-ticker__pause[aria-pressed="true"] {
	border-color: var(--tw-green);
	background: var(--tw-green);
	color: #FFFFFF;
}
.tw-ticker__pause svg { display: block; flex: none; inline-size: 17px; block-size: 17px; }
/* The phone row has no width for a word; the name lives on the button's
   aria-label, and the visible text at 768px up is a substring of it (2.5.3). */
.tw-ticker__pause-text { display: none; }
.tw-ticker__pause .tw-ticker__ico--play { display: none; } /* beats `.tw-ticker__pause svg` */
.tw-ticker__pause[aria-pressed="true"] .tw-ticker__ico--pause { display: none; }
.tw-ticker__pause[aria-pressed="true"] .tw-ticker__ico--play { display: block; }

.tw-ticker__item {
	display: inline-flex;
	align-items: center;
	flex: 1 0 auto; /* shares out the slack when min-inline-size kicks in, so
	                   both halves stay exactly 50% wide and the seam holds */
	gap: 9px;
	padding-inline: 14px;
	color: var(--tw-body);
	font-size: 17px;
	line-height: 1.95;
	white-space: nowrap;
}
.tw-ticker__item:hover { color: var(--tw-green); }

.tw-ticker__time {
	color: var(--tw-muted);
	font-family: var(--tw-lat);
	font-variant-numeric: tabular-nums lining-nums;
	font-size: 14px;
	font-weight: 500;
}

.tw-ticker__sep {
	inline-size: 5px;
	block-size: 5px;
	border-radius: 50%;
	background: var(--tw-green-mid);
	flex: none;
}

.tw-ticker__hint {
	flex: none;
	color: var(--tw-muted);
	font-size: 13px;
	line-height: 1.9;
	display: none;
}


/* ---- layout ---- */

/* The `__inner` elements are centred containers in their own right, so the
   chrome lines up even if a template forgets `.tw-wrap`. */
.tw-wrap,
.tw-topbar__inner,
.tw-masthead__inner,
.tw-nav__inner,
.tw-ticker__inner,
.tw-footer__inner {
	inline-size: 100%;
	max-inline-size: var(--tw-wrap);
	margin-inline: auto;
	padding-inline: var(--tw-gutter);
}

/* …and nothing double-indents when one is nested inside a wrap */
.tw-wrap .tw-topbar__inner,
.tw-wrap .tw-masthead__inner,
.tw-wrap .tw-nav__inner,
.tw-wrap .tw-ticker__inner,
.tw-wrap .tw-footer__inner {
	max-inline-size: none;
	padding-inline: 0;
}

.tw-grid,
.tw-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tw-gap);
	align-items: start;
}

/* `tw-cards` is package D's name for the card grid; `tw-grid--cards` / `--2`
   are aliases for package C, `tw-grid--wide` stays one column. */
.tw-grid--wide { grid-template-columns: minmax(0, 1fr); }

.tw-main,
.tw-rail { min-inline-size: 0; }

.tw-main > * + * { margin-block-start: calc(var(--tw-gap) + 8px); }
.tw-rail > * + * { margin-block-start: var(--tw-gap); }


/* ---- ribbon section header ---- */

.tw-ribbon {
	display: flex;
	align-items: flex-end;
	margin-block-end: 16px;
}

/* In RTL the first flex child lands at the right edge — the solid block —
   and the pale band runs left. Descending heights make the step. Widths are
   the contract's 58 / 26px; heights follow the title's INK, not its line box
   (a 22px title inks 49.2px). CONTRACT.md Additions #3. */
.tw-ribbon__block {
	flex: none;
	inline-size: 58px;
	block-size: 68px;
	border-start-start-radius: var(--tw-radius);
	background: var(--tw-ribbon-accent, var(--tw-green));
}

.tw-ribbon__step {
	flex: none;
	inline-size: 26px;
	block-size: 62px;
	background: var(--tw-green-mid);
}

.tw-ribbon__body {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 12px;
	min-inline-size: 0;
	min-block-size: 56px;
	padding-inline: 16px;
	border-start-end-radius: var(--tw-radius);
	background: var(--tw-green-pale);
}

.tw-ribbon__title {
	color: var(--tw-green-dark);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.9;
}

.tw-ribbon__latin {
	color: var(--tw-green);
	font-family: var(--tw-lat);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	line-height: 1.6;
	text-transform: uppercase;
	opacity: .85;
}

.tw-ribbon__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-block-size: 44px;
	margin-inline-start: auto;
	color: var(--tw-green-dark);
	font-size: 15px;
	font-weight: 600;
}
.tw-ribbon__more:hover { text-decoration: underline; text-underline-offset: 4px; }


/* ---- cards: lead / card / list ---- */

.tw-lead,
.tw-card,
.tw-list {
	background: var(--tw-card);
	border: var(--tw-hairline);
	border-radius: var(--tw-radius);
	overflow: hidden;
}

/* lead ------------------------------------------------------------------ */

/* ---- display boxes vs grid boxes: why the lead no longer shares this rule -
   Measured across all 1,459 published posts that carry a featured image
   (attachment metadata, not a sample):

     aspect ratio  min 0.50  p10 1.41  p25 1.56  MEDIAN 1.729  p75 1.78
                   p90 1.90  p99 2.33  max 4.11,  973 distinct pixel sizes

   Sweeping every box ratio from 1.2 to 2.2 in 0.005 steps, the one that
   loses the least to `cover` over that corpus is **1.775** -- 16/9 is
   1.778, so the ratio already in this file is the optimum and no other
   fixed number beats it. It still costs mean 8.7% / median 6.2% / p90
   21.8% of the source, and 32% of images lose more than 10%. That is the
   honest ceiling of a fixed ratio against a corpus this heterogeneous.

   It matters more here than on a normal paper because the desk's artwork is
   frequently a COMPOSITE: the headline is set INSIDE the JPEG, with the
   masthead in the top corner and a branded footer bar carrying the URL and
   the social handles across the bottom. A hand-labelled random sample of 48
   featured images found 7 house composites (14.6%) plus 16 other
   text-bearing files (tender-notice scans, e-paper pages, third-party
   graphics with burned-in type) -- a third of the corpus carries words that
   `cover` can slice. Cropping those does not lose scenery, it loses the
   sentence and the brand bar.

   So the boxes are split by JOB, not by guessing what is in the file:

   - DISPLAY boxes (this one, and .tw-article__media) are big enough for
     burned-in type to be read, and hold exactly one image, so nothing
     depends on them being a uniform height. They take the FILE's own ratio
     and crop nothing. The bound below is a ratio, not a pixel height, so it
     holds at every breakpoint.
   - GRID boxes (.tw-card__media, .tw-list__thumb) keep the fixed ratio and
     `cover` below, because they are fed hard crops cut to exactly that
     ratio (tw-card 800x450 and tw-grid 400x225 are 16:9; tw-thumb 200x150
     is 4:3) so the CSS adds no loss at all -- measured 0.0-0.1% on 11/11
     homepage cards and 12/12 search cards -- and because at a measured
     340px (card) and 96px (thumb) a burned-in Urdu headline is unreadable
     whether it is whole or not. Equal rows are worth more there.

   Cost of this rule to the case it does not favour: the lead's height now
   follows its picture. At the measured 706px homepage column that is 397px
   for the 77% of recent leads that are 16:9, 442px at p90 and 706px for a
   square. The bound keeps the worst case to 4:3 of the column.         */
.tw-lead__media {
	display: block;
	position: relative;
	container-type: inline-size; /* lets the bound below be stated as a ratio */
}

.tw-lead__media img {
	display: block;
	inline-size: 100%;
	block-size: auto;      /* the file's ratio sets the box: zero crop */
	max-block-size: 75cqw; /* never taller than 4:3 of its own width */
	object-fit: contain;   /* past that bound, letterbox rather than slice */
}

/* The empty-slot placeholder is a <span>, not an <img>: it has no file to
   respect, so it keeps the fixed 16/9 set with .tw-img--empty further down
   and holds the slot open exactly as before. */

.tw-card__media > .tw-img,
.tw-card__media img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.tw-lead__body { padding: 18px var(--tw-gutter) 20px; }
.tw-lead__body > * + * { margin-block-start: 10px; }

.tw-lead__title {
	font-size: clamp(26px, 5.4vw, 42px);
	font-weight: 700;
	line-height: 1.85;
}
.tw-lead__title a { color: inherit; }
.tw-lead__title a:hover { color: var(--tw-green); }

.tw-lead__dek {
	color: var(--tw-body);
	font-size: 19px;
	line-height: 2.05;
}

.tw-lead__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	padding-block-start: 12px;
	border-block-start: var(--tw-hairline);
	color: var(--tw-muted);
	font-size: 15px;
	line-height: 1.9;
}
.tw-lead__meta > * { display: inline-flex; align-items: center; gap: 6px; }

.tw-lead__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-inline-start: auto;
}

/* card ------------------------------------------------------------------ */
.tw-card {
	display: flex;
	flex-direction: column;
	block-size: 100%;
	transition: border-color .15s linear, transform .15s ease-out;
}
.tw-card:hover { border-color: var(--tw-green-mid); transform: translateY(-2px); }

.tw-card__media { display: block; position: relative; }

.tw-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	padding: 14px 16px 16px;
}

.tw-card__kicker {
	color: var(--tw-green);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.9;
}

.tw-card__title {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.9;
}
.tw-card__title a { color: inherit; }
.tw-card__title a:hover { color: var(--tw-green); }

.tw-card__dek {
	color: var(--tw-body);
	font-size: 17px;
	line-height: 2;
}

.tw-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	margin-block-start: auto;
	padding-block-start: 10px;
	border-block-start: var(--tw-hairline);
	color: var(--tw-muted);
	font-size: 14px;
	line-height: 1.9;
}

/* list ----------------------------------------------------------------- */
.tw-list { padding-inline: 16px; }

.tw-list__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2px 12px;
	padding-block: 12px;
}
.tw-list__item + .tw-list__item { border-block-start: var(--tw-hairline); }

.tw-list__item:has(.tw-list__thumb) {
	grid-template-columns: 84px minmax(0, 1fr);
	align-items: start;
}

.tw-list__thumb {
	grid-row: span 2;
	display: block;
	inline-size: 84px;
	overflow: hidden;
	border-radius: 6px;
}
.tw-list__thumb > .tw-img,
.tw-list__thumb img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.tw-list__time {
	color: var(--tw-muted);
	font-family: var(--tw-lat);
	font-variant-numeric: tabular-nums lining-nums;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.8;
}

.tw-list__title {
	color: var(--tw-ink);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.95;
}
.tw-list__title:hover,
.tw-list__title a:hover { color: var(--tw-green); }
.tw-list__title a { color: inherit; }


/* ---- rail: latest ---- */

.tw-latest {
	background: var(--tw-card);
	border: var(--tw-hairline);
	border-radius: var(--tw-radius);
	overflow: hidden;
}

.tw-latest__head {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 12px 16px;
	background: var(--tw-green-dark);
	color: #FFFFFF;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.9;
}

.tw-latest__dot {
	flex: none;
	inline-size: 9px;
	block-size: 9px;
	border-radius: 50%;
	background: var(--tw-red);
	box-shadow: 0 0 0 3px rgba(200, 16, 46, .28);
	animation: tw-pulse 1.8s ease-in-out infinite;
}

.tw-latest__items { padding-inline: 16px; }

/* Rows may be bare anchors or the shared `.tw-list__item` part; a list item
   keeps its own padding and rule, so the two never stack up. */
.tw-latest__items > :not(.tw-list__item) { padding-block: 11px; }
.tw-latest__items > :not(.tw-list__item) + :not(.tw-list__item) {
	border-block-start: var(--tw-hairline);
}
.tw-latest__items > a:not(.tw-list__item) { display: grid; row-gap: 2px; }

.tw-latest__more {
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: 44px;
	border-block-start: var(--tw-hairline);
	background: #F4F6F3;
	color: var(--tw-green-dark);
	font-size: 16px;
	font-weight: 600;
}
.tw-latest__more:hover { background: var(--tw-green-pale); }


/* ---- bits: img / badge / btn / adslot / epaper ---- */

.tw-img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

/* no featured image: holds the slot open with a muted fill and an inset
   hairline, so a grid never collapses and never looks broken */
.tw-img--empty {
	aspect-ratio: 16 / 9;
	background-color: #DEE2E6;
	background-image: repeating-linear-gradient(
		135deg,
		rgba(255, 255, 255, .55) 0 9px,
		rgba(255, 255, 255, 0) 9px 18px
	);
	box-shadow: inset 0 0 0 1px rgba(16, 23, 28, .07);
}
.tw-list__thumb .tw-img--empty { aspect-ratio: 4 / 3; }
.tw-epaper__doc .tw-img--empty { aspect-ratio: 420 / 594; }

.tw-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-inline: 10px;
	padding-block: 2px;
	border-radius: 999px;
	background: rgba(16, 23, 28, .06);
	color: var(--tw-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.9;
	white-space: nowrap;
}
.tw-badge--green { background: var(--tw-green);      color: #FFFFFF; }
.tw-badge--red { background: var(--tw-red);        color: #FFFFFF; }
.tw-badge--gold { background: rgba(138, 106, 20, .14); color: var(--tw-gold); }
.tw-badge--blue { background: rgba(27, 79, 138, .12);  color: var(--tw-blue); }

.tw-card__media .tw-badge,
.tw-lead__media .tw-badge {
	position: absolute;
	inset-block-end: 10px;
	inset-inline-start: 10px;
}

/* `.tw-search__submit` rides the button styles, so searchform.php needs no
   inline layout of its own (package B). */
.tw-search {
	display: flex;
	align-items: center;
	gap: 8px;
}
.tw-search__field { flex: 1 1 auto; min-inline-size: 0; }
.tw-search__submit { flex: none; inline-size: auto; }

.tw-btn,
.tw-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-block-size: 44px;
	padding-inline: 16px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: rgba(45, 98, 72, .08);
	color: var(--tw-green-dark);
	font-family: var(--tw-urdu);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.9;
	text-align: center;
	transition: background-color .15s linear, border-color .15s linear;
}
.tw-btn:hover { background: rgba(45, 98, 72, .16); color: var(--tw-green-dark); }

.tw-btn--primary,
.tw-search__submit {
	background: var(--tw-green);
	color: #FFFFFF;
}
.tw-btn--primary:hover,
.tw-search__submit:hover { background: var(--tw-green-dark); color: #FFFFFF; }

.tw-btn--ghost {
	border-color: var(--tw-control-edge);
	background: var(--tw-card);
	color: var(--tw-green-dark);
}
.tw-btn--ghost:hover { border-color: var(--tw-green); background: var(--tw-card); }

.tw-btn--live {
	background: var(--tw-red);
	color: #FFFFFF;
	font-family: var(--tw-lat);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.tw-btn--live:hover { background: #A60D26; color: #FFFFFF; }
.tw-btn--live::before {
	content: "";
	inline-size: 7px;
	block-size: 7px;
	border-radius: 50%;
	background: #FFFFFF;
	animation: tw-pulse 1.8s ease-in-out infinite;
}

.tw-adslot {
	display: grid;
	gap: 6px;
	justify-items: center;
	padding: 12px;
	border: 1px dashed rgba(138, 106, 20, .45);
	border-radius: var(--tw-radius);
	background: rgba(138, 106, 20, .04);
}
.tw-adslot:empty { display: none; }
.tw-adslot img { display: block; }

.tw-adslot__link { display: block; }
.tw-adslot__img {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
	margin-inline: auto;
}

.tw-adslot__label {
	color: var(--tw-gold);
	font-family: var(--tw-lat);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .18em;
	line-height: 1.6;
	text-transform: uppercase;
}

.tw-epaper {
	display: grid;
	gap: 12px;
	padding: 16px;
	border: var(--tw-hairline);
	border-radius: var(--tw-radius);
	background: var(--tw-card);
	border-block-start: 3px solid var(--tw-gold);
}

.tw-epaper__doc {
	display: block;
	overflow: hidden;
	border: var(--tw-hairline);
	border-radius: 6px;
	background: #F2F3F5;
}
.tw-epaper__doc img,
.tw-epaper__doc > .tw-img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 420 / 594;
	object-fit: cover;
}
.tw-epaper__doc iframe,
.tw-epaper__doc canvas { display: block; inline-size: 100%; }

.tw-epaper__fallback {
	padding: 14px;
	color: var(--tw-muted);
	font-size: 16px;
	line-height: 2;
	text-align: center;
}

.tw-epaper__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	padding-block-start: 12px;
	border-block-start: var(--tw-hairline);
	color: var(--tw-muted);
	font-size: 14px;
	line-height: 1.9;
}
.tw-epaper__bar > :last-child { margin-inline-start: auto; }


/* ---- article + pullquote + reading ---- */

.tw-article {
	padding-block: 8px 32px;
	font-size: calc(20px * var(--tw-read-scale));
}

.tw-article__header { display: grid; gap: 12px; margin-block-end: 20px; }
/* a pill must not be stretched by the grid into a full-width bar */
.tw-article__header > .tw-badge { justify-self: start; }

.tw-article__title {
	font-size: clamp(28px, 5.6vw, 42px);
	font-weight: 700;
	line-height: 1.85;
	max-inline-size: 22em;
}

.tw-article__dek {
	color: var(--tw-body);
	font-size: calc(20px * var(--tw-read-scale));
	line-height: 2.1;
	max-inline-size: 36em;
}

.tw-article__byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	padding-block: 12px;
	border-block: var(--tw-hairline);
	color: var(--tw-muted);
	font-size: 15px;
	line-height: 1.9;
}
.tw-article__byline > * { display: inline-flex; align-items: center; gap: 6px; }

.tw-article__media { display: block; margin-block: 4px; }
.tw-article__media img,
.tw-article__media > .tw-img {
	display: block;
	inline-size: 100%;
	border-radius: var(--tw-radius);
}

/* ---- the photo, floated so copy runs beside it -------------------------

   Desk request: "wrap text across the image and make image little bit small".
   The photo is injected INSIDE .tw-article__body after the opening
   paragraphs, so the float is scoped to that context — a figure used anywhere
   else keeps the full-width form.

   FLOAT LEFT, NOT INLINE-START, AND THE DIRECTION IS THE WHOLE POINT. This
   document is RTL, so left is the inline-END edge. Floating it there leaves
   every line of Urdu STARTING at the right margin, where the eye already is,
   and the ragged edge falls against the picture. Floating inline-start would
   push the start of each line away from the margin and the column would read
   as though it had been indented at random.
   ---------------------------------------------------------------------- */
.tw-article__body .tw-article__media {
	float: left;
	inline-size: min(46%, 380px);
	/* top | right (the text side, so this is the gutter) | bottom | left */
	margin: .4em 1.4rem 1rem 0;
	shape-margin: 1rem;
}

/* Floats are out of flow: without this the tags, share row and comments ride
   up alongside the picture instead of starting below the article. */
.tw-article__body::after {
	content: "";
	display: block;
	clear: both;
}

/* Below this the remaining column is too narrow for Nastaliq — at 2.15 line
   height a 50% column leaves three or four words a line, which reads worse
   than no wrap at all. So the picture goes back to full width. */
@media (max-width: 700px) {
	.tw-article__body .tw-article__media {
		float: none;
		inline-size: 100%;
		margin: 1.1em 0;
	}
}

/* ---- خبر کا خلاصہ: the opening paragraph as a standfirst --------------

   Desk request: mark the summary out from the body copy. Given a tint, an
   accent rule and a size step, the tint alone would read as a notice box —
   this site already uses filled panels for government notices — so the
   weight comes mostly from type, with the colour kept to a rule and a wash.

   The rule is on the inline-START edge: in RTL that is the right-hand side,
   which is where each line begins, so it reads as a margin marker rather
   than as a box someone forgot to close.
   ---------------------------------------------------------------------- */
.tw-article__body > p:first-of-type {
	font-size: 1.06em;
	font-weight: 500;
	color: var(--tw-ink);
	background: var(--tw-green-pale);
	border-inline-start: 5px solid var(--tw-green);
	border-radius: var(--tw-radius);
	padding: .85em 1.1em;
}

/* Every token above is redefined by the sepia and dark themes further down
   this file, so the standfirst follows the reading mode instead of staying a
   pale green patch on a dark page. */

.tw-article__caption {
	margin-block-start: 8px;
	color: var(--tw-muted);
	font-size: 15px;
	line-height: 1.95;
	text-align: start;
}

.tw-article__body,
.tw-page__body {
	max-inline-size: 42em; /* comfortable Urdu reading measure */
	font-size: calc(20px * var(--tw-read-scale));
	line-height: 2.15;
	color: var(--tw-body);
}
.tw-article__body > * + *,
.tw-page__body > * + * { margin-block-start: 1.1em; }
.tw-article__body p,
.tw-page__body p { font-size: inherit; line-height: inherit; }
.tw-article__body a,
.tw-page__body a { text-decoration: underline; text-underline-offset: 4px; }

/* ---- mixed-language body copy: let each block pick its own direction ----

   MEASURED on /policy/: every paragraph computed `direction: rtl` with
   `unicode-bidi: isolate`, inherited from <html dir="rtl">. That is correct
   for Urdu and wrong for the English paragraphs these three static pages are
   currently written in — a Latin sentence laid out right-to-left puts its
   full stop at the START of the line, which is exactly what the desk
   photographed (".collected and recorded by tameerewatan and how we use it").

   `unicode-bidi: plaintext` fixes it without anyone having to tag anything:
   each block takes its direction from its own first strong character. An
   English paragraph lays out left-to-right with its punctuation where it
   belongs; an Urdu paragraph is untouched and still runs right-to-left. The
   same page can hold both, which matters because these pages are English
   today and will be Urdu once the desk rewrites them — and nothing here will
   need changing when they do.

   NOT applied to the whole body: `plaintext` on a container would let a
   stray Latin word at the start of an Urdu paragraph flip the whole block.
   It is set per text block, where the first strong character really does
   describe the block. */
.tw-page__body p,
.tw-page__body li,
.tw-page__body h2,
.tw-page__body h3,
.tw-page__body h4,
.tw-page__body blockquote,
.tw-page__body td,
.tw-page__body th {
	unicode-bidi: plaintext;
}

/* Generator-produced policy pages are full of empty paragraphs used as
   spacing. They inherit the 1.1em block margin AND a 43px line box, so each
   one opens a ~65px hole — two of them are what made the desk's screenshot
   look like the page had lost its middle. */
.tw-page__body p:empty,
.tw-page__body p:has(> br:only-child) {
	display: none;
}

.tw-article__body h2,
.tw-page__body h2 { font-size: 1.25em; line-height: 1.9; margin-block-start: 1.5em; }
.tw-article__body h3,
.tw-page__body h3 { font-size: 1.1em;  line-height: 1.9; margin-block-start: 1.4em; }

.tw-article__body ul,
.tw-page__body ul,
.tw-article__body ol,
.tw-page__body ol {
	padding-inline-start: 1.4em;
	list-style-position: outside;
}
.tw-article__body ul,
.tw-page__body ul { list-style-type: disc; }
.tw-article__body ol,
.tw-page__body ol { list-style-type: decimal; }
.tw-article__body li + li,
.tw-page__body li + li { margin-block-start: .5em; }

.tw-article__body img,
.tw-page__body img { border-radius: 6px; }
.tw-article__body figcaption,
.tw-page__body figcaption {
	margin-block-start: 8px;
	color: var(--tw-muted);
	font-size: .75em;
	line-height: 1.95;
}

.tw-article__body table,
.tw-page__body table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: .85em;
}
.tw-article__body th,
.tw-page__body th,
.tw-article__body td,
.tw-page__body td {
	padding: 10px 12px;
	border: var(--tw-hairline);
	text-align: start;
}
.tw-article__body th,
.tw-page__body th { background: rgba(45, 98, 72, .06); }

.tw-article__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-start: 24px;
	padding-block-start: 16px;
	border-block-start: var(--tw-hairline);
}
/* One pill control for the tag list, the share row and the reading buttons,
   all at the contract's 44px touch-target minimum. */
.tw-article__tags a,
.tw-tag,
.tw-article__share a,
.tw-article__share button,
.tw-share__link,
.tw-reading button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-inline-size: 44px;
	min-block-size: 44px;
	padding-inline: 13px;
	border: 1px solid var(--tw-control-edge);
	border-radius: 999px;
	background: var(--tw-card);
	color: var(--tw-green-dark);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.9;
}
.tw-article__tags a:hover,
.tw-tag:hover,
.tw-article__share a:hover,
.tw-article__share button:hover,
.tw-share__link:hover,
.tw-reading button:hover { border-color: var(--tw-green); background: rgba(45, 98, 72, .06); }

.tw-article__share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-block-start: 20px;
}

.tw-pullquote {
	margin-block: 1.4em;
	padding: 4px 20px;
	border-inline-start: 4px solid var(--tw-green); /* leading edge in RTL */
	color: var(--tw-ink);
	font-size: 1.15em;
	font-weight: 600;
	line-height: 2.05;
}
.tw-pullquote p { margin: 0; font-size: inherit; line-height: inherit; }
.tw-pullquote cite {
	display: block;
	margin-block-start: 8px;
	color: var(--tw-muted);
	font-size: .72em;
	font-style: normal;
	font-weight: 500;
}

/* reading controls bar — the contract names no children, so the real
   <button>/<label> elements inside are styled directly */
.tw-reading {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin-block-end: 20px;
	padding: 8px 12px;
	border: var(--tw-hairline);
	border-radius: 999px;
	background: var(--tw-card);
	font-size: 15px;
	position: sticky;
	inset-block-start: var(--tw-nav-h); /* sits flush under the sticky nav */
	z-index: 20;
}

.tw-reading__label,
.tw-reading > span:first-child { color: var(--tw-muted); }

/* package D groups the buttons in a wrapper */
.tw-reading__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

/* Package D ships the bar and the copy-link button with `hidden`. An author
   `display` beats the UA [hidden] rule, so these win it back by specificity. */
.tw-reading[hidden],
.tw-reading [hidden],
.tw-article__share [hidden],
.tw-article__tags [hidden] { display: none; }

.tw-reading button[aria-pressed="true"] {
	border-color: var(--tw-green);
	background: var(--tw-green);
	color: #FFFFFF;
}

/* 4.1.3 / 1.4.1: the copy-link and share buttons set `data-tw-copied` and
   NOTHING in this stylesheet matched it, so a successful copy produced no
   visible change whatsoever on the lead's share button. The scripts also
   swap the word and push a sentence into #tw-status; this is the tint.
   Scoped to `="1"` because package D parks its message string in the same
   attribute, and class+attribute so it outranks `.tw-article__share button`. */
.tw-btn[data-tw-copied="1"],
.tw-share__link[data-tw-copied="1"],
.tw-article__share button[data-tw-copied="1"] {
	border-color: var(--tw-green);
	background: var(--tw-green-pale);
	color: var(--tw-ink);
}


/* ---- reading modes (data attribute on a wrapper) ---- */

/* JS only flips the attribute; the tokens below repaint everything inside. */
[data-tw-mode] {
	background: var(--tw-card);
	color: var(--tw-body);
	transition: background-color .2s linear, color .2s linear;
}

/* The `~ .tw-comments` halves are not a second rule: single.php closes
   </article> before comments_template(), so #tw-article[data-tw-mode] and
   .tw-comments are siblings and the mode never reaches the form. Grouped
   here rather than duplicated, and with `~` rather than :has() so no
   browser can drop the whole declaration block. */
[data-tw-mode="sepia"],
[data-tw-mode="sepia"] ~ .tw-comments {
	--tw-card:   #F6EEDC;
	--tw-ground: #EDE3CD;
	--tw-ink:    #2B2117;
	--tw-body:   #3A2E22;
	--tw-muted:  #6A5A43;
	--tw-rule:   #DCCDAE;
	--tw-green-pale: #DCE3C6;
	--tw-control-edge: #87744F; /* 3.52:1 on the sepia ground, 3.89:1 on the card */
	--tw-gold-text:    #6B5210; /* 4.9:1 on the sepia ground                      */
}

[data-tw-mode="dark"],
[data-tw-mode="dark"] ~ .tw-comments {
	--tw-card:   #151B20;
	--tw-ground: #0E1317;
	--tw-ink:    #EEF2F4;
	--tw-body:   #D6DEE3;
	--tw-muted:  #9AA7B0;
	--tw-rule:   #2A333A;
	--tw-green:      #8FC9A8;
	--tw-green-dark: #0E1317;
	--tw-green-pale: #22312A;
	--tw-green-mid:  #4E7B62;
	--tw-control-edge: #8A949C; /* 5.62:1 on the dark card */
	--tw-gold-text:    #D7B65A; /* 8.9:1 on the dark card   */
}

/* …and the thread needs the surface too, or light-on-light. White mode is
   the page default and is deliberately left untouched. */
[data-tw-mode="sepia"] ~ .tw-comments,
[data-tw-mode="dark"] ~ .tw-comments {
	background: var(--tw-card);
	color: var(--tw-body);
	padding-inline: 14px;
	padding-block-end: 18px;
	border-radius: var(--tw-radius);
}
[data-tw-mode="dark"] .tw-reading button[aria-pressed="true"] { color: #0E1317; }
[data-tw-mode="dark"] .tw-img--empty {
	background-color: #222C33;
	background-image: none;
}

/* One attribute, one multiplier. Package D's shipped script steps through
   ['sm','md','lg','xl'] and sets the attribute only — not the "0..4" and not
   the inline --tw-read-scale its contract note described. Both spellings are
   mapped here so the control works whichever one ends up in the markup. */
[data-tw-size="sm"] { --tw-read-scale: .9; }
[data-tw-size="md"] { --tw-read-scale: 1; }
[data-tw-size="lg"] { --tw-read-scale: 1.15; }
[data-tw-size="xl"] { --tw-read-scale: 1.3; }
/* the numeric spelling its note promised, kept so either can ship */
[data-tw-size="0"] { --tw-read-scale: .9; }
[data-tw-size="1"] { --tw-read-scale: .95; }
[data-tw-size="2"] { --tw-read-scale: 1; }
[data-tw-size="3"] { --tw-read-scale: 1.15; }
[data-tw-size="4"] { --tw-read-scale: 1.3; }


/* ---- footer ---- */

.tw-footer {
	margin-block-start: 28px;
	background: var(--tw-green-dark);
	color: #D7E3D8;
	font-size: 16px;
	line-height: 2;
}

.tw-footer__inner {
	display: grid;
	gap: 26px;
	padding-block: 32px;
}

.tw-footer__brand { display: grid; gap: 10px; }
.tw-footer__brand img { display: block; max-block-size: 64px; block-size: auto; }

.tw-footer__col { display: grid; gap: 10px; align-content: start; }

.tw-footer__title {
	color: #FFFFFF;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.9;
	padding-block-end: 8px;
	border-block-end: 1px solid rgba(255, 255, 255, .16);
}

.tw-footer__links { display: grid; gap: 4px; }
/* A list long enough to drive the footer's height splits in two. */
.tw-footer__links:has(li:nth-child(6)) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 24px;
}
.tw-footer__links a { color: #D7E3D8; font-size: 16px; line-height: 1.95; }
.tw-footer__links a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; }

.tw-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 18px;
	padding-block: 14px;
	border-block-start: 1px solid rgba(255, 255, 255, .16);
	color: #B7C8BA;
	font-size: 14px;
	line-height: 1.9;
}
.tw-footer__bottom > :last-child { margin-inline-start: auto; }
.tw-footer__bottom a { color: #D7E3D8; }


/* ---- mobile bottom nav ---- */

.tw-bottomnav {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 60;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	background: var(--tw-card);
	border-block-start: var(--tw-hairline);
	box-shadow: 0 -1px 0 rgba(16, 23, 28, .06);
	padding-block-end: env(safe-area-inset-bottom, 0px);
}

.tw-bottomnav__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-block-size: 44px;
	padding-block: 7px;
	color: var(--tw-muted);
	font-size: 13px;
	line-height: 1.85;
	text-align: center;
}
.tw-bottomnav__item[aria-current],
.tw-bottomnav__item:hover { color: var(--tw-green); }

/* keep the last of the page clear of the fixed bar */
body:has(.tw-bottomnav) {
	padding-block-end: calc(var(--tw-bottomnav-h) + env(safe-area-inset-bottom, 0px));
}


/* ---- homepage blocks (package C) ---- */

.tw-block { min-inline-size: 0; } /* spacing comes from `.tw-main > * + *` */
.tw-block__body > * + * { margin-block-start: var(--tw-gap); }

/* The lead's two secondary cards. A deliberate pair, never a three-up grid:
   package C kept this off `.tw-grid` to dodge an empty third column. */
.tw-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tw-gap);
}

/* one card alongside a titles list */
.tw-feature {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--tw-gap);
	align-items: start;
}
.tw-feature__main,
.tw-feature__list { min-inline-size: 0; }

.tw-lead__by { color: var(--tw-body); font-weight: 600; }

.tw-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-block-start: auto;
	padding-block-start: 12px;
}
.tw-card--epaper { border-block-start: 3px solid var(--tw-gold); }

/* the chevron already carries fill/stroke inline — only the size is ours */
.tw-ribbon__chev { flex: none; inline-size: 15px; block-size: 15px; }

.tw-adslot--in-article { margin-block: 24px; }

/* Public notices: a real table, not cards. The reference column is Latin
   inside an RTL row, which `.tw-lat` isolates, so the cells need room and
   alignment. Padding is set from the ink, not from the line box. */
.tw-notices {
	overflow-x: auto;
	background: var(--tw-card);
	border: var(--tw-hairline);
	border-radius: var(--tw-radius);
}
.tw-notices__table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: 16px;
	line-height: 1.95;
}
.tw-notices__table th,
.tw-notices__table td {
	padding: 12px 14px;
	border-block-end: var(--tw-hairline);
	text-align: start;
	vertical-align: middle;
}
.tw-notices__table thead th {
	background: var(--tw-green-pale);
	color: var(--tw-green-dark);
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}
.tw-notices__table tbody tr:last-child th,
.tw-notices__table tbody tr:last-child td { border-block-end: 0; }
.tw-notices__table tbody tr:hover th,
.tw-notices__table tbody tr:hover td { background: rgba(45, 98, 72, .04); }

.tw-notices__ref { font-weight: 600; }
.tw-notices__ref a { color: var(--tw-green-dark); font-size: 15px; }
.tw-notices__ref a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tw-notices__dept { color: var(--tw-body); }
.tw-notices__date { color: var(--tw-muted); font-size: 15px; white-space: nowrap; }
.tw-notices__pdf { inline-size: 1%; white-space: nowrap; }
.tw-notices__pdf .tw-btn { min-block-size: 40px; padding-inline: 12px; font-size: 14px; }


/* ---- breadcrumbs ---- */

.tw-crumbs {
	margin-block: 2px 14px;
	font-size: 15px;
	line-height: 2;
}
.tw-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 8px;
}
.tw-crumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-inline-size: 0;
}
.tw-crumbs__link { color: var(--tw-muted); }
.tw-crumbs__link:hover { color: var(--tw-green); text-decoration: underline; text-underline-offset: 3px; }
/* U+203A is Bidi_Mirrored, so the engine turns it round inside an RTL run */
.tw-crumbs__sep { color: var(--tw-rule); font-family: var(--tw-lat); }
.tw-crumbs__current { color: var(--tw-ink); font-weight: 600; }


/* ---- article extras (package D) ---- */

.tw-article__author { font-weight: 600; }
.tw-article__avatar {
	inline-size: 28px;
	block-size: 28px;
	border-radius: 50%;
	background: var(--tw-rule);
}
.tw-article__updated,
.tw-article__read,
.tw-article__ago { color: var(--tw-muted); }

.tw-article__caption { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.tw-article__caption-text { color: var(--tw-muted); }
.tw-article__credit { color: var(--tw-muted); font-size: 14px; }

.tw-article__tags-label,
.tw-article__share-label {
	display: inline-flex;
	align-items: center;
	color: var(--tw-muted);
	font-size: 15px;
	line-height: 1.9;
}

/* wp_link_pages: the current page is a bare span, the rest are links */
.tw-article__pages,
.tw-page__pages {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-block-start: 1.2em;
	padding-block-start: 14px;
	border-block-start: var(--tw-hairline);
}
.tw-article__pages-label,
.tw-page__pages-label { color: var(--tw-muted); font-size: 15px; line-height: 1.9; }
.tw-article__pages a,
.tw-article__pages > .tw-lat,
.tw-page__pages a,
.tw-page__pages > .tw-lat {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 40px;
	min-block-size: 40px;
	padding-inline: 10px;
	font-size: 16px; /* not the body's 20px, and it must not follow --tw-read-scale */
	border: 1px solid var(--tw-control-edge);
	border-radius: 8px;
	color: var(--tw-green-dark);
	font-weight: 600;
}
.tw-article__pages a:hover,
.tw-page__pages a:hover { border-color: var(--tw-green); background: rgba(45, 98, 72, .06); }
.tw-article__pages > .tw-lat,
.tw-page__pages > .tw-lat {
	border-color: var(--tw-green);
	background: var(--tw-green);
	color: #FFFFFF;
}

/* share row: the pill comes from the shared control, these are the trimmings */
.tw-share__text { white-space: nowrap; }
.tw-article__share .tw-share__link--facebook:hover { border-color: var(--tw-blue); color: var(--tw-blue); }
.tw-article__share .tw-share__link--x:hover { border-color: var(--tw-ink); color: var(--tw-ink); }

.tw-reading__btn[disabled] { opacity: .45; cursor: not-allowed; }
.tw-reading__btn[disabled]:hover { border-color: var(--tw-control-edge); background: var(--tw-card); }


/* ---- authorbox / related / prevnext ---- */

.tw-authorbox {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-block-start: 26px;
	padding: 16px;
	border: var(--tw-hairline);
	border-radius: var(--tw-radius);
	background: var(--tw-card);
	border-inline-start: 3px solid var(--tw-green);
}
.tw-authorbox__avatar {
	flex: none;
	inline-size: 56px;
	block-size: 56px;
	border-radius: 50%;
	background: var(--tw-rule);
}
.tw-authorbox__body { min-inline-size: 0; }
.tw-authorbox__name {
	color: var(--tw-ink);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.95;
}
.tw-authorbox__name a { color: inherit; }
.tw-authorbox__name a:hover { color: var(--tw-green); }
.tw-authorbox__bio {
	margin-block-start: 8px; /* ink clearance under the name */
	color: var(--tw-body);
	font-size: 17px;
	line-height: 2;
}

.tw-related { margin-block-start: 28px; }
.tw-related__title {
	margin-block-end: 12px;
	padding-block: 2px 6px; /* so the green edge brackets the descenders */
	padding-inline-start: 12px;
	border-inline-start: 4px solid var(--tw-green);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.9;
}

.tw-prevnext {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	margin-block-start: 26px;
}
.tw-prevnext__item {
	display: grid;
	/* 16px, not 2: the 18px title's ascender reaches 11.2px into the label
	   above it at a 2px gap (measured ink, not line boxes) */
	gap: 16px;
	padding: 14px 16px;
	border: var(--tw-hairline);
	border-radius: var(--tw-radius);
	background: var(--tw-card);
	transition: border-color .15s linear;
}
.tw-prevnext__item:hover { border-color: var(--tw-green-mid); }
.tw-prevnext__dir { color: var(--tw-muted); font-size: 14px; line-height: 1.9; }
.tw-prevnext__title {
	color: var(--tw-ink);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.95;
}
.tw-prevnext__item--next { text-align: end; }


/* ---- pagination ---- */

.tw-pagination,
.tw-comments__nav { margin-block-start: 24px; }

.tw-pagination .nav-links,
.tw-comments__nav .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.tw-pagination .page-numbers,
.tw-comments__nav .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	min-block-size: 44px;
	padding-inline: 13px;
	border: 1px solid var(--tw-control-edge);
	border-radius: 8px;
	background: var(--tw-card);
	color: var(--tw-green-dark);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.9;
}
.tw-pagination a.page-numbers:hover,
.tw-comments__nav a.page-numbers:hover { border-color: var(--tw-green); background: rgba(45, 98, 72, .06); }
.tw-pagination .page-numbers.current,
.tw-comments__nav .page-numbers.current {
	border-color: var(--tw-green);
	background: var(--tw-green);
	color: #FFFFFF;
}
.tw-pagination .page-numbers.dots,
.tw-comments__nav .page-numbers.dots { border-color: transparent; background: none; }

/* digits in Archivo with tabular figures; the prev/next words stay Nastaliq */
.tw-pagination .page-numbers:not(.prev):not(.next):not(.dots),
.tw-comments__nav .page-numbers:not(.prev):not(.next):not(.dots) {
	font-family: var(--tw-lat);
	font-variant-numeric: tabular-nums lining-nums;
}


/* ---- archive, search and empty states ---- */

.tw-archive__intro {
	max-inline-size: 42em;
	margin-block-end: 16px;
	color: var(--tw-body);
	font-size: 18px;
	line-height: 2.1;
}
.tw-archive__intro p + p { margin-block-start: .8em; }

.tw-archive__count,
.tw-results__count {
	margin-block-end: 14px;
	color: var(--tw-muted);
	font-size: 15px;
	line-height: 1.9;
}

.tw-empty,
.tw-404 {
	padding: 26px 20px 30px;
	border: var(--tw-hairline);
	border-radius: var(--tw-radius);
	background: var(--tw-card);
	text-align: center;
}
.tw-empty > * + *,
.tw-404 > * + * { margin-block-start: 16px; }

.tw-empty__title {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.9;
}
.tw-empty__text {
	max-inline-size: 36em;
	margin-inline: auto;
	color: var(--tw-muted);
	font-size: 17px;
	line-height: 2;
}
.tw-empty .tw-search,
.tw-404 .tw-search { max-inline-size: 460px; margin-inline: auto; }

.tw-empty__links,
.tw-404__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.tw-empty__links-label { color: var(--tw-muted); font-size: 15px; line-height: 1.9; }

.tw-404__code {
	/* 1.4.3: --tw-green-mid is 2.84:1 on the white card and large text needs
	   3:1. Darkened here rather than on the token, which is also a 5px dot. */
	color: #5E8A62;
	font-family: var(--tw-lat);
	font-size: 64px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.15;
}
.tw-404__title {
	font-size: clamp(24px, 5vw, 32px);
	font-weight: 700;
	line-height: 1.85;
}
.tw-404__home { margin-block-start: 20px; }
.tw-404__text {
	max-inline-size: 36em;
	margin-inline: auto;
	color: var(--tw-body);
	font-size: 18px;
	line-height: 2.1;
}


/* ---- comments ---- */

.tw-comments {
	margin-block-start: 32px;
	padding-block-start: 24px;
	border-block-start: var(--tw-hairline);
}
.tw-comments > * + * { margin-block-start: 20px; }

.tw-comments__title,
.tw-comments__form-title {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.9;
}

.tw-comments__list { display: grid; gap: 16px; }
.tw-comments__list .children {
	display: grid;
	gap: 16px;
	margin-block-start: 16px;
	padding-inline-start: 18px;
	border-inline-start: 2px solid var(--tw-rule);
}

/* the core walker's own class names — html5 and legacy markup both covered */
.tw-comments .comment-body {
	padding: 14px 16px;
	border: var(--tw-hairline);
	border-radius: var(--tw-radius);
	background: var(--tw-card);
}
.tw-comments .bypostauthor > .comment-body { border-inline-start: 3px solid var(--tw-green); }
.tw-comments .comment-author {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.tw-comments .avatar {
	inline-size: 36px;
	block-size: 36px;
	border-radius: 50%;
	background: var(--tw-rule);
}
.tw-comments .fn {
	color: var(--tw-ink);
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 1.95;
}
.tw-comments .says { color: var(--tw-muted); font-size: 14px; }
.tw-comments .comment-metadata,
.tw-comments .commentmetadata {
	margin-block-start: 6px; /* ink clearance under the author name */
	color: var(--tw-muted);
	font-size: 14px;
	line-height: 1.9;
}
.tw-comments .comment-metadata a,
.tw-comments .commentmetadata a { color: var(--tw-muted); }
.tw-comments .comment-content,
.tw-comments .comment-body > p {
	margin-block-start: 10px;
	color: var(--tw-body);
	font-size: 18px;
	line-height: 2.1;
}
.tw-comments .comment-content > * + * { margin-block-start: .9em; }
.tw-comments .comment-awaiting-moderation {
	display: block;
	margin-block-start: 8px;
	color: var(--tw-gold);
	font-size: 15px;
}
.tw-comments .reply { margin-block-start: 10px; }
.tw-comments .comment-reply-link {
	display: inline-flex;
	align-items: center;
	min-block-size: 40px;
	padding-inline: 14px;
	border: 1px solid var(--tw-control-edge);
	border-radius: 999px;
	color: var(--tw-green-dark);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.9;
}
.tw-comments .comment-reply-link:hover { border-color: var(--tw-green); background: rgba(45, 98, 72, .06); }

.tw-comments__closed { color: var(--tw-muted); font-size: 16px; line-height: 2; }

.tw-comments__form { display: grid; gap: 14px; }
.tw-comments__field { display: grid; gap: 6px; }
.tw-comments__field label { color: var(--tw-body); font-size: 16px; line-height: 1.9; }
.tw-comments__field--check {
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 10px;
}
.tw-comments__field--check input {
	inline-size: 20px;
	block-size: 20px;
	min-block-size: 0;
	margin: 0;
}
.tw-comments__note { color: var(--tw-muted); font-size: 15px; line-height: 1.95; }
/* gold, not red: red is reserved for breaking and live */
/* 1.4.3: --tw-gold is 4.17:1 on --tw-ground and this is 16px/400. */
.tw-comments__req { color: var(--tw-gold-text); }
.tw-comments__cancel { font-size: 15px; font-weight: 400; }
.tw-comments__form .form-submit { margin: 0; }


/* ---- rail widgets, static page, main widths ---- */

.tw-rail__widget {
	padding: 16px;
	border: var(--tw-hairline);
	border-radius: var(--tw-radius);
	background: var(--tw-card);
}
.tw-rail__title {
	margin-block-end: 10px;
	padding-block-end: 10px;
	border-block-end: var(--tw-hairline);
	color: var(--tw-green-dark);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.9;
}
.tw-rail__widget li { padding-block: 9px; font-size: 17px; line-height: 1.95; }
.tw-rail__widget li + li { border-block-start: var(--tw-hairline); }
.tw-rail__widget a { color: var(--tw-ink); }
.tw-rail__widget a:hover { color: var(--tw-green); }

.tw-page { display: block; }
.tw-page__header { display: grid; gap: 10px; margin-block-end: 18px; }
.tw-page__title {
	font-size: clamp(26px, 5vw, 36px);
	font-weight: 700;
	line-height: 1.85;
}
.tw-page__updated { color: var(--tw-muted); font-size: 15px; line-height: 1.9; }
.tw-page__media { display: block; margin-block: 4px 16px; }
.tw-page__media img,
.tw-page__media > .tw-img {
	display: block;
	inline-size: 100%;
	border-radius: var(--tw-radius);
}
.tw-page__caption {
	margin-block-start: 8px;
	color: var(--tw-muted);
	font-size: 15px;
	line-height: 1.95;
	text-align: start;
}

/* single.php and page.php carry no rail, so the column caps itself */
.tw-main--article,
.tw-main--doc { max-inline-size: 880px; margin-inline: auto; }
.tw-main--wide { max-inline-size: none; }


/* ---- tablet: min-width 768px ---- */

@media (min-width: 768px) {
	:root { --tw-gutter: 24px; }

	body { font-size: 18px; }

	.tw-topbar__meta { gap: 4px 20px; }

	.tw-masthead__inner {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		justify-items: center;
		align-items: center;
		gap: 8px 20px;
		padding-block: 24px;
	}
	/* explicit placement, so markup order cannot move anything */
	.tw-masthead__market { display: grid; grid-area: 1 / 1 / 3 / 2; justify-self: start; }
	/* The e-paper block took the market slot but not its PLACEMENT, so it
	   auto-placed and floated in the middle of its column while the ad hugged
	   the far edge of the other one -- measured at 1100: ad at x=24 pinned to
	   its column edge, e-paper at x=784 sitting 128px short of its own. Same
	   grid area and the same justify-self as the block it replaced, so the two
	   ends of the masthead mirror each other. */
	.tw-masthead__epaper { grid-area: 1 / 1 / 3 / 2; justify-self: start; align-self: center; }
	.tw-masthead__logo { grid-area: 1 / 2 / 3 / 3; align-self: center; }
	.tw-masthead__ad { grid-area: 1 / 3 / 3 / 4; justify-self: end; }
	.tw-masthead__logo img { max-block-size: 96px; }

	.tw-market { grid-auto-flow: column; grid-auto-columns: max-content; gap: 10px; }

	/* the phone panel lives in a max-width query, so there is nothing to
	   undo here — just retire the toggle */
	.tw-nav__toggle { display: none; }
	.tw-nav:has(.tw-nav__toggle) .tw-nav__item { display: flex; }
	.tw-nav:has(.tw-nav__toggle) .tw-nav__link {
		inline-size: auto;
		padding-inline: 13px;
		border-block-start: 0;
		border-block-end: 3px solid transparent;
	}
	.tw-nav:has(.tw-nav__toggle) .tw-nav__link--active {
		border-inline-start: 0;
		border-block-end-color: #FFFFFF;
	}

	.tw-ticker__hint { display: block; }
	.tw-ticker__pause-text { display: block; }
	.tw-ticker[data-tw-mobile="0"] { display: block; }

	/* the lead's secondary pair, and prev/next, go two-up */
	.tw-hero,
	.tw-prevnext { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.tw-notices__table { font-size: 17px; }
	.tw-404__code { font-size: 80px; }

	/* card grids: 1 → 2 columns */
	.tw-cards,
	.tw-grid--cards,
	.tw-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.tw-lead__body { padding: 22px 26px 24px; }
	.tw-lead__dek { font-size: 20px; }

	.tw-ribbon__title { font-size: 24px; }

	.tw-list__item:has(.tw-list__thumb) { grid-template-columns: 104px minmax(0, 1fr); }
	.tw-list__thumb { inline-size: 104px; }

	.tw-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }

	.tw-bottomnav { display: none; }
	body:has(.tw-bottomnav) { padding-block-end: 0; }
	/* …and with the bar gone, nothing is covering the end of the viewport, so
	   the focus reserve goes with it. */
	html { scroll-padding-block-end: 0; }
}


/* ---- desktop: min-width 1024px ---- */

@media (min-width: 1024px) {
	/* Page shell: main + rail. `tw-grid--page` is what index.php, archive.php
	   and search.php actually print, so it is the primary hook; the `:has()`
	   rule is the belt-and-braces for a bare `.tw-grid` that holds a rail. */
	.tw-grid--page {
		grid-template-columns: minmax(0, 1fr) var(--tw-rail-w);
		gap: 32px;
	}
	.tw-grid:has(> .tw-rail) {
		grid-template-columns: minmax(0, 1fr) var(--tw-rail-w);
		gap: 32px;
	}

	/* one card beside its titles list */
	.tw-feature { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }

	/* card grids: 2 → 3 columns */
	.tw-cards,
	.tw-grid--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.tw-grid--wide { grid-template-columns: minmax(0, 1fr); }

	.tw-rail > * + * { margin-block-start: 26px; }

	/* The hero stays stacked at every width: a split forces the 42px headline
	   into a ~330px measure (four cramped lines) and crops the 16:9 image. */
	.tw-lead__body { padding: 28px 32px 30px; }

	/* the masthead fills out one piece at a time: phone = logo, tablet adds
	   the market rates, desktop adds the ad — a 300px creative crowds 768px */
	.tw-masthead__ad { display: block; }

	.tw-ribbon__title { font-size: 26px; }
	.tw-ribbon__body { min-block-size: 66px; } /* a 26px title inks 57.7px */
	.tw-ribbon__step { block-size: 72px; }
	.tw-ribbon__block { block-size: 78px; }

	.tw-card__title { font-size: 23px; }

	.tw-article { padding-block: 12px 48px; }
	.tw-pullquote { padding-inline: 26px 20px; }

	.tw-footer__inner {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 32px 36px;
		padding-block: 32px;
	}
}


/* ---- utility ---- */

/* Every digit, time, date, rate and currency wears this. NO `direction: ltr`:
   packages B, C and D all put it on whole localised dates and on
   tw_time_ago() ("3 اکتوبر 2026، 18:20", "35 منٹ پہلے"), and forcing LTR
   reorders those to "3 18:20 ،2026 ربوتکا" — measured in Chrome. Isolation
   alone is what is wanted: it keeps the run from disturbing its neighbours
   and lets the bidi algorithm order the inside correctly, which it already
   does for a pure-Latin reference like DPRQ/PRQ No.1656/30-09-2026. */
.tw-lat {
	font-family: var(--tw-lat-mixed);
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
	unicode-bidi: isolate;
	font-weight: 500;
}

.tw-sr,
.screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.tw-sr:focus-visible {
	position: static;
	inline-size: auto;
	block-size: auto;
	margin: 0;
	padding: 8px 14px;
	overflow: visible;
	clip-path: none;
	background: var(--tw-card);
	color: var(--tw-green-dark);
}


/* ---- motion preferences ---- */

@media (prefers-reduced-motion: reduce) {
	/* marquee off entirely: the row becomes a plain scrollable strip */
	.tw-ticker__track { animation: none; transform: none; }
	.tw-ticker__viewport { overflow-x: auto; mask-image: none; }
	.tw-breaking__dot,
	.tw-latest__dot,
	.tw-nav__live::before,
	.tw-btn--live::before { animation: none; }

	.tw-card:hover { transform: none; }

	*, *::before, *::after {
		animation-duration: .001s;
		animation-iteration-count: 1;
		transition-duration: .001s;
		scroll-behavior: auto;
	}
}

/* ---- masthead promo: government notices (DGPR) --------------------------
   Shown in the masthead ad slot when no paid creative is booked. Gold is the
   notices/e-paper accent from §2, so it reads as advertising inventory rather
   than editorial. Sized to the slot the masthead grid gives it.            */
.tw-promo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	inline-size: 100%;
	max-inline-size: 420px;
	min-block-size: 96px;
	padding: 14px 18px;
	border: 1px solid #E7DEC6;
	border-inline-start: 4px solid var(--tw-gold);
	border-radius: var(--tw-radius);
	background: #F6F2E4;
	color: var(--tw-ink);
	text-decoration: none;
}
.tw-promo:hover,
.tw-promo:focus-visible { background: #F1EBD8; border-color: var(--tw-gold); }

.tw-promo__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}
.tw-promo__title {
	font-size: 21px;
	line-height: 1.75;
	font-weight: 600;
	color: var(--tw-gold);
}
.tw-promo__kicker {
	font-size: 10.5px;
	letter-spacing: .14em;
	color: #6A5316;
	white-space: nowrap;
}
.tw-promo__ref {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--tw-body);
	overflow-wrap: anywhere;
}
.tw-promo__foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-block-start: auto;
	padding-block-start: 8px;
	border-block-start: 1px solid #E7DEC6;
}
.tw-promo__date { font-size: 14px; line-height: 1.9; color: var(--tw-muted); }
.tw-promo__cta  { font-size: 15px; line-height: 1.9; color: var(--tw-green); }
.tw-promo:hover .tw-promo__cta { color: var(--tw-green-dark); }

/* ---- desktop scale correction ------------------------------------------
   The scale above was designed against a 1440px canvas. On the 1366px
   laptops most readers (and the client) actually use, it reads ~20% oversized
   — verified by comparing the same page at 80% and 100% browser zoom.
   Everything here is ~82% of the original.

   Safe against package A's ink measurements: those boxes were sized in px from
   ink measured in em, so reducing font-size only ever ADDS headroom. Ribbon
   box heights come down with the type so the band does not look hollow —
   a 21.5px Nastaliq title inks ~48.6px, which a 56px band clears by 7.4px.
   Touch targets (44px minimum) and --tw-nav-h are deliberately untouched.
   Revert: main.css.before-scale.bak sits beside this file.               */
@media (min-width: 1024px) {
	.tw-lead__title  { font-size: clamp(24px, 4.4vw, 34px); }
	.tw-lead__dek    { font-size: 17px; }
	.tw-card__title  { font-size: 19.5px; }
	.tw-list__title  { font-size: 17px; }
	.tw-ticker__item { font-size: 16px; }
	.tw-nav__link    { font-size: 16.5px; }

	.tw-ribbon__title { font-size: 21.5px; }
	.tw-ribbon__body  { min-block-size: 56px; }
	.tw-ribbon__step  { block-size: 60px; }
	.tw-ribbon__block { block-size: 65px; }

	/* A 16:9 hero in an ~890px column is ~500px tall and swallows the fold
	   on a 1366x768 screen, so it is still capped -- but the cap now sits on
	   the IMAGE, not on the box.

	   `block-size: 100%` here was a bug, not a cap. A percentage height only
	   resolves against a DEFINITE height, and `max-block-size` is not one, so
	   the image fell back to auto: measured on the homepage at 1366 the box
	   was 300px and the image inside it 397px, overflowing 97.1px DOWNWARD
	   over `.tw-lead__body` -- the section badge at y=645 was painted over
	   completely and the top 23px of the headline with it. The box was short;
	   the picture never was. */
	.tw-lead__media img { max-block-size: min(420px, 75cqw); }
}

/* ---- 1366-class laptop band ---------------------------------------------
   The block above was authored against a 1440px canvas and applies from
   1024px up with no ceiling, so a 1366x768 laptop — the single most common
   desktop on this audience — was being served a layout designed for a screen
   74px wider than it has. At 1366 the 1320px wrap leaves 23px of margin per
   side and the page hugs both edges, which reads as "oversized" far more than
   the type does. Confirmed by measuring the live page at 1366: every value in
   the block above was applying correctly and it still looked too big.

   This band ends at 1439.98px, so >=1440 keeps the original design intact.
   Wrap comes to 1140px (113px of margin per side) and type to ~88%.

   Why 88% and not the 80% that browser zoom gives: zoom also widens the
   layout viewport (1366 at 80% reports 1707px), so matching it in CSS alone
   would push the ticker to 12.8px and list titles to 13.6px. Nastaliq carries
   more ligature and dot detail than Latin at the same size and gets hard to
   read below ~14px, so nothing here goes under 14px.

   Ink safety: per package A, boxes were sized in px from ink measured in em,
   so lowering font-size only ADDS headroom. Ribbon boxes come down with the
   type so the band is not hollow — a 19px Nastaliq title inks ~42.9px, which
   a 50px band clears by 7.1px, matching the 7.4px clearance above.
   --tw-nav-h stays 54px: the 44px touch-target minimum is not negotiable.
   Revert: main.css.before-1366.bak sits beside this file.                */
@media (min-width: 1024px) and (max-width: 1439.98px) {
	:root { --tw-wrap: 1140px; }

	.tw-lead__title  { font-size: clamp(22px, 4.4vw, 30px); }
	.tw-lead__dek    { font-size: 15px; }
	.tw-card__title  { font-size: 17px; }
	.tw-list__title  { font-size: 15px; }
	.tw-ticker__item { font-size: 14px; }
	.tw-nav__link    { font-size: 14.5px; }

	.tw-ribbon__title { font-size: 19px; }
	.tw-ribbon__body  { min-block-size: 50px; }
	.tw-ribbon__step  { block-size: 53px; }
	.tw-ribbon__block { block-size: 57px; }

	.tw-masthead__logo img { max-block-size: 84px; }

	/* 370 -> 400. The cap is a ceiling for tall sources, not a crop for
	   ordinary ones: the home-page lead column measures 706px here, so a
	   16:9 picture is 397px and 370 was letterboxing the commonest shape on
	   the site (77% of the last 200 leads are exactly 16:9) by 6.8% to save
	   27px. 400 clears 16:9 with 3px to spare and still stops a 4:3 source
	   at 400 instead of 530. Measured at 1366x768 with the cap at 400: lead
	   headline y=765 against a 768 fold, badge y=728 and fully visible --
	   it used to sit at 645 underneath the overflowing picture. */
	.tw-lead__media img { max-block-size: min(400px, 75cqw); }
}

/* ---- audit fixes: above-the-fold and reading comfort ---------------------
   From a measured layout audit at 390/768/1024/1366/1920. Every value here
   was verified against the live page before being written; the audit's
   masthead-logo, tagline and footer-grid findings were stale and are NOT
   acted on. Nothing below raises a font-size, so no ink box needs
   re-measuring. Revert: main.css.before-audit.bak sits beside this file.  */

/* A media box must own its own ratio. The 16/9 lock lived on the <img>, so
   it applied only once the image resolved -- one portrait or failed source
   rendered a 1500px box and equalised its whole grid row to 1857px.

   That still holds for the CARD, which is a grid box and must keep its row
   equal. The ARTICLE HERO is not: it is one image, nothing is beside it, and
   it is the one place besides the lead where a composite's burned-in
   headline is large enough to read. It follows the lead rule instead --
   file's ratio, bounded, never sliced. See the long note at `lead`.      */
.tw-card__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.tw-card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.tw-article__media { container-type: inline-size; }
.tw-article__media img {
	inline-size: 100%;
	block-size: auto;
	max-block-size: 75cqw;
	object-fit: contain;
}

@media (min-width: 1024px) {
	/* Measure was 840px at 20px = 42em, ~114 characters a line. Nastaliq's
	   diagonal baseline gives the eye no anchor for the return sweep, so a
	   long line loses the reader mid-paragraph. 660px = 33em, ~90 chars.

	   Capped on the running-text children, NOT on .tw-article__body itself:
	   the body also holds the e-paper reader and full-width figures, and
	   squeezing a newspaper page to a text measure is wrong. Capping the
	   container did exactly that -- it took .tw-epaper from 840 to 660. */
	.tw-article__body > p,
	.tw-article__body > h2,
	.tw-article__body > h3,
	.tw-article__body > h4,
	.tw-article__body > ul,
	.tw-article__body > ol,
	.tw-article__body > blockquote {
		max-inline-size: 660px;
		margin-inline: auto;
	}
}

@media (min-width: 1024px) and (max-width: 1439.98px) {
	/* 42px was LARGER than the homepage lead (30px), and its ink ran ~105px
	   through a 77.7px line box. A reduction, so it only adds headroom. */
	.tw-article__title { font-size: 32px; }

	/* The 300px cap that used to sit here is GONE, and the reason it was
	   added no longer applies. It was justified as "the single largest block
	   of non-reading between arrival and the first word" -- true when the
	   hero preceded the story. It does not any more: single.php injects it
	   AFTER the opening paragraph. Measured on the live article at 1366x768
	   with the cap still in place: first word y=719, hero y=817. The hero
	   starts 98px BELOW the first word, so its height cannot push that word
	   down and capping it bought nothing above the fold.

	   What the cap did cost was the picture. At 1366 it rendered the hero
	   533x300 inside a 660px measure while anything >=1440 showed it at full
	   column width -- and on this paper the hero is routinely a composite
	   with the headline set inside the artwork, so 300px made the story's
	   own words small and soft. Removed; the 75cqw bound above is now the
	   only limit. Verified after: first word y unchanged at 1366.         */

	/* The 1366 band scaled type to 88% but left the chrome full size, which
	   pushed the lead headline towards the 768 fold. The old fix capped the
	   lead media box at 300px, which did not shorten the picture -- it only
	   made the picture overflow the box and paint over the badge (measured
	   97.1px of overlap; see the >=1024 block). Showing the whole picture
	   costs those 97px honestly, so the height comes back out of the lead
	   body's own padding instead of out of the image: 28/30 -> 14/24 and the
	   badge-to-headline gap 10 -> 6. Measured net effect at 1366 below. */
	.tw-lead__body { padding: 14px 32px 24px; }
	.tw-lead__body > * + * { margin-block-start: 6px; }

	/* 24px -> 16px, recovered on every page. The DGPR ad is left intact: it
	   is a paid/government slot and must not be clipped. */
	.tw-masthead__inner { padding-block: 16px; }
}


/* ---- e-paper reader ------------------------------------------------------
   The <object type="application/pdf"> had no width or height in CSS, so it
   fell back to the browser's intrinsic default for a replaced element --
   302x152px. Measured: the whole newspaper was rendering at thumbnail size
   while the figure already carried a correct `--tw-epaper-h: 800px` inline
   that nothing ever read. This consumes it.                               */
.tw-epaper__doc {
	display: block;
	inline-size: 100%;
	block-size: var(--tw-epaper-h, 800px);
	border: 0;
}
.tw-epaper { min-block-size: var(--tw-epaper-h, 800px); }

@media (max-width: 767.98px) {
	/* A fixed 800px reader swallows a phone screen whole; clamp to the
	   viewport so the page chrome stays reachable. */
	.tw-epaper__doc { block-size: min(var(--tw-epaper-h, 800px), 75vh); }
	.tw-epaper { min-block-size: 0; }
}

/* ---- reading controls --------------------------------------------------
   Was `position: sticky` under the 54px nav, so 116px (15.1%) of a 768px
   viewport was permanently furniture and usable reading height was 652px.
   Static returns 62px to every screen for the whole length of the article.
   The controls still work; they simply stay where they were scrolled past. */
.tw-reading {
	position: static;
	inset-block-start: auto;
}

/* ---- Nastaliq line boxes -------------------------------------------------
   Re-measured 2026-10-04 against the whole corpus, because 2.2 was still
   colliding -- visibly, on the article headline.

   Two numbers, both measured, neither guessed:

   1. Noto Nastaliq Urdu's OWN metrics are ascent 1.90em + descent 0.60em =
      2.50em. That is the line box the font ships with; 2.2 was 12% UNDER the
      font's own minimum, which is why the overrun never went away.
   2. Ink, per word, over all 18,786 words in the 1,467 published titles and
      deks: median 1.49em, but p99 2.78em and a hard max of 4.67em
      ("ایکسچینج" alone climbs 3.15em; the honorific ﷺ drops 1.52em).

   Simulating 4-word lines against that distribution, the share of line PAIRS
   whose ink collides:

       2.2 -> 33.0%     2.4 -> 12.8%     2.6 -> 3.6%
       2.75 -> 0.8%     2.85 -> 0.4%     3.0 -> 0.1%

   2.6 is the chosen point, and it is a deliberate trade, not the technical
   optimum. 2.75 would have taken collisions to 0.8%, but it cost the
   homepage +7.8% (3,905 -> 4,209px) and keeping the homepage short beat
   clearing the last 3%. 2.6 is still above the font's own 2.50, it takes a
   third of all lines colliding down to one in twenty-eight, and it costs
   about half as much height.

   The residual 3.6% is the long diagonal kashida stack, which no sane
   leading reaches -- chasing the 4.67em max would mean 110px of line for
   15px type. If a specific headline ever looks wrong, it is one of those,
   and the fix is to re-word it, not to raise this number.

   Titles and deks are the SAME value on purpose. They measured within
   0.05em of each other, so splitting them would be false precision.

   This raises no font-size, so no ink re-measurement is owed downstream --
   it only adds headroom.

   TRAP, noted while measuring: `body` is --tw-lat-mixed, which puts Archivo
   FIRST so Latin runs get a Latin face (see the rule further down -- that is
   correct and should stay). The side effect is that the line box's strut and
   `line-height: normal` are computed from ARCHIVO's 1.09em, not Nastaliq's
   2.50em. So any Nastaliq element that ever falls back to `normal` leading
   gets a line box less than half the ink it has to hold. Every element below
   sets leading explicitly for that reason. Do not drop one and expect
   `normal` to do something sensible.                                       */
.tw-lead__title,
.tw-card__title,
.tw-list__title,
.tw-ribbon__title,
.tw-article__title,
.tw-related__title,
.tw-prevnext__title,
.tw-lead__dek,
.tw-card__dek,
.tw-article__dek {
	line-height: 2.6;
}

/* The overrun is NOT symmetric: CSS splits leading evenly, but Nastaliq
   stacks upward, so at 2.6 the baseline sits 1.64em below the line-box top
   while ink reaches 2.26em above it (p99.9). Every first line therefore
   overhangs its own box by ~0.63em.

   Note this moves the OPPOSITE way to the leading: dropping 2.75 -> 2.60
   removed 0.075em of half-leading from ABOVE the baseline, so the padding
   had to go UP, 0.55em -> 0.63em. Less leading, more padding.

   That overhang is invisible in open flow and sliced wherever an ancestor
   clips -- `.tw-lead`, `.tw-list` and `.tw-latest` all carry
   `overflow: hidden` for their rounded image crops. It also crowds whatever
   sits above: the article headline overhung the section badge by 18px
   through a 12px grid gap.

   An em, not the old flat 6px: the overhang scales with font-size, and 6px
   was sized for 15px list titles, so the 30px lead and the 32-42px article
   headline were under-padded by half.                                      */
.tw-article__title,
.tw-lead__title {
	padding-block-start: 0.63em;
}

/* NOT on .tw-card__title / .tw-list__title. Measured at 2.6 on the homepage:
   the tightest of them clears its clipping ancestor by 33px, because the
   2.2 -> 2.6 change already pushed the baseline down 0.2em -- which is
   exactly what the old flat 6px was compensating for. Padding them was pure
   homepage height (45px over 48 elements) buying nothing. The two that keep
   it are the big type, where the overhang is large in PIXELS: the article
   headline sits in a grid beside a badge and touched it at padding 0
   (-0.7px gap), and the lead headline is the one element the handoff
   recorded as actually sliced.                                            */

/* ---- e-paper cards -------------------------------------------------------
   A newspaper cover is a portrait page. The 16/9 box above turned it into a
   horizontal slice of newsprint with nothing readable in it; this matches the
   registered tw-epaper crop (420x594) so the whole front page is visible in
   the same three-column grid.

   Their titles are Latin ("Daily Tameere Watan Quetta 03-Oct-2026") running
   through the Nastaliq stack, where a 2.5 line-height -- correct for Nastaliq
   ink -- throws Latin text onto two absurdly spaced lines.               */
.tw-card--epaper .tw-card__media { aspect-ratio: 420 / 594; }
.tw-card--epaper .tw-card__title { line-height: 1.45; padding-block-start: 0; }

/* ---- section-front lead --------------------------------------------------
   Stacked, the section lead put a 300px photograph between the reader and
   the headline: measured at 1366x768 the headline landed at y=846 and NOTHING
   was above the fold -- worse than the card grid it replaced (735).

   Side by side, the photo and the headline share the same band, so the
   headline rides at the top of the first screen where a scanner expects it.
   Phone keeps the stacked form: side by side at 390 would leave neither the
   picture nor the words a usable width.                                   */
@media (min-width: 1024px) {
	.tw-lead--row {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		align-items: center;
	}
	/* THE REPORTED BUG. `block-size: 100%` made the picture fill whatever
	   height the TEXT column happened to need, so the box ratio was set by
	   the length of the headline, not by anything about the image. Measured
	   on /category/balochistan/ with a 1717x916 composite:

	     1440  box 665x434  r1.53  ->  13.8% of the source cut off the sides
	     1366  box 571x439  r1.30  ->  26.9%  (387 of 1600 source px)
	     1024  box 502x439  r1.14  ->  35.7%  (514 px) -- the masthead was
	                                   sliced to "طن" and the burned-in
	                                   headline lost its last word

	   Below 1024 the lead is stacked and measured 0.0-0.2%, which is why the
	   fault only ever showed on a section front on a laptop.

	   The media now keeps its own height like every other lead. `max-block-size:
	   none` stays so the stacked caps above do not apply in a row, where the
	   picture sits BESIDE the text and its height costs nothing above the
	   fold -- the 75cqw ratio bound is the only limit it needs. */
	.tw-lead--row .tw-lead__media { max-block-size: none; }
	.tw-lead--row .tw-lead__media img { max-block-size: 75cqw; }
	.tw-lead--row .tw-lead__body { padding-block: 20px; }

	/* The story count sat on its own 34px row with a 32px margin above it,
	   pushing every headline down for one line of furniture. */
	.tw-archive__count { margin-block-start: 12px; }
}

/* ---- mobile: lift the rail out of the basement ---------------------------
   Measured at 390: `.tw-main` is 16,221px tall, so `.tw-rail` -- which holds
   the Latest headline list, the highest-value scanning module on the site --
   started at y=16,505 of a 19,171px document. Nineteen screens below the
   lead is not a scroll, it is a dead zone.

   `display: contents` promotes .tw-main's children to grid items of the page
   shell, which lets the rail be ordered directly after the lead instead of
   after all of it. Scoped to `body.home`, where .tw-main is a plain <div>;
   on archives it is the <main> landmark and must keep its box or it leaves
   the accessibility tree.                                                 */
@media (max-width: 1023.98px) {
	body.home .tw-main { display: contents; }
	body.home .tw-main > *  { order: 3; }
	body.home .tw-main > .tw-lead { order: 1; }
	body.home .tw-rail { order: 2; }
}

/* ---- mobile: the breadcrumb was restating the headline -------------------
   Measured at 390 on an article: `.tw-crumbs` ran 154px over five lines,
   and its last crumb repeated the headline verbatim 82px before the <h1>
   said the same words. Dropping the home crumb and the self-referential
   last one leaves the section on a single line and returns ~124px of the
   first screen. Single posts only: on an archive the last crumb IS the
   section, and hiding it would leave the trail empty.                     */
@media (max-width: 767.98px) {
	body.single .tw-crumbs__item:first-child,
	body.single .tw-crumbs__item:last-child { display: none; }
}

/* The results-page refine field. Sits between the section ribbon and the
   count, so a reader who found something can narrow it without hunting for
   the magnifier in the nav. */
.tw-results__refine { margin-block: 14px 4px; }
.tw-results__refine .tw-search { inline-size: 100%; }

/* ---- Latin runs inside Urdu text -----------------------------------------
   `body` was set to --tw-urdu, whose first family is Noto Nastaliq Urdu. That
   font DOES carry basic Latin, so every Latin run on the site -- e-paper
   titles ("Daily Tameere Watan Quetta 03-Oct-2026"), the home breadcrumb,
   dates, DPRQ reference numbers -- rendered in Nastaliq's Latin glyphs and
   read as a font-loading failure rather than a choice.

   --tw-lat-mixed puts Archivo first. Font fallback is per GLYPH, and Archivo
   has no Arabic coverage, so Urdu still resolves to Noto Nastaliq exactly as
   before while Latin finally gets a Latin face. One rule, whole site, no
   per-element classes and no PHP change. CONTRACT section 2 asks for Latin
   runs to be routed through `tw-lat`; this keeps that working and makes the
   unmarked ones correct too.                                              */
body { font-family: var(--tw-lat-mixed); }

/* ---- dark mode: the controls were invisible ------------------------------
   Measured: 11 elements at contrast 1.08:1 -- rgb(14,19,23) text on the
   rgb(21,27,32) card. The reading buttons and every share button colour
   themselves `var(--tw-green-dark)`, and dark mode reassigns that same token
   to #0E1317 for use as a near-black GROUND. So the control that switches
   dark mode back off was itself invisible in dark mode.

   --tw-body (#D6DEE3) on --tw-card (#151B20) measures 12.75:1. The pressed
   button is re-asserted after, because it sits on the mint #8FC9A8 pill and
   genuinely does want the near-black ink (9.86:1 there).                  */
[data-tw-mode="dark"] .tw-article__tags a,
[data-tw-mode="dark"] .tw-tag,
[data-tw-mode="dark"] .tw-article__share a,
[data-tw-mode="dark"] .tw-article__share button,
[data-tw-mode="dark"] .tw-share__link,
[data-tw-mode="dark"] .tw-btn--ghost,
[data-tw-mode="dark"] .tw-reading button {
	color: var(--tw-body);
}
[data-tw-mode="dark"] .tw-reading button[aria-pressed="true"] { color: #0E1317; }

/* Same root cause, other direction: these three use --tw-green / --tw-green-dark
   as a FILL and hard-code #FFF on top. Dark mode reassigns --tw-green to the
   mint #8FC9A8, so white-on-mint measured 1.89:1. The near-black ink the mode
   already defines is 9.86:1 there. */
[data-tw-mode="dark"] .tw-btn--primary,
[data-tw-mode="dark"] .tw-badge--green,
[data-tw-mode="dark"] .tw-search__submit {
	color: var(--tw-green-dark);
}

/* The thread is a SIBLING of #tw-article, so none of the descendant selectors
   above reach it -- and it now carries the dark tokens, which means both of
   the faults they fix come back inside it (measured: the comment submit went
   to 1.89:1). Spelled out again rather than folded into the lists above,
   because every one of those selectors would need the combinator repeated.
   The `:not()` chain is there to outrank the --tw-gold rule on the digits. */
[data-tw-mode="dark"] ~ .tw-comments .tw-btn,
[data-tw-mode="dark"] ~ .tw-comments .comment-reply-link,
[data-tw-mode="dark"] ~ .tw-comments .page-numbers,
[data-tw-mode="dark"] ~ .tw-comments .page-numbers:not(.prev):not(.next):not(.dots):not(.current) {
	color: var(--tw-body);
}
[data-tw-mode="dark"] ~ .tw-comments .tw-btn--primary,
[data-tw-mode="dark"] ~ .tw-comments .tw-search__submit,
[data-tw-mode="dark"] ~ .tw-comments .tw-badge--green,
[data-tw-mode="dark"] ~ .tw-comments .page-numbers.current:not(.dots) {
	color: var(--tw-green-dark);
}


/* ---- section-front headline list: two across ----------------------------
   The archive lead is side by side, so a single-column list under it wastes
   half the width and makes the page twice as long as it needs to be.

   The adjacent-sibling rule that draws the separators cannot survive a grid:
   `.tw-list__item + .tw-list__item` would put a top border on the SECOND item
   of the first row. So row separators move to :nth-child(n+3) -- everything
   below row one -- and the column divider goes on the even items' inline-start
   edge, which in RTL is their right side, facing the first column. Putting it
   on the odd items' inline-end instead would leave a stranded divider beside
   an odd last item.                                                        */
@media (min-width: 1024px) {
	.tw-list--section {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.tw-list--section .tw-list__item {
		padding-inline: 16px;
	}
	.tw-list--section .tw-list__item + .tw-list__item {
		border-block-start: 0;
	}
	.tw-list--section .tw-list__item:nth-child(n + 3) {
		border-block-start: var(--tw-hairline);
	}
	.tw-list--section .tw-list__item:nth-child(even) {
		border-inline-start: var(--tw-hairline);
	}
}

/* ---- section-front boxes: photo, headline, time, link -------------------
   The markup order is thumb, time, title, which put the timestamp ABOVE the
   headline. In a box the headline has to lead; the stamp is metadata and
   belongs under it, with the "full story" link last. Reordered with `order`
   rather than by moving the markup, because list-item.php is shared with the
   rail widgets, which keep the compact stamp-first form.                   */
.tw-list__cta {
	display: inline-block;
	color: var(--tw-green);
	font-size: 13px;
	font-weight: 600;
}
.tw-list__cta:hover {
	color: var(--tw-green-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (min-width: 1024px) {
	.tw-list--section .tw-list__item:has(.tw-list__thumb) {
		grid-template-columns: 96px minmax(0, 1fr);
		align-items: start;
		gap: 4px 12px;
	}
	.tw-list--section .tw-list__thumb {
		grid-row: span 3;   /* headline + stamp + link */
		inline-size: 96px;
	}
	.tw-list--section .tw-list__title { order: 1; }
	.tw-list--section .tw-list__time  { order: 2; font-size: 11px; }
	.tw-list--section .tw-list__cta   { order: 3; }
}

/* ---- logo aspect ratio --------------------------------------------------
   `width`/`height` attributes were added to both logos so Chrome would stop
   refusing to lazy-load a zero-area image. That is the right fix, but it also
   gives the <img> a USED inline size from the attribute (760px), so capping
   `max-block-size` clamped the height alone and squashed the wordmark into
   760x84 - a 9:1 box for a 3:1 logo. `block-size: auto` is not enough on its
   own once an attribute supplies the width.

   `inline-size: auto` lets the height cap scale the width with it, so the
   masthead logo resolves to ~253x84 and the footer one to ~193x64, and the
   attributes still do their job of giving the image a non-zero area before
   it loads.                                                                */
.tw-masthead__logo img,
.tw-footer__brand img {
	inline-size: auto;
}

/* ---- ticker hint: removed ------------------------------------------------
   "ٹکر روکنے یا چلانے کے لیے «روکیں» کا بٹن دبائیں" sat beside a button that
   already reads «روکیں» and carries aria-label="ٹکر روکیں", aria-pressed and
   a pause/play icon. A sentence explaining a self-evident control is clutter
   on a masthead.

   WCAG 2.2.2 (pause moving content) is satisfied by the BUTTON, not by this
   text - so hiding it costs nothing in compliance. Do not "restore" it
   thinking it was required; if the button is ever removed, the obligation
   comes back and a hint is not a substitute for a control.                */
.tw-ticker__hint { display: none; }

/* =========================================================================
   Desktop scale pass — 2026-10-04

   The desk kept reaching for the browser zoom control: 90%, then 80%. That
   is a measurement, not a preference, so it was measured.

   At a real 1366x768 at 100%:

       topbar  41  +  masthead 170  +  nav 54  +  ticker 47  =  311px
       = 40% of the fold spent before a single headline
       lead headline landed at y=686, scraping in with nothing under it
       STORIES AT LEAST HALF VISIBLE ABOVE THE FOLD: 3

   The same page at 1707x960 — which is exactly what a 1366 screen shows at
   the 80% the desk chose — scaled back to physical pixels:

       32 + 148 + 43 + 38 = 262px of chrome, and 5 STORIES above the fold.

   So zooming out was buying 67% more headlines. For a newspaper front page
   that is the whole product, which is what makes this a scale problem and
   not a styling one.

   Benchmark, measured on the live site: UrduPoint sets its Urdu body and
   headline text at 13px. This theme was at 17px body and 15px list titles —
   even at the desk's preferred 80% zoom our effective body was 14.4px,
   still LARGER than UrduPoint at 100%.

   This block does NOT chase 13px. UrduPoint renders in a different face;
   Noto Nastaliq at 13px is genuinely hard to read and this readership skews
   older. The reduction stops well short of that floor and takes most of the
   height out of the chrome instead, where there is no legibility cost at
   all.

   SCOPED TO >=1024px ON PURPOSE. Phones were never the complaint and their
   fold maths is different — the masthead ad and the market strip are both
   already hidden there, so there is nothing to win and a legibility floor
   to lose.

   Leading is untouched. `line-height: 2.6` is a RATIO, so it scales with
   font-size and the collision rate is unchanged by anything here — that
   analysis does not need redoing.
   ========================================================================= */

@media (min-width: 1024px) {

	/* ---- the pure furniture first: no editorial content lives here, so
	   every pixel is free. 142px of topbar + nav + ticker. ---- */

	:root {
		--tw-nav-h: 46px; /* was 54 */
	}

	.tw-topbar {
		font-size: 13px; /* was 14 */
	}
	.tw-topbar__inner {
		padding-block: 5px; /* was 7 */
	}
	.tw-topbar__date {
		font-size: 13px;
	}

	.tw-ticker__inner {
		padding-block: 4px;
	}

	/* ---- masthead: the biggest single band at 170px ----
	   The ad slot is NOT clipped and no max-block-size is imposed on it. The
	   rule in HANDOFF.md stands: a DGPR/government notice is never silently
	   cut. What shrinks is the theme's own .tw-promo block around it — type
	   and padding — plus the logo, which is ours to size. If a real image
	   creative is ever dropped in, it keeps its full height and the masthead
	   grows again, which is the correct behaviour. */

	.tw-masthead__inner {
		padding-block: 14px; /* was 24 */
		gap: 6px 20px;
	}
	.tw-masthead__logo img {
		max-block-size: 78px; /* was 96 */
	}

	.tw-promo {
		font-size: 13px;
		padding: 10px 12px;
	}
	.tw-promo__title { font-size: 15px; }
	.tw-promo__kicker,
	.tw-promo__ref,
	.tw-promo__date,
	.tw-promo__cta { font-size: 12px; }

	/* ---- type: the modest half. Each step is about 6%, which is below the
	   threshold where Nastaliq starts to lose its joins. ---- */

	body {
		font-size: 16px; /* was 17 */
	}

	.tw-lead__title  { font-size: 27px; }   /* was 30 */
	.tw-card__title  { font-size: 16px; }   /* was 17 */
	.tw-list__title  { font-size: 14px; }   /* was 15 */
	.tw-lead__dek,
	.tw-card__dek    { font-size: 14px; }

	.tw-nav__list a  { font-size: 14px; }

	/* ---- the homepage lead image ----
	   NO cap, and this is a reversal recorded on purpose. It was capped at
	   300px with `object-fit: cover` during the scale pass, to buy a fifth
	   story above the fold. The reasoning was that the lead prints its
	   headline as HTML text directly under the picture, so cropping a house
	   composite could not lose a sentence the reader cannot still read.

	   That was wrong in practice, and the desk saw it immediately. These
	   composites carry the subject name and a branded footer bar along the
	   BOTTOM, which is exactly what a 300px cover crop cuts, and a headline
	   sliced through the middle of its own letters reads as broken rather
	   than as cropped. Whether the information is duplicated elsewhere was
	   the wrong test; whether it LOOKS damaged is the right one.

	   So the lead goes back to the image pass rule for display boxes: the
	   file ratio, nothing cropped. Cost, measured at 1366x768: the picture
	   runs 376px instead of 300, the lead headline moves from y=628 to
	   about y=705, and the fold holds 4 stories instead of 5. That trade is
	   taken deliberately the second time.                                */
}

/* ---- section-front list: shadow cards, not ruled rows --------------------
   The desk compared this list with a competitor's and asked for two things:
   drop the "مکمل خبر" link, and make the rows read as cards.

   The CTA is gone at source (archive.php passes 'cta' => false), not hidden
   here, because the whole item is already a single anchor — the link was a
   second control doing the same job and it forced a third row into every
   box.

   The rows become cards. That means undoing three things rather than just
   adding a shadow:

   1. `.tw-list` carries `background`, `border` and `border-radius`, which
      made the whole list ONE panel. Cards inside a panel read as a table,
      not as cards, so the panel goes transparent here.
   2. It also carries `overflow: hidden` for its rounded image crops. A
      shadow on a child is clipped by that at the container edge, so the
      bottom row's shadow would be sliced. `overflow: visible` here; the
      thumbs keep their own `border-radius` + `overflow: hidden`, so nothing
      depends on the container clipping.
   3. The hairline separators — the row rule on :nth-child(n+3) and the
      column divider on :nth-child(even) — are what a gap now does, and
      leaving both would draw a line between cards that already have edges.

   Shadow is deliberately soft: 0 1px 2px for the resting state and a
   slightly lifted 0 4px 12px on hover. On a page that is mostly photographs
   a heavy shadow competes with the pictures.                             */

.tw-list--section {
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
	padding-inline: 0;
	gap: 12px;
}

.tw-list--section .tw-list__item {
	background: var(--tw-card);
	border: var(--tw-hairline);
	border-radius: var(--tw-radius);
	box-shadow: 0 1px 2px rgba(16, 23, 28, .06);
	padding: 14px;
	transition: box-shadow .15s ease, transform .15s ease;
}

.tw-list--section .tw-list__item:hover,
.tw-list--section .tw-list__item:focus-within {
	box-shadow: 0 4px 12px rgba(16, 23, 28, .12);
}

/* The old separators, switched OFF. The gap plus each card's own border
   does this job now; left in, they drew a doubled edge between two cards
   that already have one. Overridden rather than deleted at source because
   the rules above them still serve the rail and the homepage lists, which
   are not cards. */
.tw-list--section .tw-list__item + .tw-list__item,
.tw-list--section .tw-list__item:nth-child(n + 3) {
	border-block-start: var(--tw-hairline); /* the card border, not a rule */
}
.tw-list--section .tw-list__item:nth-child(even) {
	border-inline-start: var(--tw-hairline); /* ditto */
}

@media (min-width: 1024px) {
	.tw-list--section {
		gap: 12px;
	}
	.tw-list--section .tw-list__item {
		padding-inline: 14px;
	}
	/* The thumb spanned three rows for headline + stamp + link. The link is
	   gone, so two. Left at three it stretched the picture down past the
	   stamp and left a hole under it. */
	.tw-list--section .tw-list__item:has(.tw-list__thumb) {
		grid-template-columns: 96px minmax(0, 1fr);
	}
	.tw-list--section .tw-list__thumb {
		grid-row: span 2;
	}
}

/* ---- "تازہ ترین" rail: shadow cards, stamp last -------------------------
   Matched to the section-front cards at the desk's request, plus one change
   they asked for specifically: the timestamp moves BELOW the headline.

   Markup order is time-then-title, because the same `list-item.php` part
   feeds the compact rail form. So the swap is done with `order` on the grid
   children rather than by moving markup, exactly as the section front does
   it — the part stays shared and no template changes.

   Three structural undos, the same ones the section cards needed:

   1. `.tw-latest` and `.tw-latest__items` are BOTH white panels with their
      own border and radius. Two nested panels around a set of cards reads
      as a table inside a box. Both go transparent.
   2. Both also carry `overflow: hidden`, which clips a child's shadow at the
      container edge — the last card's shadow would be sliced. Set visible.
   3. `.tw-latest__head` had `border-radius: 0` because it relied on the
      parent clipping its corners. With the parent no longer clipping, the
      green bar has to round its own top corners or it renders as a square
      cap on a rounded column.                                             */

.tw-latest--live {
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
}

.tw-latest--live .tw-latest__head {
	border-start-start-radius: var(--tw-radius);
	border-start-end-radius: var(--tw-radius);
	/* and the bottom corners too: the bar no longer sits flush on a panel,
	   it is a header floating above a gap. */
	border-end-start-radius: var(--tw-radius);
	border-end-end-radius: var(--tw-radius);
	margin-block-end: 12px;
}

.tw-latest--live .tw-latest__items {
	display: grid;
	gap: 10px;
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
	padding-inline: 0;
}

.tw-latest--live .tw-list__item {
	background: var(--tw-card);
	border: var(--tw-hairline);
	border-radius: var(--tw-radius);
	box-shadow: 0 1px 2px rgba(16, 23, 28, .06);
	padding: 12px 14px;
	transition: box-shadow .15s ease;
}

.tw-latest--live .tw-list__item:hover,
.tw-latest--live .tw-list__item:focus-within {
	box-shadow: 0 4px 12px rgba(16, 23, 28, .12);
}

/* The separator rule the gap now replaces. */
.tw-latest--live .tw-list__item + .tw-list__item {
	border-block-start: var(--tw-hairline); /* the card's own edge, not a rule */
}

/* Headline first, stamp after it. */
/* ALL rails, not just the live one. The card treatment above is correct to
   scope to --live, because the desk asked for boxes on تازہ ترین only. The
   reading ORDER is not a decoration: اشتہارات and مزید خبریں were still
   printing the date above the headline, so the first thing read in those
   rows was a timestamp. That is wrong everywhere, so it is unscoped. */
.tw-latest .tw-list__title { order: 1; }
.tw-latest .tw-list__time {
	order: 2;
	display: block;
	margin-block-start: 6px;
	color: var(--tw-muted);
	font-size: 12px;
	line-height: 1.9; /* Latin digits, not Nastaliq: 2.5 is not owed here */
}

.tw-latest--live .tw-latest__more {
	margin-block-start: 12px;
}

/* ---- homepage list sections: stamp AFTER the headline ---------------------
   `list-item.php` prints the time first, because the rail's compact form
   wants it there. The تازہ ترین rail and the category front were already
   reordered; the homepage section blocks (بزنس، صحت، کالم، ای پیپر) were
   not, so their date sat on top of the headline — the first thing read in
   each row was a date, not the news.

   `order` again, not a markup change: the part is shared four ways and
   moving the markup would move it everywhere.                            */
.tw-block--list .tw-list__title { order: 1; }
.tw-block--list .tw-list__time {
	order: 2;
	display: block;
	margin-block-start: 6px;
	color: var(--tw-muted);
	font-size: 12px;
	/* Latin numerals: 1.9, not the 2.5 Nastaliq box, or the row gains a
	   gap under every date. */
	line-height: 1.9;
}

/* ---- read counts ---------------------------------------------------------
   Asked for by the desk 2026-10-04, to sit beside the date rather than above
   the headline. inc/views.php returns '' below TW_VIEWS_MIN, so nothing is
   drawn on a story nobody has opened — every story starts at zero and a
   column of "0" beside 1,460 headlines reads as a dead paper.

   The eye is drawn in CSS, not an icon font or an inline SVG per row: it is
   one shape repeated up to twenty times a page, and the project rule is no
   third-party assets.                                                     */

.tw-list__views,
.tw-card__views {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--tw-muted);
	font-size: 12px;
	/* Latin numerals; the 2.5 Nastaliq box would add a gap under every row. */
	line-height: 1.9;
}

.tw-list__views { order: 3; }

.tw-list__views-icon,
.tw-card__views-icon {
	inline-size: 13px;
	block-size: 9px;
	border: 1.5px solid currentColor;
	/* the lens: a pointed oval, which is two opposite corners rounded hard */
	border-radius: 50% 0 50% 0 / 60% 0 60% 0;
	transform: rotate(-45deg);
	flex: 0 0 auto;
}

/* The date and the count share a row in the rail, so the stamp stops being
   a block of its own. */
.tw-latest .tw-list__item:has(.tw-list__views) .tw-list__time,
.tw-block--list .tw-list__item:has(.tw-list__views) .tw-list__time {
	display: inline-flex;
	margin-inline-end: 12px;
}

.tw-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
}

/* ---- masthead right slot: today's edition ---------------------------------
   Replaced the currency strip 2026-10-04.

   Text-led with a small cover, and the sizes are the reason rather than the
   taste. The right column measures 408px and the masthead is 139px tall. The
   registered tw-epaper crop is 420x594 — portrait. Rendered to the masthead's
   usable height that is 78px wide, which is a grey rectangle rather than a
   readable front page. Rendered wide enough to actually read, it is 212px
   tall and the masthead grows to about 240px, which would undo most of the
   scale pass and cost two stories above the fold.

   So the cover is a cue at 62px and the words carry the meaning. If a
   genuinely readable cover is ever wanted, the rail is the place for it —
   a 352px column can hold one.                                            */

.tw-masthead__epaper {
	display: none; /* phones: the masthead is logo-only, as the ad slot is */
}

@media (min-width: 1024px) {
	.tw-masthead__epaper {
		display: inline-flex;
		align-items: center;
		gap: 12px;
		padding: 10px 14px;
		border: var(--tw-hairline);
		border-radius: var(--tw-radius);
		background: var(--tw-card);
		color: var(--tw-ink);
		text-decoration: none;
		transition: border-color .15s ease, box-shadow .15s ease;
	}
	.tw-masthead__epaper:hover,
	.tw-masthead__epaper:focus-visible {
		border-color: var(--tw-green);
		box-shadow: 0 2px 10px rgba(16, 23, 28, .10);
	}

	.tw-masthead__epaper-cover {
		display: block;
		inline-size: 62px;
		flex: 0 0 auto;
		overflow: hidden;
		border-radius: 4px;
		border: 1px solid var(--tw-rule);
		line-height: 0; /* no descender gap under the image */
	}
	.tw-masthead__epaper-cover img {
		display: block;
		inline-size: 100%;
		block-size: auto;
		aspect-ratio: 420 / 594;
		object-fit: cover;
		object-position: top; /* the masthead is at the top of a front page */
	}

	.tw-masthead__epaper-text {
		display: grid;
		gap: 2px;
	}
	.tw-masthead__epaper-label {
		font-family: var(--tw-urdu);
		font-size: 15px;
		font-weight: 700;
		/* single line in a grid cell with its own gap, so the full 2.5
		   Nastaliq box is not owed and would only pad the slot out */
		line-height: 2.1;
		color: var(--tw-ink);
	}
	.tw-masthead__epaper-date {
		font-family: var(--tw-lat-mixed);
		font-size: 12.5px;
		line-height: 1.8;
		color: var(--tw-muted);
	}
	.tw-masthead__epaper-cta {
		justify-self: start;
		margin-block-start: 2px;
		padding: 1px 10px;
		border-radius: 999px;
		background: var(--tw-green);
		color: var(--tw-on-green);
		font-family: var(--tw-urdu);
		font-size: 12px;
		line-height: 2;
	}
}

/* =========================================================================
   Homepage blocks: کالم اور اداریہ, ویڈیو, and the phone bar
   -------------------------------------------------------------------------
   The markup for these three shipped in index.php and template-parts/ before
   the stylesheet did, so they were live and unstyled. Written against the
   approved mockup.

   Three notes that are not obvious from the rules themselves:

   1. None of this needs a `[data-tw-mode="dark"]` counterpart. The reading
      modes are an ARTICLE control — the attribute lands on the single.php
      wrapper — and the homepage never carries it. Dark variants here would
      be dead CSS.
   2. The grid is already done. `.tw-grid--cards` is 1 / 2 / 3 across at
      0 / 768 / 1024, so nothing below sets a column count; these rules style
      the inside of a card only.
   3. The video block's ribbon is `--tw-ink`, not the mockup's red, decided
      in index.php and left alone here — see the comment there.
   ========================================================================= */

/* ---- spacing for the full-width blocks under the grid --------------------
   The columns, video and phone-bar blocks are NOT in `.tw-main` -- index.php
   prints them as siblings of `.tw-grid--page`, directly inside `main.tw-wrap`,
   because a three-across row and a full-width panel do not fit the 577px main
   column. That puts them outside `.tw-main > * + *`, which is the rule that
   spaces every other block on the page, so all three arrived with a measured
   0px gap and the phone bar sat flush against the video cards.

   The columns and video blocks LOOKED spaced only because their ribbon
   carries `margin-block-end: 16px`; the phone bar has no ribbon, so it had
   nothing at all above it.

   `~ *` rather than `+ *` so this reaches every block after the grid, not
   just the first, and the value matches `.tw-main > * + *` exactly so the
   rhythm does not change where the page crosses from the grid to these.   */
.tw-wrap > .tw-grid--page ~ * { margin-block-start: calc(var(--tw-gap) + 8px); }

/* ---- the "book this slot" ad box ----------------------------------------
   Only ever drawn while TW_DEMO_BLOCKS is on; a booked creative replaces it
   and an unbooked slot with the gate off renders nothing. Dashed and in the
   gold the other ad furniture already uses, so it never reads as editorial. */
.tw-adslot--demo {
	gap: 4px;
	padding: 20px 16px;
	border-style: dashed;
}
.tw-adslot--demo .tw-adslot__hint {
	color: var(--tw-muted);
	font-size: 13px;
	line-height: 1.9;
	text-align: center;
}

/* ---- کالم اور اداریہ: portrait, headline, writer ------------------------
   Card shell matches the section-front shadow cards above (hairline, 10px
   radius, 0 1px 2px resting / 0 4px 12px lifted) so the two read as one
   system rather than as two card designs on one page.

   Layout is `auto minmax(0, 1fr)` with `align-items: start`: the portrait
   must not stretch to the height of a two-line headline, because a 50%
   radius on a stretched box draws an ellipse rather than a circle.      */

.tw-column {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	padding: 16px;
	background: var(--tw-card);
	border: var(--tw-hairline);
	border-radius: var(--tw-radius);
	box-shadow: 0 1px 2px rgba(16, 23, 28, .06);
	transition: box-shadow .15s ease;
}
.tw-column:hover,
.tw-column:focus-within { box-shadow: 0 4px 12px rgba(16, 23, 28, .12); }

/* `flex: none` is not available to a grid child, so the circle is pinned by
   fixed logical sizes instead. `overflow: hidden` crops the portrait to the
   circle; the img below fills it. */
.tw-column__face {
	display: grid;
	place-items: center;
	inline-size: 56px;
	block-size: 56px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--tw-ground);
}

/* tw-thumb is a 200x150 crop — a 4:3 image inside a 1:1 circle. `cover` plus
   the explicit 100% sizes is what keeps it from letterboxing; without the
   block-size the intrinsic height wins and leaves bands top and bottom. */
.tw-column__pic {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* The fallback when the user has no local `avatar` meta. A single Urdu
   glyph, optically centred: Nastaliq sits low in its line box, so a
   line-height of 1 here rather than the inherited 1.9 is what actually
   centres it in the circle. */
.tw-column__initial {
	color: var(--tw-green-dark);
	font-family: var(--tw-urdu);
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
}

.tw-column__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-inline-size: 0;
}

.tw-column__title {
	color: var(--tw-ink);
	font-size: 17px;
	font-weight: 700;
	line-height: 2;
}
.tw-column__title a { color: inherit; }
.tw-column__title a:hover { color: var(--tw-green-dark); }

/* End-aligned, as the mockup draws it: the writer's name reads as a
   signature under the piece rather than as a second line of the headline.
   --tw-blue is 7.4:1 on --tw-card and is the accent this block's ribbon
   already carries, so the name ties back to the band above it. */
.tw-column__by {
	margin-block-start: auto;
	color: var(--tw-blue);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.9;
	text-align: end;
}

/* ---- ویڈیو: dark card, thumbnail, play triangle, title ------------------
   The only dark cards on the page, which is deliberate — they are the one
   block that leaves the site, and the mockup uses the colour to say so.

   `aspect-ratio` on the media holds the 16:9 box before the lazy thumbnail
   arrives, so the block does not shift when it loads. The placeholder card
   loads no image at all and takes its height from the same ratio.      */

.tw-video {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--tw-ink);
	border-radius: var(--tw-radius);
	box-shadow: 0 1px 2px rgba(16, 23, 28, .10);
	transition: box-shadow .15s ease;
}
.tw-video:hover,
.tw-video:focus-within { box-shadow: 0 6px 16px rgba(16, 23, 28, .22); }

.tw-video__media {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #2A3238; /* one step up from --tw-ink, so the strip below reads */
}

/* Absolute rather than a grid cell: the play triangle shares that cell and
   must sit ON the picture, not beside it. */
.tw-video__thumb {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.tw-video__play {
	position: relative; /* above the absolutely-placed thumb */
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--tw-ink);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
	transition: background-color .15s linear, transform .15s ease;
}
/* The triangle points right in both directions. A play control is not text
   and does not mirror — every player these readers already use draws it this
   way — so the icon is nudged optically rather than flipped. */
.tw-video__play svg { margin-inline-start: 2px; }

.tw-video:hover .tw-video__play,
.tw-video:focus-within .tw-video__play {
	background: #FFFFFF;
	transform: scale(1.06);
}

.tw-video__body {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	padding: 12px 14px;
}

.tw-video__title {
	color: #F4F7F3;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.95;
}
.tw-video__title a { color: inherit; }
.tw-video__title a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; }

/* The placeholder, which TW_DEMO_BLOCKS gates and which must be switched off
   before cutover. It gets NO hover treatment and no pointer: it is not a
   link, and a card that lifts under the cursor invites a click into
   nothing. */
.tw-video--demo,
.tw-video--demo:hover { box-shadow: 0 1px 2px rgba(16, 23, 28, .10); }
.tw-video--demo:hover .tw-video__play { transform: none; }
.tw-video__title--demo { color: rgba(244, 247, 243, .62); font-weight: 500; }

/* The stand-in picture. Drawn entirely in CSS -- two soft radial washes and a
   fine diagonal hatch -- rather than shipped as a file, because the whole
   point of the placeholder card is that it makes NO network request: not a
   third-party one, and not a local one either for a picture nobody will ever
   look at. It reads as "a frame will go here" at a glance and never as a real
   still, which is what the desk needs to see while the panel is empty.

   `background-image` only. The ink colour underneath stays on `.tw-video__media`
   so there is one place to change the base tone. */
.tw-video--demo .tw-video__media {
	background-image:
		radial-gradient(60% 80% at 72% 18%, rgba(123, 163, 126, .20), transparent 70%),
		radial-gradient(55% 70% at 22% 86%, rgba(45, 98, 72, .26), transparent 72%),
		repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 9px);
}

/* The play button stays bright on the placeholder. Dimming it was the first
   attempt and it read as a disabled control the reader had failed to use;
   full strength plus the absent hover says "this is what a video card looks
   like" instead. */
.tw-video--demo .tw-video__play {
	background: rgba(255, 255, 255, .82);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}

/* ---- the phone bar -----------------------------------------------------
   Dark green panel between the last block and the footer. Flex rather than
   grid because the two halves wrap independently: on a narrow column the
   buttons drop under the copy and go full width, which a grid-template
   column count cannot do without a second breakpoint.

   Everything inside is light-on-green, so the thing to watch when editing is
   contrast: --tw-on-green (#F4F7F3) on --tw-green-dark (#1C4433) measures
   11.9:1, and the .86 alpha on the sub-line still measures 8.9:1.       */

.tw-phonebar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	padding: 20px 24px;
	background: var(--tw-green-dark);
	border-radius: var(--tw-radius);
	color: var(--tw-on-green);
}

/* The basis is 320px and NOT `auto`. `flex-wrap` resolves by wrapping before
   it shrinks, so an auto basis (the copy's full natural text width, measured
   at 555px) plus the two buttons overflowed the 961px panel and dropped the
   buttons onto a second row. A small basis keeps both on one line and lets
   `flex-grow` spend the remainder on the text, which is also what closes the
   gap: the copy fills the slack instead of leaving it in the middle. */
.tw-phonebar__copy { flex: 1 1 320px; min-inline-size: 0; }

.tw-phonebar__title {
	color: var(--tw-on-green);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.9;
}

.tw-phonebar__sub {
	margin-block-start: 2px;
	color: rgba(244, 247, 243, .86);
	font-size: 14px;
	line-height: 1.95;
}

.tw-phonebar__actions {
	display: flex;
	flex: none;
	flex-wrap: wrap;
	gap: 10px;
}

/* Outlined pills, as drawn. `.tw-btn` has already set the pill shape, the
   44px target and the font; this overrides only the colours, because the
   base button is green-on-pale and would vanish on this panel. */
.tw-phonebar__cta,
.tw-phonebar__cta:hover {
	border-color: rgba(244, 247, 243, .55);
	background: transparent;
	color: var(--tw-on-green);
	font-size: 15px;
}
.tw-phonebar__cta--wa:hover {
	border-color: var(--tw-on-green);
	background: rgba(255, 255, 255, .12);
}

/* The notification button has no backend and will not have one until four
   separate pieces exist — see the block comment in phonebar.php. The desk
   asked for no "جلد دستیاب" label, so the only honesty left is the cursor
   and the absent hover: it does not behave like something that responds.
   Do not add a hover state here to "finish" it. */
.tw-phonebar__cta--push { cursor: default; }

/* Below 768px the panel is most of the viewport width, so the buttons stop
   being a row beside the copy and become a stacked pair under it. */
@media (max-width: 767.98px) {
	.tw-phonebar { padding: 18px; }
	.tw-phonebar__title { font-size: 19px; }
	.tw-phonebar__actions { flex: 1 1 100%; }
	.tw-phonebar__cta { flex: 1 1 100%; }
}

/* ---- the date, in the navigation bar -------------------------------------
   Moved out of the topbar on the desk's instruction. `margin-inline-start:
   auto` is what places it: it takes all the free space on the line, so the
   menu stays hard against its own edge, the search button stays against the
   other, and the date sits in the gap between them — which is the stretch of
   empty green the desk marked.

   Hidden under 1024px. Below that the menu becomes a toggle, the bar has no
   slack left, and a wrapped date would push the search button onto a second
   row. The full date is still in the page for a crawler either way. */
.tw-nav__date {
	margin-inline-start: auto;
	padding-inline: 14px;
	color: var(--tw-green-pale);
	font-family: var(--tw-lat-mixed);
	font-size: 13px;
	line-height: 1.6;
	white-space: nowrap;
}
@media (max-width: 1023.98px) {
	.tw-nav__date { display: none; }
}