/*
Theme Name:   Punjab Guardian
Theme URI:    https://punjabguardian.com
Author:       ChintaFree Solution
Description:  Custom newspaper theme for Punjab Guardian, a Punjabi weekly published from Surrey, British Columbia. Built from scratch — no page builder, no parent theme, no bundled library. The post types and custom fields live in the pg-core plugin, never here, so this theme can be switched off without the newspaper's 863 e-paper editions disappearing.
Version:      0.12.4
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License:      GPL-2.0-or-later
Text Domain:  pg
Tags:         news, newspaper, rtl-language-support, custom-menu, translation-ready

--------------------------------------------------------------------------
  GURMUKHI TYPOGRAPHY — these are not preferences, they are correctness

  1. NEVER apply letter-spacing to Gurmukhi. The matras sit above and below
     the line and tracking pulls them off their consonants.
  2. Minimum line-height 1.8 for Gurmukhi UI text, 1.9 for body copy.
     Latin can breathe at 1.5; Gurmukhi cannot.
  3. Never use ::first-letter on Gurmukhi. It splits conjuncts —
     ਪ੍ਰਬੰਧ becomes "ਪ੍" + "ਰਬੰਧ", and "ਪ੍" is not a letter, it is a
     dangling halant. Tested and confirmed.
  4. Pair Noto Serif/Sans Gurmukhi with Noto Serif/Sans so that a line
     mixing Punjabi and English sits on one baseline.
--------------------------------------------------------------------------
*/

/* ==========================================================================
   PUNJAB GUARDIAN — Shared Stylesheet
   Stage 0 · UI/UX Design
   Used by: index.html, article.html, category.html, epaper.html,
            epaper-archive.html, obituaries.html, matrimonial.html,
            classified.html
   --------------------------------------------------------------------------
   TYPOGRAPHY RULES (do not break):
   - Gurmukhi NEVER gets letter-spacing. It breaks matras and conjuncts.
   - Gurmukhi line-height minimum 1.8, display text 1.9.
   - Latin-only text may use letter-spacing (labels, kickers, buttons).
   - Noto Serif Gurmukhi + Noto Serif share metrics, so mixed lines align.
   ========================================================================== */

/* Fonts are enqueued from functions.php, not @import-ed.
   An @import inside a stylesheet is discovered only AFTER the stylesheet
   downloads, so the fonts start one round-trip late. A <link> in the head
   starts both downloads together — worth ~300ms on a slow phone. */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Ink & paper */
  --ink:          #0B1F33;   /* masthead, headlines — deep navy, not pure black */
  --ink-2:        #23384C;   /* sub-headlines */
  --body:         #33414E;   /* body copy */
  --muted:        #6B7885;   /* bylines, timestamps, meta */
  --paper:        #FFFFFF;
  --paper-2:      #F7F5F1;   /* section block background — warm newsprint */
  --paper-3:      #EFEBE4;   /* ad slot fill */

  /* Brand */
  --red:          #C8102E;   /* masthead rule, breaking, section labels */
  --red-dark:     #9E0C24;
  --navy:         #0B1F33;
  --navy-2:       #143A5A;   /* nav bar */
  --gold:         #B08D3F;   /* sponsored / premium accents only */

  /* Lines */
  --rule:         #DDD8D0;
  --rule-strong:  #B9B2A7;
  --rule-dark:    rgba(255,255,255,.16);

  /* Type families */
  --pa-display: 'Noto Serif Gurmukhi', 'Noto Serif', Georgia, serif;
  --pa-ui:      'Noto Sans Gurmukhi', 'Noto Sans', system-ui, sans-serif;
  --en-display: 'Noto Serif', Georgia, 'Times New Roman', serif;
  --en-ui:      'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Gurmukhi vertical rhythm — matras need room */
  --lh-pa-display: 1.42;   /* only for very large masthead-scale text */
  --lh-pa-head:    1.55;   /* headlines */
  --lh-pa-body:    1.9;    /* running Punjabi text */

  /* Spacing scale */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* Layout */
  --wrap: 1200px;
  --gap:  24px;
  --radius: 2px;           /* newspapers are square. almost no radius. */
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper-2);
  color: var(--body);
  font-family: var(--pa-ui);
  font-size: 16px;
  line-height: var(--lh-pa-body);
}
/* height:auto is not cosmetic. WordPress prints width and height attributes on
   every image it inserts (width="1200" height="675"), and those attributes are
   presentational: once max-width shrinks the image to the column, the height
   attribute is still in force, so a 1200x675 photo renders 780 wide and 675
   tall — squashed. The .ph and .hero__poster rules below set their own height
   and are more specific, so this does not disturb them. */
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; color: var(--ink); }
p  { margin: 0 0 var(--s3); }
button, input { font: inherit; }

/* Latin-only elements: English UI. Safe to letter-space. */
[lang="en"] { font-family: var(--en-ui); }

/* --------------------------------------------------------------------------
   3. LAYOUT HELPERS
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }

/* Skip link: hidden until it takes keyboard focus, then it must be seen.
   .sr-only alone would keep it invisible even while focused, which is worse
   than having no skip link at all. */
.sr-only:focus {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  width: auto; height: auto; overflow: visible; clip: auto; clip-path: none;
  padding: 12px 18px; background: var(--red); color: #fff;
  font-family: var(--en-ui); font-size: 14px; font-weight: 700;
  border-radius: var(--radius); white-space: nowrap;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. E-PAPER BUTTON (lives in the masthead)
   -------------------------------------------------------------------------- */
.btn-epaper {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--red); color: #fff;
  padding: 7px 15px; font-weight: 700; font-size: 12px;
  letter-spacing: .09em; text-transform: uppercase;
  border-radius: var(--radius); transition: .15s;
}
.btn-epaper:hover { background: var(--red-dark); }
.btn-epaper svg { width: 14px; height: 14px; fill: currentColor; }

/* --------------------------------------------------------------------------
   5. MASTHEAD
   -------------------------------------------------------------------------- */
.masthead { background: var(--paper); }
.masthead__inner {
  display: grid;
  grid-template-columns: 200px minmax(0,1fr) 200px;
  gap: var(--s5); align-items: center;
  /* padding-block only — a `padding` shorthand here would wipe out
     .wrap's 16px side gutter on mobile. */
  padding-block: var(--s6);
}
/* the leaderboard now lives under Breaking News, not in the masthead */
.leaderboard { background: var(--paper); padding-block: var(--s5); }

.masthead__meta {
  display: flex; flex-direction: column; gap: 7px;
  font-family: var(--en-ui); font-size: 12.5px; color: var(--muted);
  align-items: flex-start;
}
.masthead__date { letter-spacing: .03em; color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.masthead__weather {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border: 1px dashed var(--rule-strong);
  border-radius: var(--radius); letter-spacing: .04em; font-size: 11.5px;
}

.masthead__actions {
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
/* Round, in each platform's own colour — readers recognise the shape and
   colour faster than any label. */
.masthead__social { display: flex; align-items: center; gap: 7px; }
.masthead__social a,
.masthead__social span {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  transition: transform .15s, filter .15s;
}
.masthead__social a:hover { transform: translateY(-2px); filter: brightness(1.08); }
.masthead__social svg { width: 16px; height: 16px; fill: currentColor; }
.soc--wa { background: #25D366; }
.soc--fb { background: #1877F2; }
.soc--ig {
  background: radial-gradient(circle at 30% 107%,
    #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%);
}
.soc--yt { background: #FF0000; }
.soc--x  { background: #000000; }

/* An icon whose address the newspaper has not given us yet. Same circle, same
   colour — it simply does not go anywhere, and does not pretend to. */
.masthead__social .is-soon,
.footer__social .is-soon { cursor: default; }

.brand { text-align: center; }
.brand__mark {
  display: flex; align-items: center; justify-content: center;
  gap: 22px;
}
/* Classic newspaper flanking rules. When the client supplies the real
   logo file, drop an <img> in here and delete .brand__rule. */
.brand__rule {
  flex: 0 1 90px; min-width: 24px; height: 7px;
  border-top: 1px solid var(--red);
  border-bottom: 3px solid var(--red);
}
.brand__name {
  font-family: var(--pa-display);
  font-weight: 700;
  font-size: clamp(34px, 5.6vw, 58px);
  line-height: var(--lh-pa-display);
  color: var(--navy);
  white-space: nowrap;            /* the masthead never breaks in two */
  /* NO letter-spacing — Gurmukhi */
}
.brand__latin {
  font-family: var(--en-display);
  font-weight: 700;
  font-size: clamp(11px, 2.2vw, 15px);
  letter-spacing: .34em;       /* Latin only — safe */
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
  display: inline-block;
}
.brand__tag {
  font-family: var(--en-ui);
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-top: 7px;
}

/* --------------------------------------------------------------------------
   6. AD SLOTS
   -------------------------------------------------------------------------- */
.ad {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  display: grid; place-items: center;
  text-align: center; position: relative;
  padding: var(--s4);
}
.ad::before {
  content: attr(data-label);
  position: absolute; top: 6px; left: 8px;
  font-family: var(--en-ui); font-size: 9px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); opacity: .75;
}
.ad__size {
  font-family: var(--en-ui); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; color: var(--muted);
}
.ad--leaderboard { min-height: 100px; }
.ad--billboard   { min-height: 120px; margin: var(--s5) 0; }
.ad--sidebar     { min-height: 260px; }
.ad--sidebar-tall{ min-height: 500px; }
.ad--inline      { min-height: 110px; margin: var(--s5) 0; }

/* -- Dummy ad creatives ----------------------------------------------------
   Invented advertisers, so the client can see what a paid placement looks
   like in situ. Every unit keeps its "Advertisement" label. Replace the
   .adx block with the real creative; the outer .ad wrapper stays. */
.ad--live { padding: 0; background: #fff; overflow: hidden; }
/* On a live creative the label moves to the top-right so it never sits
   on top of the advertiser's own copy. */
.ad--live::before {
  z-index: 2; background: rgba(255,255,255,.9); color: #33414E;
  padding: 3px 6px; border-radius: 0 0 0 2px;
  top: 0; left: auto; right: 0; opacity: 1;
}
.adx {
  width: 100%; height: 100%; min-height: inherit;
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s5); text-align: left; color: #fff;
  position: relative;
}
.adx--stack { flex-direction: column; justify-content: center; text-align: center; gap: 10px; }
.adx__eyebrow, .adx__head, .adx__pa, .adx__sub, .adx__logo { display: block; }
.adx__eyebrow {
  font-family: var(--en-ui); font-size: 9.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; opacity: .8;
}
.adx__head {
  font-family: var(--en-display); font-weight: 700;
  font-size: clamp(17px, 2.1vw, 24px); line-height: 1.25; color: #fff;
}
.adx__sub {
  font-family: var(--en-ui); font-size: 12.5px; line-height: 1.55;
  opacity: .88; margin: 0;
}
.adx__pa {
  font-family: var(--pa-ui); font-size: 14px;
  line-height: var(--lh-pa-body); opacity: .92;
}
.adx__head + .adx__pa, .adx__eyebrow + .adx__head { margin-top: 5px; }
.adx__logo { align-self: center; margin-top: 4px; }
.adx__cta {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--en-ui); font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: #fff; color: #10233A; padding: 9px 16px;
  border-radius: var(--radius); white-space: nowrap;
}
.adx__spacer { flex: 1 1 auto; }
.adx__logo {
  font-family: var(--en-display); font-weight: 700; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.55); padding: 6px 11px;
  white-space: nowrap;
}
/* advertiser palettes */
.adx--immig { background: linear-gradient(120deg, #123A5C 0%, #0B2438 100%); }
.adx--prop  { background: linear-gradient(120deg, #7A1E2B 0%, #45101A 100%); }
.adx--trav  { background: linear-gradient(120deg, #0E4A46 0%, #08302D 100%); }
.adx--matri { background: linear-gradient(120deg, #6B3F12 0%, #3D2308 100%); }
.adx--food  { background: linear-gradient(120deg, #2C2F6B 0%, #171A42 100%); }
.adx--edu   { background: linear-gradient(120deg, #1E4733 0%, #0F2A1E 100%); }

@media (max-width: 560px) {
  .adx { flex-direction: column; text-align: center; gap: 10px; padding: var(--s5) var(--s4); }
  .adx__spacer { display: none; }
}

/* --------------------------------------------------------------------------
   7. PRIMARY NAV — the four products + E-Paper
       Each top item is one WordPress install: / , /matrimonial/ ,
       /classified/ , /directory/ . Hover (or tap) opens its mega menu.
   -------------------------------------------------------------------------- */
.nav {
  background: var(--navy-2);
  position: sticky; top: 0; z-index: 60;
  box-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.nav .wrap { max-width: 1400px; }
.nav__inner { display: flex; align-items: stretch; position: relative; }

.nav__toggle {
  display: none; background: none; border: 0; color: #fff;
  padding: 13px 14px; cursor: pointer; align-items: center; gap: 8px;
  font-family: var(--en-ui); font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; min-height: 48px;
}
.nav__toggle svg { width: 20px; height: 20px; fill: currentColor; }

.nav__list { display: flex; flex: 1; align-items: stretch; }

/* static, so the mega panel's containing block is the sticky .nav and it
   can span the full width instead of the width of one menu item. */
.nav__item { position: static; display: flex; }
.nav__link {
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: var(--en-ui); font-size: 13.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: #E4ECF3; padding: 15px 16px; transition: .15s;
  border-bottom: 3px solid transparent; min-height: 50px;
  background: none; border-left: 0; border-right: 0; border-top: 0;
  cursor: pointer; font-family: var(--en-ui);
}
.nav__link:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav__item.is-active > .nav__link { color: #fff; border-bottom-color: var(--red); }
/* The three paid-listing products stay visually apart, in gold. */
.nav__item--listing > .nav__link { color: var(--gold); }
.nav__item--listing > .nav__link:hover { color: #F0D79B; background: rgba(176,141,63,.22); }
.nav__caret { width: 9px; height: 9px; fill: currentColor; opacity: .7; flex: none; }

.nav__spacer { flex: 1 1 auto; }
.nav__search, .nav__post {
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: #D9E3EC;
  padding: 0 14px; min-height: 50px;
}
.nav__search svg { width: 18px; height: 18px; fill: currentColor; }
.nav__post {
  font-family: var(--en-ui); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--gold); color: #0A2439; padding: 0 16px;
  margin: 8px 0 8px 8px; min-height: 34px; white-space: nowrap;
  border-radius: var(--radius);
}
.nav__post:hover { background: #C9A452; }

/* -- Mega menu panel ------------------------------------------------------ */
.mega {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; border-top: 3px solid var(--red);
  box-shadow: 0 18px 40px rgba(11,31,51,.22);
  padding: var(--s6) 0 var(--s5);
  z-index: 70;
}
.mega[hidden] { display: none; }
.mega__inner {
  max-width: 1400px; margin: 0 auto; padding: 0 16px;
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s6);
}
.mega__col h4 {
  font-family: var(--en-ui); font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--red);
  padding-bottom: 8px; margin-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.mega__col li { margin-bottom: 3px; }
.mega__col a {
  display: block; padding: 7px 0;
  font-family: var(--pa-ui); font-size: 14.5px; color: var(--ink);
  line-height: 1.7;
}
.mega__col a:hover { color: var(--red); }
.mega__col a span[lang="en"] { color: var(--muted); font-size: 12.5px; }
.mega__promo {
  background: var(--paper-2); border: 1px solid var(--rule);
  border-left: 3px solid var(--gold); padding: var(--s4);
}
.mega__promo h5 {
  margin: 0 0 7px; font-family: var(--pa-display); font-size: 17px;
  line-height: var(--lh-pa-head); color: var(--ink);
}
.mega__promo p {
  font-family: var(--pa-ui); font-size: 13px; line-height: var(--lh-pa-body);
  color: var(--body); margin-bottom: 12px;
}
.mega__promo .btn { padding: 9px 15px; font-size: 11px; }


/* -- 7c. Phased launch --------------------------------------------------
   News and E-Paper go live first; Matrimonial, Classifieds, the Directory
   and Events follow one by one. Rather than hide them (the client wants the
   full plan visible) or link them to a holding page, each unlaunched
   vertical keeps its mega menu, wears a SOON badge and opens with one line
   of plain truth. The links stay dimmed and inert so nobody taps into a
   dead end and decides the site is broken.
   -------------------------------------------------------------------- */
.nav__soon {
  font-family: var(--en-ui); font-size: 8.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.3;
  color: #fff; background: var(--red);   /* #C8102E */
  padding: 2px 5px; border-radius: 2px; margin-left: 5px; flex: none;
}
.mega--soon { border-top-color: var(--gold); }
.mega--soon .mega__col a { color: var(--muted); cursor: default; }
.mega--soon .mega__col a:hover { color: var(--muted); }
.mega--soon .mega__col a span[lang="en"] { opacity: .8; }
.mega--soon .mega__promo { border-left-color: var(--navy); }
.mega__notice {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3);
  background: var(--paper-3); border-left: 3px solid var(--gold);
  padding: var(--s3) var(--s4); margin-bottom: calc(var(--s6) * -1 + var(--s3));
}
.mega__notice b {
  font-family: var(--en-ui); font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}
.mega__notice span {
  font-family: var(--pa-ui); font-size: 13.5px; line-height: var(--lh-pa-body);
  color: var(--body);
}

/* -- 7d. Fitting six verticals on one rail ------------------------------
   Six products plus a SOON badge on four of them is more than the old
   13.5px/16px rail could hold at 1280. Tightened here, and the hamburger
   now takes over at 1200 instead of 1023 — a cramped rail that clips a
   label is worse than an honest menu button.
   -------------------------------------------------------------------- */
@media (min-width: 1281px) {
  .nav__link { font-size: 12.5px; letter-spacing: .05em; padding: 15px 10px; }
  .nav__post { font-size: 10.5px; padding: 0 13px; }
}

/* "Post a Listing" is hidden until a listing product actually launches.
   Every product it leads to — Matrimonial, Classifieds, Directory — is
   still marked Soon, and a gold call-to-action that goes nowhere next to
   four honest SOON badges reads as carelessness. Delete this rule on the
   day the first listing product goes live. */
.nav__post { display: none; }

/* --------------------------------------------------------------------------
   7b. SECTION STRIP — the active product's own sections
       Horizontally scrollable on phones, which is exactly how readers
       expect a section rail to behave.
   -------------------------------------------------------------------------- */
.strip {
  background: #0A2439;
  border-top: 1px solid rgba(255,255,255,.1);
}
.strip .wrap { max-width: 1400px; }
.strip__inner {
  display: flex; align-items: center; gap: 2px;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.strip__inner::-webkit-scrollbar { display: none; }
.strip__label {
  flex: none; font-family: var(--en-ui); font-size: 9.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: #6F8296;
  padding-right: 14px; margin-right: 6px;
  border-right: 1px solid rgba(255,255,255,.14);
  align-self: stretch; display: flex; align-items: center;
}
.strip__inner a {
  flex: none; white-space: nowrap;
  font-family: var(--en-ui); font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em; color: #B9C8D6; padding: 11px 12px;
  border-bottom: 2px solid transparent;
}
.strip__inner a:hover { color: #fff; background: rgba(255,255,255,.07); }
.strip__inner a.is-active { color: #fff; border-bottom-color: var(--gold); }

/* --------------------------------------------------------------------------
   8. BREAKING TICKER
   -------------------------------------------------------------------------- */
.ticker {
  background: var(--red); color: #fff;
  display: flex; align-items: stretch; overflow: hidden;
}
.ticker__label {
  flex: none; background: var(--navy); color: #fff;
  display: flex; align-items: center; padding: 0 16px;
  font-family: var(--en-ui); font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  position: relative;
}
.ticker__label::after {
  content: ''; position: absolute; right: -8px; top: 0; bottom: 0;
  width: 8px; background: var(--navy);
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}
.ticker__dot {
  width: 7px; height: 7px; border-radius: 50%; background: #FF5A6E;
  margin-right: 8px; animation: pulse 1.6s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.25} }
/* margin, not padding. Padding sits INSIDE the overflow box, so a scrolling
   track slides straight through it and the headline ends up touching the
   BREAKING label. Margin is outside the clip, so the text is cut off cleanly
   with a gap. The mask softens that cut instead of chopping a letter in half. */
.ticker__viewport {
  flex: 1; overflow: hidden; margin-left: 26px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px);
          mask-image: linear-gradient(to right, transparent 0, #000 22px);
}
.ticker__track {
  display: flex; gap: 48px; align-items: center;
  white-space: nowrap; min-height: 44px;
  animation: ticker 44s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__track a {
  font-family: var(--pa-ui); font-size: 15px; line-height: 1.8;
  /* NO letter-spacing — Gurmukhi */
}
.ticker__track a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ticker__sep { opacity: .5; }

/* Autoplay with sound is blocked by every browser until the reader interacts
   with the page — no code gets around that. So the video starts muted and
   this badge makes one tap turn the sound on. */
.hero__sound {
  position: absolute; left: 16px; top: 16px; z-index: 6;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--red); color: #fff; border: 0; cursor: pointer;
  padding: 10px 16px; border-radius: 99px; min-height: 42px;
  font-family: var(--pa-ui); font-size: 14px; font-weight: 600;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  animation: soundpop .4s ease-out;
}
.hero__sound svg { width: 17px; height: 17px; fill: currentColor; }
.hero__sound:hover { background: var(--red-dark); }
.hero__sound[hidden] { display: none; }
@keyframes soundpop { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .hero__sound { animation: none; } }
@media (max-width: 560px) {
  .hero__sound { left: 10px; top: 10px; padding: 9px 13px; font-size: 13px; }
}
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}

/* --------------------------------------------------------------------------
   8b. LATEST NEWS — big video stage
       Autoplays muted on arrival with YouTube's own chrome switched off and
       our control bar on top, so it reads as the paper's own player.
       (YouTube branding still appears once the reader interacts — removing
       it would breach YouTube's terms, so we don't.)
   -------------------------------------------------------------------------- */
.hero { background: #08151F; padding-block: var(--s6) var(--s7); }
.hero .sec-head { border-bottom-color: rgba(255,255,255,.22); }
.hero .sec-head__pa { color: #fff; }
.hero__grid {
  display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: var(--s5);
  align-items: start;
}

.hero__stage {
  position: relative; background: #000; aspect-ratio: 16/9;
  border: 1px solid rgba(255,255,255,.12); overflow: hidden;
}
.hero__stage iframe,
.hero__stage > div:first-child { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Poster shown until the player is ready — no blank black box on slow links */
.hero__poster {
  position: absolute; inset: 0; z-index: 2;
  background: #0B1F33 center/cover no-repeat;
  display: grid; place-items: center;
}
.hero__poster img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.hero__poster.is-gone { display: none; }
.hero__spinner {
  position: absolute; width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25); border-top-color: #fff;
  animation: heroSpin .9s linear infinite;
}
@keyframes heroSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero__spinner { animation: none; } }

/* Our control bar */
.hero__bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(to top, rgba(6,17,26,.92), rgba(6,17,26,0));
}
.hero__btn {
  width: 38px; height: 38px; flex: none; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff;
  display: grid; place-items: center; cursor: pointer; transition: .15s;
}
.hero__btn:hover { background: var(--red); }
.hero__btn svg { width: 16px; height: 16px; fill: currentColor; }
.hero__btn--play { background: var(--red); width: 44px; height: 44px; }
.hero__btn--play:hover { background: var(--red-dark); }
.hero__now {
  flex: 1 1 auto; min-width: 0; color: #fff;
  font-family: var(--pa-ui); font-size: 13.5px; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hero__live {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  background: var(--red); color: #fff; padding: 4px 9px;
  font-family: var(--en-ui); font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; border-radius: 2px;
}
.hero__live i { width: 6px; height: 6px; border-radius: 50%; background: #fff;
  animation: pulse 1.6s infinite; display: block; }

/* Playlist */
.hero__list { display: grid; gap: 10px; align-content: start; }
.hero__list h3 {
  font-family: var(--pa-display); font-size: 17px; color: #fff;
  line-height: var(--lh-pa-head); padding-bottom: 9px;
  border-bottom: 1px solid rgba(255,255,255,.22);
}
.hero__item {
  display: grid; grid-template-columns: 116px minmax(0,1fr); gap: 11px;
  align-items: start; text-align: left; cursor: pointer;
  background: none; border: 0; padding: 7px; border-radius: 2px;
  transition: background .15s;
}
.hero__item:hover { background: rgba(255,255,255,.07); }
.hero__item.is-active { background: rgba(200,16,46,.22); }
.hero__item .ph { border-color: rgba(255,255,255,.14); }
.hero__thumb { position: relative; }
.hero__badge {
  position: absolute; left: 5px; bottom: 5px;
  background: rgba(0,0,0,.75); color: #fff; border-radius: 2px;
  width: 22px; height: 16px; display: grid; place-items: center;
}
.hero__badge svg { width: 9px; height: 9px; fill: #fff; }
.hero__item b {
  display: block; font-family: var(--pa-ui); font-size: 13px; font-weight: 500;
  line-height: 1.55; color: #DCE6EF;
}
.hero__item.is-active b { color: #fff; }
.hero__item span {
  display: block; font-family: var(--en-ui); font-size: 10.5px;
  color: #7D93A6; margin-top: 4px; letter-spacing: .04em;
}

@media (max-width: 1023px) {
  .hero__grid { grid-template-columns: minmax(0,1fr); gap: var(--s4); }
  .hero__list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero__list h3 { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .hero { padding-block: var(--s5) var(--s6); }
  .hero__list { grid-template-columns: minmax(0,1fr); }
  .hero__item { grid-template-columns: 104px minmax(0,1fr); }
  .hero__bar { padding: 8px 9px; gap: 7px; }
  .hero__btn { width: 34px; height: 34px; }
  .hero__btn--play { width: 40px; height: 40px; }
  .hero__now { display: none; }   /* the title is already above the fold */
}

/* --------------------------------------------------------------------------
   9. GENERIC SECTION HEADING
   -------------------------------------------------------------------------- */
.sec-head {
  display: flex; align-items: center; gap: var(--s3);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 9px; margin-bottom: var(--s5);
}
.sec-head__pa {
  font-family: var(--pa-display); font-size: 23px; font-weight: 700;
  line-height: var(--lh-pa-head); color: var(--ink);
}
.sec-head__en {
  font-family: var(--en-ui); font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: #fff; background: var(--red);
  padding: 4px 10px; border-radius: var(--radius);
}
.sec-head__more {
  margin-left: auto; font-family: var(--en-ui); font-size: 12px;
  font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--red); white-space: nowrap;
}
.sec-head__more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   10. PHOTO PLACEHOLDERS
       Replace .ph with <img> when real photos arrive.
   -------------------------------------------------------------------------- */
.ph {
  position: relative; width: 100%;
  background: #DED8CF;
  border: 1px solid var(--rule);
  overflow: hidden;
}
/* Real photo sits on top of the topic placeholder. If the image fails to
   load (offline demo, blocked host) the JS below removes it and the
   subject icon shows through — the page never renders a broken box. */
.ph img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ph--16x9 { aspect-ratio: 16/9; }
.lead .ph { background-size: 19% auto, cover; }
.epaper__cover .ph { background-size: 46% auto, cover; }
.ph--4x3  { aspect-ratio: 4/3; }
.ph--1x1  { aspect-ratio: 1/1; }
.ph--3x4  { aspect-ratio: 3/4; }

/* --------------------------------------------------------------------------
   10b. TOPIC PLACEHOLDERS
       Self-contained duotone + line icon per subject. No external files,
       no network. Swap the whole block for <img> when real photos arrive.
   -------------------------------------------------------------------------- */
.ph--civic {
  background-color: #C2CED8;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23223a52' stroke-opacity='.30' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18M5 21V10l7-5 7 5v11M9 21v-6h6v6M12 3v2'/></svg>"),
    linear-gradient(135deg, #E3E8EC 0%, #C2CED8 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 34% auto, cover;
}
.ph--people {
  background-color: #CBC7BC;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23223a52' stroke-opacity='.30' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'><path d='M12 11a3 3 0 100-6 3 3 0 000 6zM4 21v-1a5 5 0 015-5h6a5 5 0 015 5v1M19 11a2.5 2.5 0 100-5M21.5 21v-1a4 4 0 00-2.5-3.7'/></svg>"),
    linear-gradient(135deg, #E6E4DE 0%, #CBC7BC 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 34% auto, cover;
}
.ph--plane {
  background-color: #BFCFDC;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23223a52' stroke-opacity='.30' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'><path d='M2 14l20-7-7 20-3-8-8-3M10 16l3-3'/></svg>"),
    linear-gradient(135deg, #E1E8EE 0%, #BFCFDC 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 34% auto, cover;
}
.ph--transit {
  background-color: #C3CBD3;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23223a52' stroke-opacity='.30' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3h12v12H6zM6 9h12M9 19l-2 2M15 19l2 2M8 15v4h8v-4M9 6h2M13 6h2M9 12.5h.01M15 12.5h.01'/></svg>"),
    linear-gradient(135deg, #E2E6EA 0%, #C3CBD3 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 34% auto, cover;
}
.ph--farm {
  background-color: #D4C7A6;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23223a52' stroke-opacity='.30' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21V9M12 9c0-3 2-5 4-6 0 3-1 5-4 6zM12 9c0-3-2-5-4-6 0 3 1 5 4 6zM12 14c0-3 2-5 4-6 0 3-1 5-4 6zM12 14c0-3-2-5-4-6 0 3 1 5 4 6zM4 21h16'/></svg>"),
    linear-gradient(135deg, #EDE7D8 0%, #D4C7A6 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 34% auto, cover;
}
.ph--film {
  background-color: #CFC2C9;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23223a52' stroke-opacity='.30' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5h18v14H3zM7 5v14M17 5v14M3 9.5h4M3 14.5h4M17 9.5h4M17 14.5h4M10 9l4 3-4 3z'/></svg>"),
    linear-gradient(135deg, #E9E2E6 0%, #CFC2C9 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 34% auto, cover;
}
.ph--house {
  background-color: #C5CFC8;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23223a52' stroke-opacity='.30' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'><path d='M3 11l9-7 9 7M5 10v11h14V10M10 21v-6h4v6'/></svg>"),
    linear-gradient(135deg, #E4E8E5 0%, #C5CFC8 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 34% auto, cover;
}
.ph--truck {
  background-color: #C4C8D2;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23223a52' stroke-opacity='.30' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'><path d='M1 6h12v10H1zM13 9h4l3 3v4h-7zM6 19a2 2 0 100-4 2 2 0 000 4zM17 19a2 2 0 100-4 2 2 0 000 4z'/></svg>"),
    linear-gradient(135deg, #E3E5E9 0%, #C4C8D2 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 34% auto, cover;
}
.ph--biz {
  background-color: #BFD0C6;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23223a52' stroke-opacity='.30' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8h18v12H3zM9 8V5h6v3M3 13h18M11 13v2h2v-2'/></svg>"),
    linear-gradient(135deg, #E1E8E4 0%, #BFD0C6 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 34% auto, cover;
}
.ph--sport {
  background-color: #D6BEBE;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23223a52' stroke-opacity='.30' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'><path d='M13 4.5a1.6 1.6 0 100-3 1.6 1.6 0 000 3zM9 22l2.5-6.5L9 13l1-5 3.5 2 2.5 3M10 8L6 9.5M14 22l3-5.5'/></svg>"),
    linear-gradient(135deg, #EDE3E3 0%, #D6BEBE 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 34% auto, cover;
}
.ph--school {
  background-color: #C6CDD8;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23223a52' stroke-opacity='.30' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'><path d='M2 8l10-4 10 4-10 4zM6 10.5V16c0 1.5 3 3 6 3s6-1.5 6-3v-5.5M22 8v6'/></svg>"),
    linear-gradient(135deg, #E4E7EC 0%, #C6CDD8 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 34% auto, cover;
}
.ph--factory {
  background-color: #C8C8CD;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23223a52' stroke-opacity='.30' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21V10l6 4V10l6 4V7l6 4v10zM3 21h18M7 17v2M13 17v2M18 17v2'/></svg>"),
    linear-gradient(135deg, #E5E5E7 0%, #C8C8CD 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 34% auto, cover;
}
.ph--rain {
  background-color: #C2CCD6;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23223a52' stroke-opacity='.30' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'><path d='M7 14a4 4 0 010-8 5.5 5.5 0 0110.4 1.5A3.5 3.5 0 0117 14zM8 18l-1 3M12 18l-1 3M16 18l-1 3'/></svg>"),
    linear-gradient(135deg, #E2E7EC 0%, #C2CCD6 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 34% auto, cover;
}
.ph--mic {
  background-color: #C5C7D0;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23223a52' stroke-opacity='.30' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'><path d='M12 14a3 3 0 003-3V6a3 3 0 00-6 0v5a3 3 0 003 3zM6 11a6 6 0 0012 0M12 17v4M9 21h6'/></svg>"),
    linear-gradient(135deg, #E3E4E8 0%, #C5C7D0 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 34% auto, cover;
}
.ph--city {
  background-color: #C2CAD4;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23223a52' stroke-opacity='.30' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21V9l6-3v15M9 21V12l6-3v12M15 21V13l6-3v11M3 21h18M6 12h.01M6 15h.01M12 15h.01M12 18h.01M18 16h.01'/></svg>"),
    linear-gradient(135deg, #E2E6EB 0%, #C2CAD4 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 34% auto, cover;
}
.ph--globe {
  background-color: #C0CAD3;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23223a52' stroke-opacity='.30' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21a9 9 0 100-18 9 9 0 000 18zM3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9S14.5 18.4 12 21C9.5 18.4 8.2 15.4 8.2 12S9.5 5.6 12 3z'/></svg>"),
    linear-gradient(135deg, #E1E6EA 0%, #C0CAD3 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 34% auto, cover;
}
.ph--person {
  background-color: #CFC9BE;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23223a52' stroke-opacity='.30' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'><path d='M12 12a4 4 0 100-8 4 4 0 000 8zM4 21v-1.5C4 16 7.6 14 12 14s8 2 8 5.5V21'/></svg>"),
    linear-gradient(135deg, #EAE7E1 0%, #CFC9BE 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 34% auto, cover;
}

.ph--paper {
  background-color: #CBD3DB;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23223a52' stroke-opacity='.30' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h13a2 2 0 012 2v12a2 2 0 01-2 2H4zM17 8h3v10a2 2 0 01-2 2M7 8h7M7 11.5h7M7 15h4'/></svg>"),
    linear-gradient(135deg, #E9EDF1 0%, #CBD3DB 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 40% auto, cover;
}

/* --------------------------------------------------------------------------
   11. MAIN GRID
   -------------------------------------------------------------------------- */
.main { background: var(--paper); }
.layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) 320px;
  gap: var(--s7);
  padding-block: var(--s6) var(--s7);   /* never the `padding` shorthand — see above */
  align-items: start;
}
.content { min-width: 0; }
.sidebar { min-width: 0; position: sticky; top: 64px; }

/* --------------------------------------------------------------------------
   12. LEAD STORY + SECONDARIES
   -------------------------------------------------------------------------- */
.top-stories {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--s6);
  padding-bottom: var(--s6);
  border-bottom: 4px double var(--rule-strong);
}

.kicker {
  display: inline-block;
  font-family: var(--en-ui); font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--red); margin-bottom: 10px;
}
.kicker--gold { color: var(--gold); }

.lead__title {
  font-family: var(--pa-display); font-weight: 700;
  font-size: clamp(27px, 4.2vw, 42px);
  line-height: var(--lh-pa-head);
  color: var(--ink); margin: 14px 0 12px;
}
.lead__title a:hover { color: var(--red); }
.lead__intro {
  font-family: var(--pa-ui); font-size: 16.5px;
  line-height: var(--lh-pa-body); color: var(--body);
  max-width: 62ch;
}
.meta {
  font-family: var(--en-ui); font-size: 11.5px; color: var(--muted);
  letter-spacing: .05em; display: flex; flex-wrap: wrap;
  align-items: center; gap: 8px; margin-top: 12px;
}
.meta__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--rule-strong); }

.secondaries { display: grid; gap: var(--s4); align-content: start; }
.story-sm {
  display: grid; grid-template-columns: 96px minmax(0,1fr);
  gap: var(--s3); padding-bottom: var(--s4);
  border-bottom: 1px solid var(--rule);
}
.secondaries .story-sm:last-child { border-bottom: 0; padding-bottom: 0; }
.story-sm__title {
  font-family: var(--pa-display); font-weight: 600;
  font-size: 17px; line-height: var(--lh-pa-head); color: var(--ink);
}
.story-sm__title a:hover { color: var(--red); }
.story-sm .kicker { font-size: 9.5px; margin-bottom: 6px; }

/* --------------------------------------------------------------------------
   13. E-PAPER PROMO
   -------------------------------------------------------------------------- */
.epaper {
  background: var(--navy);
  color: #E8EDF2;
  padding: var(--s6);
  margin: var(--s6) 0;
  position: relative;
  border-top: 4px solid var(--red);
}
.epaper__grid {
  display: grid; grid-template-columns: 200px minmax(0,1fr);
  gap: var(--s6); align-items: center;
}
.epaper__cover {
  background: #fff; padding: 7px;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  transform: rotate(-1.4deg);
}
.epaper__cover .ph { border-color: #ccc; }
.epaper__kicker {
  font-family: var(--en-ui); font-size: 10.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: #FF8794;
}
.epaper__title {
  font-family: var(--pa-display); font-weight: 700;
  font-size: clamp(24px, 3.4vw, 34px); line-height: var(--lh-pa-head);
  color: #fff; margin: 10px 0 6px;
}
.epaper__date {
  font-family: var(--en-ui); font-size: 13px; color: #A9BACA;
  letter-spacing: .06em; margin-bottom: var(--s5);
}
.epaper__sections {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px; margin-bottom: var(--s5);
}
.epaper__sec {
  background: rgba(255,255,255,.07);
  border: 1px solid var(--rule-dark);
  padding: 13px 10px; text-align: center; transition: .15s;
}
.epaper__sec:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.epaper__sec strong {
  display: block; font-family: var(--en-ui); font-size: 13.5px;
  font-weight: 700; letter-spacing: .05em; color: #fff;
}
.epaper__sec span {
  display: block; font-family: var(--en-ui); font-size: 10.5px;
  color: #A9BACA; margin-top: 3px; letter-spacing: .08em;
}
.epaper__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; font-family: var(--en-ui); font-size: 12.5px;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; transition: .15s;
}
.btn svg { width: 15px; height: 15px; fill: currentColor; }
.btn--red   { background: var(--red); color: #fff; }
.btn--red:hover { background: var(--red-dark); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn--wa    { background: #25D366; color: #06371A; }
.btn--wa:hover { background: #1FBB59; }
.btn--dark  { background: var(--navy); color: #fff; }
.btn--dark:hover { background: var(--navy-2); }

/* --------------------------------------------------------------------------
   14. SECTION BLOCKS (Punjab / Canada / India)
   -------------------------------------------------------------------------- */
.block { margin-bottom: var(--s7); }
.block__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--gap);
}
.card__title {
  font-family: var(--pa-display); font-weight: 600;
  font-size: 16.5px; line-height: var(--lh-pa-head);
  color: var(--ink); margin-top: 11px;
}
.card__title a:hover { color: var(--red); }
.card .meta { margin-top: 9px; }

/* First card of a block gets emphasis on wide screens */
.block__grid--cat { grid-template-columns: repeat(3, minmax(0,1fr)); }
.block__grid--cat .card__title { font-size: 18px; }
.block__grid--feature { grid-template-columns: minmax(0,1.6fr) repeat(3, minmax(0,1fr)); }
.block__grid--feature .card:first-child .card__title { font-size: 22px; }

/* --------------------------------------------------------------------------
   15. OBITUARIES
   -------------------------------------------------------------------------- */
.obits {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--navy);
  padding: var(--s6);
  margin-bottom: var(--s7);
}
.obits .sec-head { border-bottom-color: var(--rule-strong); }
.obits__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--gap);
}
.obit {
  background: var(--paper); border: 1px solid var(--rule);
  padding: var(--s4); text-align: center;
}
.obit__photo {
  width: 104px; margin: 0 auto var(--s3);
  padding: 5px; background: var(--paper-2);
  border: 1px solid var(--rule-strong);
}
.obit__name {
  font-family: var(--pa-display); font-weight: 700; font-size: 18px;
  line-height: var(--lh-pa-head); color: var(--ink);
}
.obit__age {
  font-family: var(--pa-ui); font-size: 13.5px; color: var(--muted);
  line-height: 1.8; margin-top: 4px;
}
.obit__divider {
  width: 40px; height: 1px; background: var(--rule-strong);
  margin: var(--s3) auto;
}
.obit__detail {
  font-family: var(--pa-ui); font-size: 13.5px;
  line-height: var(--lh-pa-body); color: var(--body);
}
.obit__detail strong { color: var(--ink); font-weight: 600; }
.obits__cta {
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--s3);
}
.obits__cta p {
  margin: 0; font-family: var(--pa-ui); font-size: 14px;
  line-height: var(--lh-pa-body); color: var(--body);
}

/* --------------------------------------------------------------------------
   16. SIDEBAR
   -------------------------------------------------------------------------- */
.widget { margin-bottom: var(--s6); }
.widget__head {
  border-bottom: 2px solid var(--ink); padding-bottom: 8px;
  margin-bottom: var(--s4);
  display: flex; align-items: baseline; gap: 10px;
}
.widget__head h3 {
  font-family: var(--pa-display); font-size: 19px; font-weight: 700;
  line-height: var(--lh-pa-head);
}
.widget__head span {
  font-family: var(--en-ui); font-size: 10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.mostread li {
  display: grid; grid-template-columns: 34px minmax(0,1fr);
  gap: var(--s3); padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule);
}
.mostread li:last-child { border-bottom: 0; }
.mostread__num {
  font-family: var(--en-display); font-size: 27px; font-weight: 700;
  line-height: 1; color: var(--rule-strong);
}
.mostread__title {
  font-family: var(--pa-ui); font-size: 14.5px;
  line-height: var(--lh-pa-body); color: var(--ink); font-weight: 500;
}
.mostread__title:hover { color: var(--red); }

.newsletter {
  background: var(--paper-2); border: 1px solid var(--rule);
  border-left: 4px solid var(--red); padding: var(--s5);
}
.newsletter h3 {
  font-family: var(--pa-display); font-size: 19px;
  line-height: var(--lh-pa-head); margin-bottom: 8px;
}
.newsletter p {
  font-family: var(--pa-ui); font-size: 13.5px;
  line-height: var(--lh-pa-body); color: var(--body);
}
.newsletter__form { display: grid; gap: 9px; margin-top: var(--s4); }
.newsletter input {
  width: 100%; padding: 11px 13px; border: 1px solid var(--rule-strong);
  background: #fff; font-family: var(--en-ui); font-size: 14px;
  border-radius: var(--radius);
}
.newsletter input:focus { outline: 2px solid var(--navy-2); outline-offset: -1px; }
.newsletter .btn { justify-content: center; }
.newsletter__note {
  font-family: var(--en-ui); font-size: 11px; color: var(--muted);
  margin: 9px 0 0; letter-spacing: .03em;
}

/* --------------------------------------------------------------------------
   17. VIDEO
   -------------------------------------------------------------------------- */
.videos { background: #0A1721; padding: var(--s7) 0; }
.videos .sec-head { border-bottom-color: rgba(255,255,255,.25); }
.videos .sec-head__pa { color: #fff; }
.videos__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--gap);
}
/* The thumbnail is a button: nothing is requested from YouTube until the
   reader actually clicks, so the page loads fast and drops no YT cookies. */
.video__thumb {
  position: relative; display: block; width: 100%;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.video__thumb .ph { display: block; }
.video__thumb:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.video__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  pointer-events: none;
}
.video__play span {
  width: 58px; height: 40px; background: rgba(200,16,46,.94);
  border-radius: 9px; display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.35); transition: .15s;
}
.video__play svg { width: 18px; height: 18px; fill: #fff; }
.video__thumb:hover .video__play span { background: #E31235; transform: scale(1.06); }

.video__frame { position: relative; aspect-ratio: 16/9; background: #000; }
.video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video__title {
  display: block; width: 100%; text-align: left;
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--pa-ui); font-size: 14.5px; font-weight: 500;
  line-height: var(--lh-pa-body); color: #E8EDF2; margin-top: 11px;
}
.video__title:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.video__meta {
  font-family: var(--en-ui); font-size: 11.5px; color: #8698A8;
  margin-top: 6px; letter-spacing: .04em;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
}
.video__ext { color: #A8BACB; border-bottom: 1px solid rgba(168,186,203,.4); }
.video__ext:hover { color: #fff; border-bottom-color: #fff; }

/* --------------------------------------------------------------------------
   17b. APP SECTION (PWA)
        There is no native app and no store listing, so this section sells
        what actually exists: install straight from the browser.
   -------------------------------------------------------------------------- */
.app { background: var(--paper-2); border-top: 1px solid var(--rule); padding: var(--s7) 0; }
.app__grid {
  display: grid; grid-template-columns: 250px minmax(0,1fr);
  gap: var(--s7); align-items: center;
}
.app__eyebrow {
  font-family: var(--en-ui); font-size: 10.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--red);
}
.app__title {
  font-family: var(--pa-display); font-weight: 700;
  font-size: clamp(24px, 3.2vw, 34px); line-height: var(--lh-pa-head);
  color: var(--ink); margin: 10px 0 8px;
}
.app__lede {
  font-family: var(--pa-ui); font-size: 15px; line-height: var(--lh-pa-body);
  color: var(--body); max-width: 56ch;
}
.app__feats {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--s4); margin: var(--s5) 0;
}
.app__feat { display: flex; gap: 11px; align-items: flex-start; }
.app__feat svg {
  width: 26px; height: 26px; flex: none; fill: none;
  stroke: var(--red); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round; margin-top: 2px;
}
.app__feat b {
  display: block; font-family: var(--pa-ui); font-size: 14.5px;
  font-weight: 600; color: var(--ink); line-height: var(--lh-pa-body);
}
.app__feat span {
  display: block; font-family: var(--en-ui); font-size: 11.5px;
  color: var(--muted); line-height: 1.6; margin-top: 2px;
}
.app__steps {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s4);
}
.app__step {
  background: #fff; border: 1px solid var(--rule);
  border-top: 3px solid var(--navy); padding: var(--s4);
}
.app__step h4 {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--en-ui); font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
  margin-bottom: 10px;
}
.app__step h4 svg { width: 17px; height: 17px; fill: var(--navy); }
.app__step ol {
  margin: 0; padding-left: 18px;
  font-family: var(--pa-ui); font-size: 13.5px;
  line-height: var(--lh-pa-body); color: var(--body);
}
.app__step li { margin-bottom: 4px; }
.app__note {
  font-family: var(--en-ui); font-size: 11.5px; color: var(--muted);
  margin-top: var(--s4); letter-spacing: .03em;
}

/* Phone mock — pure CSS, no asset */
.app__phone {
  width: 210px; margin: 0 auto; background: var(--navy);
  border-radius: 26px; padding: 9px;
  box-shadow: 0 18px 44px rgba(11,31,51,.3);
}
.app__screen {
  background: #fff; border-radius: 18px; overflow: hidden;
  aspect-ratio: 9/17.5; display: flex; flex-direction: column;
}
.app__screen-top {
  background: var(--navy); color: #fff; text-align: center;
  padding: 16px 8px 10px;
}
.app__screen-top b {
  display: block; font-family: var(--pa-display); font-size: 17px;
  line-height: var(--lh-pa-head);
}
.app__screen-bar { height: 4px; background: var(--red); }
.app__screen-body { padding: 10px; display: grid; gap: 8px; align-content: start; }
.app__skel { background: var(--paper-3); border-radius: 2px; }
.app__skel--img { aspect-ratio: 16/9; }
.app__skel--l { height: 9px; }
.app__skel--m { height: 9px; width: 78%; }
.app__skel--s { height: 7px; width: 46%; background: #E4E0D8; }

@media (max-width: 900px) {
  .app__grid { grid-template-columns: minmax(0,1fr); gap: var(--s6); }
  .app__phone { order: 2; }
}
@media (max-width: 560px) {
  .app { padding: var(--s6) 0; }
  .app__feats { grid-template-columns: minmax(0,1fr); gap: var(--s3); margin: var(--s4) 0; }
  .app__steps { grid-template-columns: minmax(0,1fr); }
  .app__phone { width: 178px; }
}

/* --------------------------------------------------------------------------
   18. FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--navy); color: #C3D0DC; padding: var(--s7) 0 0; }
.footer__grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: var(--s6); padding-bottom: var(--s6);
  border-bottom: 1px solid var(--rule-dark);
}
.footer__brand .brand__name { color: #fff; font-size: 30px; }
.footer__brand .brand__mark { justify-content: flex-start; gap: 0; }
.footer__about {
  font-family: var(--pa-ui); font-size: 13.5px;
  line-height: var(--lh-pa-body); color: #A9BACA; margin-top: var(--s4);
  max-width: 34ch;
}
.footer h4 {
  font-family: var(--en-ui); font-size: 11.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: #fff;
  margin-bottom: var(--s4);
}
.footer__links li { margin-bottom: 9px; }
.footer__links a {
  font-family: var(--en-ui); font-size: 13.5px; color: #A9BACA;
}
.footer__links a:hover { color: #fff; }
.footer__contact {
  font-family: var(--en-ui); font-size: 13.5px; line-height: 1.8;
  color: #A9BACA; font-style: normal;
}
.footer__contact a:hover { color: #fff; }
.footer__social { display: flex; gap: 9px; margin-top: var(--s4); }
.footer__social a,
.footer__social span {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  transition: transform .15s, filter .15s;
}
.footer__social a:hover { transform: translateY(-2px); filter: brightness(1.1); }
.footer__social svg { width: 17px; height: 17px; fill: currentColor; }
.footer__advertise {
  background: rgba(200,16,46,.13); border: 1px solid rgba(200,16,46,.4);
  padding: var(--s4); margin-top: var(--s4);
}
.footer__advertise p {
  font-family: var(--pa-ui); font-size: 13px; line-height: var(--lh-pa-body);
  color: #E0E8EF; margin-bottom: 11px;
}
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  align-items: center; justify-content: space-between;
  padding: var(--s4) 0; font-family: var(--en-ui);
  font-size: 12px; color: #7D8FA0;
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: var(--s4); }
.footer__bottom a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   19. RESPONSIVE — mobile-first corrections
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .layout { grid-template-columns: minmax(0,1fr); gap: var(--s6); }
  .sidebar { position: static; }
  .sidebar .widget { margin-bottom: var(--s5); }
  .block__grid, .block__grid--feature,
  .videos__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .block__grid--feature .card:first-child { grid-column: 1 / -1; }
  .block__grid--feature .card:first-child .card__title { font-size: 24px; }
  .obits__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* The five product names are long. Anything under a large laptop gets
   the drawer instead of a cramped or clipped horizontal bar. */
@media (max-width: 1280px) {
  /* ---- Phone navigation: hamburger drawer with accordion mega menus ----
     Raised from 1023px when the sixth vertical (Events) was added: six
     labels plus four SOON badges no longer fit one rail on a 1280 laptop. */
  .nav__toggle { display: flex; }
  .nav__inner { justify-content: space-between; flex-wrap: wrap; }
  /* flex:0 0 100% — a plain width:100% loses to the base rule's flex-basis:0 */
  .nav__toggle { order: 1; }
  .nav__search { order: 2; }
  .nav__list {
    display: none; order: 3; flex: 0 0 100%; width: 100%;
    flex-direction: column; align-items: stretch;
    background: var(--navy-2);
    border-top: 1px solid var(--rule-dark);
    max-height: 72vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .nav__list.is-open { display: flex; }
  .nav__item { display: block; position: static; }
  .nav__link {
    width: 100%; justify-content: space-between;
    border-bottom: 1px solid var(--rule-dark);
    padding: 15px 16px; min-height: 52px;   /* comfortable thumb target */
    text-align: left;
  }
  .nav__item.is-active > .nav__link { background: rgba(200,16,46,.28); }
  .nav__caret { transition: transform .18s; }
  .nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

  /* Mega menu becomes an in-flow accordion panel */
  .mega {
    position: static; box-shadow: none; border-top: 0;
    border-bottom: 1px solid var(--rule-dark);
    background: #0D2E49; padding: var(--s4) 0 var(--s5);
  }
  .mega__inner { grid-template-columns: minmax(0,1fr); gap: var(--s4); padding: 0 16px; }
  .mega__col h4 { color: #FFD9DE; border-bottom-color: rgba(255,255,255,.18); }
  .mega__col a { color: #DCE6EF; padding: 10px 0; min-height: 40px; }
  .mega__col a:hover { color: #fff; }
  .mega__col a span[lang="en"] { color: #8DA2B5; }
  /* The dimmed "not launched yet" links need their own value inside the
     dark drawer; the light-theme grey would read as almost invisible. */
  .mega--soon .mega__col a,
  .mega--soon .mega__col a:hover { color: #93A7B9; }
  .mega__notice {
    background: rgba(176,141,63,.16); border-left-color: var(--gold);
    margin-bottom: 0;
  }
  .mega__notice b { color: #F2D79B; }
  .mega__notice span { color: #C3D0DC; }
  .mega__promo { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
  .mega__promo h5 { color: #fff; }
  .mega__promo p { color: #C3D0DC; }

  .nav__spacer { display: none; }
  .nav__post { margin: 8px 8px 8px 0; }

}

@media (max-width: 900px) {
  .masthead__inner {
    grid-template-columns: minmax(0,1fr);
    gap: var(--s4); padding-block: var(--s5);
    justify-items: center;
  }
  .masthead__meta {
    flex-direction: row; align-items: center; gap: 10px;
    order: 1; flex-wrap: wrap; justify-content: center;
  }
  .brand { order: 2; }
  /* one row instead of two — saves a full band of height above the fold */
  .masthead__actions { order: 3; align-items: center; flex-direction: row;
    flex-wrap: wrap; justify-content: center; gap: var(--s3); }
  .leaderboard { padding-block: var(--s4); }
}

@media (max-width: 900px) {
  .epaper__sections { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .top-stories { grid-template-columns: minmax(0,1fr); gap: var(--s5); }
  .epaper { padding: var(--s5); }
  .epaper__grid { grid-template-columns: minmax(0,1fr); gap: var(--s5); }
  /* width, not max-width: `margin:0 auto` on a grid item makes it
     shrink-to-fit, and the % -sized .ph inside then collapses to zero. */
  .epaper__cover { width: 190px; max-width: 70%; margin: 0 auto; transform: none; }
  .epaper__sections { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .obits__grid { grid-template-columns: minmax(0,1fr); }
  .ad--sidebar-tall { min-height: 260px; }
}

@media (max-width: 560px) {
  :root { --gap: 16px; }
  .block__grid, .block__grid--feature, .videos__grid {
    grid-template-columns: minmax(0,1fr);
  }
  .block__grid .card, .videos__grid .video {
    display: grid; grid-template-columns: 116px minmax(0,1fr); gap: var(--s3);
    padding-bottom: var(--s4); border-bottom: 1px solid var(--rule);
  }
  .videos__grid .video { border-bottom-color: rgba(255,255,255,.14); }
  .block__grid .card .card__title,
  .block__grid--feature .card:first-child .card__title { font-size: 16px; margin-top: 0; }
  .block__grid .card .meta {
    grid-column: 2; font-size: 11px; gap: 6px; letter-spacing: 0; margin-top: 7px;
  }
  .videos__grid .video .video__title { margin-top: 0; }
  .videos__grid .video.is-playing { display: block; }
  .block__grid .card .ph--16x9, .videos__grid .video .ph--16x9 { aspect-ratio: 4/3; }
  .footer__grid { grid-template-columns: minmax(0,1fr); gap: var(--s5); }
  .brand__latin { letter-spacing: .22em; }
  .brand__rule { display: none; }
  .masthead__date { font-size: 11.5px; }
  .masthead__social { gap: 6px; }
  .masthead__social a,
  .masthead__social span { width: 32px; height: 32px; }
  .masthead__social svg { width: 15px; height: 15px; }
  .btn-epaper { padding: 8px 12px; font-size: 11px; }
  /* Weather is a desktop nicety. On a phone the first headline wins. */
  .masthead__weather { display: none; }
  .masthead__inner { padding-block: var(--s4) var(--s5); }
  .brand__tag { font-size: 10.5px; letter-spacing: .1em; }
  .obits { padding: var(--s4); }
  /* Three-part section heading does not fit 360px — let it wrap */
  .sec-head { flex-wrap: wrap; gap: 8px var(--s3); }
  .sec-head__more { margin-left: auto; font-size: 11px; }
  .sec-head__pa { font-size: 20px; }
  .ticker__label { padding: 0 11px; font-size: 10.5px; letter-spacing: .1em; }
}

/* --------------------------------------------------------------------------
   21. E-PAPER VIEWER
       The point of this screen: a reader on a phone should see page one in
       under a second. The old site handed them a 36 MB PDF, so nobody opened
       it. Here each page is a separate ~180 KB image, loaded as they turn.
       The full PDF is still one tap away for anyone who wants it.
   -------------------------------------------------------------------------- */

/* -- Edition bar: which paper, which date, which section ------------------ */
.edition {
  background: var(--paper); border-bottom: 1px solid var(--rule);
}
.edition__top {
  display: flex; align-items: center; gap: var(--s4);
  flex-wrap: wrap; padding-block: var(--s4);
}
.edition__title {
  font-family: var(--pa-display); font-weight: 700;
  font-size: clamp(20px, 3vw, 27px); line-height: var(--lh-pa-head);
  color: var(--ink);
}
.edition__date {
  font-family: var(--en-ui); font-size: 13px; color: var(--muted);
  letter-spacing: .04em;
}
.edition__spacer { flex: 1 1 auto; }
.edition__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Section tabs — A Section, B Section, Matrimonial, Seattle, Special */
.edition__tabs {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; border-top: 1px solid var(--rule);
}
.edition__tabs::-webkit-scrollbar { display: none; }
.edition__tabs a {
  flex: none; white-space: nowrap; padding: 13px 16px;
  font-family: var(--en-ui); font-size: 13px; font-weight: 600;
  letter-spacing: .04em; color: var(--body);
  border-bottom: 3px solid transparent;
}
.edition__tabs a:hover { color: var(--ink); background: var(--paper-2); }
.edition__tabs a.is-active {
  color: var(--red); border-bottom-color: var(--red); font-weight: 700;
}
.edition__tabs span {
  display: block; font-size: 10.5px; font-weight: 400;
  color: var(--muted); margin-top: 2px;
}

.pagemock { display: block; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 880'><rect width='620' height='880' fill='%23ffffff'/><rect x='34' y='30' width='552' height='30' fill='%230B1F33'/><rect x='34' y='66' width='552' height='3' fill='%23C8102E'/><rect x='34' y='86' width='390' height='17' fill='%232b3a49'/><rect x='34' y='110' width='300' height='17' fill='%232b3a49'/><rect x='34' y='146' width='340' height='200' fill='%23dfe3e7'/><rect x='392' y='146' width='194' height='9' fill='%23c9ced4'/><rect x='392' y='163' width='194' height='9' fill='%23c9ced4'/><rect x='392' y='180' width='160' height='9' fill='%23c9ced4'/><rect x='392' y='204' width='194' height='9' fill='%23c9ced4'/><rect x='392' y='221' width='194' height='9' fill='%23c9ced4'/><rect x='392' y='238' width='140' height='9' fill='%23c9ced4'/><rect x='392' y='262' width='194' height='9' fill='%23c9ced4'/><rect x='392' y='279' width='170' height='9' fill='%23c9ced4'/><rect x='392' y='303' width='194' height='9' fill='%23c9ced4'/><rect x='392' y='320' width='120' height='9' fill='%23c9ced4'/><rect x='34' y='368' width='552' height='2' fill='%23d7dbe0'/><g fill='%23c9ced4'><rect x='34' y='388' width='166' height='14'/><rect x='34' y='412' width='166' height='8'/><rect x='34' y='426' width='166' height='8'/><rect x='34' y='440' width='140' height='8'/><rect x='34' y='462' width='166' height='8'/><rect x='34' y='476' width='166' height='8'/><rect x='34' y='490' width='120' height='8'/><rect x='227' y='388' width='166' height='14'/><rect x='227' y='412' width='166' height='8'/><rect x='227' y='426' width='166' height='8'/><rect x='227' y='440' width='150' height='8'/><rect x='227' y='462' width='166' height='8'/><rect x='227' y='476' width='130' height='8'/><rect x='420' y='388' width='166' height='14'/><rect x='420' y='412' width='166' height='8'/><rect x='420' y='426' width='166' height='8'/><rect x='420' y='440' width='110' height='8'/></g><rect x='34' y='520' width='240' height='150' fill='%23dfe3e7'/><g fill='%23c9ced4'><rect x='292' y='520' width='294' height='12'/><rect x='292' y='542' width='294' height='8'/><rect x='292' y='556' width='294' height='8'/><rect x='292' y='570' width='240' height='8'/><rect x='292' y='592' width='294' height='8'/><rect x='292' y='606' width='294' height='8'/><rect x='292' y='620' width='200' height='8'/><rect x='292' y='644' width='294' height='8'/><rect x='292' y='658' width='170' height='8'/></g><rect x='34' y='694' width='552' height='2' fill='%23d7dbe0'/><g fill='%23c9ced4'><rect x='34' y='712' width='166' height='8'/><rect x='34' y='726' width='166' height='8'/><rect x='34' y='740' width='130' height='8'/><rect x='227' y='712' width='166' height='8'/><rect x='227' y='726' width='166' height='8'/><rect x='227' y='740' width='150' height='8'/><rect x='420' y='712' width='166' height='8'/><rect x='420' y='726' width='140' height='8'/></g><rect x='34' y='772' width='552' height='74' fill='%23eceff2'/></svg>") center/cover no-repeat #fff; aspect-ratio: 620/880; }

/* -- The reading stage ---------------------------------------------------- */
.reader { background: #16222E; padding-block: var(--s5) var(--s6); }
.reader__grid {
  display: grid; grid-template-columns: 116px minmax(0,1fr); gap: var(--s5);
  align-items: start;
}

/* Thumbnail rail */
.reader__rail {
  display: grid; gap: 9px; align-content: start;
  max-height: 78vh; overflow-y: auto; padding-right: 4px;
}
.reader__rail::-webkit-scrollbar { width: 5px; }
.reader__rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 3px; }
.thumb {
  position: relative; display: block; width: 100%; padding: 0;
  border: 2px solid transparent; background: none; cursor: pointer;
}
.thumb img { width: 100%; display: block; background: #fff; }
.thumb.is-active { border-color: var(--red); }
.thumb b {
  position: absolute; left: 4px; bottom: 4px;
  background: rgba(11,31,51,.85); color: #fff;
  font-family: var(--en-ui); font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 2px;
}

/* Page stage
   Named .reader__page and not .page. WordPress puts a `page` class on <body>
   for every static page, so a bare .page rule here applied max-width:760px
   and a drop shadow to the entire site the moment the front page became a
   static page — the whole paper rendered as a 760px column with a shadow.
   Single-word class names belong to WordPress; ours are prefixed. */
.reader__stage { min-width: 0; }
.reader__page {
  position: relative; background: #fff; margin: 0 auto;
  box-shadow: 0 14px 40px rgba(0,0,0,.4); max-width: 760px;
}
.reader__page img { width: 100%; display: block; }

/* Controls under the page */
.reader__bar {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-top: var(--s4); flex-wrap: wrap;
}
.rbtn {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 42px; padding: 0 15px; border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08); color: #E8EDF2; cursor: pointer;
  font-family: var(--en-ui); font-size: 12.5px; font-weight: 600;
  letter-spacing: .05em; border-radius: var(--radius); transition: .15s;
}
.rbtn:hover { background: rgba(255,255,255,.17); color: #fff; }
.rbtn:disabled { opacity: .35; cursor: default; }
.rbtn svg { width: 15px; height: 15px; fill: currentColor; }
.rbtn--icon { padding: 0; width: 42px; justify-content: center; }
.rbtn--red { background: var(--red); border-color: var(--red); color: #fff; }
.rbtn--red:hover { background: var(--red-dark); }
.rcount {
  font-family: var(--en-ui); font-size: 13px; color: #A9BACA;
  min-width: 92px; text-align: center; letter-spacing: .05em;
}
.rcount b { color: #fff; }

/* The weight badge — the whole pitch in one line */
.weight {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap; margin-top: var(--s4);
  font-family: var(--en-ui); font-size: 12px; color: #8DA2B5;
}
.weight b { color: #6FCF97; }
.weight s { color: #8DA2B5; opacity: .7; }

/* -- Archive strip -------------------------------------------------------- */
.pastrip { background: var(--paper); padding-block: var(--s6); }
.pastrip__grid {
  display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: var(--gap);
}
.pastrip__item { display: block; }
.pastrip__item .shot {
  background: #fff; border: 1px solid var(--rule); padding: 5px;
  transition: .15s;
}
.pastrip__item:hover .shot { border-color: var(--red); transform: translateY(-3px); }
.pastrip__item img { width: 100%; display: block; }
.pastrip__item b {
  display: block; font-family: var(--en-ui); font-size: 12.5px;
  font-weight: 600; color: var(--ink); margin-top: 9px; line-height: 1.4;
}
.pastrip__item span {
  display: block; font-family: var(--en-ui); font-size: 11px;
  color: var(--muted); margin-top: 2px;
}

@media (max-width: 1023px) {
  .pastrip__grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  /* Rail moves under the page and turns into a horizontal filmstrip —
     a 116px column would eat a third of a phone screen. */
  .reader__grid { grid-template-columns: minmax(0,1fr); gap: var(--s4); }
  .reader__rail {
    grid-row: 2; display: flex; gap: 8px; max-height: none;
    overflow-x: auto; overflow-y: hidden; padding-bottom: 4px;
  }
  .thumb { flex: 0 0 74px; }
  .pastrip__grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .reader { padding-block: var(--s4) var(--s5); }
  .edition__top { padding-block: var(--s3); gap: var(--s3); }
  .edition__tabs a { padding: 11px 13px; font-size: 12px; }
  .rbtn { font-size: 11.5px; padding: 0 12px; }
  .rcount { min-width: 78px; font-size: 12px; }
  .pastrip__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* --------------------------------------------------------------------------
   22. ARTICLE
       The typography test for the whole site. 11,790 stories open here, and
       a large share of the readers are older people on older phones. So the
       body text is big, the measure is short, and the line-height is loose —
       Gurmukhi matras sit above and below the baseline and get clipped when
       lines are packed tight.
   -------------------------------------------------------------------------- */

/* Reading progress — a thin red line, nothing more */
.progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--red); z-index: 80; transition: width .1s linear;
}

.breadcrumb {
  font-family: var(--en-ui); font-size: 12px; color: var(--muted);
  padding-block: var(--s4) 0; letter-spacing: .04em;
}
.breadcrumb a:hover { color: var(--red); }
.breadcrumb span { margin: 0 7px; opacity: .5; }

.art { max-width: 760px; }
.art__kicker {
  display: inline-block; font-family: var(--en-ui); font-size: 11px;
  font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: #fff; background: var(--red); padding: 5px 11px;
  border-radius: var(--radius); margin-bottom: var(--s4);
}
.art__title {
  font-family: var(--pa-display); font-weight: 700;
  font-size: clamp(27px, 4.6vw, 44px);
  line-height: 1.5;                 /* looser than Latin — matras need it */
  color: var(--ink); margin: 0 0 var(--s4);
  /* NO letter-spacing — Gurmukhi */
}
.art__standfirst {
  font-family: var(--pa-ui); font-size: clamp(16.5px, 2.2vw, 19px);
  line-height: var(--lh-pa-body); color: var(--ink-2);
  font-weight: 500; margin: 0 0 var(--s5);
  padding-left: var(--s4); border-left: 3px solid var(--rule-strong);
}

.art__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px var(--s3);
  padding-block: var(--s4); border-block: 1px solid var(--rule);
  font-family: var(--en-ui); font-size: 12.5px; color: var(--muted);
  letter-spacing: .04em;
}
.art__meta b { color: var(--ink); font-weight: 600; }
.art__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--rule-strong); }

/* -- Share row. WhatsApp first and biggest — locked brief rule ------------ */
.share { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--s5) 0; }
.share__btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 0 15px; border-radius: var(--radius);
  font-family: var(--en-ui); font-size: 12.5px; font-weight: 700;
  letter-spacing: .06em; border: 1px solid var(--rule); color: var(--body);
  background: #fff; cursor: pointer; transition: .15s;
}
.share__btn svg { width: 16px; height: 16px; fill: currentColor; }
.share__btn:hover { border-color: var(--ink); color: var(--ink); }
.share__btn--wa {
  background: #25D366; border-color: #25D366; color: #06371A;
  font-size: 13px; padding: 0 20px; min-height: 46px;
}
.share__btn--wa:hover { background: #1FBB59; border-color: #1FBB59; color: #04290F; }
.share__spacer { flex: 1 1 auto; }

/* Font size control — genuinely used by older readers */
.fsize { display: inline-flex; align-items: center; gap: 2px; }
.fsize span {
  font-family: var(--en-ui); font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin-right: 6px;
}
.fsize button {
  width: 34px; height: 34px; border: 1px solid var(--rule); background: #fff;
  color: var(--body); cursor: pointer; font-family: var(--pa-ui);
  line-height: 1; border-radius: var(--radius); transition: .15s;
}
.fsize button:nth-child(2) { font-size: 12px; }
.fsize button:nth-child(3) { font-size: 15px; }
.fsize button:nth-child(4) { font-size: 18px; }
.fsize button:hover { border-color: var(--ink); }
.fsize button.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* -- Hero ----------------------------------------------------------------- */
.art__hero { margin: 0 0 var(--s5); }
.art__hero img, .art__hero .ph { width: 100%; height: auto; display: block; }
.art__hero figcaption {
  font-family: var(--pa-ui); font-size: 13.5px; line-height: 1.75;
  color: var(--muted); padding-top: 9px;
  border-bottom: 1px solid var(--rule); padding-bottom: var(--s3);
}

/* -- The body. This is the part that matters. ----------------------------- */
.art__body {
  --art-scale: 1;
  font-family: var(--pa-ui);
  font-size: calc(clamp(17px, 2.3vw, 19px) * var(--art-scale));
  line-height: var(--lh-pa-body);      /* 1.9 */
  color: var(--body);
  max-width: 66ch;                     /* short measure = easier lines */
}
.art__body p { margin: 0 0 var(--s5); }
/* No drop cap. CSS ::first-letter splits Gurmukhi conjuncts — ਪ੍ਰਬੰਧ comes
   out as "ਪ੍" + "ਰਬੰਧ", and "ਪ੍" is not a letter at all, just a dangling
   halant. Tested and confirmed. The opening paragraph is set a shade larger
   and darker instead, which reads as an intro without touching the letters. */
.art__body p:first-of-type {
  font-size: 1.06em; color: var(--ink-2); font-weight: 500;
}
.art__body h2 {
  font-family: var(--pa-display); font-size: calc(1.35em * 1);
  line-height: var(--lh-pa-head); color: var(--ink);
  margin: var(--s6) 0 var(--s3);
}
.art__body a { color: var(--red); border-bottom: 1px solid rgba(200,16,46,.35); }
.art__body a:hover { border-bottom-color: var(--red); }
.art__body ul, .art__body ol { margin: 0 0 var(--s5); padding-left: 22px; }
.art__body li { margin-bottom: 8px; }

/* Images inside imported copy. The old site pasted photos straight into the
   body with no wrapper and, often, a fixed width attribute, so they need the
   same height:auto guard plus a little air. width:auto undoes any inline
   width the editor left behind that is wider than this column. */
.art__body img {
  width: auto; height: auto;
  max-width: 100%;
  margin: var(--s5) 0;
  border: 1px solid var(--rule);
}
.art__body figure { margin: var(--s5) 0; max-width: 100%; }
.art__body figure img { margin: 0; }
.art__body figcaption {
  font-family: var(--pa-ui); font-size: 13.5px; line-height: 1.75;
  color: var(--muted); padding-top: 8px;
}
/* Anything the old editor sized in pixels wider than the measure. */
.art__body iframe,
.art__body video,
.art__body table { max-width: 100%; }

.pullquote {
  margin: var(--s6) 0; padding: var(--s5) 0;
  border-block: 3px solid var(--ink);
  font-family: var(--pa-display); font-weight: 600;
  font-size: calc(1.22em * 1); line-height: var(--lh-pa-head);
  color: var(--ink); text-align: center;
}
.pullquote cite {
  display: block; font-family: var(--en-ui); font-size: 12px;
  font-style: normal; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-top: 12px;
}

/* -- Tags, author, prev/next ---------------------------------------------- */
.art__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--s6) 0 var(--s5); }
.art__tags a {
  font-family: var(--pa-ui); font-size: 13px; color: var(--body);
  background: var(--paper-2); border: 1px solid var(--rule);
  padding: 6px 13px; border-radius: var(--radius); line-height: 1.7;
}
.art__tags a:hover { border-color: var(--ink); color: var(--ink); }

/* .authorbox, not .author. WordPress puts an `author` class on <body> for
   every author archive, and this grid would then lay out the whole page as a
   62px column beside everything else — the same collision .page caused. */
.authorbox {
  display: grid; grid-template-columns: 62px minmax(0,1fr); gap: var(--s4);
  background: var(--paper-2); border: 1px solid var(--rule);
  border-left: 4px solid var(--red); padding: var(--s4); margin-bottom: var(--s6);
}
.authorbox .ph { border-radius: 50%; }
.authorbox b {
  display: block; font-family: var(--pa-display); font-size: 17px;
  line-height: var(--lh-pa-head); color: var(--ink);
}
.authorbox span {
  display: block; font-family: var(--en-ui); font-size: 11.5px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
  margin: 3px 0 7px;
}
.authorbox p {
  margin: 0; font-family: var(--pa-ui); font-size: 13.5px;
  line-height: var(--lh-pa-body); color: var(--body);
}

.prevnext {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--gap); margin-bottom: var(--s7);
}
.prevnext a {
  border: 1px solid var(--rule); padding: var(--s4); transition: .15s;
}
.prevnext a:hover { border-color: var(--ink); }
.prevnext span {
  display: block; font-family: var(--en-ui); font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--red);
  margin-bottom: 8px;
}
.prevnext b {
  display: block; font-family: var(--pa-display); font-size: 15.5px;
  font-weight: 600; line-height: var(--lh-pa-head); color: var(--ink);
}
.prevnext a.is-next { text-align: right; }

/* -- Sticky WhatsApp bar on phones ---------------------------------------- */
.wabar { display: none; }

@media (max-width: 760px) {
  .prevnext { grid-template-columns: minmax(0,1fr); }
  .prevnext a.is-next { text-align: left; }

  /* The brief locks WhatsApp as the most prominent share action. On a phone
     that means always reachable with the thumb, not scrolled past. */
  .wabar {
    display: flex; gap: 8px; align-items: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: #fff; border-top: 1px solid var(--rule);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 18px rgba(11,31,51,.1);
  }
  .wabar__wa {
    flex: 1 1 auto; display: inline-flex; align-items: center;
    justify-content: center; gap: 9px; min-height: 46px;
    background: #25D366; color: #06371A; border-radius: var(--radius);
    font-family: var(--en-ui); font-size: 14px; font-weight: 700;
    letter-spacing: .05em;
  }
  .wabar__wa svg { width: 18px; height: 18px; fill: currentColor; }
  .wabar__icon {
    flex: none; width: 46px; height: 46px; display: grid; place-items: center;
    border: 1px solid var(--rule); background: #fff; color: var(--body);
    border-radius: var(--radius); cursor: pointer;
  }
  .wabar__icon svg { width: 17px; height: 17px; fill: currentColor; }
  /* keep the footer clear of the fixed bar */
  body.has-wabar .footer { padding-bottom: 86px; }
}

/* --------------------------------------------------------------------------
   23. CATEGORY LISTING
       One template serves all 22 sections. The big one is Latest News with
       8,860 stories, so the page has to stay scannable deep into the archive
       and the pagination has to be crawlable — "Load more" hides everything
       past page one from Google, and this archive is the whole SEO case.
   -------------------------------------------------------------------------- */

.cathead {
  background: var(--paper); border-bottom: 1px solid var(--rule);
  padding-block: var(--s2) 0;
}
.cathead__row {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s3) var(--s4);
}
.cathead h1 {
  font-family: var(--pa-display); font-weight: 700;
  font-size: clamp(26px, 4vw, 38px); line-height: var(--lh-pa-head);
  color: var(--ink);
}
.cathead__en {
  font-family: var(--en-ui); font-size: 11.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: #fff; background: var(--red); padding: 5px 11px; border-radius: var(--radius);
}
.cathead__count {
  font-family: var(--en-ui); font-size: 12.5px; color: var(--muted);
  letter-spacing: .05em; margin-left: auto;
}
.cathead p {
  font-family: var(--pa-ui); font-size: 15px; line-height: var(--lh-pa-body);
  color: var(--body); max-width: 68ch; margin: var(--s3) 0 0;
}

/* Sidebar e-paper cover. Capped, because on a phone the sidebar is full
   width and an uncapped 3:4 cover becomes a 460px wall of nothing. */
.epmini { max-width: 230px; }
.epmini > .ph { display: block; }
.epmini__btn { display: block; text-align: center; margin-top: 12px; }
@media (max-width: 1080px) { .epmini { margin-inline: auto; } }

/* Sub-section chips */
.chips {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; padding-block: var(--s4);
}
.chips::-webkit-scrollbar { display: none; }
.chips a {
  flex: none; white-space: nowrap;
  font-family: var(--pa-ui); font-size: 13.5px; line-height: 1.7;
  color: var(--body); background: var(--paper-2);
  border: 1px solid var(--rule); padding: 7px 14px; border-radius: 99px;
}
.chips a:hover { border-color: var(--ink); color: var(--ink); }
.chips a.is-active {
  background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 500;
}
.chips a span[lang="en"] { color: inherit; opacity: .65; font-size: 12px; margin-left: 5px; }

/* Lead story of the section */
.catlead {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0,1fr);
  gap: var(--s5); align-items: start;
  padding-bottom: var(--s6); margin-bottom: var(--s6);
  border-bottom: 4px double var(--rule-strong);
}
.catlead__title {
  font-family: var(--pa-display); font-weight: 700;
  font-size: clamp(22px, 3.2vw, 31px); line-height: var(--lh-pa-head);
  color: var(--ink); margin: 12px 0 10px;
}
.catlead__title a:hover { color: var(--red); }
.catlead__excerpt {
  font-family: var(--pa-ui); font-size: 15.5px; line-height: var(--lh-pa-body);
  color: var(--body); max-width: 60ch;
}

/* Compact rows — denser than cards, good for a long archive */
.listrow {
  display: grid; grid-template-columns: 168px minmax(0,1fr); gap: var(--s4);
  padding-block: var(--s4); border-bottom: 1px solid var(--rule);
  align-items: start;
}
.listrow:first-of-type { border-top: 1px solid var(--rule); }
.listrow__title {
  font-family: var(--pa-display); font-weight: 600; font-size: 18px;
  line-height: var(--lh-pa-head); color: var(--ink); margin-bottom: 7px;
}
.listrow__title a:hover { color: var(--red); }
.listrow__excerpt {
  font-family: var(--pa-ui); font-size: 14px; line-height: var(--lh-pa-body);
  color: var(--muted); max-width: 72ch; margin: 0 0 7px;
}

/* Pagination — real links, not a button. Google has to be able to walk
   the whole archive. */
.pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px; padding-block: var(--s6);
}
.pager a, .pager span {
  min-width: 42px; min-height: 42px; display: inline-flex;
  align-items: center; justify-content: center; padding: 0 12px;
  font-family: var(--en-ui); font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--rule); color: var(--body); border-radius: var(--radius);
  background: #fff;
}
.pager a:hover { border-color: var(--ink); color: var(--ink); }
.pager .is-current {
  background: var(--navy); border-color: var(--navy); color: #fff; cursor: default;
}
.pager .gap { border: 0; background: none; color: var(--muted); min-width: 24px; }
.pager .edge { font-weight: 700; letter-spacing: .05em; }

@media (max-width: 1023px) {
  .catlead { grid-template-columns: minmax(0,1fr); gap: var(--s4); }
}
@media (max-width: 560px) {
  .cathead__count { margin-left: 0; width: 100%; }
  .chips { margin-inline: calc(var(--s4) * -1); padding-inline: var(--s4); }
  .listrow { grid-template-columns: 116px minmax(0,1fr); gap: var(--s3); }
  .listrow__title { font-size: 16px; }
  .listrow__excerpt { display: none; }   /* on a phone the headline is the story */
  .pager a, .pager span { min-width: 38px; min-height: 38px; padding: 0 9px; font-size: 12.5px; }
  /* "…154" is noise on a phone, but Next is the one control that matters —
     it gets its own full-width row instead of being hidden with it. */
  .pager .gap, .pager .edge--last { display: none; }
  .pager .edge--next { flex: 1 1 100%; margin-top: 10px; min-height: 46px; }
}


/* --------------------------------------------------------------------------
   24. E-PAPER ARCHIVE
   863 editions across five sections and ten years. Two jobs only: let a
   reader find one date fast, and make every edition a crawlable link so the
   archive is worth something to search engines instead of being a dead end
   behind a date picker.
   -------------------------------------------------------------------------- */

/* Year rail. Same pills as the category chips, tighter and numeric. */
.years {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; padding-block: var(--s2) var(--s4);
}
.years::-webkit-scrollbar { display: none; }
.years a {
  flex: none; font-family: var(--en-ui); font-size: 13px; font-weight: 600;
  color: var(--body); background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 7px 13px; transition: .15s;
}
.years a:hover { border-color: var(--ink); color: var(--ink); }
.years a.is-active { background: var(--red); border-color: var(--red); color: #fff; }

/* Months of the active year. Empty months stay visible but dead, so the
   reader can see at a glance where the paper has gaps. */
.months {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-block: 0 var(--s5); border-bottom: 1px solid var(--rule);
}
.months a, .months span {
  font-family: var(--en-ui); font-size: 12.5px; letter-spacing: .04em;
  padding: 6px 11px; border: 1px solid var(--rule); border-radius: var(--radius);
  color: var(--body); background: #fff; min-height: 34px;
  display: inline-flex; align-items: center;
}
.months a:hover { border-color: var(--ink); color: var(--ink); }
.months a.is-active { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.months span { color: #B9B2A7; background: var(--paper-2); cursor: default; }
.months b {
  font-family: var(--en-ui); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  align-self: center; margin-right: var(--s2);
}

/* The grid of editions */
.arcgrid {
  display: grid; grid-template-columns: repeat(5, minmax(0,1fr));
  gap: var(--gap); padding-block: var(--s6);
}
.arc { display: flex; flex-direction: column; }
.arc__cover {
  display: block; background: #fff; border: 1px solid var(--rule);
  padding: 5px; transition: .15s; position: relative;
}
.arc:hover .arc__cover { border-color: var(--red); transform: translateY(-3px); }
.arc__sec {
  position: absolute; left: 5px; top: 5px;
  font-family: var(--en-ui); font-size: 9.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #fff;
  background: var(--navy); padding: 4px 7px;
}
.arc__sec--b { background: var(--navy-2); }
.arc__sec--se { background: #3D6B4F; }
.arc__sec--mat { background: #8A3A5B; }
.arc__sec--sp { background: var(--gold); }
.arc__date {
  display: block; font-family: var(--en-ui); font-size: 13px; font-weight: 600;
  color: var(--ink); margin-top: 10px; line-height: 1.45;
}
.arc__facts {
  font-family: var(--en-ui); font-size: 11px; color: var(--muted);
  margin-top: 3px; display: flex; align-items: center; gap: 6px;
}
/* Same traffic light the WordPress admin column uses for PDF weight, so the
   newsroom sees the same signal in both places. */
.arc__wt::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  display: inline-block; margin-right: 5px; background: #4C9A5E;
}
.arc__wt--mid::before { background: #C99A2E; }
.arc__wt--big::before { background: var(--red); }
.arc__acts { display: flex; gap: 6px; margin-top: 10px; }
.arc__acts a {
  flex: 1; text-align: center; font-family: var(--en-ui); font-size: 11.5px;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 9px 6px; border-radius: var(--radius); min-height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
}
.arc__acts .is-read { background: var(--red); color: #fff; }
.arc__acts .is-read:hover { background: var(--red-dark); }

/* -- Video cards -----------------------------------------------------------
   The archive grid is shared with the e-paper, but a video card carries a
   headline instead of a date line, and the play badge has to sit on the
   thumbnail rather than beside it. Only those two things differ. */
.arc__title {
  font-family: var(--pa-ui); font-size: 15px; font-weight: 600;
  line-height: 1.55; margin: 10px 0 4px;
}
.arc__title a { color: var(--ink); }
.arc__title a:hover { color: var(--red); }
.arc__cover .hero__badge {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* A single video's embed. aspect-ratio rather than the old padding-top trick,
   because the padding hack needs a wrapper whose only job is to be broken by
   any stylesheet that touches it. */
.vidwrap {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #000; border: 1px solid var(--rule);
  /* The headline is right above this in its own bar; a full section gap
     between a title and the thing it titles reads as a mistake. */
  margin-top: var(--s4);
  max-width: 1000px; margin-inline: auto;
}
.vidwrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* The single subscribe strip, on the TV archive only. Deliberately one
   place: a subscribe button in the header, the footer and every card is how
   a newspaper turns into a channel's advertisement. */
.ytbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--navy); color: #fff;
  padding: 18px 22px;
  margin-block: var(--s7) var(--s7);
  border-left: 4px solid var(--red);
}
.ytbar__mark { width: 34px; height: 34px; flex: none; fill: var(--red); }
.ytbar__txt { flex: 1 1 260px; display: flex; flex-direction: column; gap: 3px; }
.ytbar__txt b { font-family: var(--pa-ui); font-size: 16px; font-weight: 600; line-height: 1.6; }
.ytbar__txt span { font-family: var(--pa-ui); font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,.72); }
.ytbar__btn {
  flex: none; background: var(--red); color: #fff;
  font-family: var(--en-ui); font-size: 12.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 12px 22px; border-radius: var(--radius); min-height: 44px;
  display: inline-flex; align-items: center;
}
.ytbar__btn:hover { background: var(--red-dark); }

/* ==========================================================================
   27 · TV PAGE
   The most-visited page on the site, so it gets its own components rather
   than borrowing the e-paper's. That borrowing was the bug: .arc and .ph
   were built for a 3:4 newspaper cover, and forcing a 16:9 still into them
   cropped every thumbnail. A video card is a different shape and a different
   job, so it is a different thing.
   ========================================================================== */

/* -- The stage band ------------------------------------------------------- */
.tvband { background: var(--navy); }

/* The player column: the frame, then its headline. Keeping these together
   is what stops the headline drifting below the playlist. */
.tvmain { display: flex; flex-direction: column; min-width: 0; }

/* One player, the full width of the page. The playlist that used to sit
   beside it took a third of the width and repeated, in a narrow rail, what
   the grid below already shows properly. */
.tvband--solo .hero__grid { grid-template-columns: minmax(0,1fr); }
.tvband--solo .tvnow { padding-top: 20px; max-width: 74ch; }
.tvband--solo .tvnow h2 { font-size: clamp(22px, 3vw, 31px); }

/* What is playing. Gives the page a heading instead of a bare video. */
.tvnow { padding-top: 18px; max-width: 62ch; }
.tvnow h2 {
  font-family: var(--pa-head); font-size: clamp(20px, 2.6vw, 27px);
  font-weight: 600; line-height: 1.55; color: #fff; margin: 0;
}
.tvnow__meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px;
  font-family: var(--en-ui); font-size: 12px; letter-spacing: .04em;
  color: rgba(255,255,255,.62);
}
.tvnow__dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.tvnow__meta a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.35); }
.tvnow__meta a:hover { border-bottom-color: var(--red); color: var(--red); }

/* The band's own breathing room. Tight above the player, generous below the
   headline, rather than the same gap in both directions. */
.tvband { padding-block: var(--s5) var(--s6); }

/* -- The grid ------------------------------------------------------------- */
.vgrid {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--s6) var(--gap); padding-block: var(--s6) var(--s7);
}
.vcard { display: flex; flex-direction: column; min-width: 0; }

.vcard__shot {
  position: relative; display: block; width: 100%;
  aspect-ratio: 16 / 9; overflow: hidden;
  background: #11212F; border-radius: var(--radius);
}
/* The still itself. YouTube's mqdefault is a true 16:9 frame, so cover
   neither crops nor letterboxes it — it lands exactly. */
.vcard__shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s ease;
}
.vcard:hover .vcard__shot img { transform: scale(1.04); }

/* A wash from the bottom so the play button reads on a bright frame. */
.vcard__shot::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 56%;
  background: linear-gradient(to top, rgba(8,18,28,.72), transparent);
  pointer-events: none;
}
.vcard__play {
  position: absolute; left: 10px; bottom: 10px; z-index: 1;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--red); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 3px 10px rgba(0,0,0,.35);
  transition: transform .2s ease, background .2s ease;
}
.vcard__play svg { width: 15px; height: 15px; fill: currentColor; margin-left: 2px; }
.vcard:hover .vcard__play { transform: scale(1.1); background: var(--red-dark); }

.vcard__title {
  font-family: var(--pa-ui); font-size: 15.5px; font-weight: 600;
  line-height: 1.6; margin: 12px 0 0;
  /* Two lines, then stop. Ragged card heights in a grid read as a mistake. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.vcard__title a { color: var(--ink); }
.vcard__title a:hover { color: var(--red); }
.vcard__when {
  font-family: var(--en-ui); font-size: 11.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); margin-top: 7px;
}

@media (max-width: 1100px) { .vgrid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 760px)  { .vgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 460px)  {
  .vgrid { grid-template-columns: 1fr; gap: var(--s5); }
  .vcard__title { font-size: 16px; -webkit-line-clamp: 3; }
}
@media (max-width: 560px) {
  .ytbar { padding: 16px; }
  .ytbar__btn { width: 100%; justify-content: center; }
}
.arc__acts .is-pdf { border: 1px solid var(--rule-strong); color: var(--body); flex: 0 0 62px; }
.arc__acts .is-pdf:hover { border-color: var(--ink); color: var(--ink); }

/* A plain note under the grid. The weekly paper is 36 MB as one PDF; saying
   so next to a "Read" button is the whole argument for page-by-page. */
.arcnote {
  font-family: var(--en-ui); font-size: 12.5px; color: var(--muted);
  line-height: 1.7; border-top: 1px solid var(--rule); padding-top: var(--s4);
}

@media (max-width: 1080px) { .arcgrid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 760px)  { .arcgrid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 560px)  {
  .arcgrid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s4); }
  .arc__sec { font-size: 8.5px; letter-spacing: .1em; padding: 3px 5px; }
  .arc__acts .is-pdf { flex: 0 0 52px; }
  .years { margin-inline: calc(var(--s4) * -1); padding-inline: var(--s4); }
  .months { gap: 5px; }
  .months a, .months span { font-size: 12px; padding: 6px 9px; }
}


/* --------------------------------------------------------------------------
   25. OBITUARIES PAGE (ਸ਼ਰਧਾਂਜਲੀ)
   For a diaspora weekly this is one of the most-visited pages on the site,
   and the reason people open it is almost always the same: when and where
   is the ardas. So the page leads with services by date, not with a grid of
   faces, and the time is the boldest thing in each row.

   No red anywhere on this page. Red is the paper's urgency colour and it is
   wrong here; navy, gold and paper do the work instead.
   -------------------------------------------------------------------------- */
.cathead--quiet { background: var(--paper-2); border-top: 4px solid var(--navy); }
.cathead--quiet .cathead__en,
.sec-head--quiet .sec-head__en { background: var(--navy); }

/* Find a name. Most visits are a search for one person. */
.obfind {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  padding-block: var(--s4) var(--s5);
}
.obfind input {
  flex: 1 1 260px; min-width: 0; min-height: 46px;
  font-family: var(--pa-ui); font-size: 15px; line-height: var(--lh-pa-body);
  padding: 8px 14px; background: #fff;
  border: 1px solid var(--rule-strong); border-radius: var(--radius); color: var(--ink);
}
.obfind input:focus { outline: 2px solid var(--navy-2); outline-offset: 1px; }
.obfind button {
  flex: 0 0 auto; min-height: 46px; padding: 0 22px;
  font-family: var(--en-ui); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--navy); color: #fff; border: 0;
  border-radius: var(--radius); cursor: pointer;
}
.obfind button:hover { background: var(--navy-2); }

/* A day's services */
.dayhead {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2) var(--s3);
  padding-block: var(--s5) var(--s3);
  border-bottom: 2px solid var(--navy);
}
.dayhead h2 {
  font-family: var(--pa-display); font-weight: 700; font-size: 21px;
  line-height: var(--lh-pa-head); color: var(--ink);
}
.dayhead span {
  font-family: var(--en-ui); font-size: 11.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.dayhead .today {
  color: #fff; background: var(--gold); padding: 4px 9px; letter-spacing: .14em;
}

.obrow {
  display: grid; grid-template-columns: 84px minmax(0,1fr) auto;
  gap: var(--s4); align-items: start;
  padding-block: var(--s4); border-bottom: 1px solid var(--rule);
}
.obrow__photo { padding: 4px; background: var(--paper-2); border: 1px solid var(--rule-strong); }
.obrow__name {
  font-family: var(--pa-display); font-weight: 700; font-size: 19px;
  line-height: var(--lh-pa-head); color: var(--ink);
}
.obrow__name a:hover { color: var(--navy-2); }
.obrow__who {
  font-family: var(--pa-ui); font-size: 13.5px; line-height: var(--lh-pa-body);
  color: var(--muted); margin-top: 2px;
}
.obrow__when {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3);
  margin-top: var(--s3);
}
/* The one fact a reader came for. */
.obrow__time {
  font-family: var(--pa-ui); font-size: 14.5px; font-weight: 600;
  line-height: 1.6; color: #fff; background: var(--navy);
  padding: 6px 12px; border-radius: var(--radius);
}
.obrow__where {
  font-family: var(--pa-ui); font-size: 14px; line-height: var(--lh-pa-body);
  color: var(--body);
}
.obrow__kind {
  font-family: var(--pa-ui); font-size: 12.5px; line-height: 1.7;
  color: var(--ink); background: var(--paper-3);
  border: 1px solid var(--rule); padding: 3px 9px; border-radius: var(--radius);
}
/* Share is how these notices actually travel in this community. */
.obrow__share {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: var(--en-ui); font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #0B8C4B; border: 1px solid #0B8C4B;
  padding: 9px 13px; border-radius: var(--radius); min-height: 40px;
}
.obrow__share:hover { background: #0B8C4B; color: #fff; }
.obrow__share svg { width: 15px; height: 15px; fill: currentColor; flex: none; }

/* Archive of older notices — quieter, four across */
.obgrid {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--gap); padding-block: var(--s5) 0;
}

/* Submit panel. On a phone most families will call, not fill a form, so the
   phone number is a button of its own and not buried in a paragraph. */
.obsubmit {
  background: var(--navy); color: #fff;
  padding: var(--s6); margin-block: var(--s7);
  border-top: 4px solid var(--gold);
}
.obsubmit h2 {
  font-family: var(--pa-display); font-weight: 700; font-size: 24px;
  line-height: var(--lh-pa-head); color: #fff;
}
.obsubmit p {
  font-family: var(--pa-ui); font-size: 15px; line-height: var(--lh-pa-body);
  color: rgba(255,255,255,.82); max-width: 62ch; margin-top: var(--s3);
}
.obsubmit__acts { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.obsubmit__acts a {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 22px; border-radius: var(--radius);
  font-family: var(--en-ui); font-size: 12.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.obsubmit__acts svg { width: 17px; height: 17px; fill: currentColor; }
.obsubmit__call { background: var(--gold); color: var(--ink); }
.obsubmit__call:hover { background: #C9A252; }
.obsubmit__wa { background: #0B8C4B; color: #fff; }
.obsubmit__wa:hover { background: #0A7A41; }
.obsubmit__form { border: 1px solid rgba(255,255,255,.3); color: #fff; }
.obsubmit__form:hover { border-color: #fff; }
.obsubmit__note {
  font-family: var(--en-ui); font-size: 12px; color: rgba(255,255,255,.6);
  margin-top: var(--s4); letter-spacing: .03em;
}

@media (max-width: 1080px) { .obgrid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 760px)  { .obgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) {
  .obrow { grid-template-columns: 68px minmax(0,1fr); gap: var(--s3); }
  /* Share drops under the details and spans both columns rather than
     squeezing the name into a 90px strip. */
  .obrow__share { grid-column: 1 / -1; justify-content: center; margin-top: var(--s3); }
  .obrow__name { font-size: 17px; }
  .obsubmit { padding: var(--s5); }
  .obsubmit__acts a { width: 100%; }
}


/* --------------------------------------------------------------------------
   26. SEARCH RESULTS + 404
   Search on this site has a problem no English paper has: a reader may type
   ਸਰੀ, "Surrey" or "sari" and mean the same place. WordPress's built-in
   search matches none of those against each other. The layout below assumes
   the search index handles it (Stage 2 work) and gives the reader an honest
   hint in the meantime.
   -------------------------------------------------------------------------- */
.searchbar { display: flex; flex-wrap: wrap; gap: var(--s2); padding-block: var(--s4) var(--s3); }
.searchbar input {
  flex: 1 1 280px; min-width: 0; min-height: 50px;
  font-family: var(--pa-ui); font-size: 16px; line-height: var(--lh-pa-body);
  padding: 8px 16px; background: #fff; color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--radius);
}
.searchbar input:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.searchbar button {
  flex: 0 0 auto; min-height: 50px; padding: 0 26px; cursor: pointer;
  font-family: var(--en-ui); font-size: 12.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--red); color: #fff; border: 0; border-radius: var(--radius);
}
.searchbar button:hover { background: var(--red-dark); }
.searchhint {
  font-family: var(--pa-ui); font-size: 13.5px; line-height: var(--lh-pa-body);
  color: var(--muted); padding-bottom: var(--s4);
}
.searchhint b { color: var(--ink); font-weight: 600; }

/* Result count + sort sit on one line above the results */
.resbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  padding-block: var(--s4); border-bottom: 1px solid var(--rule);
}
.resbar__count { font-family: var(--en-ui); font-size: 13px; color: var(--body); }
.resbar__count b { color: var(--ink); font-weight: 700; }
.resbar__sort { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }
.resbar__sort span {
  font-family: var(--en-ui); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.resbar__sort a {
  font-family: var(--en-ui); font-size: 12.5px; color: var(--body);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 6px 12px; min-height: 34px; display: inline-flex; align-items: center;
}
.resbar__sort a.is-active { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }

/* Where a result came from — news, e-paper, obituary, video */
.restype {
  font-family: var(--en-ui); font-size: 10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: #fff;
  background: var(--navy); padding: 3px 8px; border-radius: var(--radius);
  display: inline-block; margin-bottom: 7px;
}
.restype--ep  { background: var(--navy-2); }
.restype--ob  { background: #6B7885; }
.restype--vid { background: var(--red); }
/* The matched words. Never a yellow highlighter — it wrecks Gurmukhi at
   small sizes by fattening the line. A weight change reads cleaner. */
.listrow mark, .catlead__excerpt mark {
  background: none; color: var(--ink); font-weight: 700;
  box-shadow: inset 0 -2px 0 rgba(200,16,46,.35);
}

/* Nothing found, or a page that does not exist */
.blank { text-align: center; padding-block: var(--s8) var(--s7); }
.blank__num {
  font-family: var(--en-display); font-size: clamp(64px, 14vw, 132px);
  font-weight: 700; line-height: 1; color: var(--paper-3);
  letter-spacing: .02em;
}
.blank h1 {
  font-family: var(--pa-display); font-weight: 700;
  font-size: clamp(24px, 4vw, 34px); line-height: var(--lh-pa-head);
  color: var(--ink); margin-top: calc(var(--s5) * -1);
}
.blank p {
  font-family: var(--pa-ui); font-size: 15.5px; line-height: var(--lh-pa-body);
  color: var(--body); max-width: 56ch; margin: var(--s4) auto 0;
}
.blank .searchbar { max-width: 560px; margin: var(--s5) auto 0; }
.blank__rule {
  width: 64px; height: 3px; background: var(--red);
  margin: var(--s5) auto 0;
}

/* Where to go instead */
.helpgrid {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--gap); padding-block: var(--s6) var(--s8);
}
.help {
  border: 1px solid var(--rule); background: var(--paper-2);
  padding: var(--s5); border-top: 3px solid var(--navy);
}
.help h2 {
  font-family: var(--pa-display); font-weight: 700; font-size: 18px;
  line-height: var(--lh-pa-head); color: var(--ink);
}
.help p {
  font-family: var(--pa-ui); font-size: 13.5px; line-height: var(--lh-pa-body);
  color: var(--body); margin-top: var(--s2);
}
.help ul { margin-top: var(--s3); }
.help li { border-bottom: 1px solid var(--rule); }
.help li:last-child { border-bottom: 0; }
.help li a {
  display: block; padding: 9px 0; font-family: var(--pa-ui); font-size: 14px;
  line-height: 1.7; color: var(--ink-2);
}
.help li a:hover { color: var(--red); }
.help li a span[lang="en"] {
  font-family: var(--en-ui); font-size: 11.5px; color: var(--muted); margin-left: 6px;
}

@media (max-width: 1023px) { .helpgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 660px) {
  .helpgrid { grid-template-columns: minmax(0,1fr); gap: var(--s4); }
  .resbar__sort { margin-left: 0; width: 100%; }
  .searchbar button { width: 100%; }
  .blank { padding-block: var(--s6) var(--s5); }
  /* Gurmukhi matras sit high; at phone size the overlap with the numeral
     stops being a flourish and starts being a collision. */
  .blank h1 { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   20. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .nav, .strip, .ticker, .ad, .videos, .sidebar, .footer { display: none !important; }
  body { background: #fff; }
}