/* ============================================================
   The Balochistan Post — site chrome
   Topstrip · Masthead · Navrail (+mega) · Breaking bar · Footer
   Extracted from the homepage mockup so every template shares it.
   Depends on tokens.css.
   ============================================================ */

:root {
  --tbp-red:    var(--red);         /* design-system ACCENT — the "Featured & Live" hero red.
                                       Was navy under the old "no red" rule; flipped so every
                                       chrome accent (kickers, tags, badges) matches the hero. */
  --tbp-red-d:  var(--red-strong);
  /* NOTE: navy is retired — these legacy aliases now resolve to RED shades
     (brand is red). Names kept to avoid a wide rename; treat them as "brand". */
  --tbp-blue:   var(--brand-600);   /* = red */
  --tbp-navy:   var(--brand-700);   /* = deep red — brand chrome */
  --tbp-navy-d: var(--brand-900);   /* = deepest red — big surfaces (footer, logo hover) */
  --tbp-live:   var(--live-bg);     /* hot red — LIVE coverage signal only (NOT the breaking ticker, which is brand navy) */
  /* --tbp-gold retired 2026-07-04 — gold accent system removed (see tokens.css) */
  --tbp-paper:  #ffffff;
  --tbp-card:   var(--paper-card);  /* canonical surface (incl. dark) */
  --tbp-card-2: #f4f6f9;
  --tbp-line:   #e6e8ec;
  --tbp-line-2: #d5d8de;
  --tbp-text:   var(--ink-900);     /* canonical text (incl. dark) */
  --tbp-text-2: #3a3a3a;
  --tbp-text-3: var(--ink-500);     /* canonical muted (incl. dark) */
  --maxw-page:  1280px;
  --r-card:     8px;   /* AJ: restrained radius everywhere (was 10px) */
  --r-card-lg:  8px;   /* AJ: match the article's 8px (was 14px) */
  --r-pill:     4px;
}
html.dark {
  --tbp-paper:  #0a0a0a;
  --tbp-card-2: #1c1c1c;
  --tbp-line:   #262626;
  --tbp-line-2: #333333;
  --tbp-text-2: #c8c8c8;
  /* --tbp-card / --tbp-text / --tbp-text-3 inherit dark values from their
     canonical tokens (--paper-card / --ink-900 / --ink-500) — no override needed. */
}
html.dark .topstrip { background: var(--black); }
html.dark .navrail  { background: #131313; }
/* Topstrip + footer are permanently-dark chrome (fixed dark backgrounds in BOTH
   modes). But the ink scale INVERTS in dark mode (--ink-200..500 go dark), which
   turned their light-on-dark text (clock, weather, footer nav, social/legal
   links) into dark-on-dark — near-invisible. Re-pin the low ink tokens to their
   light-mode values inside these dark islands so the text stays light. */
html.dark .topstrip,
html.dark footer.site {
	--ink-200: #d2d6dc;
	--ink-300: #a6abb3;
	--ink-400: #767b84;
	--ink-500: #585858;
}
html.dark .breaking.bn { background: var(--red-strong); }

body { background: var(--tbp-paper); color: var(--tbp-text); }
.wrap { max-width: var(--maxw-page); margin: 0 auto; padding: 0 28px; }

/* ── Utility atoms ───────────────────────────────────────────── */
.mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-600); }

/* Kill WordPress's default block-gap between the homepage's top-level blocks —
   the theme controls its own spacing, so these stack flush with no empty band.
   Covers the breaking bar and the main sections group (and any direct child of
   the site wrapper marked .tbp-flush). */
.wp-block-template-part.tbp-flush,
.wp-site-blocks > .tbp-home-main,
.wp-site-blocks > .tbp-flush { margin-block-start: 0; }

/* ── Top strip ───────────────────────────────────────────────── */
.topstrip { background: var(--ink-900); color: var(--ink-300); font-family: var(--font-mono); font-size: 11px; height: 32px; display: flex; align-items: center; }
.topstrip .row { display: flex; align-items: center; gap: 24px; justify-content: space-between; width: 100%; }
.topstrip .left, .topstrip .right { display: flex; align-items: center; gap: 18px; white-space: nowrap; }
.topstrip .sep { width: 1px; height: 12px; background: #2a2a2a; }
.topstrip .dateline { color: var(--ink-400); letter-spacing: .06em; }
.topstrip .wx { letter-spacing: .02em; color: var(--ink-300); }
.topstrip .live-dot { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-urdu); font-weight: 600; font-size: 12px; color: var(--white); }
.topstrip .live-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red-lift); animation: livepulse 1.4s ease-in-out infinite; }
.topstrip .crisis-toggle { background: transparent; border: 1px solid rgba(255,255,255,.18); color: var(--ink-300); font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; padding: 3px 8px; border-radius: 3px; cursor: pointer; }
.topstrip .crisis-toggle:hover { color: var(--white); border-color: rgba(255,255,255,.4); }
.topstrip .langs { display: flex; }
.topstrip .langs a { padding: 4px 10px; color: var(--ink-400); border-inline-start: 1px solid rgba(255,255,255,.12); font-size: 11px; cursor: pointer; }
.topstrip .langs a:first-child { border-inline-start: 0; }
.topstrip .langs a.active { color: var(--white); }
.topstrip .langs a.ur { font-family: var(--font-urdu); font-size: 13px; padding-block: 2px; }
.topstrip .icon-btn { color: var(--ink-400); width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.topstrip .icon-btn:hover { color: var(--white); }
/* Theme toggle: moon in light mode, sun once dark is active */
.theme-toggle .i-sun { display: none; }
html.dark .theme-toggle .i-moon { display: none; }
html.dark .theme-toggle .i-sun { display: inline-flex; }

/* ── Masthead ────────────────────────────────────────────────── */
.mast { padding: 30px 0 24px; }
.mast .nameplate { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mast-logo { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; cursor: pointer; }
.mast-logo-name { display: flex; flex-direction: column; text-align: center; align-items: center; }
.mast-logo-img { display: block; max-height: 60px; width: auto; margin: 0 auto; }
/* Dark-mode logo (Studio ▸ Identity): both are in the DOM, html.dark decides which paints. */
.mast-logo-img--dark { display: none; }
html.dark .mast-logo-img--light { display: none; }
html.dark .mast-logo-img--dark { display: block; }
.mast-logo-name .en { font-family: var(--font-display); font-weight: 800; font-size: 46px; letter-spacing: -0.028em; line-height: 1; color: var(--ink-900); transition: color .15s; }
.mast-logo:hover .mast-logo-name .en { color: var(--red-strong); }
.mast-logo-name .ur { font-family: var(--font-urdu-disp); font-weight: 400; font-size: 24px; line-height: 1.4; color: var(--ink-700); margin-top: 8px; white-space: nowrap; }
html.dark .mast-logo-name .en { color: var(--tbp-text); }
html.dark .mast-logo-name .ur { color: var(--tbp-text-2); }
@media (max-width: 720px) {
  .mast { padding: 22px 0 18px; }
  .mast-logo-name .en { font-size: 30px; }
  .mast-logo-name .ur { font-size: 19px; }
}

/* Mobile/tablet header: hamburger + off-canvas drawer. Desktop nav is hidden below
   1024px; the hamburger opens a slide-in drawer with the full category list and the
   key actions. No horizontal overflow. */
.nav-burger { display: none; }
.mobile-drawer, .md-backdrop { display: none; }

@media (max-width: 1024px) {
  html { overflow-x: clip; } /* the off-canvas drawer must not create page scroll */
  /* Touch ergonomics: ≥40px hit areas on the small chrome controls. Negative
     block margins keep the visual metrics — only the tappable box grows. */
  .topstrip .icon-btn { width: 40px; height: 40px; margin-block: -9px; }
  .topstrip .langs a { padding-block: 12px; margin-block: -8px; }
  .md-close { padding: 8px 14px; margin: -8px -14px; }
  .search-input-row .s-close { width: 40px; height: 40px; } /* scoped: this block sits above the base .s-close rule */
  .topstrip { height: auto; }
  .topstrip .row { flex-wrap: wrap; gap: 6px 16px; padding: 5px 0; }
  .navrail-inner { height: 52px !important; align-items: center; }
  .navrail .section { display: none !important; }
  .navrail .right .nav-tip { display: none !important; }
  /* The search tool STAYS on phones — it is the only search entry point
     (the desktop rail sections that carry it elsewhere are hidden here). */
  .navrail .right .tool { min-width: 40px; min-height: 40px; justify-content: center; padding: 0; }
  .navrail .right { margin-inline-start: auto; gap: 8px; }
  /* No top hamburger on phones/tablets: the tab bar's Menu tab (thumb zone)
     is the single drawer trigger — two menu icons on one screen was noise. */

  .md-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; z-index: 200; }
  .md-backdrop.open { opacity: 1; visibility: visible; }
  .mobile-drawer { display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; right: 0; left: auto; width: min(82vw, 340px); background: var(--white); z-index: 201; transform: translateX(100%); transition: transform .24s ease; box-shadow: var(--shadow-lg); overflow-y: auto; }
  [dir="ltr"] .mobile-drawer { right: auto; left: 0; transform: translateX(-100%); }
  .mobile-drawer.open { transform: translateX(0) !important; }
  html.dark .mobile-drawer { background: #131313; }
  .md-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--tbp-line); }
  .md-logo { font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: 26px; color: var(--tbp-navy); }
  .md-logo .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--tbp-red); margin-inline-start: 3px; }
  .md-close { background: none; border: 0; font-size: 30px; line-height: 1; color: var(--ink-700); cursor: pointer; }
  .md-links { display: flex; flex-direction: column; padding: 8px 0; }
  .md-links a { padding: 13px 20px; font-family: var(--font-urdu); font-weight: 600; font-size: 17px; color: var(--ink-900); text-decoration: none; border-bottom: 1px solid var(--tbp-line-2); }
  .md-links a:hover { background: var(--paper-sunken); color: var(--tbp-navy); }
  html.dark .md-links a { color: var(--tbp-text); border-color: #262626; }
  .md-actions { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 28px; margin-top: auto; }
  .md-actions a { text-align: center; padding: 11px; border-radius: var(--btn-radius, var(--r-pill)); font-family: var(--font-urdu); font-weight: 700; font-size: 15px; text-decoration: none; }
  .md-actions .md-live { background: var(--tbp-live); color: var(--white); }
  .md-actions .md-tip { background: var(--ink-900); color: var(--white); font-family: var(--font-mono); letter-spacing: .08em; font-size: 13px; }

  /* Drawer: search first (opens the overlay), sections as a 2-col grid
     (10 rows → 5), dark-mode toggle in a utility row at the bottom. */
  .md-search { display: flex; align-items: center; gap: 10px; width: calc(100% - 36px); margin: 14px 18px 6px; padding: 11px 14px; border: 1px solid var(--tbp-line); border-radius: 8px; background: var(--paper-sunken); color: var(--ink-500); font-family: var(--font-urdu); font-size: 14px; cursor: pointer; text-align: start; }
  .md-search svg { width: 15px; height: 15px; flex: none; }
  html.dark .md-search { background: #1c1c1c; border-color: #2a2a2a; }
  .md-links { display: grid; grid-template-columns: 1fr 1fr; }
  .md-links a { padding: 13px 16px; font-size: 15px; }
  .md-utils { display: flex; padding: 0 18px 18px; }
  .md-utils .md-dark { display: flex; align-items: center; gap: 9px; background: none; border: 0; padding: 10px 2px; font-family: var(--font-urdu); font-size: 13.5px; color: var(--ink-500); cursor: pointer; }

  /* ── Mobile tab bar ── Home · Live · Search · Menu. Fixed bottom,
     safe-area aware (installed-PWA / notched phones). Desktop never sees it. */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  .tabbar { position: fixed; bottom: 0; inset-inline: 0; z-index: 190; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--tbp-paper); border-top: 1px solid var(--tbp-line); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .tb-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 55px; background: none; border: 0; padding: 0; font-family: var(--font-urdu); font-size: 10.5px; line-height: 1; color: var(--ink-500); text-decoration: none; cursor: pointer; }
  .tb-item svg { width: 21px; height: 21px; }
  .tb-item.active { color: var(--tbp-red); }
  html.dark .tabbar { background: #131313; border-top-color: #262626; }
}
@media (min-width: 1025px) {
  .tabbar { display: none; }
}
@media (max-width: 600px) {
  .topstrip .left .sep { display: none; }
  .topstrip .left > span:nth-of-type(n+3) { display: none; } /* drop date/weather/edition on phones */
}

/* ── Primary nav ─────────────────────────────────────────────── */
/* Header chrome wrapper — own stacking context so the sticky navrail's mega
   menus paint above the breaking bar (a later-DOM positioned sibling). */
.tbp-chrome { position: relative; z-index: 100; }
.navrail { background: var(--white); border-bottom: 1px solid var(--tbp-line); position: sticky; top: 0; z-index: 50; }
.navrail-inner { display: flex; align-items: stretch; height: 56px; }
.navrail .section { display: inline-flex; align-items: center; padding: 0 14px; font-family: var(--font-urdu); font-weight: 600; font-size: calc(15px * var(--tbp-fsx-ui, 1)); color: var(--ink-900); cursor: pointer; transition: color .15s; position: relative; }
.navrail .section:hover { color: var(--tbp-red); }
.navrail .section.has-mega::after { content: "▾"; font-size: calc(9px * var(--tbp-fsx-ui, 1)); margin-inline-start: 6px; color: var(--ink-400); }
.navrail .section.has-mega > a.mega-title { color: inherit; text-decoration: none; font: inherit; }
html.dark .navrail .section { color: var(--tbp-text); }
.navrail .right { margin-inline-start: auto; display: flex; align-items: center; gap: 14px; }
.navrail .right .tool { display: inline-flex; align-items: center; padding: 0 12px; font-family: var(--font-mono); font-size: calc(11px * var(--tbp-fsx-ui, 1)); letter-spacing: 0.06em; color: var(--ink-700); cursor: pointer; gap: 8px; }
.navrail .right .tool:hover { color: var(--tbp-red); }
.navrail .right .tool svg { width: 14px; height: 14px; }
/* Tip-line button — quiet mono pill */
.nav-tip { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: var(--ink-600); padding: 6px 4px; font-family: var(--font-mono); font-weight: 600; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; flex-shrink: 0; white-space: nowrap; transition: color .15s; text-decoration: none; }
.nav-tip:hover { color: var(--red-strong); }
.nav-tip svg { width: 11px; height: 11px; }
.navrail .right .live-btn { background: var(--red); color: var(--white); border-radius: var(--btn-radius, var(--r-pill)); padding: 8px 14px 8px 12px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-urdu); font-weight: 600; font-size: calc(14px * var(--tbp-fsx-ui, 1)); cursor: pointer; transition: background .18s ease; }
/* Play arrow — white on the red pill by default; turns black on
   hover/focus with a small forward nudge (reads as a "watch live" control). */
.navrail .right .live-btn::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 8px; border-color: transparent transparent transparent var(--white); transition: border-color .18s ease, transform .18s ease; }
[dir="rtl"] .navrail .right .live-btn::before { border-width: 6px 8px 6px 0; border-color: transparent var(--white) transparent transparent; }
.navrail .right .live-btn:hover, .navrail .right .live-btn:focus-visible { background: var(--red-strong); }
.navrail .right .live-btn:hover::before, .navrail .right .live-btn:focus-visible::before { border-color: transparent transparent transparent var(--ink-900); transform: translateX(2px); }
[dir="rtl"] .navrail .right .live-btn:hover::before, [dir="rtl"] .navrail .right .live-btn:focus-visible::before { border-color: transparent var(--ink-900) transparent transparent; transform: translateX(-2px); }

/* ── Mega menu (hover panel under a nav section) ─────────────── */
.navrail .section .mega { position: absolute; top: 100%; inset-inline-start: 0; min-width: 560px; background: var(--white); border: 1px solid var(--tbp-line); border-top: 3px solid var(--tbp-red); box-shadow: var(--shadow-lg); padding: 20px; display: grid; grid-template-columns: 1fr 240px; gap: 24px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s, transform .16s, visibility .16s; z-index: 60; }
.navrail .section:hover .mega { opacity: 1; visibility: visible; transform: translateY(0); }
html.dark .navrail .section .mega { background: var(--tbp-card); border-color: var(--tbp-line); }
.mega .m-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; align-content: start; }
.mega .m-link { font-family: var(--font-urdu); font-weight: 500; font-size: 14px; color: var(--ink-700); padding: 6px 0; border-bottom: 1px solid var(--tbp-line); cursor: pointer; }
.mega .m-link:hover { color: var(--tbp-red); }
html.dark .mega .m-link { color: var(--tbp-text-2); }
.mega .m-feat { display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
.mega .m-fimg { display: block; aspect-ratio: 16/10; border-radius: 8px; background: linear-gradient(135deg, var(--ink-300), var(--ink-600)) center/cover no-repeat; }
.mega .m-ftag { display: block; font-family: var(--font-urdu); font-weight: 700; font-size: 11px; color: var(--tbp-red); }
.mega .m-fttl { display: block; font-family: var(--font-urdu); font-weight: 600; font-size: 13px; line-height: 1.6; color: var(--ink-900); margin-top: 4px; transition: color .15s; }
.mega .m-feat:hover .m-fttl { color: var(--red); }
html.dark .mega .m-fttl { color: var(--tbp-text); }

/* ── Breaking news bar ───────────────────────────────────────── */
.breaking.bn { position: relative; background: var(--red-strong); color: var(--white); }
.bn-inner { display: flex; align-items: center; gap: 16px; height: 54px; }
.bn-badge { flex: none; display: inline-flex; align-items: center; gap: 8px; background: var(--white); color: var(--red); font-family: var(--font-urdu); font-weight: 800; font-size: 12.5px; letter-spacing: .03em; padding: 6px 14px; border-radius: 999px; }
.bn-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: none; }
.bn-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid currentColor; animation: bn-pulse 1.7s ease-out infinite; }
@keyframes bn-pulse { 0%{transform:scale(.55);opacity:.8} 100%{transform:scale(1.7);opacity:0} }
.bn-body { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 14px; }
.bn-time { flex: none; font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.35); border-radius: 4px; padding: 3px 8px; line-height: 1; }
.bn-cat-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.bn-text { font-family: var(--font-urdu); font-weight: 600; font-size: 15px; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; transition: color .15s; }
.bn-item { position: absolute; inset: 0; display: flex; align-items: center; gap: 12px; opacity: 0; transform: translateY(9px); pointer-events: none; transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.bn-item.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.bn-item:hover .bn-text { text-decoration: underline; text-underline-offset: 3px; }
.bn-wire-cur { position: relative; flex: 1; min-width: 0; height: 100%; }
.bn-progress { position: absolute; inset-inline-start: 0; bottom: 0; height: 2px; width: 0; background: rgba(255,255,255,.9); border-radius: 2px; }
.bn-more { flex: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border: 0; background: rgba(255,255,255,.09); color: var(--white); border-radius: var(--btn-radius, 999px); padding: 6px 12px; font-family: var(--font-urdu); font-weight: 700; font-size: 12px; transition: background .15s; }
.bn-more:hover { background: rgba(255,255,255,.17); }
.bn-more-n { background: var(--white); color: var(--red); font-family: var(--font-mono); font-weight: 600; font-size: 11px; min-width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; }
/* Live-coverage row in the ticker/panel: pulsing براہ راست pill instead of a time chip. */
.bn-livechip { display: inline-flex; align-items: center; gap: 6px; background: var(--white); color: var(--red); font-family: var(--font-urdu); font-weight: 800; font-size: 11px; line-height: 1; padding: 4px 10px; border-radius: 999px; flex: none; }
.bn-livechip .d { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: livepulse 1.4s ease-in-out infinite; }
.bn-chev { font-size: 10px; transition: transform .3s; opacity: .85; }
.bn.is-open .bn-chev { transform: rotate(180deg); }
.bn-panel { position: absolute; top: 100%; inset-inline: 0; background: #101010; border-top: 1px solid rgba(255,255,255,.1); box-shadow: 0 28px 60px rgba(0,0,0,.45); max-height: 0; overflow: hidden; transition: max-height .38s cubic-bezier(.4,0,.2,1); z-index: 60; }
/* Constrain dropdown content to the site width so lines stay readable on wide
   screens (the navy bar background still spans edge-to-edge). */
.bn-panel-wrap { max-width: var(--maxw-page); margin: 0 auto; padding: 0 28px; }
.bn-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 10px; border-bottom: 1px solid rgba(255,255,255,.12); }
.bn-panel-title { display: inline-flex; align-items: center; gap: 8px; color: var(--red-lift); font-family: var(--font-urdu); font-weight: 800; font-size: 13px; }
.bn-panel-title .bn-dot { background: var(--red-lift); }
.bn-panel-meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; color: rgba(255,255,255,.5); }
.bn-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.bn-row:last-child { border-bottom: 0; }
.bn-row-cat { flex: none; min-width: 104px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-urdu); font-weight: 700; font-size: 11.5px; color: rgba(255,255,255,.72); }
.bn-row-tx { flex: 1; min-width: 0; font-family: var(--font-urdu); font-weight: 600; font-size: 15px; color: var(--white); line-height: 1.5; transition: color .15s; }
.bn-row:hover .bn-row-tx { text-decoration: underline; text-underline-offset: 3px; }
.bn-row-time { flex: none; font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,.5); letter-spacing: .04em; }
.bn-roll { flex: 1; min-width: 0; height: 54px; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent); mask-image: linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent); }
.bn-roll-track { display: flex; flex-direction: column; transition: transform .6s cubic-bezier(.6,.02,.2,1); }
.bn-roll-line { height: 26px; display: flex; align-items: center; gap: 11px; opacity: .26; transition: opacity .6s; }
.bn-roll-line.is-active { opacity: 1; }
.bn-roll-line .bn-text { font-size: 14px; }
.bn-live { flex: 1; min-width: 0; height: 100%; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent); mask-image: linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent); }
.bn-live-track { display: flex; align-items: center; height: 100%; width: max-content; white-space: nowrap; animation: bn-marquee 64s linear infinite; }
.bn.is-live:hover .bn-live-track { animation-play-state: paused; }
.bn-live-item { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 0 26px; height: 100%; }
.bn-live-item::before { content: ""; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 15px; background: rgba(255,255,255,.16); }
.bn-live-item .bn-text { font-size: 14px; font-weight: 500; }
@keyframes bn-marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion: reduce){ .bn-live-track{ animation: none; } }
@media (max-width: 720px) { .bn-time { display: none; } .bn-badge { padding: 6px 11px; } .bn-inner { gap: 12px; } .bn-row-cat { min-width: 84px; } }

/* ── Footer (footer.site) ────────────────────────────────────── */
footer.site { background: #0d0d0d; color: var(--white); padding: 56px 0 28px; margin-top: 24px; }
/* Identity strip — the two things TBP stands on: protected sources, reader money. */
footer.site .ft-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 52px; }
footer.site .ft-cta > a { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border-radius: var(--btn-radius, 12px); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
footer.site .ft-cta > a:hover { transform: translateY(-2px); }
footer.site .ft-tip { background: linear-gradient(120deg, var(--red-strong), var(--red)); color: var(--white); }
footer.site .ft-tip:hover { box-shadow: 0 14px 40px rgba(var(--red-rgb), .35); }
footer.site .ft-fund { background: #161616; border: 1px solid #262626; color: var(--white); }
footer.site .ft-fund:hover { box-shadow: 0 14px 40px rgba(0,0,0,.5); border-color: #3a3a3a; }
footer.site .ft-cta .ic { flex: none; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; }
footer.site .ft-fund .ic { background: rgba(var(--red-rgb), .16); color: var(--red-lift); }
footer.site .ft-cta .ic svg { width: 20px; height: 20px; }
footer.site .ft-cta .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
footer.site .ft-cta .tx b { font-family: var(--font-urdu); font-weight: 700; font-size: calc(16px * var(--tbp-fsx-foot, 1)); }
footer.site .ft-cta .tx span { font-family: var(--font-urdu); font-size: calc(12.5px * var(--tbp-fsx-foot, 1)); line-height: 1.7; color: rgba(255,255,255,.72); }
footer.site .ft-cta .go { flex: none; font-family: var(--font-urdu); font-weight: 700; font-size: calc(13.5px * var(--tbp-fsx-foot, 1)); white-space: nowrap; }
footer.site .ft-fund .go { color: var(--red-lift); }
@media (max-width: 860px) { footer.site .ft-cta { grid-template-columns: 1fr; } }
footer.site .top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.12); }
footer.site .brand .en { font-family: var(--font-display); font-weight: 800; font-size: calc(30px * var(--tbp-fsx-foot, 1)); color: var(--white); letter-spacing: -0.018em; line-height: 1; }
footer.site .brand .ur { font-family: var(--font-urdu-disp); font-weight: 400; font-size: calc(22px * var(--tbp-fsx-foot, 1)); color: var(--white); margin-top: 6px; line-height: 1.4; }
footer.site .brand p { font-family: var(--font-urdu); font-weight: 400; font-size: calc(13px * var(--tbp-fsx-foot, 1)); line-height: 1.7; color: var(--ink-400); margin-top: 14px; }
footer.site .brand .socials { margin-top: 18px; display: flex; gap: 8px; }
footer.site .brand .socials a { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--ink-700); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-300); }
footer.site .brand .socials a:hover { background: var(--red); border-color: var(--red); color: var(--white); }
footer.site h4 { font-family: var(--font-mono); font-size: calc(10px * var(--tbp-fsx-foot, 1)); text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-500); margin: 0 0 14px; }
/* Direct children only — nested widgets (.socials, .sf-btns) style their own links. */
footer.site .col > a { display: block; padding: 6px 0; font-family: var(--font-urdu); font-size: calc(14px * var(--tbp-fsx-foot, 1)); color: var(--ink-200); transition: color .15s; }
footer.site .col > a:hover { color: var(--white); }
footer.site .languages { margin-top: 22px; padding-top: 20px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-family: var(--font-mono); font-size: calc(10px * var(--tbp-fsx-foot, 1)); color: var(--ink-500); letter-spacing: 0.12em; text-transform: uppercase; }
footer.site .languages a { color: var(--ink-200); padding: 6px 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; }
footer.site .languages a.ur { font-family: var(--font-urdu); font-size: calc(13px * var(--tbp-fsx-foot, 1)); text-transform: none; padding: 4px 14px; letter-spacing: 0; }
footer.site .languages a:hover { background: var(--ink-800); border-color: var(--ink-700); }
footer.site .bottom { margin-top: 18px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: calc(11px * var(--tbp-fsx-foot, 1)); color: var(--ink-500); letter-spacing: 0.04em; flex-wrap: wrap; gap: 16px; }
footer.site .bottom .left { display: flex; gap: 24px; }
footer.site .bottom a { color: var(--ink-300); }
footer.site .bottom a:hover { color: var(--white); }
@media (max-width: 880px) {
  footer.site .top { grid-template-columns: 1fr 1fr; }
  footer.site .col.brand { grid-column: 1 / -1; } /* brand full-width, link cols pair up */
}
@media (max-width: 640px) {
  /* Phones: NEVER a single 23-link column. Brand full-width, then the four
     link groups as a 2x2 grid; tidy pill grids; centered legal row. */
  footer.site { padding-top: 40px; }
  footer.site .top { grid-template-columns: 1fr 1fr; gap: 26px 18px; padding-bottom: 32px; }
  footer.site .col.brand { grid-column: 1 / -1; }
  footer.site .col > a { padding: 7px 0; font-size: calc(13.5px * var(--tbp-fsx-foot, 1)); }
  footer.site .ft-cta { margin-bottom: 36px; gap: 12px; }
  footer.site .ft-cta > a { padding: 16px 18px; gap: 12px; }
  .sf-btns { display: grid; grid-template-columns: 1fr 1fr; }
  .sf-btn { justify-content: center; }
  footer.site .languages span { flex-basis: 100%; } /* label on its own line, pills row under it */
  footer.site .bottom { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
  footer.site .bottom .left { justify-content: center; }
}

/* ── Social-follow (footer) ──────────────────────────────────── */
.social-follow { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
.sf-lbl {sf-lbl}
.sf-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.sf-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--btn-radius, 8px); cursor: pointer; font-family: var(--font-urdu); font-weight: 600; font-size: 13px; border: 1px solid #2a2a2a; color: var(--ink-300); transition: all .15s; background: none; text-decoration: none; }
.sf-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.sf-btn.wa:hover { background: #25D366; border-color: #25D366; color: var(--white); }
.sf-btn.tg:hover { background: #2AABEE; border-color: #2AABEE; color: var(--white); }
.sf-btn.yt:hover { background: #FF0000; border-color: #FF0000; color: var(--white); }
.sf-btn.x:hover { background: var(--white); border-color: var(--white); color: #000; }
.sf-btn.facebook:hover { background: #1877F2; border-color: #1877F2; color: var(--white); }
.sf-btn.instagram:hover { background: #E4405F; border-color: #E4405F; color: var(--white); }
.sf-btn.tiktok:hover { background: var(--white); border-color: var(--white); color: #000; }
.sf-btn.linkedin:hover { background: #0A66C2; border-color: #0A66C2; color: var(--white); }
.sf-btn.threads:hover { background: var(--white); border-color: var(--white); color: #000; }
.sf-btn.mastodon:hover { background: #6364FF; border-color: #6364FF; color: var(--white); }
.sf-btn.bluesky:hover { background: #0085FF; border-color: #0085FF; color: var(--white); }
.sf-btn.nostr:hover { background: #8E30EB; border-color: #8E30EB; color: var(--white); }
.sf-btn.substack:hover { background: #FF6719; border-color: #FF6719; color: var(--white); }
.sf-btn.google-news:hover { background: #4285F4; border-color: #4285F4; color: var(--white); }
.sf-btn.apple-news:hover { background: #FB1D4A; border-color: #FB1D4A; color: var(--white); }
.sf-btn.flipboard:hover { background: #E12828; border-color: #E12828; color: var(--white); }
.sf-btn.feedly:hover { background: #2BB24C; border-color: #2BB24C; color: var(--white); }

/* ── Crisis mode (topstrip CRISIS toggle) ────────────────────── */
html.crisis .crisis-toggle { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); color: var(--white); }
html.crisis .topstrip { background: var(--tbp-live); }
html.crisis .topstrip .sep { background: rgba(255,255,255,.3); }
html.crisis .topstrip .icon-btn { color: rgba(255,255,255,.75); }
html.crisis .topstrip .icon-btn:hover { color: var(--white); }
html.crisis .breaking.bn { background: var(--ink-950); border-top: 2px solid var(--tbp-live); }
html.crisis .navrail { border-top: 3px solid var(--tbp-live); }

/* ── Search overlay ──────────────────────────────────────────── */
.search-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(5,5,5,.88); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .2s ease; display: flex; align-items: flex-start; justify-content: center; padding: 64px 20px; }
.search-overlay.open { opacity: 1; pointer-events: all; }
.search-box { width: 100%; max-width: 740px; background: var(--tbp-card); border-radius: 16px; overflow: hidden; box-shadow: 0 32px 80px rgba(0,0,0,.45); transform: translateY(-16px); transition: transform .2s ease; }
.search-overlay.open .search-box { transform: translateY(0); }
.search-input-row { display: flex; align-items: center; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--tbp-line); }
.search-input-row svg { width: 20px; height: 20px; color: var(--tbp-text-3); flex-shrink: 0; }
.search-input-row input { flex: 1; border: none; outline: none; background: none; font-family: var(--font-urdu); font-size: 22px; font-weight: 500; color: var(--tbp-text); }
.search-input-row input::placeholder { color: var(--tbp-text-3); }
.s-close { width: 34px; height: 34px; border-radius: 50%; background: var(--tbp-line); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--tbp-text-2); flex-shrink: 0; font-size: 18px; line-height: 1; }
.s-close:hover { background: var(--tbp-red); color: var(--white); }
/* Scope toggle — only on section pages: search THIS section vs all of TBP. */
.search-scope { padding: 12px 24px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.scope-pill { background: none; border: 1px solid var(--tbp-line-2, var(--tbp-line)); padding: 5px 14px; border-radius: 999px; font-family: var(--font-urdu); font-size: 12px; font-weight: 700; color: var(--tbp-text-2); cursor: pointer; transition: all .15s; }
.scope-pill:hover { border-color: var(--tbp-red); color: var(--tbp-red); }
.scope-pill.active { background: var(--tbp-red); border-color: var(--tbp-red); color: var(--white); }
.search-pills { padding: 12px 24px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--tbp-line); font-family: var(--font-urdu); font-size: 12px; color: var(--tbp-text-3); }
.search-pill { background: var(--tbp-line); padding: 4px 12px; border-radius: 999px; font-size: 12px; color: var(--tbp-text-2); cursor: pointer; }
.search-pill:hover { background: var(--tbp-red); color: var(--white); }
.search-results { min-height: 160px; padding: 12px 24px; }
.search-empty { padding: 36px 0; text-align: center; font-family: var(--font-urdu); font-size: 15px; color: var(--tbp-text-3); }
.s-result { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--tbp-line); cursor: pointer; }
.s-result:last-child { border-bottom: 0; }
.s-result:hover .s-title { color: var(--tbp-red); }
.s-rimg { width: 56px; height: 44px; border-radius: 6px; background: linear-gradient(135deg, var(--ink-300), var(--ink-600)); }
.s-cat { font-family: var(--font-urdu); font-size: 11px; color: var(--tbp-red); font-weight: 700; margin-bottom: 3px; }
.s-title { font-family: var(--font-urdu); font-size: 14px; font-weight: 600; color: var(--tbp-text); line-height: 1.45; }
html.dark .search-box { background: #1a1a1a; }
html.dark .s-close { background: #2a2a2a; }
html.dark .search-pill { background: #2a2a2a; color: var(--tbp-text-2); }

/* ── Scroll-reveal (class added by app.js; reduced-motion users never get it) ── */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
  .reveal.is-in { opacity: 1; transform: none; }
}

/* ── Category / section archive — from the claude.ai/design "section-ur" handoff ──
   Red gradient header band + count + toolbar, essay-card grid, custom pager.
   Local names are pure ALIASES into the global design system, so the section
   follows Global Styles (one-place colour) + dark mode automatically — no
   hardcoded hex here. (--ink-*/--red inherit straight from tokens.css.) */
.sec-page {
  --red:        var(--brand-600);
  --red-strong: color-mix(in srgb, var(--brand-600), #000 20%);
  --red-lift:   color-mix(in srgb, var(--brand-600), #fff 26%);
  --hair:   var(--ink-150);
  --sunken: var(--paper-sunken);
  --card:   var(--paper-card);
  --disp: var(--font-display);
  --mono: var(--font-mono);
  --ur:   var(--font-urdu);
}

/* header — flat, restrained (retired the red gradient band to match the article page) */
.ah-band { padding:2px 0 24px; margin-top:4px; color:var(--ink-900); border-bottom:1px solid var(--hair); }
.ah-eyebrow {ah-eyebrow}
.ah-main { display:flex; align-items:flex-end; justify-content:space-between; gap:48px; }
.ah-title { font-family:var(--ur); font-weight:700; font-size:clamp(34px,4.6vw,52px); line-height:1.22; margin:0; color:var(--ink-900); letter-spacing:-.01em; }
.ah-sf { font-family:var(--ur); font-weight:400; font-size:19px; line-height:1.9; color:var(--ink-600); margin:16px 0 0; max-width:58ch; }
.ah-count { text-align:center; flex:none; }
.ah-count b { display:block; font-family:var(--disp); font-weight:700; font-size:52px; line-height:.86; color:var(--ink-900); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.ah-count .lbl { display:block; font-family:var(--ur); font-size:13px; color:var(--ink-500); margin-top:10px; }
.ah-count .upd { display:block; font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--ink-400); margin-top:6px; }

/* toolbar — single row under the header, no double rule */
.ah-bar { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding:16px 0 0; }
.ah-tools { display:flex; align-items:center; gap:14px; }
.ah-sort { display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-400); }
.ah-sort select { font-family:var(--ur); font-size:13px; color:var(--ink-700); background:var(--card); border:1px solid var(--hair); border-radius:var(--btn-radius, 4px); padding:6px 12px; cursor:pointer; }
.ah-rss { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid var(--hair); border-radius:var(--btn-radius, 4px); color:var(--ink-400); cursor:pointer; text-decoration:none; transition:color .15s, border-color .15s; }
.ah-rss:hover { color:var(--red); border-color:var(--red); }

/* essay grid — flat cards, 7:4 images, hairline meta */
.essay-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:40px 30px; margin-top:42px; }
.arch-empty { grid-column: 1 / -1; font-family: var(--font-urdu); font-size: 16px; color: var(--ink-500); padding: 28px 0; margin: 0; }
.ecard { display:flex; flex-direction:column; cursor:pointer; }
.ec-img { position:relative; aspect-ratio:7/4; border-radius:8px; overflow:hidden; background:var(--sunken); background-size:cover; background-position:center; transition:opacity .15s ease; }
.ec-img::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 46%,rgba(0,0,0,.42)); }
.ecard:hover .ec-img { opacity:.92; }
.ec-kk {ec-kk}
.ec-title { font-family:var(--ur); font-weight:700; font-size:20px; line-height:1.62; margin:0; text-align:right; letter-spacing:-.005em; text-wrap:pretty; }
.ec-title a { color:var(--ink-900); text-decoration:none; transition:color .15s; }
.ecard:hover .ec-title a { color:var(--red); }
.ec-dek { font-family:var(--ur); font-weight:400; font-size:14px; line-height:1.95; color:var(--ink-500); margin:11px 0 0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.ec-date { font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; color:var(--ink-400); margin-top:auto; padding-top:14px; }

/* pager — mono numerals (English), flat (paginate_links output) */
.sec-pager { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:60px; flex-wrap:wrap; }
.sec-pager .page-numbers { min-width:42px; height:42px; padding:0 15px; display:inline-flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:13px; color:var(--ink-700); background:transparent; border:1px solid var(--hair); border-radius:4px; text-decoration:none; transition:border-color .15s, color .15s; }
.sec-pager a.page-numbers:hover { border-color:var(--red); color:var(--red); }
.sec-pager .page-numbers.current { background:var(--red-strong); border-color:var(--red-strong); color:#fff; font-weight:600; }
.sec-pager .page-numbers.dots { border:0; min-width:20px; color:var(--ink-400); }
.sec-pager .prev, .sec-pager .next { font-family:var(--ur); font-weight:600; font-size:14px; }

@media (max-width:1000px){ .essay-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px){
  .ah-band { padding:2px 0 20px; }
  .ah-main { flex-direction:column; align-items:flex-start; gap:22px; }
  .ah-count { text-align:right; }
  .essay-grid { grid-template-columns:1fr; }
}

/* Per-role typography hooks (TBP Studio ▸ Design ▸ Typography).
   Base values live in the rules above; Studio supplies only a multiplier or a
   family, so this stylesheet stays the single source of truth for the design. */
footer.site { font-family: var(--tbp-ff-foot, inherit); }
.navrail, .topstrip { font-family: var(--tbp-ff-ui, inherit); }
.ah-eyebrow, .ec-kk, .sf-lbl { font-family: var(--tbp-ff-kick, inherit); }