/* ============================================================
   Digital Pakistan Network — mockup design system
   Dark branded "chrome" + light, readable content surface.
   RTL-first (Urdu primary); written with CSS logical properties
   so the same rules serve LTR English.
   ============================================================ */

/* ---- Sindhi fonts with size-adjust to normalize visual size ---- */
@font-face {
  font-family: "MBSaremIqra";
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  size-adjust: 120%;
  src:
    local("MBSaremIqra"),
    url(../fonts/mbsaremiqra.woff2) format("woff2"),
    url(../fonts/mbsaremiqra.woff) format("woff");
}

@font-face {
  font-family: "Lateef";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  size-adjust: 120%;
  src:
    local("Lateef"),
    url(../fonts/lateef-v35-arabic-regular.woff2) format("woff2");
}

@font-face {
  font-family: "Lateef";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  size-adjust: 120%;
  src:
    local("Lateef"),
    url(../fonts/lateef-v35-arabic-700.woff2) format("woff2");
}

:root{
  /* Brand chrome (dark — navy/blue, matched to logo) */
  --ink:#05101e; --pine:#071428; --pine-2:#0c1a30; --pine-line:#1b2e4c;
  --signal:#1485e8; --signal-dim:#0e6ccc; --gold:#E9B949; --live:#E5392F;
  --crescent:#edf2fb;

  /* Content surface (light) */
  --paper:#f5f8fc; --card:#FFFFFF; --line:#e2e8f2;
  --text:#111827;            /* body text on light */
  --muted:#52606f;           /* secondary text */
  --green-ink:#0a55c4;       /* AA-contrast blue for links/labels on light */
  --gold-ink:#9A7510;

  /* Fonts */
  --f-brand:"Oswald","Arial Narrow",sans-serif;          /* logo, labels, ticker */
  --f-latin:"Libre Franklin",system-ui,sans-serif;        /* UI / meta / numbers */
  --f-serif:"Merriweather",Georgia,serif;                 /* English headlines/body */
  --f-ur:"Noto Nastaliq Urdu",serif;                      /* Urdu */
  --f-sd:"MBSaremIqra","Lateef","Noto Naskh Arabic",serif; /* Sindhi */

  --wrap:1440px;
  --gap:clamp(1rem,2vw,1.5rem);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  color:var(--text);
  font-family:var(--f-ur),var(--f-latin),sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
  /* Light-surface "atmosphere": faint brand glow + fine fractal grain,
     a light-mode echo of the dark index.html background. Cards sit on
     solid white above it, so only the gutters pick up the texture. */
  background-color:var(--paper);
  background-image:
    radial-gradient(72vw 46vh at 88% -10%, rgba(20,133,232,.09), transparent 60%),
    radial-gradient(60vw 42vh at -8% 6%, rgba(233,185,73,.06), transparent 58%),
    repeating-linear-gradient(to bottom, transparent 0 3px, rgba(5,16,30,.04) 3px 4px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat,repeat,repeat;
  background-size:auto,auto,auto,200px 200px;
  background-attachment:fixed,fixed,fixed,fixed;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* Text selection — brand red from the logo, not the browser default */
::selection{background:var(--live);color:#fff}
::-moz-selection{background:var(--live);color:#fff}

/* Language-scoped fonts */
:lang(en){font-family:var(--f-serif)}
/* Sindhi: remap the Urdu custom property to the Sindhi stack so every component
   rule that hard-codes var(--f-ur) (titles, cards, nav, …) renders in MB Sarem
   Iqra without needing a per-component :lang(sd) override. */
:lang(sd){font-family:var(--f-sd);--f-ur:var(--f-sd)}
/* ---------- i18n-aware text utilities ----------
   --f-latin/--f-brand cover Latin script only. Never hardcode either of them
   directly on an element that can hold translated/localized text (anything
   through dpnn_t(), a post/category/author title, a date, an excerpt, …) —
   real Urdu/Sindhi text forced into them silently falls back to a generic
   serif. Default such text to var(--f-ur) (Sindhi is auto-remapped by the
   :lang(sd) rule above) and add a :lang(en) override for the English look.
   Reach for one of these two ready-made classes instead of repeating that
   pair by hand on a new component; `.latin` is only for content that is
   deliberately Latin-script in every language (raw numbers, URLs, the
   English wordmark) and never needs a :lang() override. See CLAUDE.md
   "Fonts must always match the current language" for the full rule. */
.i18n{font-family:var(--f-ur)}
:lang(en) .i18n{font-family:var(--f-serif)}
.i18n-label{font-family:var(--f-ur)}
:lang(en) .i18n-label{font-family:var(--f-brand);text-transform:uppercase}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1rem,3vw,2rem)}
.latin{font-family:var(--f-latin)}

/* ---------- Top bar (dark chrome) ---------- */
.topbar{background:var(--ink);color:var(--crescent);border-bottom:1px solid var(--pine-line)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:42px}
/* The clock bar is always Latin/English — the explicit child selectors beat the
   :lang(sd)/:lang(en) body-font rules that would otherwise match the inner
   time/date nodes directly. One font + one size for the whole line. */
.topbar__clock,.topbar__clock b,.topbar__clock span{font-family:var(--f-latin);font-size:.74rem;font-weight:400}
.topbar__clock{letter-spacing:.06em;color:#9fb3a7;font-variant-numeric:tabular-nums}
.topbar__clock b{color:var(--crescent)}
.topbar__right{display:flex;align-items:center;gap:1.1rem}
/* Each link's own script (اردو/English/سنڌي), never the ambient page language —
   .langs a lang="…" is set per link in site-header/render.php so :lang(sd)/
   the .latin class on the English link win regardless of what page you're on. */
.langs{display:flex;gap:.15rem;font-family:var(--f-ur);font-size:.74rem}
.langs a{padding:.2rem .5rem;border-radius:5px;color:#9fb3a7;letter-spacing:.04em}
.langs a.is-active{background:var(--signal);color:#03210F;font-weight:600}
.langs a:hover{color:var(--crescent)}
.social-mini{display:flex;align-items:center;gap:.7rem}
.social-mini a{color:#9fb3a7;display:flex;align-items:center}
.social-mini a:hover{color:var(--signal)}
.social-mini svg{width:16px;height:16px;display:block}
.search-ico{margin-inline-start:.15rem}
/* Redundant once .masthead-search is visible (>900px) — mobile/tablet still
   need it since .masthead-search hides there. */
@media (min-width:901px){.search-ico{display:none}}

/* ---------- Masthead ---------- */
.masthead{background:var(--pine);color:var(--crescent)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:clamp(.25rem,.6vw,.4rem)}
.brand{display:inline-flex;align-items:center;gap:clamp(.6rem,1vw,1rem)}
/* Logo is a square JPG with its own dark-navy background; sits as a contained
   badge on the navy masthead. Height scales with viewport. */
.brand__logo{height:clamp(40px,4.6vw,84px);width:auto;display:block;border-radius:10px}
.brand__name{
  color:var(--crescent);font-family:var(--f-ur);font-weight:700;
  font-size:clamp(1rem,2vw,1.6rem);line-height:1.7;
  text-shadow:0 0 10px rgba(237,242,251,.35),0 1px 1px rgba(0,0,0,.4);
}
:lang(en) .brand__name{font-family:var(--f-brand);font-size:clamp(.85rem,1.6vw,1.35rem);text-transform:uppercase;letter-spacing:.04em;line-height:1.2}
:lang(sd) .brand__name{font-family:var(--f-sd)}
:lang(sd) .masthead .brand__name{font-size:clamp(1.35rem,2.7vw,2.1rem)}

/* Name and slogan use different font-families (headline vs body/latin), whose
   baselines sit at different offsets within the em-box — align-items:baseline
   visibly misaligns them, so center on the line box instead. */
.brand__text{display:inline-flex;flex-direction:row;align-items:center;flex-wrap:wrap;column-gap:.6rem;row-gap:0}
.brand__slogan{
  color:var(--crescent);font-family:var(--f-ur);font-weight:400;opacity:.7;
  font-size:clamp(.6rem,1vw,.78rem);line-height:1.3;
  position:relative;top:3px;
}
:lang(en) .brand__slogan{font-family:var(--f-latin);font-size:clamp(.52rem,.85vw,.68rem);text-transform:uppercase;letter-spacing:.03em}
:lang(sd) .brand__slogan{font-family:var(--f-sd)}

@media(max-width:560px){
  .brand__name{font-size:.82rem;line-height:1.6}
  :lang(sd) .brand__name{font-size:.9rem}
  .brand__slogan{font-size:.62rem}
  :lang(sd) .brand__slogan{font-size:.68rem}
}
.ad{background:repeating-linear-gradient(45deg,#0c1c35,#0c1c35 10px,#091527 10px,#091527 20px);
  border:1px dashed var(--pine-line);border-radius:6px;display:grid;place-items:center;
  color:#9fc2ad;font-family:var(--f-ur);font-weight:700;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;min-height:60px}
:lang(en) .ad{font-family:var(--f-brand)}
.ad--light{background:repeating-linear-gradient(45deg,#e2e4dc,#e2e4dc 10px,#d9dbd1 10px,#d9dbd1 20px);
  border-color:var(--line);color:#454d44}
.ad--rect{min-height:250px}
.ad{display:none} /* ad placeholders hidden for now */

/* Masthead search — icon, input and submit button visually merged into one pill,
   sunk into the masthead's own dark-navy surface rather than floating as a
   bright card on top of it. */
.masthead-search{
  flex:1;max-width:480px;
  display:flex;align-items:stretch;
  background:var(--pine-2);
  border:1px solid var(--pine-line);
  border-radius:999px;
  overflow:hidden;
}
.masthead-search:focus-within{border-color:var(--signal);box-shadow:0 0 0 2px rgba(20,133,232,.35)}
.masthead-search__icon{
  flex:0 0 auto;display:flex;align-items:center;
  padding-inline-start:1rem;color:#9fb3a7;
}
.masthead-search__icon svg{width:18px;height:18px}
.masthead-search__input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  padding:.6rem .75rem;font-family:var(--f-ur);font-size:.92rem;color:var(--crescent);
}
:lang(en) .masthead-search__input{font-family:var(--f-serif)}
.masthead-search__input::placeholder{color:#71839c}
.masthead-search__btn{
  flex:0 0 auto;border:0;cursor:pointer;
  padding:.6rem 1.4rem;background:var(--pine-line);color:var(--crescent);
  font-family:var(--f-ur);font-weight:600;font-size:.88rem;
  transition:background .15s;
}
:lang(en) .masthead-search__btn{font-family:var(--f-brand);text-transform:uppercase;letter-spacing:.03em}
.masthead-search__btn:hover{background:color-mix(in srgb,var(--pine-line) 55%,var(--signal) 45%)}

/* ---------- Main nav ---------- */
/* Both the admin-curated menu (wp_nav_menu) and the category-list fallback
   render the same <ul class="mainnav__list"><li><a> markup, so one rule set
   covers both. A per-category link sets --cat inline (see
   dpnn_render_nav_cat_link() / the nav_menu_link_attributes filter in
   inc/nav-menu.php); links without one (Home, "More") fall back to the
   plain nav colors. */
.mainnav{background:var(--ink);position:sticky;top:0;z-index:40;border-block:1px solid var(--pine-line)}
.mainnav .wrap{display:flex;align-items:stretch;gap:.1rem;overflow-x:auto;scrollbar-width:none}
.mainnav .wrap::-webkit-scrollbar{display:none}
/* flex:1 + min-width:0 is load-bearing: without it this flex item reports its
   own natural content width via getBoundingClientRect(), not the space
   actually available in .mainnav .wrap — header.js's overflow measurement
   (assets/js/header.js recalculate()) reads that width as "available", so
   without this the last item spuriously overflows into "More" even when
   there's plenty of real screen space left. */
.mainnav__list{display:flex;flex:1 1 0;min-width:0;align-items:stretch;gap:.1rem;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
.mainnav__list::-webkit-scrollbar{display:none}
.mainnav__list li{display:flex;align-items:stretch;position:relative}
.mainnav__list a{display:flex;align-items:center;white-space:nowrap;padding:.85rem 1rem;color:#cfe0d6;font-family:var(--f-ur);font-size:1.02rem;line-height:1.6;position:relative}
:lang(en) .mainnav__list a{font-family:var(--f-latin);font-weight:600;font-size:.86rem;text-transform:uppercase;letter-spacing:.03em}
.mainnav__list a:hover{color:#fff;background:var(--cat,var(--pine))}
.mainnav__list a.is-active{color:#fff}
.mainnav__list a.is-active::after,
.mainnav__list li.current-menu-item a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--cat,var(--signal))}
.mainnav__list li.current-menu-item a{color:#fff}
.mainnav__list a.home,
.mainnav__list li.home>a{color:var(--gold)}

/* "More" overflow dropdown — shown once header.js measures that not every
   top-level item fits the nav's rendered width (see dpnn_nav_more_html()
   in inc/nav-menu.php and the priority-nav pass in header.js). Hidden by
   default via inline style at render time, so no base display rule here. */
.mainnav__more{position:relative}
.mainnav__more-toggle{display:flex;align-items:center;gap:.35rem;white-space:nowrap;padding:.85rem 1rem;
  background:none;border:0;cursor:pointer;color:#cfe0d6;font-family:var(--f-ur);font-size:1.02rem;line-height:1.6}
:lang(en) .mainnav__more-toggle{font-family:var(--f-latin);font-weight:600;font-size:.86rem;text-transform:uppercase;letter-spacing:.03em}
.mainnav__more-toggle::after{content:"";flex:0 0 auto;width:0;height:0;border:4px solid transparent;
  border-top-color:currentColor;transition:transform .15s}
.mainnav__more-toggle:hover,.mainnav__more.is-open .mainnav__more-toggle{color:#fff;background:var(--pine)}
.mainnav__more.is-open .mainnav__more-toggle::after{transform:rotate(180deg)}
/* position:fixed and moved to a direct child of <body> while open (see
   header.js): .wrap needs overflow-x:auto for horizontal scroll on narrow
   screens, which (per the CSS overflow spec) forces overflow-y to auto too,
   clipping an absolutely-positioned dropdown here — and .mainnav's own
   position:sticky+z-index stacking context would otherwise still confine a
   merely-fixed descendant behind later same-level page content regardless of
   z-index. Reparenting to <body> escapes both — but it also moves the
   dropdown out from under .mainnav__list, so every rule it needs (color,
   font, hover, active state) has to be self-contained here instead of
   inherited from .mainnav__list's descendant selectors, which no longer
   match once it's a child of <body>. */
.mainnav__submenu{display:none;position:fixed;z-index:1000;min-width:200px;max-width:min(280px,calc(100vw - 24px));
  flex-direction:column;gap:.15rem;list-style:none;margin:0;padding:.4rem;background:var(--ink);
  border:1px solid var(--pine-line);border-radius:10px;box-shadow:0 16px 32px rgba(0,0,0,.4);
  max-height:min(60vh,420px);overflow-y:auto}
.mainnav__submenu.is-open{display:flex}
@media (prefers-reduced-motion:no-preference){
  .mainnav__submenu{opacity:0;transform:translateY(-4px);transition:opacity .12s ease,transform .12s ease}
  .mainnav__submenu.is-open{opacity:1;transform:translateY(0)}
}
.mainnav__submenu li{display:flex;margin:0;padding:0}
.mainnav__submenu a{display:flex;align-items:center;justify-content:center;text-align:center;width:100%;border-radius:6px;padding:.7rem .9rem;
  color:#cfe0d6;font-family:var(--f-ur);font-size:.95rem;line-height:1.3;white-space:normal}
:lang(en) .mainnav__submenu a{font-family:var(--f-latin);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.03em}
.mainnav__submenu a:hover,.mainnav__submenu a:focus-visible{color:#fff;background:var(--cat,var(--pine));outline:0}
.mainnav__submenu a.is-active,
.mainnav__submenu li.current-menu-item a{color:#fff;font-weight:700;background:var(--cat,var(--pine-2))}

/* ---------- Breaking ticker ---------- */
.ticker{display:flex;align-items:stretch;background:var(--ink);color:var(--crescent);overflow:hidden;border-bottom:1px solid var(--pine-line)}
.ticker__flag{flex:0 0 auto;display:flex;align-items:center;gap:.5rem;background:var(--live);color:#fff;
  font-family:var(--f-ur);text-transform:uppercase;letter-spacing:.06em;font-weight:600;font-size:.85rem;
  padding-inline:clamp(.9rem,2vw,1.3rem);clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%)}
:lang(en) .ticker__flag{font-family:var(--f-brand)}
[dir="rtl"] .ticker__flag{clip-path:polygon(12px 0,100% 0,100% 100%,0 100%)}
.ticker__flag .pulse{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
/* direction:ltr here (not just on the strip) so the overflowing strip is
   left-anchored in every language — in an RTL track it would otherwise be
   right-aligned, breaking the seamless-loop geometry. */
.ticker__track{flex:1;min-width:0;overflow:hidden;white-space:nowrap;position:relative;direction:ltr}
/* Force the strip itself to LTR so the scroll geometry is identical in every
   language (the leftward translate + seamless loop that already works in
   English). Each headline keeps its own correct direction via plaintext bidi. */
.ticker__move{display:inline-flex;align-items:center;gap:0;padding-block:.6rem;direction:ltr;animation:tick 16s linear infinite}
/* RTL languages read right-to-left, so the ticker scrolls the opposite way
   (headlines enter from the left, move right). The strip stays LTR-anchored
   above for gapless geometry; only the animation playback flips. */
[dir="rtl"] .ticker__move{animation-direction:reverse}
.ticker__track:hover .ticker__move,.ticker__track:focus-within .ticker__move{animation-play-state:paused}
.ticker__move a{padding-inline:0;font-size:.95rem;color:#cfe0d6;unicode-bidi:plaintext}
.ticker__move a:not(:last-child)::after{content:"";display:inline-block;width:.4rem;height:.4rem;border-radius:50%;background:var(--signal-dim);margin-inline:1.4rem;vertical-align:middle}
.ticker__move a:hover{color:#fff}
.ticker__live-tag{display:inline-block;background:var(--live);color:#fff;font-family:var(--f-ur);font-size:.65rem;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:.05rem .4rem;border-radius:3px;
  margin-inline-end:.4rem;vertical-align:middle}
:lang(en) .ticker__live-tag{font-family:var(--f-brand)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Section heading ---------- */
.shead{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-block:2.2rem 1.1rem;
  padding-bottom:.8rem;border-bottom:1px solid var(--line)}
.shead__title{display:flex;align-items:center;gap:.6rem;font-family:var(--f-ur);font-size:1.4rem;font-weight:700;color:var(--text)}
:lang(en) .shead__title{font-family:var(--f-brand);text-transform:uppercase;letter-spacing:.01em}
.shead__title::before{content:"";width:5px;height:1.2em;background:linear-gradient(to bottom,var(--signal) 40%,var(--gold));border-radius:3px;flex:0 0 auto}
/* Category-colored solid accent when --c is set on .shead */
.shead[style*="--c"] .shead__title::before{background:var(--c)}
.shead__more{font-family:var(--f-ur);font-size:.78rem;color:var(--green-ink);font-weight:600;letter-spacing:.04em}
:lang(en) .shead__more{font-family:var(--f-latin)}
.shead__more:hover{color:var(--signal-dim)}

/* ---------- Cards ---------- */
.media{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:#dfe3dd}
.media img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.card:hover .media img{transform:scale(1.04)}
.kicker{display:inline-block;align-self:flex-start;font-family:var(--f-ur);font-size:clamp(.6rem,1.6vw,.7rem);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:var(--green-ink);padding:clamp(.15rem,.5vw,.2rem) clamp(.4rem,1.6vw,.55rem);border-radius:3px}
:lang(en) .kicker{font-family:var(--f-brand)}
:lang(ur) .kicker{padding:.3rem .7rem}
.kicker--gold{background:var(--gold-ink)} .kicker--live{background:var(--live)}
.card{display:flex;flex-direction:column;gap:.55rem}
.card__title{font-family:var(--f-ur);font-weight:700;line-height:1.85;color:var(--text)}
:lang(en) .card__title{font-family:var(--f-serif);line-height:1.3}
.card a.card__title:hover{color:var(--green-ink)}
.card__meta{display:flex;gap:.6rem;align-items:center;font-family:var(--f-ur);font-size:.74rem;color:var(--muted)}
:lang(en) .card__meta{font-family:var(--f-serif)}
.card__meta .dot{width:3px;height:3px;border-radius:50%;background:#c2c8bf}
body.home .card__meta{display:none} /* no time-ago on the homepage */

/* Hero */
.hero{display:grid;grid-template-columns:1fr 2fr 1fr;gap:var(--gap);margin-top:1.4rem;container-type:inline-size}
.hero__side{order:1}
.hero__timeline{order:3;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1rem 1.2rem;display:flex;flex-direction:column}
/* Hero: whole-image tint normalizes brightness across every photo, so the
   short scrim below only has to carry the title, not fight a bright photo. */
.tint{position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(8,18,34,.34);mix-blend-mode:multiply}
.scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(4,10,20,.8) 0%,transparent 55%)}

/* Hero: side cards — overlay style matching lead but compact for narrow column */
.hero__side__card .media{aspect-ratio:5/3;border-radius:10px}
.hero__side__body{position:absolute;inset-inline:0;bottom:0;z-index:2;
  padding:clamp(.6rem,1.2vw,.9rem);display:flex;flex-direction:column;align-items:flex-start;gap:.25rem}
.hero__side__body .card__title{color:#fff;font-size:clamp(.9rem,1.1vw,1.05rem);line-height:1.8;text-shadow:0 1px 3px rgba(0,0,0,.6),0 2px 10px rgba(0,0,0,.4)}
.hero__side__body .card__title:hover{color:var(--signal)}
.hero__side__card .kicker{position:absolute;top:.45rem;inset-inline-start:.45rem;z-index:3;font-size:clamp(.66rem,1.8vw,.78rem);padding:clamp(.18rem,.6vw,.25rem) clamp(.4rem,1.6vw,.55rem)}
:lang(ur) .hero__side__card .kicker{padding:.35rem .7rem}
.hero__side__card .card__meta--corner{position:absolute;top:.45rem;inset-inline-end:.45rem;z-index:3;
  background:rgba(4,10,20,.55);color:#fff;font-size:.7rem;padding:.25rem .55rem;border-radius:4px;line-height:1}
/* Hero: extra cards (below main hero) — clean, untinted image; kicker + time-ago
   stay as corner badges, but the title sits below the photo like the plain
   section-grid cards instead of overlaid on it. */
.hero__extra__body{padding-top:.6rem}
.hero__extra__body .card__title:hover{color:var(--green-ink)}
/* Hero: lead card — same tint + scrim treatment, larger scale */
.hero__lead .media{aspect-ratio:2/1;border-radius:14px}
.hero__lead__body{position:absolute;inset-inline:0;bottom:0;z-index:2;
  padding:clamp(.9rem,2.5vw,1.6rem);display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}
.hero__lead__body .card__title{color:#fff;font-size:clamp(1.2rem,2.08vw,1.76rem);line-height:1.75;text-shadow:0 1px 4px rgba(0,0,0,.6),0 2px 14px rgba(0,0,0,.4)}
.hero__lead__body .card__title:hover{color:var(--signal)}
.hero__lead__body .dek{color:rgba(237,242,251,.78);font-family:var(--f-ur);line-height:1.9;font-size:clamp(.9rem,1.3vw,1.02rem)}
:lang(en) .hero__lead__body .dek{font-family:var(--f-serif)}
.hero__lead .kicker{position:absolute;top:.7rem;inset-inline-start:.7rem;z-index:3;font-size:clamp(.68rem,2vw,.82rem);padding:clamp(.2rem,.7vw,.3rem) clamp(.45rem,1.8vw,.65rem)}
:lang(ur) .hero__lead .kicker{padding:.4rem .8rem}
.hero__lead .card__meta--corner{position:absolute;top:.7rem;inset-inline-end:.7rem;z-index:3;
  background:rgba(4,10,20,.55);color:#fff;font-size:.74rem;padding:.3rem .65rem;border-radius:4px;line-height:1}
.hero__side{display:flex;flex-direction:column;gap:1rem}
.hero__side .widget--flush{margin-bottom:0;align-self:start}
.hero__extra{display:flex;gap:var(--gap)}
.hero__extra>.card{flex:1;min-width:0}
/* Make .hero__extra cards the exact same height as .hero__side cards.
   Side card .media height = (hero_width - 2*gap) / 8 * 1.2 from aspect-ratio:5/3.
   Since extra cards sit in the 2fr column their width differs, so we
   compute the matching height directly from the hero container width
   (100cqw). Only applies when the 3-column grid is active (hero width ≥ 847px
   → viewport > 900px where @media (max-width:900px) is not active).
   Below that, the 1-column layout stacks everything so matching is unneeded. */
@container (min-width:847px){
  .hero__extra .media{aspect-ratio:auto;height:calc((100cqw - 2 * var(--gap)) / 8 * 1.2)}
  .hero__lead .media{aspect-ratio:auto;height:calc((100cqw - 2 * var(--gap)) / 4 + 1rem)}
}

.hrow{display:grid;grid-template-columns:1fr 1.3fr;gap:.8rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.hrow:last-child{border-bottom:0;padding-bottom:0}
.hrow .media{aspect-ratio:4/3}
.hrow > div{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem}
.hrow .card__title{font-size:1rem}

/* Generic grids */
.grid{display:grid;gap:var(--gap)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid .card__title{font-size:1.05rem}
:lang(en) .grid .card__title{font-size:1rem}

/* Layout with sidebar */
.layout{display:grid;grid-template-columns:1fr 320px;gap:clamp(1.5rem,3vw,2.5rem);margin-top:1.5rem}
.divider{height:1px;background:var(--line);margin-block:1.8rem}

/* Section block tint */
.block{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--c,var(--signal));border-radius:12px;padding:1.4rem 1.5rem 1.6rem}

/* Videos */
.videos{background:var(--pine);color:var(--crescent);border-radius:14px;padding:1.3rem 1.4rem 1.6rem;margin-top:1.8rem}
.videos .shead__title{color:#fff}.videos .shead__title::before{background:var(--live)}
.videos .shead__more{color:var(--signal)}
.vcard .media{border-radius:8px}
.vcard .play{position:absolute;inset:0;display:grid;place-items:center}
.vcard .play span{width:48px;height:48px;border-radius:50%;background:rgba(229,57,47,.92);display:grid;place-items:center}
.vcard .play svg{width:18px;height:18px;fill:#fff;margin-inline-start:2px}
.vcard .card__title{color:#eaf2ec;font-size:.95rem;margin-top:.6rem}
.vcard a.card__title:hover{color:var(--signal)}
.vcard .card__meta{color:#9fb3a7}

/* ---------- Sidebar widgets ---------- */
.widget{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.2rem 1.3rem;margin-bottom:1.4rem}
.widget__head{font-family:var(--f-ur);font-weight:700;font-size:1.15rem;margin-bottom:.9rem;padding-bottom:.6rem;border-bottom:2px solid var(--signal)}
:lang(en) .widget__head{font-family:var(--f-brand);text-transform:uppercase}
.ranklist{list-style:none;display:flex;flex-direction:column;gap:1.5rem}
.ranklist li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.ranklist li:last-child{padding-bottom:0;border-bottom:0}
.ranklist .n{font-family:var(--f-brand);font-weight:700;font-size:1.5rem;color:var(--gold);line-height:1}
.ranklist a{font-family:var(--f-ur);font-weight:500;line-height:1.5;font-size:.95rem}
:lang(en) .ranklist a{font-family:var(--f-serif);line-height:1.35}
.ranklist a:hover{color:var(--green-ink)}

/* Newsletter widget */
.news-widget{background:linear-gradient(160deg,var(--pine),var(--ink));color:var(--crescent);border:0}
.news-widget .widget__head{color:#fff;border-color:var(--gold)}
.news-widget p{color:#bfd2c7;font-size:.9rem;margin-bottom:.9rem;font-family:var(--f-ur);line-height:1.9}
:lang(en) .news-widget p{font-family:var(--f-serif)}
.news-widget form{display:flex;flex-direction:column;gap:.55rem}
.news-widget input{padding:.7rem .8rem;border-radius:8px;border:1px solid var(--pine-line);background:#06111f;color:#fff;font-family:var(--f-ur)}
:lang(en) .news-widget input{font-family:var(--f-serif)}
.news-widget input::placeholder{color:#6f8a7c}
.news-widget button{padding:.7rem;border:0;border-radius:8px;background:var(--signal-dim);color:#fff;
  font-family:var(--f-ur);font-weight:600;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
:lang(en) .news-widget button{font-family:var(--f-brand)}
.news-widget button:hover{background:color-mix(in srgb,var(--signal-dim) 82%,black)}
.news-widget__status{font-size:.85rem;line-height:1.8;padding:.7rem .85rem;border-radius:8px;margin-bottom:.9rem;font-family:var(--f-ur);background:rgba(255,255,255,.08);color:var(--crescent);border:1px solid var(--pine-line)}
:lang(en) .news-widget__status{font-family:var(--f-serif)}
.news-widget__status--confirmed,.news-widget__status--pending{border-color:#4caf7d;color:#bdf0d5}
.news-widget__status--error,.news-widget__status--invalid{border-color:#e57373;color:#ffcdd2}

/* ---------- Live "time-ago" timeline (sidebar) ---------- */
/* Nastaliq "براہِ راست" has tall ascenders + deep descenders, so the pill
   needs a line-box taller than the glyphs (line-height) plus real vertical
   padding — otherwise the bottom of the text clips against the pill edge. */
.live-pill{display:inline-flex;align-items:center;gap:.42rem;background:var(--live);color:#fff;
  font-family:var(--f-ur);font-weight:700;font-size:.74rem;line-height:1.9;
  padding:.12rem .7rem .2rem;border-radius:6px;vertical-align:middle;margin-inline-start:.45rem}
:lang(en) .live-pill{font-family:var(--f-brand)}
.live-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;flex:0 0 auto;animation:pulse 1.6s ease-out infinite}
.live-strip__title{font-family:var(--f-ur);color:var(--text)}
:lang(en) .live-strip__title{font-family:var(--f-serif)}
.live-strip__title:hover{color:var(--green-ink)}
.live-strip__snippet{font-family:var(--f-ur);font-size:.78rem;color:var(--muted);letter-spacing:.01em}
:lang(en) .live-strip__snippet{font-family:var(--f-serif)}
.live-strip__cta{color:var(--green-ink)}
/* Recent articles — simple list (hero sidebar) */
.recent-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}
.recent-list__item{padding-bottom:1rem;border-bottom:1px solid var(--line)}
.recent-list__item:last-child{padding-bottom:0;border-bottom:0}
.opinion-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}
.opinion-list li{padding-bottom:1rem;border-bottom:1px solid var(--line)}
.opinion-list li:last-child{padding-bottom:0;border-bottom:0}
.hero__timeline .shead__more{display:block;text-align:center;margin-top:auto;cursor:pointer;
  padding:.7rem 1rem;border-radius:8px;background:var(--signal-dim);color:#fff;
  font-size:.88rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
:lang(en) .hero__timeline .shead__more{font-family:var(--f-brand)}
.hero__timeline .shead__more:hover{background:color-mix(in srgb,var(--signal-dim) 82%,black);color:#fff}
.t-time{display:block;font-family:var(--f-ur);font-size:.82rem;font-weight:700;
  line-height:1.5;color:var(--c,var(--green-ink));letter-spacing:.01em}
:lang(en) .t-time{font-family:var(--f-serif)}
.hero__timeline .t-time{color:var(--text)}
.t-title{display:block;font-family:var(--f-ur);font-weight:500;line-height:2;font-size:.98rem;
  color:var(--text);margin-top:.5rem}
:lang(en) .t-title{font-family:var(--f-serif);line-height:1.4}
.t-title:hover{color:var(--green-ink)}

/* ============================================================
   Article / reading page
   ============================================================ */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1.3rem;
  font-family:var(--f-ur);font-size:.8rem;color:var(--muted)}
:lang(en) .breadcrumb{font-family:var(--f-serif)}
.breadcrumb a{color:var(--green-ink)}.breadcrumb a:hover{color:var(--signal-dim)}
.breadcrumb .sep{display:inline-block;width:2px;height:.72rem;background:#000;font-size:0}

.post__head{margin-block:1rem 1.2rem}
.post__title{font-family:var(--f-ur);font-weight:700;color:var(--text);
  font-size:clamp(1.26rem,2.52vw,2.1rem);line-height:1.75;margin-top:.6rem}
:lang(en) .post__title{font-family:var(--f-serif);line-height:1.2}
.post__dek{font-family:var(--f-ur);color:var(--muted);font-size:clamp(1.05rem,1.6vw,1.32rem);
  line-height:2;margin-top:.8rem}
:lang(en) .post__dek{font-family:var(--f-serif)}

.byline{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:1.3rem;
  padding-block:1rem;border-block:1px solid var(--line)}
.byline__avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;background:#dfe3dd;flex:0 0 auto}
.byline__who{display:flex;flex-direction:column;gap:.15rem}
.byline__name{font-family:var(--f-ur);font-weight:700;color:var(--text);font-size:1rem}
:lang(en) .byline__name{font-family:var(--f-serif)}
.byline__name a:hover{color:var(--green-ink)}
.byline__meta{font-family:var(--f-ur);font-size:.76rem;color:var(--muted);display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
:lang(en) .byline__meta{font-family:var(--f-serif)}
.byline__meta .dot{width:3px;height:3px;border-radius:50%;background:#c2c8bf}
.share{display:flex;gap:.5rem;margin-inline-start:auto}
.share a,.share button{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--card);border:1px solid var(--line);color:var(--muted);transition:background .15s,color .15s}
.share a:hover,.share button:hover{color:#fff;border-color:transparent}
.share a svg,.share button svg{width:17px;height:17px;fill:currentColor}
.share .s-wa:hover{background:#25D366}.share .s-fb:hover{background:#1877F2}
.share .s-x:hover{background:#111}.share .s-cp:hover{background:var(--green-ink)}

/* article reuses home's .layout grid (1fr 320px) for identical width across pages */
.post__side{position:sticky;top:78px}

.post__hero{margin-top:.3rem}
figure.fig{margin:0}
figure.fig img{width:100%;border-radius:10px;background:#dfe3dd;display:block}
figure.fig figcaption{font-family:var(--f-ur);font-size:.78rem;color:var(--muted);
  margin-top:.5rem;border-inline-start:3px solid var(--signal);padding-inline-start:.6rem;line-height:1.6}
:lang(en) figure.fig figcaption{font-family:var(--f-serif)}

/* Body typography — Noto Nastaliq needs generous leading */
.post__body{font-family:var(--f-ur);color:#1d2a22}
.post__body > *{margin-block:1.1em}
.post__body p{font-size:1.28rem;line-height:2.2}
:lang(en) .post__body{font-family:var(--f-serif)}
:lang(en) .post__body p{font-size:1.16rem;line-height:1.85}
.post__body a{color:var(--green-ink);text-decoration:underline;text-underline-offset:3px}
.post__body a:hover{color:var(--signal-dim)}
.post__body h2{font-family:var(--f-ur);font-weight:700;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.8;color:var(--text);margin-top:1.5em}
.post__body h3{font-family:var(--f-ur);font-weight:700;font-size:1.4rem;line-height:1.8;color:var(--text);margin-top:1.2em}
:lang(en) .post__body h2,:lang(en) .post__body h3{font-family:var(--f-serif)}
.post__body ul,.post__body ol{padding-inline-start:1.5rem}
.post__body li{font-size:1.22rem;line-height:2;margin-block:.45em}
.post__body figure.fig{margin-block:1.6em}

.pullquote{margin-block:1.6em;padding-inline-start:1.1rem;border-inline-start:4px solid var(--signal)}
.pullquote p{font-family:var(--f-ur);font-weight:700;color:var(--green-ink);font-size:clamp(1.4rem,2.2vw,1.8rem);line-height:1.95}
:lang(en) .pullquote p{font-family:var(--f-serif)}

.keypoints{background:var(--card);border:1px solid var(--line);border-inline-start:4px solid var(--gold);border-radius:10px;padding:1.1rem 1.3rem}
.keypoints h4{font-family:var(--f-ur);font-weight:700;color:var(--text);font-size:1.2rem;margin-bottom:.7rem}
:lang(en) .keypoints h4{font-family:var(--f-serif)}
.keypoints ul{list-style:none;display:flex;flex-direction:column;gap:.55rem;padding:0}
.keypoints li{position:relative;padding-inline-start:1.4rem;font-size:1.1rem;line-height:1.9;margin:0}
.keypoints li::before{content:"";position:absolute;inset-inline-start:0;top:.72em;width:8px;height:8px;border-radius:50%;background:var(--gold)}

/* Lazy YouTube embed (facade → iframe on click) */
.embed{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.embed.yt{cursor:pointer}
.embed.yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.embed .yt__play{position:absolute;inset:0;margin:auto;width:68px;height:48px;border:0;border-radius:13px;
  background:rgba(229,57,47,.92);display:grid;place-items:center;cursor:pointer}
.embed .yt__play::before{content:"";border-style:solid;border-width:11px 0 11px 19px;border-color:transparent transparent transparent #fff;margin-inline-start:3px}
.embed.yt:hover .yt__play{background:#E5392F}

.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.8rem}
.tag{font-family:var(--f-ur);font-size:.95rem;color:var(--text);background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:.32rem .95rem}
:lang(en) .tag{font-family:var(--f-latin)}
.tag:hover{border-color:var(--signal);color:var(--green-ink)}

.author-bio{display:flex;gap:1rem;align-items:flex-start;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:1.2rem;margin-top:1.8rem}
.author-bio img{width:64px;height:64px;border-radius:50%;object-fit:cover;background:#dfe3dd;flex:0 0 auto}
.author-bio h2{font-family:var(--f-ur);font-weight:700;font-size:1.15rem;color:var(--text)}
:lang(en) .author-bio h2{font-family:var(--f-serif)}
.author-bio .role{font-family:var(--f-latin);font-size:.74rem;color:var(--green-ink);text-transform:uppercase;letter-spacing:.05em;margin-block:.25rem .5rem}
.author-bio p{font-family:var(--f-ur);font-size:1rem;line-height:1.9;color:var(--muted)}
:lang(en) .author-bio p{font-family:var(--f-serif)}

/* = Author profile */
.author-profile{display:flex;gap:2rem;align-items:flex-start;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:2rem;margin-block:1.5rem}
.author-profile__avatar-wrap{flex:0 0 auto}
.author-profile__avatar{width:128px;height:128px;border-radius:50%;object-fit:cover;background:#dfe3dd;display:block}
.author-profile__info{flex:1;min-width:0}
.author-profile__name{font-family:var(--f-ur);font-size:1.8rem;font-weight:700;color:var(--text);line-height:1.3;margin:0}
:lang(en) .author-profile__name{font-family:var(--f-brand);text-transform:uppercase;letter-spacing:.01em;font-size:1.6rem}
.author-profile__meta{font-family:var(--f-ur);font-size:.82rem;color:var(--muted);margin-block:.5rem .8rem}
:lang(en) .author-profile__meta{font-family:var(--f-serif)}
.author-profile__bio{font-family:var(--f-ur);font-size:1.05rem;line-height:1.95;color:var(--text);margin-bottom:1rem}
:lang(en) .author-profile__bio{font-family:var(--f-serif);font-size:.98rem;line-height:1.75}
.author-profile__bio p{margin-bottom:.5rem}
.author-profile__bio p:last-child{margin-bottom:0}
.author-profile__links{padding-top:1rem;border-top:1px solid var(--line)}
.author-profile__links-label{display:block;font-family:var(--f-ur);font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.6rem}
:lang(en) .author-profile__links-label{font-family:var(--f-brand)}
.author-profile__links-list{display:flex;flex-wrap:wrap;gap:.5rem}
.author-profile__link{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--f-ur);font-size:.85rem;
  color:var(--green-ink);padding:.35rem .75rem;border:1px solid var(--line);border-radius:8px;
  transition:border-color .2s,background .2s}
:lang(en) .author-profile__link{font-family:var(--f-serif)}
.author-profile__link svg{flex:0 0 auto}
.author-profile__link:hover{border-color:var(--signal);background:var(--crescent);color:var(--signal)}
@media (max-width:560px){
  .author-profile{flex-direction:column;align-items:center;text-align:center;padding:1.5rem}
  .author-profile__links-list{justify-content:center}
}

.comments{margin-top:2.2rem}
.comment-form{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.2rem;margin-bottom:1.4rem}
.comment-form textarea{width:100%;min-height:92px;border:1px solid var(--line);border-radius:8px;padding:.8rem;font-family:var(--f-ur);font-size:1.08rem;resize:vertical}
.comment-form .row{display:flex;gap:.7rem;margin-top:.7rem;flex-wrap:wrap;align-items:center}
.comment-form input{flex:1;min-width:160px;border:1px solid var(--line);border-radius:8px;padding:.7rem .8rem;font-family:var(--f-ur)}
.comment-form button{padding:.7rem 1.5rem;border:0;border-radius:8px;background:var(--green-ink);color:#fff;font-family:var(--f-ur);font-weight:700;cursor:pointer}
.comment-form button:hover{background:var(--signal-dim)}
.comment{display:flex;gap:.9rem;padding-block:1.1rem;border-top:1px solid var(--line)}
.comment img{width:42px;height:42px;border-radius:50%;background:#dfe3dd;flex:0 0 auto}
.comment__name{font-family:var(--f-ur);font-weight:700;color:var(--text)}
.comment__meta{font-family:var(--f-latin);font-size:.74rem;color:var(--muted);margin-block:.1rem .4rem}
.comment__body{font-family:var(--f-ur);font-size:1.08rem;line-height:1.95;color:#1d2a22}
.comment__actions{display:flex;gap:1rem;margin-top:.45rem;font-family:var(--f-latin);font-size:.76rem;color:var(--muted)}
.comment__actions a:hover{color:var(--green-ink)}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:#fff;margin-top:2.5rem;border-top:3px solid var(--signal)}

/* Social feed widget (TASK-028): latest-videos strip + follow icons */
.social-feed{display:flex;flex-wrap:wrap;gap:1.4rem 2.4rem;align-items:flex-start;justify-content:space-between;
  padding-block:1.4rem;border-bottom:1px solid var(--pine-line)}
.social-feed h4{font-family:var(--f-ur);text-transform:uppercase;letter-spacing:.04em;color:#fff;font-size:.92rem;margin-bottom:.8rem}
:lang(en) .social-feed h4{font-family:var(--f-brand)}
.social-feed__videos{flex:1;min-width:260px}
.sf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.9rem}
.sf-video{display:flex;flex-direction:column;gap:.4rem}
.sf-video img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px;background:var(--pine-2)}
.sf-video span{font-family:var(--f-ur);font-size:.78rem;line-height:1.7;color:#cfd8e3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
:lang(en) .sf-video span{font-family:var(--f-latin);line-height:1.5}
.sf-video:hover span{color:var(--signal)}
.social-feed__follow{flex:0 0 auto}

.footer h4{font-family:var(--f-ur);text-transform:uppercase;letter-spacing:.04em;color:#fff;font-size:1.3rem;margin-bottom:1rem}
:lang(en) .footer h4{font-family:var(--f-brand);font-size:1.3rem}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:.55rem}

.footer a{font-family:var(--f-ur);font-size:.95rem}
:lang(en) .footer a{font-family:var(--f-latin);font-size:.85rem}
.footer a:hover{color:var(--signal)}

.footer__bottom{background:var(--ink);border-top:1px solid var(--pine-line);padding-block:1.1rem;display:flex;
  justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-family:var(--f-ur);font-size:.76rem;color:#fff}
:lang(en) .footer__bottom{font-family:var(--f-latin)}
.footer .footer__bottom__links{list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:.4rem .55rem;margin:0;padding:0;flex-direction:row;justify-content:center}
.footer__bottom__links li{font-family:var(--f-ur);font-size:.85rem}
:lang(en) .footer__bottom__links li{font-family:var(--f-latin);font-size:.78rem}
.footer__bottom__links a{color:#fff}
.footer__bottom__links a:hover{color:var(--signal)}

/* ============================================================
   Section / category & tag archive
   ============================================================ */
.archive-head{margin-top:2rem;padding-bottom:1.1rem;border-bottom:2px solid var(--line)}
.archive-head__row{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.archive-head__title{display:flex;align-items:center;gap:.65rem;font-family:var(--f-ur);font-weight:700;
  font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.7;color:var(--text)}
.archive-head__title::before{content:"";width:8px;height:1.05em;border-radius:3px;background:var(--c,var(--signal))}
:lang(en) .archive-head__title{font-family:var(--f-brand);text-transform:uppercase;letter-spacing:.01em}
.archive-head__count{font-family:var(--f-ur);font-size:.82rem;font-weight:600;color:var(--muted);
  background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:.25rem .7rem}
:lang(en) .archive-head__count{font-family:var(--f-serif)}
.archive-head__desc{font-family:var(--f-ur);color:var(--muted);line-height:1.95;margin-top:.6rem;max-width:72ch}
:lang(en) .archive-head__desc{font-family:var(--f-serif)}

/* Featured lead — image flush beside a padded text panel */
.archive-lead{display:grid;grid-template-columns:1.15fr 1fr;background:var(--card);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;margin-top:1.5rem}
/* aspect-ratio:auto overrides the general .media{aspect-ratio:16/9} rule:
   with a two-column fr grid, giving the media box a fixed aspect-ratio
   derives its width from the row height, which itself depends on the text
   column's wrapped-text height — a feedback loop that inflated the row past
   its 1.15fr track and overflowed the page horizontally at tablet/desktop
   widths. Width now simply comes from the grid column; object-fit:cover
   (global .media img rule) still crops the image to fill the box. */
.archive-lead .media{height:100%;aspect-ratio:auto}
.archive-lead__body{padding:clamp(1.2rem,2.5vw,2rem);display:flex;flex-direction:column;
  align-items:flex-start;gap:.7rem;align-self:center}
.archive-lead__title{font-family:var(--f-ur);font-weight:700;font-size:clamp(1.3rem,2.3vw,1.95rem);
  line-height:1.8;color:var(--text)}
:lang(en) .archive-lead__title{font-family:var(--f-serif)}
.archive-lead__title:hover{color:var(--green-ink)}
.archive-lead .dek{font-family:var(--f-ur);color:var(--muted);line-height:1.95}
:lang(en) .archive-lead .dek{font-family:var(--f-serif)}

/* Pagination */
.pagination{display:flex;justify-content:center;align-items:center;gap:.45rem;flex-wrap:wrap;margin-top:2.2rem}
.pagination .wp-block-query-pagination-numbers{display:flex;align-items:center;gap:.45rem}
.pagination>a,.pagination>span,
.pagination .wp-block-query-pagination-numbers>a,
.pagination .wp-block-query-pagination-numbers>span{min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 .7rem;border:1px solid var(--line);border-radius:9px;background:var(--card);
  font-family:var(--f-latin);font-weight:600;font-size:.92rem;color:var(--text)}
.pagination a:hover{border-color:var(--signal);color:var(--green-ink)}
.pagination .is-active,.pagination .current,
.pagination .wp-block-query-pagination-numbers>.current{background:var(--green-ink);border-color:var(--green-ink);color:#fff}
.pagination .ellipsis,.pagination .dots,
.pagination .wp-block-query-pagination-numbers>.dots{border:0;background:transparent;min-width:auto;color:var(--muted)}
.pagination .step,.pagination .prev,.pagination .next,
.pagination .wp-block-query-pagination-previous,.pagination .wp-block-query-pagination-next{font-family:var(--f-ur);font-weight:500;gap:.4rem}
:lang(en) .pagination .step,:lang(en) .pagination .prev,:lang(en) .pagination .next,
:lang(en) .pagination .wp-block-query-pagination-previous,:lang(en) .pagination .wp-block-query-pagination-next{font-family:var(--f-latin)}

/* ============================================================
   Videos hub
   ============================================================ */
.vhero{display:grid;grid-template-columns:1.7fr 1fr;gap:clamp(1rem,2.5vw,1.8rem);margin-top:1.5rem;align-items:start}
.vplayer__meta{margin-top:1.3rem}
.vplayer__title{font-family:var(--f-ur);font-weight:700;font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:2.05;color:var(--text)}
:lang(en) .vplayer__title{font-family:var(--f-serif)}
.vplayer__meta .card__meta{margin-top:.6rem}

/* Up-next queue beside the featured player */
.vqueue{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem 1.1rem}
.vqueue__head{font-family:var(--f-ur);font-weight:700;font-size:1.05rem;margin-bottom:.7rem;padding-bottom:.55rem;border-bottom:2px solid var(--live)}
:lang(en) .vqueue__head{font-family:var(--f-brand)}
.vqueue__item{display:grid;grid-template-columns:104px 1fr;gap:.7rem;padding:.6rem 0;align-items:start}
.vqueue__item+.vqueue__item{border-top:1px solid var(--line)}
.vqueue__title{font-family:var(--f-ur);font-weight:500;line-height:1.7;font-size:.92rem;color:var(--text)}
:lang(en) .vqueue__title{font-family:var(--f-serif)}
.vqueue__title:hover{color:var(--green-ink)}
.vqueue__item .card__meta{margin-top:.3rem;font-size:.72rem}
.vthumb{position:relative;border-radius:7px;overflow:hidden;aspect-ratio:16/9}
.vthumb img{width:100%;height:100%;object-fit:cover;display:block}

/* duration badge — sits on any thumbnail corner */
.dur{position:absolute;inset-inline-end:6px;bottom:6px;background:rgba(0,0,0,.82);color:#fff;
  font-family:var(--f-latin);font-size:.7rem;font-weight:600;padding:.08rem .35rem;border-radius:4px;line-height:1.5}

/* Search-results page search box — same merged icon/input/button pill as the
   masthead search, recolored for the light card background it sits on here. */
.search-page-form{
  display:flex;align-items:stretch;max-width:520px;margin-block:1.5rem 0;
  background:var(--card);border:1px solid var(--line);border-radius:999px;overflow:hidden;
}
.search-page-form:focus-within{border-color:var(--signal)}
.search-page-form__icon{flex:0 0 auto;display:flex;align-items:center;padding-inline-start:1rem;color:var(--muted)}
.search-page-form__icon svg{width:18px;height:18px}
.search-page-form__input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  padding:.65rem .75rem;font-family:var(--f-ur);font-size:.95rem;color:var(--text);
}
:lang(en) .search-page-form__input{font-family:var(--f-serif)}
.search-page-form__btn{
  flex:0 0 auto;border:0;cursor:pointer;
  padding:.65rem 1.5rem;background:var(--green-ink);color:#fff;
  font-family:var(--f-ur);font-weight:600;font-size:.9rem;transition:background .15s;
}
:lang(en) .search-page-form__btn{font-family:var(--f-brand);text-transform:uppercase;letter-spacing:.03em}
.search-page-form__btn:hover{background:var(--signal-dim)}

/* topic filter chips */
.vfilters{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.chip{font-family:var(--f-ur);font-size:.92rem;color:var(--text);background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:.35rem .95rem;cursor:pointer}
/* Section-filter chips follow the page language, but the language-switch chips
   (اردو/English/سنڌي) are always their own script — same rule as .langs in the
   topbar — so they carry a lang="…" attribute and are excluded here. */
:lang(en) .chip:not([lang]){font-family:var(--f-latin)}
.chip.latin{font-family:var(--f-latin)}
.chip:hover{border-color:var(--signal);color:var(--green-ink)}
.chip.is-active{background:var(--green-ink);border-color:var(--green-ink);color:#fff}

/* Sections page: every category, including empty ones */
.cat-index{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem;margin:1.5rem 0}
.cat-index__item{display:flex;align-items:center;justify-content:center;padding:1.25rem 1rem;
  border-radius:10px;background:color-mix(in srgb, var(--c) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--c) 30%, transparent);color:var(--c);font-weight:600;
  text-align:center;text-decoration:none;transition:background .15s ease}
.cat-index__item:hover{background:color-mix(in srgb, var(--c) 20%, transparent)}

/* ============================================================
   Live blog
   ============================================================ */
.live-blog{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.2rem 1.4rem}
.live-blog__head{display:flex;align-items:center;gap:.6rem;margin-bottom:1.2rem;padding-bottom:.7rem;border-bottom:2px solid var(--live)}
.live-blog__badge{display:inline-block;font-family:var(--f-ur);font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:var(--live);padding:.2rem .6rem;border-radius:4px;animation:pulse 1.6s ease-out infinite}
:lang(en) .live-blog__badge{font-family:var(--f-brand)}
.live-blog__label{margin:0;font-family:var(--f-ur);font-weight:700;font-size:1.05rem;color:var(--text)}
:lang(en) .live-blog__label{font-family:var(--f-brand);font-size:.92rem;text-transform:uppercase;letter-spacing:.04em}

.live__updates{display:flex;flex-direction:column;gap:1rem}

.live__banner{display:block;padding:.65rem 1rem;background:var(--signal-dim);color:#fff;border-radius:8px;
  font-family:var(--f-ur);font-weight:700;font-size:.95rem;text-align:center;cursor:pointer;margin-bottom:.5rem}
.live__banner:hover{opacity:.9}
:lang(en) .live__banner{font-family:var(--f-brand);font-size:.85rem;letter-spacing:.03em}

.live__update{padding:.9rem 0;border-bottom:1px solid var(--line)}
.live__update:last-child{border-bottom:0}
.live__update--pinned{background:color-mix(in srgb,var(--gold) 6%,transparent);margin:0 -1.4rem;padding:.9rem 1.4rem;border-inline-start:3px solid var(--gold);border-radius:4px}

.live__meta{display:flex;align-items:center;gap:.55rem;margin-bottom:.8rem;flex-wrap:wrap}
.live__time{font-family:var(--f-ur);font-size:.78rem;font-weight:600;color:var(--green-ink);letter-spacing:.01em}
:lang(en) .live__time{font-family:var(--f-serif)}
.live__badge{display:inline-block;font-family:var(--f-ur);font-size:.65rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:.12rem .5rem;border-radius:4px;line-height:1.6}
:lang(en) .live__badge{font-family:var(--f-brand)}
.live__badge--live{color:#fff;background:var(--live)}
.live__pinned{color:#9A7510;background:color-mix(in srgb,var(--gold) 20%,transparent);border:1px solid var(--gold)}

.live__headline{font-family:var(--f-ur);font-weight:700;font-size:1.05rem;line-height:1.9;color:var(--text);margin-bottom:.3rem}
:lang(en) .live__headline{font-family:var(--f-serif);line-height:1.4}

.live__body{font-family:var(--f-ur);font-size:.98rem;line-height:1.95;color:var(--muted)}
:lang(en) .live__body{font-family:var(--f-serif);font-size:.92rem;line-height:1.65}
.live__body p{margin-block:.5em}
.live__body img{max-width:100%;border-radius:8px;margin:.5rem 0}

.live__empty{text-align:center;font-family:var(--f-ur);color:var(--muted);padding:1.5rem 0;font-size:.95rem}
:lang(en) .live__empty{font-family:var(--f-serif)}

/* Live blog header in the template */
.live-blog-wrap{padding-block:1.8rem 2rem}
.live-blog-header{margin-bottom:.5rem}
.live-blog-header .wp-block-post-date{font-family:var(--f-ur);font-size:.82rem;color:var(--muted)}
.live-blog-header .wp-block-post-author{font-family:var(--f-ur);font-size:1rem;font-weight:700;color:var(--text)}
:lang(en) .live-blog-header .wp-block-post-date{font-family:var(--f-serif)}
:lang(en) .live-blog-header .wp-block-post-author{font-family:var(--f-serif)}

/* ---------- Responsive ---------- */
/* Horizontally scrollable nav gets edge-fades so it reads as scrollable, not cut off */
@media (max-width:1024px){
  .mainnav .wrap{
    -webkit-mask-image:linear-gradient(to right,transparent,#000 26px,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(to right,transparent,#000 26px,#000 calc(100% - 26px),transparent);
  }
}
@media (max-width:760px){
  .archive-lead{grid-template-columns:1fr}
  .archive-lead .media{aspect-ratio:16/9}
  .vhero{grid-template-columns:1fr}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero__side{order:2}
  .hero__timeline{order:3}
  .layout{grid-template-columns:1fr}
  .post__side{position:static}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .masthead-search{display:none}
}
@media (max-width:560px){
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
  .topbar__clock{display:none}
  .topbar .wrap{justify-content:center}
  .masthead .wrap{justify-content:center}
  .hero__lead .media{aspect-ratio:16/9}
  /* Lead card overlay is too short at this width to fit kicker + title + dek
     without the bottom-anchored text block riding up over the kicker badge. */
  .hero__lead__body .dek{display:none}
}
/* The ticker is functional news delivery, so it keeps scrolling even under
   reduced-motion — freezing it would strand it mid-scroll behind
   .ticker__track's overflow:hidden, permanently hiding every headline except
   whichever ones happened to be in view, which is worse than the motion.
   Only decorative motion (image zoom, "live" pulse glows) is disabled. */
@media (prefers-reduced-motion:reduce){
  .media img{transition:none}
  .ticker__flag .pulse,.live-pill::before,.live-blog__badge{animation:none}
}

/* ============================================================
   WordPress integration tweaks (block theme)
   ============================================================ */
.dpnn-mt{margin-top:1.5rem}
/* The main content column carries .wrap for max-width; block groups inside
   must not re-constrain or add default block gaps that fight the design. */
main.wrap{display:block;padding-top:.8rem}

/* The header template-part wraps topbar/masthead/nav/ticker in a <header> box.
   position:sticky is bounded by its containing block, so that wrapper would
   release .mainnav the moment the header scrolls off. display:contents removes
   the wrapper's box (keeping its banner semantics) so the nav's containing
   block becomes the page-spanning .wp-site-blocks and it stays stuck. */
header.wp-block-template-part{display:contents}

/* --- Single article: map core content blocks into the reading design --- */
.reading-related{margin-top:2.2rem}
.reading-related .card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.2rem 1.3rem 1.4rem}
.post__body > *{margin-block:1.1em}
.post__body .wp-block-image{margin:0}
.post__body .wp-block-image img{width:100%;border-radius:10px;display:block}
.post__body .wp-block-image figcaption{font-family:var(--f-ur);font-size:.78rem;color:var(--muted);
  margin-top:.5rem;border-inline-start:3px solid var(--signal);padding-inline-start:.6rem;line-height:1.6}
:lang(en) .post__body .wp-block-image figcaption{font-family:var(--f-serif)}
.post__body .wp-block-quote{margin-block:1.6em;padding-inline-start:1.1rem;border-inline-start:4px solid var(--signal);border-radius:0}
.post__body .wp-block-quote p{font-family:var(--f-ur);font-weight:700;color:var(--green-ink);
  font-size:clamp(1.4rem,2.2vw,1.8rem);line-height:1.95}
:lang(en) .post__body .wp-block-quote p{font-family:var(--f-serif)}
.post__body .wp-block-pullquote{border:0;padding:0}
/* Share copy-button feedback */
.share .s-cp.is-copied{background:var(--green-ink);color:#fff;border-color:transparent}
.share button.s-cp{cursor:pointer}

/* --- Comments (native; wpDiscuz replaces in TASK-025) --- */
.comments{margin-top:2.2rem;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:clamp(1.2rem,2.5vw,1.8rem)}
.comments .wp-block-comments-title{font-family:var(--f-ur);font-weight:700;font-size:1.4rem;color:var(--text);margin-bottom:1.2rem}
.comments .wp-block-comment-author-name{font-family:var(--f-ur);font-weight:700;color:var(--text)}
.comments .wp-block-comment-content{font-family:var(--f-ur);line-height:1.95;color:#1d2a22;margin-block:.4rem}
.comments .wp-block-comment-date{color:var(--muted)}
.comments .comment-form input,.comments .comment-form textarea,.comments .wp-block-post-comments-form textarea,.comments .wp-block-post-comments-form input[type=text],.comments .wp-block-post-comments-form input[type=email]{font-family:var(--f-ur);border:1px solid var(--line);border-radius:8px;padding:.7rem .8rem}
.comments .wp-block-post-comments-form .submit{background:var(--green-ink);color:#fff;border:0;border-radius:8px;padding:.7rem 1.5rem;font-family:var(--f-ur);font-weight:700;cursor:pointer}

/* In-article ad + prev/next post navigation */
.dpnn-inart{margin-block:1.8rem}
.post-nav{display:flex;gap:1rem;margin-top:1.8rem;flex-wrap:wrap}
.post-nav__link{flex:1;min-width:240px;background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:.9rem 1.1rem;display:flex;flex-direction:column;gap:.3rem}
.post-nav__link:hover{border-color:var(--signal)}
.post-nav__link span{font-family:var(--f-ur);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--green-ink)}
:lang(en) .post-nav__link span{font-family:var(--f-brand)}
.post-nav__link b{font-family:var(--f-ur);font-weight:700;line-height:1.7;color:var(--text);font-size:1rem}
:lang(en) .post-nav__link b{font-family:var(--f-serif)}
.post-nav__next{text-align:end}

/* ============================================================
   Photo gallery
   ============================================================ */

/* Gallery header in the template */
.gallery-header{margin-bottom:.5rem}
.gallery-header .wp-block-post-date{font-family:var(--f-ur);font-size:.82rem;color:var(--muted)}
.gallery-header .wp-block-post-author{font-family:var(--f-ur);font-size:.82rem;color:var(--muted)}
:lang(en) .gallery-header .wp-block-post-date,:lang(en) .gallery-header .wp-block-post-author{font-family:var(--f-serif)}

/* Image count above grid */
.gallery__count{margin-bottom:.8rem;font-size:.85rem;color:var(--muted)}

/* ---------- Responsive image grid ---------- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:var(--gap);
}

.gallery-item{
  position:relative;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.4rem;
  border-radius:8px;
  overflow:hidden;
  background:var(--card);
  border:1px solid var(--line);
  transition:border-color .2s;
}
.gallery-item:hover{border-color:var(--signal)}

/* Aspect-ratio container prevents CLS — each item wraps the anchor which is
   the aspect-ratio box, then the figcaption sits below. */
.gallery-item__link{
  display:block;
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:#dfe3dd;
}

.gallery-item__link img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s;
}
.gallery-item:hover .gallery-item__link img{transform:scale(1.05)}

.gallery-item__caption{
  padding:.35rem .6rem .5rem;
  font-family:var(--f-ur);
  font-size:.85rem;
  line-height:1.7;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
:lang(en) .gallery-item__caption{font-family:var(--f-serif);font-size:.82rem;line-height:1.4}

.gallery__empty{
  text-align:center;
  padding:2rem;
  color:var(--muted);
  font-family:var(--f-ur);
}
:lang(en) .gallery__empty{font-family:var(--f-serif)}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease,visibility .25s ease;
  /* Ensure focus trap works */
  outline:none;
}

.lightbox--open{
  opacity:1;
  visibility:visible;
}

/* Dark backdrop */
.lightbox__overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.9);
  cursor:pointer;
}

/* Close button */
.lightbox__close{
  position:absolute;
  top:1rem;
  inset-inline-end:1rem;
  z-index:2;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:rgba(0,0,0,.5);
  color:#fff;
  font-size:1.8rem;
  line-height:1;
  cursor:pointer;
  transition:background .15s;
}
.lightbox__close:hover{background:rgba(255,255,255,.2)}
.lightbox__close:focus-visible,.lightbox__nav:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Nav buttons */
.lightbox__nav{
  position:absolute;
  top:50%;
  z-index:2;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:rgba(0,0,0,.4);
  color:#fff;
  cursor:pointer;
  transition:background .15s;
}
.lightbox__nav:hover{background:rgba(255,255,255,.2)}
.lightbox__prev{inset-inline-start:1rem}
.lightbox__next{inset-inline-end:1rem}
.lightbox__nav svg{display:block;width:24px;height:24px}

/* Image wrapper — constrains image to viewport */
.lightbox__img-wrap{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:90vw;
  max-height:80vh;
  cursor:pointer;
}

.lightbox__img{
  display:block;
  max-width:90vw;
  max-height:80vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:4px;
  box-shadow:0 8px 40px rgba(0,0,0,.4);
}

/* Footer: counter + caption */
.lightbox__footer{
  position:relative;
  z-index:1;
  text-align:center;
  color:#fff;
  padding:.8rem 1rem 1rem;
  max-width:80vw;
}

.lightbox__counter{
  display:block;
  font-family:var(--f-latin);
  font-size:.78rem;
  color:rgba(255,255,255,.55);
  margin-bottom:.25rem;
}

.lightbox__caption{
  font-family:var(--f-ur);
  font-size:.95rem;
  line-height:1.8;
  color:rgba(255,255,255,.85);
}
:lang(en) .lightbox__caption{font-family:var(--f-serif);font-size:.9rem;line-height:1.5}

/* RTL nav buttons — swap arrow icons direction for Urdu/Sindhi */
[dir="rtl"] .lightbox__prev svg{transform:scaleX(-1)}
[dir="rtl"] .lightbox__next svg{transform:scaleX(-1)}

/* Responsive grid */
@media (max-width:760px){
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  .gallery-grid{grid-template-columns:1fr}
  .lightbox__nav{width:40px;height:40px}
  .lightbox__prev{inset-inline-start:.5rem}
  .lightbox__next{inset-inline-end:.5rem}
}

/* ============================================================
   Static page template
   ============================================================ */
.page__content{
  max-width:720px;
  margin-inline:auto;
  padding-block:2rem 3rem;
}

.page__content .wp-block-post-title{
  font-family:var(--f-ur);
  font-weight:700;
  font-size:clamp(1.5rem,3vw,2.2rem);
  line-height:1.75;
  color:var(--text);
  margin-bottom:1.5rem;
  padding-bottom:.8rem;
  border-bottom:2px solid var(--signal);
}
:lang(en) .page__content .wp-block-post-title{
  font-family:var(--f-serif);
  line-height:1.2;
}

.page__content .wp-block-post-content{
  font-family:var(--f-ur);
  line-height:2;
  font-size:1.05rem;
  color:var(--text);
}
:lang(en) .page__content .wp-block-post-content{
  font-family:var(--f-serif);
  line-height:1.75;
  font-size:1.02rem;
}

.page__content .wp-block-post-content > *{
  margin-block:1.1em;
}

.page__content .wp-block-post-content img{
  max-width:100%;
  height:auto;
  border-radius:8px;
}

/* ============================================================
   Contact form
   ============================================================ */
.contact-form{
  max-width:560px;
}

.contact-form__title{
  font-family:var(--f-ur);
  font-weight:700;
  font-size:1.4rem;
  color:var(--text);
  margin-bottom:1.2rem;
  padding-bottom:.6rem;
  border-bottom:2px solid var(--signal);
}
:lang(en) .contact-form__title{
  font-family:var(--f-brand);
  text-transform:uppercase;
  letter-spacing:.02em;
}

.form__field{
  margin-bottom:1.1rem;
}

.form__field label{
  display:block;
  font-family:var(--f-ur);
  font-size:.78rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted);
  margin-bottom:.35rem;
}
:lang(en) .form__field label{font-family:var(--f-brand)}

.form__field input,
.form__field textarea{
  display:block;
  width:100%;
  font-family:var(--f-ur);
  font-size:1rem;
  color:var(--text);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:8px;
  padding:.7rem .85rem;
  line-height:1.6;
  transition:border-color .2s;
}
:lang(en) .form__field input,
:lang(en) .form__field textarea{
  font-family:var(--f-latin);
}

.form__field input:focus,
.form__field textarea:focus{
  outline:none;
  border-color:var(--signal);
  box-shadow:0 0 0 3px rgba(20,133,232,.15);
}

.form__field textarea{
  resize:vertical;
  min-height:120px;
}

.form__submit{
  display:inline-block;
  background:var(--green-ink);
  color:#fff;
  border:0;
  border-radius:8px;
  padding:.75rem 1.8rem;
  font-family:var(--f-ur);
  font-weight:700;
  font-size:1rem;
  cursor:pointer;
  transition:background .2s;
}
:lang(en) .form__submit{
  font-family:var(--f-latin);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.form__submit:hover{
  background:var(--signal-dim);
}

.form__success{
  background:#e8f5e9;
  color:#2e7d32;
  border:1px solid #a5d6a7;
  border-radius:8px;
  padding:.85rem 1rem;
  margin-bottom:1rem;
  font-family:var(--f-ur);
  line-height:1.7;
}
:lang(en) .form__success{
  font-family:var(--f-serif);
}

.form__errors{
  margin-bottom:1rem;
}

.form__error{
  background:#fef2f2;
  color:#b91c1c;
  border:1px solid #fecaca;
  border-radius:8px;
  padding:.65rem .85rem;
  margin-bottom:.5rem;
  font-family:var(--f-ur);
  font-size:.95rem;
  line-height:1.7;
}
:lang(en) .form__error{
  font-family:var(--f-latin);
}

/* ============================================================
   Legal / trust page template (page-legal.html)
   ============================================================ */
.legal{max-width:var(--wrap);margin-inline:auto;padding-block:1.5rem 3rem}

.legal__layout{display:flex;gap:var(--gap);align-items:flex-start}
.legal__layout > .wp-block-column{box-sizing:border-box}

/* Sidebar */
.legal__sidebar{flex:0 0 260px;min-width:0}
.legal__toc{
  position:sticky;
  top:calc(78px + var(--gap));
  max-height:calc(100vh - 78px - 2 * var(--gap));
  overflow-y:auto;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  padding:1.2rem 1rem;
}
.legal__toc-title{
  font-family:var(--f-ur);
  font-weight:700;
  font-size:1rem;
  color:var(--text);
  margin-bottom:.9rem;
  padding-bottom:.5rem;
  border-bottom:1px solid var(--line);
}
:lang(en) .legal__toc-title{
  font-family:var(--f-latin);
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.legal__toc-nav,
.legal__toc-nav ul{
  list-style:none;
  padding:0;
  margin:0;
}
.legal__toc-nav li{margin-bottom:.2rem}
.legal__toc-link{
  display:block;
  font-family:var(--f-ur);
  font-size:.88rem;
  color:var(--muted);
  padding:.25rem .5rem;
  border-radius:5px;
  line-height:1.6;
  transition:background .15s,color .15s;
}
:lang(en) .legal__toc-link{
  font-family:var(--f-latin);
  font-size:.77rem;
}
.legal__toc-link:hover{
  background:var(--paper);
  color:var(--green-ink);
}
.legal__toc-link--h3{
  padding-inline-start:1.4rem;
  font-size:.83rem;
}
:lang(en) .legal__toc-link--h3{
  font-size:.73rem;
}

/* Main content column */
.legal__content{flex:1;min-width:0;max-width:720px}

.legal__content .wp-block-post-title{
  font-family:var(--f-ur);
  font-weight:700;
  font-size:clamp(1.5rem,3vw,2.2rem);
  line-height:1.75;
  color:var(--text);
  margin-bottom:.8rem;
  padding-bottom:.8rem;
  border-bottom:2px solid var(--signal);
}
:lang(en) .legal__content .wp-block-post-title{
  font-family:var(--f-serif);
  line-height:1.25;
}

.legal__content .wp-block-post-date{
  display:block;
  font-family:var(--f-ur);
  font-size:.82rem;
  color:var(--muted);
  margin-bottom:1.8rem;
  padding-bottom:.6rem;
  border-bottom:1px solid var(--line);
}
:lang(en) .legal__content .wp-block-post-date{
  font-family:var(--f-serif);
}

.legal__content .wp-block-post-content{
  font-family:var(--f-ur);
  font-size:1.08rem;
  line-height:2.1;
  color:var(--text);
}
:lang(en) .legal__content .wp-block-post-content{
  font-family:var(--f-serif);
  font-size:1.02rem;
  line-height:1.8;
}

.legal__content .wp-block-post-content > *{
  margin-block:1.1em;
}

.legal__content .wp-block-post-content h2{
  font-family:var(--f-ur);
  font-weight:700;
  font-size:clamp(1.35rem,2.2vw,1.75rem);
  line-height:1.8;
  color:var(--text);
  margin-top:2.2em;
  margin-bottom:.6em;
  padding-bottom:.5em;
  border-bottom:1px solid var(--line);
}
.legal__content .wp-block-post-content > h2:first-child{margin-top:0}
:lang(en) .legal__content .wp-block-post-content h2{
  font-family:var(--f-serif);
}

.legal__content .wp-block-post-content h3{
  font-family:var(--f-ur);
  font-weight:700;
  font-size:1.25rem;
  line-height:1.8;
  color:var(--text);
  margin-top:1.6em;
  margin-bottom:.4em;
}
:lang(en) .legal__content .wp-block-post-content h3{
  font-family:var(--f-serif);
}

.legal__content .wp-block-post-content p{
  margin-block:.8em;
}

.legal__content .wp-block-post-content a{
  color:var(--green-ink);
  text-decoration:underline;
  text-underline-offset:2px;
}
.legal__content .wp-block-post-content a:hover{
  color:var(--signal-dim);
}

.legal__content .wp-block-post-content ul,
.legal__content .wp-block-post-content ol{
  padding-inline-start:1.8em;
  margin-block:.8em;
}
.legal__content .wp-block-post-content li{
  margin-block:.35em;
}

.legal__content .wp-block-post-content img{
  max-width:100%;
  height:auto;
  border-radius:8px;
}

/* Mobile: hide sidebar, content full-width */
@media (max-width:768px){
  .legal__layout{flex-direction:column}
  .legal__sidebar{flex:none;width:100%;display:none}
  .legal__content{max-width:none}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .gallery-item__link img{transition:none}
  .lightbox{transition:none}
}

/* = 404 page / error-content */
.error-content{
  max-width:680px;
  margin-inline:auto;
  text-align:center;
  padding-block:clamp(3rem,8vw,6rem);
  padding-inline:var(--gap);
}
.error-404__code{
  font-family:var(--f-latin);
  font-size:clamp(6rem,15vw,10rem);
  font-weight:700;
  line-height:1;
  color:var(--signal);
  margin-block-end:.3rem;
}
[dir="rtl"] .error-404__code{
  letter-spacing:.05em;
}
.error-404__message{
  font-family:var(--f-ur);
  font-size:clamp(1.4rem,3vw,2rem);
  font-weight:700;
  color:var(--text);
  margin-block-end:.8rem;
}
:lang(en) .error-404__message{
  font-family:var(--f-serif);
}
.error-404__suggestions{
  font-family:var(--f-ur);
  font-size:1rem;
  color:var(--muted);
  max-width:480px;
  margin-inline:auto;
  margin-block-end:2rem;
  line-height:1.7;
}
:lang(en) .error-404__suggestions{
  font-family:var(--f-serif);
}
.error-404__popular{
  max-width:420px;
  margin-inline:auto;
  margin-block-end:2rem;
  text-align:start;
}
.error-404__actions{
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
}
.error-404__btn{
  display:inline-flex;
  align-items:center;
  padding:.65rem 1.6rem;
  font-family:var(--f-ur);
  font-size:1rem;
  font-weight:600;
  color:#fff;
  background:var(--green-ink);
  border-radius:999px;
  text-decoration:none;
  transition:background .15s;
}
:lang(en) .error-404__btn{
  font-family:var(--f-latin);
}
.error-404__btn:hover{
  background:var(--signal-dim);
}
.error-404__search{
  margin-block-start:2rem;
}
.error-404__search .wp-block-search__inside-wrapper{
  max-width:400px;
  margin-inline:auto;
}
.error-404__search .wp-block-search__input{
  padding:.7rem .85rem;
}
.error-404__search .wp-block-search__button{
  padding:.7rem 1.4rem;
}
@media (max-width:560px){
  .error-404__actions{flex-direction:column;align-items:center}
  .error-404__btn{width:100%;max-width:260px;justify-content:center}
}

/* === Comments === */

/* Outer wrapper — card container */
.wp-block-comments.comments{
  margin-top:2.5rem;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:clamp(1.2rem,2.5vw,1.8rem);
}

/* Comments heading */
.wp-block-comments .wp-block-comments-title{
  font-family:var(--f-ur);
  font-weight:700;
  font-size:1.4rem;
  color:var(--text);
  margin-bottom:1.4rem;
  padding-bottom:.6rem;
  border-bottom:2px solid var(--signal);
}
:lang(en) .wp-block-comments .wp-block-comments-title{
  font-family:var(--f-brand);
  text-transform:uppercase;
  letter-spacing:.02em;
}

/* Individual comment — columns layout (avatar + content) */
.wp-block-comments .wp-block-comment{
  padding-block:1.2rem;
  border-top:1px solid var(--line);
}
.wp-block-comments .wp-block-comment:first-of-type{
  border-top:0;
}

/* Avatar column */
.wp-block-comments .wp-block-comment .wp-block-avatar img,
.wp-block-comments .wp-block-comment .wp-block-avatar{
  border-radius:50%;
  width:48px;
  height:48px;
}

/* Comment author name */
.wp-block-comments .wp-block-comment-author-name{
  font-family:var(--f-ur);
  font-weight:700;
  color:var(--text);
  font-size:1rem;
}
.wp-block-comments .wp-block-comment-author-name a{
  color:var(--green-ink);
}

/* Comment date */
.wp-block-comments .wp-block-comment-date{
  color:var(--muted);
  font-family:var(--f-ur);
  font-size:.78rem;
  margin-block:.15rem .5rem;
}
:lang(en) .wp-block-comments .wp-block-comment-date{
  font-family:var(--f-serif);
}
.wp-block-comments .wp-block-comment-date a{
  color:var(--muted);
}

/* Comment content body */
.wp-block-comments .wp-block-comment-content{
  font-family:var(--f-ur);
  font-size:1.05rem;
  line-height:1.95;
  color:#1d2a22;
  margin-block:.4rem .6rem;
}
:lang(en) .wp-block-comments .wp-block-comment-content{
  font-family:var(--f-serif);
}

/* Reply link */
.wp-block-comments .wp-block-comment-reply-link{
  margin-top:.4rem;
}
.wp-block-comments .wp-block-comment-reply-link a{
  display:inline-block;
  font-family:var(--f-ur);
  font-size:.78rem;
  font-weight:600;
  color:var(--green-ink);
  border:1px solid var(--line);
  border-radius:6px;
  padding:.3rem .7rem;
  transition:border-color .2s,background .2s;
}
:lang(en) .wp-block-comments .wp-block-comment-reply-link a{
  font-family:var(--f-serif);
}
.wp-block-comments .wp-block-comment-reply-link a:hover{
  border-color:var(--signal);
  background:var(--crescent);
}

/* Nested replies — RTL-aware indentation */
.wp-block-comments .wp-block-comment .wp-block-comment .wp-block-comment{
  margin-inline-start:2.5rem;
  padding-inline-start:1rem;
  border-inline-start:2px solid var(--line);
}
.wp-block-comments .wp-block-comment .wp-block-comment .wp-block-comment:first-child{
  margin-top:1rem;
}

/* Comment form (rendered via wp:post-comments-form) */
.wp-block-comments .comment-form,
.wp-block-comments .wp-block-post-comments-form{
  margin-top:1.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
}
.wp-block-comments .comment-respond{
  margin-top:1.5rem;
}

/* Form title ("Leave a Reply") */
.wp-block-comments .comment-reply-title,
.wp-block-comments .comment-form .comment-reply-title{
  font-family:var(--f-ur);
  font-weight:700;
  font-size:1.2rem;
  color:var(--text);
  margin-bottom:1rem;
}
:lang(en) .wp-block-comments .comment-reply-title{
  font-family:var(--f-brand);
  text-transform:uppercase;
  letter-spacing:.02em;
}

/* Form paragraph wrappers */
.wp-block-comments .comment-form p,
.wp-block-comments .wp-block-post-comments-form p{
  margin-bottom:1rem;
}

/* Form labels */
.wp-block-comments .comment-form label,
.wp-block-comments .wp-block-post-comments-form label{
  display:block;
  font-family:var(--f-ur);
  font-size:.78rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted);
  margin-bottom:.35rem;
}
:lang(en) .wp-block-comments .comment-form label,
:lang(en) .wp-block-comments .wp-block-post-comments-form label{
  font-family:var(--f-brand);
}

/* Form inputs — text, email, textarea */
.wp-block-comments .comment-form input[type=text],
.wp-block-comments .comment-form input[type=email],
.wp-block-comments .comment-form input[type=url],
.wp-block-comments .comment-form textarea,
.wp-block-comments .wp-block-post-comments-form input[type=text],
.wp-block-comments .wp-block-post-comments-form input[type=email],
.wp-block-comments .wp-block-post-comments-form input[type=url],
.wp-block-comments .wp-block-post-comments-form textarea{
  display:block;
  width:100%;
  font-family:var(--f-ur);
  font-size:1rem;
  color:var(--text);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:8px;
  padding:.7rem .85rem;
  line-height:1.6;
  transition:border-color .2s;
}
:lang(en) .wp-block-comments .comment-form input,
:lang(en) .wp-block-comments .comment-form textarea,
:lang(en) .wp-block-comments .wp-block-post-comments-form input,
:lang(en) .wp-block-comments .wp-block-post-comments-form textarea{
  font-family:var(--f-latin);
}

/* Focus state — matches contact form */
.wp-block-comments .comment-form input:focus,
.wp-block-comments .comment-form textarea:focus,
.wp-block-comments .wp-block-post-comments-form input:focus,
.wp-block-comments .wp-block-post-comments-form textarea:focus{
  outline:none;
  border-color:var(--signal);
  box-shadow:0 0 0 3px rgba(20,133,232,.15);
}

/* Textarea specific */
.wp-block-comments .comment-form textarea,
.wp-block-comments .wp-block-post-comments-form textarea{
  resize:vertical;
  min-height:120px;
}

/* Submit button */
.wp-block-comments .comment-form .submit,
.wp-block-comments .wp-block-post-comments-form .submit,
.wp-block-comments .comment-form input[type=submit],
.wp-block-comments .wp-block-post-comments-form input[type=submit]{
  display:inline-block;
  background:var(--green-ink);
  color:#fff;
  border:0;
  border-radius:8px;
  padding:.75rem 1.8rem;
  font-family:var(--f-ur);
  font-weight:700;
  font-size:1rem;
  cursor:pointer;
  transition:background .2s;
}
:lang(en) .wp-block-comments .comment-form .submit,
:lang(en) .wp-block-comments .wp-block-post-comments-form .submit,
:lang(en) .wp-block-comments .comment-form input[type=submit],
:lang(en) .wp-block-comments .wp-block-post-comments-form input[type=submit]{
  font-family:var(--f-brand);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.wp-block-comments .comment-form .submit:hover,
.wp-block-comments .wp-block-post-comments-form .submit:hover,
.wp-block-comments .comment-form input[type=submit]:hover,
.wp-block-comments .wp-block-post-comments-form input[type=submit]:hover{
  background:var(--signal-dim);
}

/* Comment form checkboxes (cookie consent etc.) */
.wp-block-comments .comment-form .comment-form-cookies-consent,
.wp-block-comments .wp-block-post-comments-form .comment-form-cookies-consent{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--f-ur);
  font-size:.8rem;
  color:var(--muted);
}
:lang(en) .wp-block-comments .comment-form .comment-form-cookies-consent,
:lang(en) .wp-block-comments .wp-block-post-comments-form .comment-form-cookies-consent{
  font-family:var(--f-serif);
}
.wp-block-comments .comment-form .comment-form-cookies-consent input[type=checkbox],
.wp-block-comments .wp-block-post-comments-form .comment-form-cookies-consent input[type=checkbox]{
  width:auto;
}

/* Comment notes */
.wp-block-comments .comment-form .comment-notes,
.wp-block-comments .wp-block-post-comments-form .comment-notes{
  font-family:var(--f-ur);
  font-size:.78rem;
  color:var(--muted);
  margin-bottom:1rem;
}
:lang(en) .wp-block-comments .comment-form .comment-notes,
:lang(en) .wp-block-comments .wp-block-post-comments-form .comment-notes{
  font-family:var(--f-serif);
}

/* Comments pagination */
.wp-block-comments .wp-block-comments-pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.45rem;
  flex-wrap:wrap;
  margin-top:1.8rem;
}
.wp-block-comments .wp-block-comments-pagination a,
.wp-block-comments .wp-block-comments-pagination span{
  min-width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 .7rem;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--card);
  font-family:var(--f-latin);
  font-weight:600;
  font-size:.92rem;
  color:var(--text);
  text-decoration:none;
}
.wp-block-comments .wp-block-comments-pagination a:hover{
  border-color:var(--signal);
  color:var(--green-ink);
}
.wp-block-comments .wp-block-comments-pagination .current{
  background:var(--green-ink);
  border-color:var(--green-ink);
  color:#fff;
}
.wp-block-comments .wp-block-comments-pagination .dots{
  border:0;
  background:transparent;
  min-width:auto;
  color:var(--muted);
}

/* Logged-in-as / log-out link */
.wp-block-comments .comment-form .logged-in-as,
.wp-block-comments .wp-block-post-comments-form .logged-in-as{
  font-family:var(--f-ur);
  font-size:.8rem;
  color:var(--muted);
  margin-bottom:1rem;
}
:lang(en) .wp-block-comments .comment-form .logged-in-as,
:lang(en) .wp-block-comments .wp-block-post-comments-form .logged-in-as{
  font-family:var(--f-serif);
}
.wp-block-comments .comment-form .logged-in-as a,
.wp-block-comments .wp-block-post-comments-form .logged-in-as a{
  color:var(--green-ink);
}

/* Responsive — flatten avatar + content columns on mobile */
@media (max-width:560px){
  .wp-block-comments .wp-block-comment .wp-block-columns{
    flex-direction:column;
    gap:.6rem;
  }
  .wp-block-comments .wp-block-comment .wp-block-columns .wp-block-column:first-child{
    margin-bottom:0;
  }
  .wp-block-comments .wp-block-comment .wp-block-avatar img,
  .wp-block-comments .wp-block-comment .wp-block-avatar{
    width:40px;
    height:40px;
  }
  /* Reduce nested indentation on mobile */
  .wp-block-comments .wp-block-comment .wp-block-comment .wp-block-comment{
    margin-inline-start:1rem;
    padding-inline-start:.6rem;
  }
}