/* Pajhwok 2026 — theme additions. The design's own CSS is in pajhwok.css and is never edited;
   everything WordPress needs on top of it lives here and uses the design's colour tokens. */

/* Screen-reader text and skip link */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.pj-skip:focus{clip:auto!important;clip-path:none;height:auto;width:auto;z-index:100;top:8px;inset-inline-start:8px;background:var(--navy);color:#fff;padding:10px 16px;border-radius:999px;font-weight:700}

/* Keyboard users can open the menu dropdowns too (the design opens them on hover) */
.nav:not(.pj-js) .grp:focus-within .dd{display:block}
.nav .grp>span:focus-visible,.nav .grp>button:focus-visible,.nav>a:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
.nav .grp>button{display:flex;align-items:center;padding:0 12px;font:inherit;font-weight:600;font-size:14px;white-space:nowrap;color:var(--ink-2);position:relative;cursor:pointer;background:none;border:0;margin:0;border-radius:0}
.nav .grp:hover>button{color:var(--ink)}
.nav .grp:hover>button::after,.nav .grp.open>button::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--navy);border-radius:2px}
.nav .grp.open .dd{display:block}
.nav .grp.shut .dd{display:none!important}
/* The menu strip scrolls sideways (design), which would clip its dropdowns. The header's blur makes it the
   containing block for fixed elements, so a fixed dropdown sits just under the header, outside the strip;
   pajhwok.js lines it up under its menu item. */
.nav .dd{position:fixed;top:100%;z-index:60}
/* The strip's fade-out mask would also hide the dropdown, so it is lifted while the menu is in use. */
.nav:hover,.nav:focus-within{mask:none;-webkit-mask:none}

/* Information tiles: fill the row when some tiles are switched off */
@media (min-width:1101px){
.util2 .wrap[data-n="5"]{grid-template-columns:repeat(5,minmax(0,1fr))}
.util2 .wrap[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.util2 .wrap[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.util2 .wrap[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.util2 .wrap[data-n="1"]{grid-template-columns:minmax(0,1fr)}
}
/* Tiles may shrink below their text width on the smallest phones (long lines end in "…" instead of widening the page). */
.util2 .ut,.util2 .ut div{min-width:0}.util2 .ut small{text-overflow:ellipsis}
.ut.sp a{display:block}

/* Ads placed from the dashboard fill their box; house ads look like the design placeholder */
.ad .pj-ad-img,.ad .pj-ad-img img{display:block;width:100%;height:100%;object-fit:contain}
/* Banners from the old Advertisements list: the whole picture shows in the box, never cropped (a square banner in a 300 × 250 box). */
.ad .pj-oldad{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ad .pj-oldad img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.ad:has(>.pj-oldad)::before{z-index:1;background:var(--bg)} /* The "Ad" label stays readable over the banner. */
.ad>ins,.ad>iframe,.ad>div{max-width:100%}
.ad .pj-house{display:grid;place-items:center;width:100%;height:100%;color:var(--mute)}
.ad .pj-house:hover{color:var(--navy)}
a.card.spon{color:inherit}
.mapbox .pres img{height:14px;width:auto;display:inline-block}

/* Story circles the reader already opened */
.st.seen .ring{background:var(--line-2)}

/* Thread timeline links */
.thread h3 a:hover,.thread .tl a:hover{color:var(--navy)}

/* Phone menu button and drawer (new: the design scrolls the menu sideways on phones) */
.pj-burger{display:none;cursor:pointer;padding:0}
.pj-drawer{position:fixed;inset:0;top:var(--pj-hdr,60px);z-index:49;background:var(--bg);overflow-y:auto;padding:12px clamp(16px,3vw,36px) 40px;border-top:1px solid var(--line)}
.pj-drawer ul{list-style:none;margin:0;padding:0}
.pj-drawer li{border-bottom:1px solid var(--line)}
.pj-drawer a,.pj-drawer summary{display:block;padding:14px 10px 14px 4px;font-weight:700;font-size:16px;color:var(--ink);cursor:pointer;min-height:44px}
.pj-drawer summary{list-style:none;display:flex;justify-content:space-between;align-items:center}
.pj-drawer summary::-webkit-details-marker{display:none}
.pj-drawer summary::after{content:"+";font-weight:400;font-size:20px;color:var(--mute)}
.pj-drawer details[open]>summary::after{content:"−"}
.pj-drawer details ul{padding:0 0 8px 14px}
.pj-drawer details li{border:0}
.pj-drawer details a{font-weight:500;font-size:15px;padding:10px 4px;color:var(--ink-2)}
.pj-drawer a[aria-current]{color:var(--navy)}
.pj-drawer-links{display:flex;flex-wrap:wrap;gap:8px 18px;padding:18px 4px;font-size:14px;color:var(--mute)}
body.pj-noscroll{overflow:hidden}
body.pj-noscroll .pj-sticky-ad{display:none}
@media (max-width:760px){
.hdr .nav{display:none}
.pj-burger{display:grid}
.hdr .wrap{gap:12px;justify-content:space-between}
.hdr .logo{height:40px}
.hdr.small .logo{height:32px}
}

/* A logo with its own dark-mode version (Header → Logo and buttons): no automatic lightening. */
.pj-logo-night{display:none}
[data-theme="dark"] .pj-logo-day{display:none}
[data-theme="dark"] .logo.pj-logo-night{display:inline-block;filter:none}

/* Search panel under the header, in the staging copy's design (user, 26 Oct 2026): it floats over the page at the width
   of the page's content, with the words, Search and "Advanced search" in one row, the choices (section, order, dates)
   below, then up to ten stories with their pictures and dates, two to a row. */
.hdr{--pj-sgo:var(--navy)}
[data-theme="dark"] .hdr{--pj-sgo:var(--navy-2)}
.hdr [data-pj-search][aria-expanded="true"]{background:var(--pj-sgo);border-color:var(--pj-sgo);color:#fff}
.pj-search{position:absolute;top:100%;left:0;right:0;z-index:5;max-width:1320px;margin:0 auto;padding:0 clamp(16px,3vw,36px)}
.pj-search-box{max-height:calc(100dvh - var(--pj-stop,150px) - 12px);overflow-y:auto;overscroll-behavior:contain;padding:16px 18px;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r) var(--r);box-shadow:0 20px 42px rgba(15,28,55,.14)}
[data-theme="dark"] .pj-search-box{background:var(--bg-2);border-color:var(--line-2);box-shadow:0 24px 48px rgba(0,0,0,.6)}
[data-theme="dark"] .pj-search :is(.pj-search-row input,.pj-search-fld select,.pj-search-fld input,.pj-search-list a,.pj-search-reset){background:var(--bg-3)}
.pj-search-form{margin:0}
.pj-search-row{display:flex;align-items:center;gap:11px}
.pj-search-row input{flex:1;min-width:0;height:46px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--bg);color:var(--ink);font:inherit;font-size:16px;box-shadow:0 2px 6px rgba(13,40,84,.04)}
.pj-search :is(input,select):focus{outline:2px solid color-mix(in oklab,var(--navy) 18%,transparent);outline-offset:0;border-color:var(--navy)}
.pj-search-go,.pj-search-more{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;border-radius:var(--r-sm);font:inherit;font-size:14px;font-weight:800;white-space:nowrap;cursor:pointer}
.pj-search-go{min-width:112px;padding:0 20px;border:1px solid var(--pj-sgo);background:var(--pj-sgo);color:#fff}
.pj-search-go:hover{background:var(--navy-2);border-color:var(--navy-2)}
[data-theme="dark"] .pj-search-go:hover{background:color-mix(in oklab,var(--navy-2) 75%,var(--navy));border-color:var(--navy)}
.pj-search-go i{display:none;flex:none;width:15px;height:15px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:pj-phv-spin .7s linear infinite}
.pj-search-busy .pj-search-go i{display:inline-block}
.pj-search-more{padding:0 15px;border:1px solid color-mix(in oklab,var(--navy) 22%,var(--bg));background:var(--navy-soft);color:var(--navy);font-size:13px}
.pj-search-more:hover,.pj-search-more[aria-expanded="true"]{background:color-mix(in oklab,var(--navy) 14%,var(--bg))}
.pj-search-more svg{width:17px;height:17px;flex:none;transition:transform .15s}
.pj-search-more[aria-expanded="true"] svg{transform:rotate(180deg)}
.pj-search-f{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);gap:15px 16px;align-items:end;margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}
.pj-search-f[hidden]{display:none}
.pj-search-fld{display:grid;gap:7px;min-width:0;margin:0}
.pj-search-fld label{font-size:12.5px;font-weight:700;line-height:1.4;color:var(--ink-2)}
.pj-search-fld :is(select,input){width:100%;min-width:0;height:44px;margin:0;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--bg);color:var(--ink);font:inherit;font-size:14px}
.pj-search-fld input{direction:ltr;text-align:start;font-variant-numeric:tabular-nums}
[dir=rtl] .pj-search-fld input{text-align:right}
.pj-search-foot{grid-column:1/-1;display:flex;justify-content:flex-end;margin:0}
.pj-search-reset{height:34px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--bg);color:var(--navy);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.pj-search-reset:hover{background:var(--navy-soft)}
.pj-search-res{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.pj-search-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px}
.pj-search-st{margin:0;font-size:12.5px;font-weight:600;color:var(--mute)}
.pj-search-x{display:grid;place-items:center;flex:none;width:28px;height:28px;border:0;border-radius:var(--r-sm);background:none;color:var(--mute);font-size:22px;line-height:1;cursor:pointer}
.pj-search-x:hover{background:var(--navy-soft);color:var(--navy)}
.pj-search-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 12px;max-height:min(384px,48dvh);overflow-y:auto;overscroll-behavior:contain;margin:0;padding:1px;list-style:none}
.pj-search-list:empty{display:none}
.pj-search-list li{min-width:0;margin:0}
.pj-search-list a{display:flex;align-items:center;gap:11px;min-height:70px;padding:7px 9px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);color:var(--ink);transition:border-color .15s,background .15s}
.pj-search-list a:hover,.pj-search-list a:focus-visible{border-color:color-mix(in oklab,var(--navy) 40%,var(--bg));background:var(--bg-2);color:var(--navy)}
.pj-search-pic{flex:none;width:74px;height:54px;overflow:hidden;border-radius:var(--r-sm);background:linear-gradient(145deg,var(--bg-2),var(--bg-3))}
.pj-search-pic img{display:block;width:100%;height:100%;object-fit:cover}
.pj-search-list a>span:last-child{display:grid;gap:4px;min-width:0}
.pj-search-list strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;font-weight:700;line-height:1.5}
[dir=rtl] .pj-search-list strong{font-size:14.5px;line-height:1.75}
.pj-search-list time{font-size:11.5px;color:var(--mute)}
.pj-search-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:14px}
.pj-search-btns:not(:has(>:not([hidden]))){display:none}
.pj-search-load{padding:9px 18px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--bg);color:var(--ink);font:inherit;font-size:13px;font-weight:700;line-height:1.4;cursor:pointer}
.pj-search-load:hover{border-color:var(--navy);color:var(--navy)}
.pj-search-load:disabled{opacity:.6;cursor:wait}
[data-theme="dark"] .pj-search .pj-search-load{background:var(--bg-3)}
.pj-search-all{display:flex;align-items:center;gap:9px;max-width:100%;margin:0;padding:9px 18px;border:1px solid var(--navy);border-radius:var(--r-sm);background:var(--navy-soft);color:var(--navy);font-size:13px;font-weight:700;line-height:1.4}
.pj-search-all:hover{background:var(--pj-sgo);border-color:var(--pj-sgo);color:#fff}
.pj-search-all[hidden]{display:none}
@media (max-width:850px){.pj-search-f{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}}
@media (max-width:760px){.pj-search-row{flex-wrap:wrap;gap:9px}.pj-search-row input{flex:1 1 100%}.pj-search-go,.pj-search-more{flex:1 1 0;min-width:0;padding:0 8px}.pj-search-list{grid-template-columns:minmax(0,1fr);max-height:42dvh}}
@media (max-width:600px){.pj-search{padding:0}.pj-search-box{padding:12px 16px 14px;border-inline:0;border-radius:0}}
@media (max-width:420px){.pj-search-f{grid-template-columns:minmax(0,1fr)}}
/* The sign-in page as a screen of its own (Site settings → Members), in the staging copy's design: the logo, then a
   card with a coloured top edge holding the membership plugin's form; nothing else on the screen. */
body.pj-signin{min-height:100dvh;margin:0;background:radial-gradient(ellipse at 52% 30%,var(--bg) 0%,color-mix(in oklab,var(--navy) 6%,var(--bg)) 57%,color-mix(in oklab,var(--navy) 11%,var(--bg)) 100%)}
.pj-signin-main{min-height:100dvh;display:grid;place-items:center;padding:48px 16px}
.pj-signin-wrap{width:min(100%,390px);display:grid;gap:16px}
.pj-signin-logo{display:flex;justify-content:center}
.pj-signin-logo .logo{width:auto;max-width:min(100%,300px);height:auto;max-height:76px}
.pj-signin-card{position:relative;overflow:hidden;padding:30px 24px 26px;border:1px solid var(--line);border-radius:16px;background:var(--bg);box-shadow:0 14px 34px rgba(20,44,86,.13)}
.pj-signin-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--navy)}
.pj-signin-card h1{margin:2px 0 6px;text-align:center;font-size:22px;font-weight:800;line-height:1.4;color:var(--ink)}
.pj-signin-note{margin:0 0 20px;text-align:center;font-size:13.5px;line-height:1.7;color:var(--mute)}
.pj-signin-form :is(form,fieldset){margin:0;padding:0;border:0;min-width:0}
.pj-signin-form fieldset{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px}
.pj-signin-form fieldset>p{flex:1 1 100%;margin:0 0 15px}
.pj-signin-form label{display:block;margin:0 0 6px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.pj-signin-form :is(input[type=text],input[type=email],input[type=password]){display:block;width:100%;height:46px;margin:0;padding:0 12px;border:1px solid var(--line-2);border-radius:8px;background:color-mix(in oklab,var(--navy) 5%,var(--bg));color:var(--ink);font:inherit;font-size:16px;direction:ltr;text-align:start}
.pj-signin-form input:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 3px color-mix(in oklab,var(--navy) 18%,transparent)}
.pj-signin-form fieldset>p:has(>input[type=checkbox]){flex:1 1 auto;display:flex;align-items:center;gap:7px;margin-bottom:20px;line-height:1.2}
.pj-signin-form input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--navy)}
.pj-signin-form p:has(>input[type=checkbox]) label{display:inline;margin:0;font-size:13px;font-weight:600;color:var(--mute)}
.pj-signin-form fieldset>p.rcp_lost_password{flex:0 0 auto;margin-bottom:20px;font-size:13px;font-weight:600}
.pj-signin-card a{color:var(--navy)}
.pj-signin-card a:hover{text-decoration:underline;text-underline-offset:3px}
.pj-signin-form :is(input[type=submit],.rcp-button,button[type=submit]){display:block;width:100%;min-height:46px;margin:0;border:0;border-radius:8px;background:var(--navy);color:#fff;font:inherit;font-size:14px;font-weight:800;letter-spacing:.03em;cursor:pointer;box-shadow:0 3px 8px color-mix(in oklab,var(--navy) 22%,transparent)}
.pj-signin-form :is(input[type=submit],.rcp-button,button[type=submit]):hover{background:var(--navy-2)}
[data-theme="dark"] .pj-signin-form :is(input[type=submit],.rcp-button,button[type=submit]){background:var(--navy-2)}
[data-theme="dark"] .pj-signin-form :is(input[type=submit],.rcp-button,button[type=submit]):hover{background:color-mix(in oklab,var(--navy-2) 75%,var(--navy))}
.pj-signin-form :is(.rcp_message,.rcp_success,.rcp_error){margin:0 0 16px;padding:10px 12px;border-radius:8px;font-size:13px;line-height:1.65}
.pj-signin-form :is(.rcp_message.error,p.rcp_error){border:1px solid color-mix(in oklab,var(--red) 32%,var(--bg));background:color-mix(in oklab,var(--red) 8%,var(--bg));color:var(--red)}
.pj-signin-form :is(.rcp_message.success,p.rcp_success){border:1px solid color-mix(in oklab,#1f9d55 35%,var(--bg));background:color-mix(in oklab,#1f9d55 9%,var(--bg));color:color-mix(in oklab,#1f9d55 80%,var(--ink))}
.pj-signin-form div.rcp_message :is(p.rcp_error,p.rcp_success){margin:0;padding:0;border:0;background:none}
.pj-signin-form .rcp_logged_in{text-align:center}
.pj-signin-form .rcp_logged_in a{display:inline-flex;align-items:center;min-height:42px;padding:0 20px;border:1px solid var(--line-2);border-radius:8px;font-weight:700}
.pj-signin-pw{position:relative;display:block}
.pj-signin-pw input{padding-right:46px!important}
.pj-signin-eye{position:absolute;right:3px;top:3px;width:40px;height:40px;display:grid;place-items:center;padding:0;border:0;border-radius:6px;background:none;color:var(--mute);cursor:pointer}
.pj-signin-eye:hover{color:var(--navy)}
.pj-signin-eye svg{width:20px;height:20px}
.pj-signin-back{display:block;margin-top:18px;text-align:center;font-size:13px;font-weight:700}
.pj-signin-home{justify-self:center;font-size:13px;font-weight:700;color:var(--mute)}
.pj-signin-home:hover{color:var(--navy)}
@media (max-width:480px){.pj-signin-main{padding:24px 14px}.pj-signin-card{padding:28px 18px 22px}.pj-signin-logo .logo{max-height:64px}}
/* A note only signed-in staff see on a part with nothing to show yet (pj_staff_note()): what it shows, where to fill it. */
.pj-staffsec{padding-block:14px}
.pj-staffnote{margin:0 0 12px;padding:12px 16px;border:1.5px dashed color-mix(in oklab,#d08700 70%,var(--bg));border-radius:var(--r);background:color-mix(in oklab,#f2b33d 13%,var(--bg));color:var(--ink);font-size:14px;line-height:1.65}
.pj-staffnote b{margin-inline-end:4px;color:color-mix(in oklab,#a36400 85%,var(--ink))}
.pj-staffnote a{font-weight:700;color:var(--navy);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.g12>.pj-staffnote{grid-column:1/-1}
/* The search page's own box */
.pj-search-page{display:flex;gap:8px;max-width:640px;width:100%;margin:0 0 28px}
.pj-search-page input{flex:1;min-width:0;height:44px;border-radius:999px;border:1px solid var(--line-2);padding:0 18px;font:inherit;font-size:16px;background:var(--bg);color:var(--ink)}

/* Newsletter honeypot (bots fill it, people never see it) */
.pj-hp{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);opacity:0}

/* Lists, search, archives (index.php) */
.pj-archive-title{font-family:Vazirmatn,Tahoma,system-ui,sans-serif;font-size:clamp(30px,3.4vw,44px);font-weight:500;letter-spacing:-.012em;text-transform:none}
#pj-main .more{padding:36px 0 64px}
#pj-main .more .sechd{margin-bottom:24px}
.pj-pages .nav-links{display:flex;gap:6px;flex-wrap:wrap;margin-top:40px}
.pj-pages .page-numbers{display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 10px;border-radius:999px;border:1px solid var(--line-2);font-weight:700;font-size:13.5px}
.pj-pages .page-numbers.current{background:var(--navy);border-color:var(--navy);color:#fff}
.pj-empty{display:flex;gap:16px;align-items:center;flex-wrap:wrap;color:var(--mute);font-size:16px;padding:24px 0}

/* Story text from the editor (the design styles .body; these cover WordPress blocks) */
.body img{height:auto}
.body a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.body .wp-block-image figcaption,.body .wp-caption-text{font-family:Vazirmatn,Tahoma,system-ui,sans-serif;font-size:12.5px;color:var(--mute);margin-top:8px}
.body ul,.body ol{padding-left:1.2em;margin:0 0 1.35em}
/* Picture placement from the editor (Align left / centre / right). Classic stories get no WordPress
   block styles, so the theme draws them; on phones floated pictures take the full width. */
.alignleft{float:left;margin:.3em 1.4em 1em 0;max-width:50%}
.alignright{float:right;margin:.3em 0 1em 1.4em;max-width:50%}
.aligncenter{display:block;margin-inline:auto;clear:both}
.alignnone,.wp-caption{max-width:100%;height:auto}
.wp-caption img{max-width:100%;height:auto}
.wp-caption.aligncenter{text-align:center}
.body::after,.pj-archdesc::after{content:"";display:table;clear:both}
@media (max-width:760px){.alignleft,.alignright{float:none;margin:1em auto;max-width:100%}}

/* Brief audio player controls when real audio is attached */
.player2 .chip{background:none;color:inherit;font:inherit;font-size:11.5px;font-weight:600;cursor:pointer}
.player2 .wave{--p:0%;background:linear-gradient(90deg,#fff 0 var(--p),rgba(255,255,255,.3) var(--p))}
.player2.playing .pb::after{border:0;width:12px;height:14px;margin:0;background:linear-gradient(90deg,var(--navy-2) 0 35%,transparent 35% 65%,var(--navy-2) 65%)}

/* Bigger touch targets on phones */
@media (pointer:coarse){.lang a{padding:6px 12px}.theme{min-height:36px}}

/* Calm motion for people who ask for it */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Print: just the story */
@media print{:root,[data-theme=dark]{--bg:#fff;--bg-2:#fff;--bg-3:#fff;--ink:#000;--ink-2:#222;--mute:#444;--line:#ccc;--line-2:#bbb;--navy:#1c3f8f}.util,.util2,.hdr,.band,.ad,.inad,footer,.pj-drawer,.rail .ad,.rgt,.lft,.tools2,.player3,.pj-sticky-ad,.pj-ticker,.stories,.rp,.pj-adstrip,.pj-shortbox,.more,.pj-skip{display:none!important}body{background:#fff;color:#000}.art{display:block}}

/* Pajhwok 2026 — styles for the story, list, profile and ad parts added by the theme.
   Uses the design's colour tokens from pajhwok.css. */

/* ===================================================================== Ads: never bigger than their place */
.ad{overflow:hidden;contain:layout paint;max-width:100%}
.ad iframe,.ad ins,.ad img,.ad video,.ad object,.ad embed,.ad>div{max-width:100%!important}
.ad .pj-adframe{display:block;width:100%;border:0;background:transparent}
.ad ins.adsbygoogle{max-height:inherit;overflow:hidden}
.pj-adstrip{padding:16px 0;background:var(--bg-2);border-bottom:1px solid var(--line)}
.pj-adstrip .ad{max-width:970px;margin:0 auto;min-height:90px;max-height:280px;background:var(--bg)}
.adcol .ad{contain:size layout paint} /* The tall ad beside Special Reports fills the column and never makes it taller. */
.pj-adstrip-all-bottom{border-top:1px solid var(--line);border-bottom:0}
.pj-adstrip-all-bottom .ad,.pj-adstrip-home-between .ad{min-height:120px}
.pj-gridad{grid-column:1/-1}
.pj-gridad .ad{min-height:120px;max-height:280px}
.inad .ad{max-height:320px}
.pj-native-code .ad{position:static!important;display:block}
.pj-sticky-ad{display:none}
@media (max-width:760px){
.pj-sticky-ad{display:flex;justify-content:center;align-items:center;position:fixed;left:0;right:0;bottom:0;z-index:55;height:60px;padding-bottom:env(safe-area-inset-bottom,0px);background:var(--bg);border-top:1px solid var(--line);box-shadow:0 -6px 20px -12px rgba(0,0,0,.35);overflow:hidden}
.pj-sticky-ad>*{max-height:50px;max-width:100%}
.pj-sticky-ad .pj-adframe{height:50px!important;width:320px;border:0}
.pj-sticky-x{position:absolute;top:-1px;right:4px;width:28px;height:28px;border:0;background:var(--bg);color:var(--mute);font-size:20px;line-height:1;cursor:pointer;border-radius:50%}
body:has(.pj-sticky-ad) footer{padding-bottom:88px}
.pj-desktop-only{display:none!important}
.pj-adstrip-all-top .ad{min-height:60px;max-height:100px!important}
}
@media (min-width:761px){.pj-phone-only{display:none!important}}
/* Google Auto ads, if switched on, stay inside the page width and a sensible height. */
.google-auto-placed{max-width:100%!important;overflow:hidden;margin:24px auto!important;max-height:320px}

/* ===================================================================== Page layouts */
.pj-page{grid-template-columns:minmax(0,1fr)!important}
/* Ordinary pages in the staging copy's look (Site settings → Site look → Ordinary pages): the heading at the side over
   a line, the text in a box with roomy lines. */
.pj-page-box .ahd{max-width:none;margin:0;padding-bottom:20px;text-align:start;border-bottom:1px solid var(--line)}
.pj-page-box .ahd h1{font-size:clamp(30px,3.4vw,44px);font-weight:800;line-height:1.2;margin:10px 0 8px}
.pj-page-box .ahd .dek{margin:0;max-width:64ch}
.pj-page-box .body{padding:clamp(18px,2.6vw,30px) clamp(18px,2.8vw,34px);border:1px solid var(--line);border-radius:var(--r);background:var(--bg);box-shadow:0 8px 24px rgba(15,28,55,.06);font-size:16.5px;line-height:1.85}
.pj-page-box .body>:first-child{margin-top:0}
.pj-page-box .body>:last-child{margin-bottom:0}
.pj-page-box .body :is(h2,h3,h4){line-height:1.45;margin-block:24px 10px}
.pj-page-box .body :is(ul,ol){padding-inline-start:22px}
[dir=rtl] .pj-page-box .body{font-size:17px;line-height:2}
[data-theme="dark"] .pj-page-box .body{background:var(--bg-2);box-shadow:none}
@media (max-width:600px){.pj-page-box .body{padding:16px}}
.pj-center{max-width:680px;width:100%;margin:0 auto}
.pj-videobox .player{aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.pj-videobox .player .pic{position:absolute;inset:0;border-radius:0}
.pj-videobox .play{border:0;background:none;cursor:pointer;z-index:1;width:100%;height:100%;padding:0}
.pj-videobox iframe,.pj-videobox video{position:absolute;inset:0;width:100%;height:100%;border:0}
.pj-photobig .pic{aspect-ratio:auto;border-radius:12px}
.pj-photobig .pic img{height:auto;max-height:82vh;object-fit:contain;background:var(--bg-3)}
.ahd .crumb a:hover{color:var(--navy)}
.byl .by a{color:var(--ink)}
.byl .by i,.rep2 i,.pj-person i,.pj-profile-photo{overflow:hidden}
.pj-avatar{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.rgt .thread h3 a:hover{color:var(--navy)}
.more .card .mono:empty{display:none}

/* Story text: Pajhwok boxes from the editor */
.body .is-style-pj-lead{font-size:1.15em;line-height:1.55;color:var(--ink-2)}
.body .is-style-pj-factbox{font-family:Vazirmatn,Tahoma,system-ui,sans-serif;font-size:15px;line-height:1.55;background:var(--navy-soft);border-radius:12px;padding:20px 24px;margin:2em 0}
.body .is-style-pj-factbox h3{font-family:Vazirmatn,Tahoma,system-ui,sans-serif;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);margin:0 0 10px}
.body .is-style-pj-factbox ul{margin:0;padding-left:1.1em}
.body .is-style-pj-factbox p:last-child{margin:0}
.body .pj-correction{background:var(--bg-2);border-left:3px solid var(--red);border-radius:0 8px 8px 0}
.body .wp-block-quote{margin:2em 0;padding:0 0 0 24px;border-left:3px solid var(--navy);font-style:italic;font-size:24px;line-height:1.35;color:var(--ink-2)}
.body .wp-block-quote p{margin:0}
.body .wp-block-quote cite{display:block;font-style:normal;font-family:Vazirmatn,Tahoma,system-ui,sans-serif;font-size:13px;color:var(--mute);margin-top:10px}
.body .is-style-pj-timeline{list-style:none;padding:0 0 0 22px;position:relative;font-family:Vazirmatn,Tahoma,system-ui,sans-serif;font-size:15px}
.body .is-style-pj-timeline::before{content:"";position:absolute;left:4px;top:8px;bottom:8px;width:1px;background:var(--line-2)}
.body .is-style-pj-timeline li{position:relative;margin-bottom:14px}
.body .is-style-pj-timeline li::before{content:"";position:absolute;left:-22px;top:7px;width:9px;height:9px;border-radius:50%;background:var(--bg);border:2px solid var(--navy)}
.body .is-style-pj-timeline strong{display:block;font:500 12px Vazirmatn,Tahoma,system-ui,sans-serif;color:var(--mute)}
.body table{width:100%;border-collapse:collapse;font-family:Vazirmatn,Tahoma,system-ui,sans-serif;font-size:14px;margin:0}
.body .pj-tablewrap{margin:2em 0}
.body th,.body td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:start}
.body .wp-block-embed,.body iframe{max-width:100%}
.body figure{max-width:100%}

/* ===================================================================== Lists (archive, search, thread, reporters) */
.pj-arch{padding-top:28px;padding-bottom:64px}
.pj-archhd{max-width:820px;padding-bottom:24px;margin-bottom:28px;border-bottom:1px solid var(--line)}
.pj-archhd h1{font-family:Vazirmatn,Tahoma,system-ui,sans-serif;font-size:clamp(34px,4vw,54px);font-weight:500;line-height:1.05;margin:8px 0 12px;text-wrap:balance}
.pj-archdesc{color:var(--ink-2);font-family:Vazirmatn,Tahoma,system-ui,sans-serif;font-size:18px;line-height:1.5;max-width:65ch}
.pj-archdesc p{margin:0 0 .6em}
.pj-archmeta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:12px 0 0}
.pj-chips{margin:16px 0 0}
.pj-archtop{padding-bottom:32px;margin-bottom:32px;border-bottom:1px solid var(--line)}
.pj-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 24px}
.pj-grid .card .pic{aspect-ratio:3/2}
.pj-grid .card h3{font-size:19px}
.pj-vcard .pic{position:relative}
.pj-vcard .play{position:absolute;inset:0;display:grid;place-items:center}
.pj-vcard .play b{width:48px;height:48px;box-shadow:0 0 0 8px rgba(255,255,255,.18)}
.pj-vcard .play b::after{border-left-width:15px;border-top-width:9px;border-bottom-width:9px;margin-left:4px}
.pj-results{grid-template-columns:minmax(0,1fr);max-width:820px}
.pj-threadpage{max-width:820px;padding:28px}
.pj-threadpage .tl li{font-size:15px;padding-bottom:22px}
.pj-threadpage .tl strong{font-family:Vazirmatn,Tahoma,system-ui,sans-serif;font-size:21px;font-weight:500;line-height:1.25;display:block;margin-top:2px}
.pj-threadpage .tl p{margin:6px 0 0;color:var(--mute);font-size:14px}
.pj-arch .btn.fl{height:36px}
.pj-arch .btn.fl.on{background:var(--navy);border-color:var(--navy);color:#fff}

/* Reporter profile */
.pj-profile{padding-bottom:32px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.pj-profile-in{display:grid;grid-template-columns:140px minmax(0,1fr);gap:32px;align-items:start;max-width:960px}
.pj-profile-photo{width:140px;height:140px;border-radius:50%;background:var(--navy-soft);color:var(--navy);display:grid;place-items:center;font-style:normal;font-weight:800;font-size:40px}
.pj-profile h1{font-family:Vazirmatn,Tahoma,system-ui,sans-serif;font-size:clamp(34px,4vw,52px);font-weight:500;line-height:1.05;margin:6px 0}
.pj-profile-job{margin:0 0 14px;color:var(--ink-2);font-weight:600}
/* The short bio under the name (pj_short_bio(): one or two sentences), small and light. */
.pj-profile-bio{margin:2px 0 16px;font-family:Vazirmatn,Tahoma,system-ui,sans-serif;font-size:15px;font-weight:300;line-height:1.65;color:var(--ink-2);max-width:60ch}
.pj-profile-facts{display:flex;flex-wrap:wrap;gap:12px 32px;margin:0 0 18px}
.pj-profile-facts div{border-top:2px solid var(--navy);padding-top:6px}
.pj-profile-facts dt{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.pj-profile-facts dd{margin:2px 0 0;font-weight:600}
.pj-profile-links{align-items:center}
.pj-profile-stories{border-top:0;margin-top:8px}
.pj-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.pj-person{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--bg)}
.pj-person:hover{border-color:var(--navy)}
.pj-person i{width:64px;height:64px;border-radius:50%;background:var(--navy-soft);color:var(--navy);display:grid;place-items:center;font-style:normal;font-weight:800;font-size:18px}
.pj-person b{display:block;font-size:16px}
.pj-person small{display:block;color:var(--ink-2);font-size:13px;margin:2px 0}
.pj-person .mono{display:block}

@media (max-width:1100px){.pj-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
.pj-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
.pj-grid .card h3{font-size:16px}
.pj-profile-in{grid-template-columns:1fr;gap:18px}
.pj-profile-photo{width:96px;height:96px;font-size:28px}
.pj-threadpage{padding:18px}
}
@media (max-width:420px){.pj-grid{grid-template-columns:minmax(0,1fr)}}

/* Very small phones: the top bar (languages, sign in, light/dark) must fit in one line */
@media (max-width:420px){.util .wrap{gap:8px}.util .r{gap:10px}.lang a{padding:2px 8px}.theme{padding:3px}.theme #themeLbl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
@media (max-width:420px){.ut{flex-wrap:wrap;gap:2px 10px;padding:10px}.ut b{font-size:18px}.ut:first-child{padding-left:10px}}
.news>*,.fgrid>*,.brief>*,.bcard>*{min-width:0}
.news h2,.pj-archhd h1,.ahd h1,.pj-profile h1{overflow-wrap:anywhere}
.form input{min-width:0;width:100%}
.form input.pj-hp{width:1px;height:1px;flex:none}
/* Newsletter address: 16px on touch screens, so iPhones don't zoom the page in on tap. */
@media (pointer:coarse){.form input{font-size:16px}}

/* Card grids on tablets and phones: columns that may shrink to nothing (as the wide-screen rules do), so a
   card whose picture fails to load (the browser then sizes it 3000px wide) can never widen the page. */
.card,.rep,.short,.prog,.pic{min-width:0}
.gal{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){
.rail{grid-template-columns:minmax(0,1fr) 300px}
.row4,.progs,.ops,.more .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
.shorts,.pstrip{grid-template-columns:repeat(3,minmax(0,1fr))}
.reports{grid-template-columns:repeat(4,minmax(0,1fr))}
.video,.feat,.brief,.bcard,.mapsec,.threads{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
.rail,.latest,.lgrid,.row4,.ops,.news,.art,.more .g4{grid-template-columns:minmax(0,1fr)}
.shorts,.reports{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ===================================================================== Members (Restrict Content Pro) */
.pj-lock{display:inline-flex;align-items:center;gap:4px;margin-inline-start:8px;padding:2px 8px;border-radius:999px;background:var(--navy-soft);color:var(--navy);font-size:10.5px;font-weight:800;letter-spacing:.06em;vertical-align:1px}
.pj-lock svg{width:11px;height:11px;fill:currentColor}
.sec.navy .pj-lock,.photo .pj-lock{background:rgba(255,255,255,.16);color:#fff}
.pj-paywall{font-family:Vazirmatn,Tahoma,system-ui,sans-serif;background:var(--navy-2);color:#fff;border-radius:12px;padding:28px 32px;margin:2em 0;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.pj-paywall .k{color:#9db6f0}
.pj-paywall h3{font-family:Vazirmatn,Tahoma,system-ui,sans-serif;font-size:28px;font-weight:500;color:#fff;margin:0}
.pj-paywall p{margin:0;color:#c3cde6;font-size:15px;max-width:52ch}
.pj-paywall-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.pj-paywall .btn{border-color:rgba(255,255,255,.35);color:#fff}
/* A button styled as .btn looks like a .btn link: not the browser's grey button face (found in the 25 Oct 2026
   audit: a photo set's Share, the page bar's Go, the tools' Today). No weight: every .btn style the theme sets wins. */
:where(button.btn){background:none;font:inherit;font-weight:700;font-size:13.5px;cursor:pointer;color:inherit}
.pj-paywall .btn.fill{background:#fff;border-color:#fff;color:var(--navy-2)}
.pj-locked-media{position:relative}
.pj-locked-media .pic img{filter:blur(6px) brightness(.7);transform:scale(1.03)}
.pj-locked-media .pj-paywall{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100% - 32px));margin:0;box-shadow:0 24px 60px -24px rgba(0,0,0,.5)}
.pj-locked-media .player{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden}
@media (max-width:760px){.pj-locked-media .pj-paywall{position:static;transform:none;width:100%;margin-top:12px}.pj-paywall{padding:22px}}

/* Restrict Content Pro's message on a locked story */
.body .rcp_restricted,.body .rcp-restricted-content-message,.body .rcp_restricted_message,.pj-premium>.rcp_restricted{font-family:Vazirmatn,Tahoma,system-ui,sans-serif;font-size:15px;background:var(--navy-soft);border-radius:12px;padding:22px 26px;margin:2em 0}
.pj-locked .body .pj-premium{position:relative}
.pj-locked .body .pj-premium>p:first-of-type{-webkit-mask:linear-gradient(#000 40%,transparent);mask:linear-gradient(#000 40%,transparent)}

/* Restrict Content Pro's pages: sign-up, login, account, membership levels */
.body .rcp_form,.body #rcp_login_form,.body #rcp_registration_form,.body .rcp-table,.body #rcp-account-overview,.body .rcp_success,.body .rcp_error,.body .rcp_message{font-family:Vazirmatn,Tahoma,system-ui,sans-serif;font-size:15px;line-height:1.5}
.body .rcp_form fieldset{border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin:0 0 18px}
.body .rcp_form legend,.body .rcp_header{font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding:0 6px}
.body .rcp_form p{margin:0 0 14px}
.body .rcp_form label{display:block;font-weight:700;font-size:13.5px;margin-bottom:6px}
.body .rcp_form input[type=text],.body .rcp_form input[type=email],.body .rcp_form input[type=password],.body .rcp_form input[type=tel],.body .rcp_form select,.body .rcp_form textarea{width:100%;max-width:480px;height:44px;border:1px solid var(--line-2);border-radius:8px;padding:0 14px;font:inherit;background:var(--bg);color:var(--ink)}
.body .rcp_form textarea{height:auto;padding:10px 14px}
.body .rcp_form input:focus,.body .rcp_form select:focus{outline:2px solid var(--navy);outline-offset:1px}
.body .rcp_form input[type=submit],.body .rcp_form button,.body .rcp-button,.body .rcp_button{display:inline-flex;align-items:center;height:44px;padding:0 22px;border-radius:999px;border:0;background:var(--navy);color:#fff;font:700 14px Vazirmatn,Tahoma,system-ui,sans-serif;cursor:pointer}
.body .rcp_form input[type=submit]:hover,.body .rcp_form button:hover{background:var(--navy-2)}
.body .rcp_subscription_level,.body .rcp_level{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:0 0 10px;list-style:none}
.body .rcp_subscription_level:has(input:checked){border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.body .rcp_levels,.body #rcp_subscription_levels{padding:0;margin:0 0 18px}
.body .rcp_price,.body .rcp_level_price{font-family:Vazirmatn,Tahoma,system-ui,sans-serif;color:var(--navy);font-weight:500}
.body .rcp_success,.body .rcp_message.rcp_success{background:#e6f6ec;color:#0b6b30;border-radius:8px;padding:12px 16px}
.body .rcp_error,.body .rcp_message.rcp_error{background:#fbe7ea;color:#b3122a;border-radius:8px;padding:12px 16px}
.body .rcp-table,.body table.rcp-table{display:table;width:100%;border-collapse:collapse;font-size:14px}
.body .rcp-table th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);text-align:start}
.pj-rcp-msg p{color:#e3e9f6;font-size:16px;margin:0}
.pj-rcp-msg a:not(.btn){color:#fff;text-decoration:underline}
.body .btn,.body .tag2,.body .pj-paywall .btn{text-decoration:none}
.pj-videobox .player .pic{height:100%;aspect-ratio:auto}

/* ---------- News ticker ---------- */
.pj-ticker{border-bottom:1px solid var(--line);background:var(--bg)}
.pj-ticker .wrap{display:flex;align-items:center;gap:14px;height:42px;min-width:0}
.pj-ticker-k{flex:none;display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.pj-ticker-k i{width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulse2 1.6s infinite}
.pj-ticker-run{flex:1;min-width:0;display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.pj-ticker-run ul{flex:none;display:flex;gap:36px;margin:0;padding:0 18px;list-style:none;animation:pj-tick 70s linear infinite}
.pj-ticker-run a{display:inline-flex;gap:8px;white-space:nowrap;font-size:14px;font-weight:600;color:var(--ink)}
.pj-ticker-run a:hover{color:var(--navy)}
.pj-ticker-run .mono{color:var(--mute);font-size:12px}
.pj-ticker:hover ul,.pj-ticker:focus-within ul,.pj-ticker.paused ul{animation-play-state:paused}
.pj-ticker-pause{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);background:transparent;color:var(--ink-2);cursor:pointer;position:relative}
.pj-ticker-pause::before,.pj-ticker-pause::after{content:"";position:absolute;top:9px;width:3px;height:10px;background:currentColor;left:10px}
.pj-ticker-pause::after{left:15px}
.pj-ticker.paused .pj-ticker-pause::before{left:11px;width:0;height:0;background:none;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor}
.pj-ticker.paused .pj-ticker-pause::after{display:none}
@keyframes pj-tick{to{transform:translateX(-100%)}}
[dir=rtl] .pj-ticker-run ul{animation-name:pj-tick-rtl}
@keyframes pj-tick-rtl{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.pj-ticker-run{overflow-x:auto}.pj-ticker-run ul{animation:none}.pj-ticker-run ul[aria-hidden]{display:none}.pj-ticker-pause{display:none}}
@media (max-width:640px){.pj-ticker-k{font-size:0;gap:0}.pj-ticker .wrap{gap:10px}}

/* ---------- Shorts player ---------- */
.short[data-short]{cursor:pointer}
.pj-shortbox{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:rgba(6,10,24,.92);padding:16px}
.pj-shortbox[hidden]{display:none}
.pj-shortframe{width:min(420px,100%,calc((100dvh - 32px) * 9 / 16));aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#000}
.pj-shortframe iframe{width:100%;height:100%;border:0;display:block}
.pj-shortx{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:28px;line-height:1;cursor:pointer}
[dir=rtl] .pj-shortx{right:auto;left:12px}


/* ---------- Reporters page ---------- */
.pj-pages{display:flex;flex-wrap:wrap;gap:6px;margin:32px 0}
.pj-pages .page-numbers{min-width:40px;height:40px;display:grid;place-items:center;padding:0 10px;border:1px solid var(--line-2);border-radius:999px;color:var(--ink)}
.pj-pages .current{background:var(--navy);border-color:var(--navy);color:#fff}

/* The design's article ".more" (More stories) also styles the gallery's "+N" tile: undo it there. */
.gal .more{grid-column:auto;max-width:none;width:auto;margin:0;padding:0;border:0}

/* Vazirmatn's digits are proportional: keep times, counts and prices lined up. */
.mono,time,.dur,.pj-ticker-run .mono,.ut b,.stat b{font-variant-numeric:tabular-nums}
/* Buttons and form fields don't take the page font by default: Vazirmatn there too. */
button,input,select,textarea,optgroup{font-family:Vazirmatn,Tahoma,system-ui,sans-serif}

/* Story page, left column (contents, share, small ad): it follows the reader down the story
   and stops at the end of the story, never sliding over "More from…" underneath. */
.art>.lft{position:static;align-self:stretch;display:block}
@media (max-width:1100px){.art>.lft{display:none}}
.lft-in{position:sticky;top:96px;display:flex;flex-direction:column;gap:24px}

/* Listen to this article: progress and pause button, the sentence being read, language chips as links. */
.player3 .wave{--p:0%;background:linear-gradient(90deg,var(--navy) 0 var(--p),rgba(28,63,143,.3) var(--p))}
[dir=rtl] .player3 .wave{background:linear-gradient(270deg,var(--navy) 0 var(--p),rgba(28,63,143,.3) var(--p))}
.player3.playing .pb::after{border:0;width:12px;height:14px;margin:0;background:linear-gradient(90deg,#fff 0 35%,transparent 35% 65%,#fff 65%)}
.player3 .ch{display:flex;flex-wrap:wrap;gap:6px}
.player3 a.chip{text-decoration:none}
.player3 .chip{font:inherit;font-size:12px;cursor:pointer;background:transparent}
.pj-reading{background:color-mix(in oklab,var(--navy-soft) 85%,transparent);box-shadow:0 0 0 6px color-mix(in oklab,var(--navy-soft) 85%,transparent);border-radius:4px;transition:background .2s}
.bcard .pj-reading{background:rgba(255,255,255,.12);box-shadow:0 0 0 6px rgba(255,255,255,.12)}
.pj-wait .pb{animation:pj-wait 1s ease-in-out infinite}
@keyframes pj-wait{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.pj-wait .pb{animation:none}}

/* Information tiles: the province picker and links to the full pages. */
.ut .pj-prov{field-sizing:content;appearance:none;-webkit-appearance:none;border:0;background:transparent;padding:0 14px 0 0;margin:0;font:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer;max-width:9.5em;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:right 5px top 55%,right 1px top 55%;background-size:4px 4px;background-repeat:no-repeat}
[dir=rtl] .ut .pj-prov{padding:0 0 0 14px;background-position:left 1px top 55%,left 5px top 55%}
.ut .pj-prov:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:3px}
.ut .pj-prov option{color:var(--ink);background:var(--bg);text-transform:none}
/* The tile links get a real box (not display:contents), so keyboard users can reach them and see the focus ring. */
.pj-tilelink{color:inherit;text-decoration:none;display:flex;align-items:center;gap:inherit;flex-wrap:inherit;min-width:0}
.pj-wtile .pj-tilelink{display:inline-block}
.pj-tilelink:hover b{color:var(--navy)}

/* Exchange rates and Weather pages. */
.pj-tablewrap{overflow-x:auto;margin:8px 0 16px;-webkit-overflow-scrolling:touch}
.pj-rates,.pj-weather{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
.pj-rates{max-width:720px}
.pj-rates th,.pj-rates td,.pj-weather th,.pj-weather td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:start;vertical-align:middle}
.pj-rates thead th,.pj-weather thead th{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);border-bottom:2px solid var(--navy);white-space:nowrap}
.pj-rates td{font-size:17px;font-weight:600}
.pj-rates tbody th,.pj-weather tbody th{font-weight:600}
.pj-cur{display:inline-block;min-width:3.4em;margin-inline-end:10px;padding:2px 6px;border-radius:4px;background:var(--navy-soft);color:var(--navy);font-size:12px;font-weight:800;text-align:center}
.pj-weather td small{color:var(--mute)}
.pj-weather td b{font-size:18px}
.pj-weather tbody tr:target{background:var(--navy-soft)}
.pj-note{color:var(--mute);font-size:13px}
[dir=rtl] .pj-rates,[dir=rtl] .pj-weather{direction:rtl}
@media (max-width:640px){.pj-rates th,.pj-rates td,.pj-weather th,.pj-weather td{padding:10px 8px}.pj-weather{font-size:14px}}

/* The design's .hero and .art set "padding: … 0 …", which removes the .wrap side gutter they
   sit on: on phones and tablets the text touched the screen edge. Put the gutter back. */
.wrap.hero,.wrap.art,.wrap.pj-arch{padding-left:clamp(16px,3vw,36px);padding-right:clamp(16px,3vw,36px)}

/* Programme video at the top of the text column (side columns beside it). */
.pj-body-video{margin:0 0 28px}
.pj-body-video .player .pic{aspect-ratio:auto;height:100%}
/* Play symbols point right in every language (they are not text, so they are never mirrored). */
[dir=rtl] .play b::after{margin-left:6px;margin-right:0}
/* The play control is a <button> covering the picture: no browser button grey over the picture. */
.player .play{border:0;background:none;padding:0;width:100%;height:100%;cursor:pointer;font:inherit;color:inherit}
/* After Play, the YouTube player (or an MP4) fills the whole box on every page, not only Video news. */
.player iframe,.player video{position:absolute;inset:0;width:100%;height:100%;border:0}
/* A video's own page, started without sound (the browser would not allow it): the button to turn the sound on. */
.player .pj-unmute{position:absolute;top:12px;inset-inline-start:12px;z-index:2;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px 0 12px;border:0;border-radius:999px;background:rgba(9,16,35,.86);color:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.player .pj-unmute:hover{background:var(--red)}
.player .pj-unmute svg{width:18px;height:18px;fill:currentColor}
.player .pj-unmute:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* ---------- Weather icons (drawn by the theme; colours follow light / dark) ---------- */
:root{--pj-sun:#f5a524;--pj-sun-2:#e8890c;--pj-cloud:#eef2f8;--pj-cloud-line:#93a3bd;--pj-rain:#2f7de1;--pj-snow:#62b6ea}
[data-theme="dark"]{--pj-sun:#ffc04d;--pj-sun-2:#ffab1a;--pj-cloud:#2c3547;--pj-cloud-line:#8e9bb3;--pj-rain:#5aa2ff;--pj-snow:#8fd0ff}
.pj-wi{width:1em;height:1em;display:inline-block;vertical-align:middle;overflow:visible}
.pj-wi .s circle{fill:var(--pj-sun);stroke:var(--pj-sun-2)}
.pj-wi .s path{stroke:var(--pj-sun-2)}
.pj-wi .c{fill:var(--pj-cloud);stroke:var(--pj-cloud-line)}
.pj-wi-fog .c{fill:none;stroke-width:2}
.pj-wi .r{stroke:var(--pj-rain);stroke-width:1.9}
.pj-wi-snow .r{stroke:var(--pj-snow)}
.pj-wi .b{fill:var(--pj-sun);stroke:var(--pj-sun-2);stroke-width:1.2}
.pj-wtile b{white-space:nowrap}
.pj-wtile-i{display:inline-flex;font-size:.85em;margin-inline-end:4px;vertical-align:-2px}

/* Side column of lists and pages, weather icons (the tool pages have more in tools.css). */
.pj-tool-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
.pj-tool-main{min-width:0;display:flex;flex-direction:column;gap:28px}
.pj-tool-side{display:flex;flex-direction:column;gap:28px}
.pj-tool-side>:last-child{position:sticky;top:96px}
.pj-tool-side .ad{aspect-ratio:300/250}
.pj-tool-side .ad.tall{aspect-ratio:300/600}
.pj-tool-ad{margin:0 0 24px}
.pj-tool-ad .ad{min-height:90px}
@media (max-width:1000px){.pj-tool-grid{grid-template-columns:minmax(0,1fr)}
.pj-tool-side{position:static}
.pj-tool-side .ad.tall{display:none}}
/* Weather tile: the picker and icon take room, so its small lines may wrap instead of being cut. */
.ut.pj-wtile{gap:8px}
.ut.pj-wtile small{white-space:normal;overflow:visible;line-height:1.3}
/* The 2026 date: in the top line on wide screens; that line is hidden on narrow ones, so the date tile shows it there. */
.pj-narrow-only{display:none!important}
@media (max-width:760px){.ut small.pj-narrow-only{display:block!important}}
/* Lists beside the right-hand column: three across instead of four. */
.pj-list-grid{margin-top:8px}
.pj-tool-main .pj-grid,.pj-tool-main .more .g4,.pj-tool-main .pj-people{grid-template-columns:repeat(3,minmax(0,1fr))}
.pj-tool-main .more{margin-top:0;padding-top:0;border-top:0}
.pj-page .pj-list-grid .body{max-width:none}
@media (max-width:1100px){.pj-tool-main .pj-grid,.pj-tool-main .more .g4,.pj-tool-main .pj-people{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pj-tool-main .pj-grid,.pj-tool-main .more .g4,.pj-tool-main .pj-people{grid-template-columns:minmax(0,1fr)}}
/* "Read also" inside the story text. */
.body .pj-readalso{margin:1.6em 0;padding:16px 20px;border-inline-start:3px solid var(--navy);background:var(--bg-2);border-radius:0 10px 10px 0}
[dir=rtl] .body .pj-readalso{border-radius:10px 0 0 10px}
.body .pj-readalso .k{display:block;margin-bottom:8px}
.body .pj-readalso ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.body .pj-readalso li{margin:0;font-size:16px;line-height:1.4;font-weight:600}
.body .pj-readalso a{color:var(--ink);text-decoration:none}
.body .pj-readalso a:hover{color:var(--navy);text-decoration:underline}
/* Headline levels in lists are h3 (footer column titles h2) so headings go in order for screen
   readers and search engines; they look exactly as the design's h4 did. */
.tl h3{font-family:Manrope;font-weight:600;font-size:14.5px;line-height:1.35;margin-top:2px}
.lgrid h3{font-family:Manrope;font-weight:600;font-size:15px;line-height:1.35}
.vlist h3{font-family:Manrope;font-weight:600;font-size:14px;line-height:1.35}
.short h3{font-family:Manrope;font-weight:700;font-size:14px;line-height:1.3}
.rep h3{font-size:18px;line-height:1.2}
.fgrid h2{font-family:Manrope;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:800;margin-bottom:14px;line-height:1.08}
/* Speed: the pulsing dots (Live, Live updates, ticker) animate a growing ring with transform and
   opacity instead of an animated shadow, so phones don't repaint the page 60 times a second. */
.live svg{width:15px;height:15px;flex:none}
.live b,.railhd h2 i,.pj-ticker-k i{animation:none;position:relative}
.live b::after,.railhd h2 i::after,.pj-ticker-k i::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:pj-ping 1.6s ease-out infinite;will-change:transform,opacity}
@keyframes pj-ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.6);opacity:0}}
/* Phones: a solid sticky header (the see-through blur is costly to scroll on low-end phones). */
@media (max-width:760px){.hdr{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg)}}
/* Readers who turn off motion in their phone or computer settings get no animations. */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* Contrast (WCAG AA 4.5:1): the design's small grey text was 4.47:1 on its light grey tiles. */
:root:not([data-theme="dark"]){--mute:#5f6571}
:root:not([data-theme="dark"]) .ut .dn{color:color-mix(in srgb,var(--red) 85%,#000)}
.ad span{opacity:1}
/* ------------------------------------------------------------------ Audit fixes (v1.3) */
/* Phones: the Picture of the day and Programs cards grow with their text (it was cut off). */
@media (max-width:760px){.photo,.prog{aspect-ratio:auto;display:flex;flex-direction:column;justify-content:flex-end}
.photo{min-height:min(110vw,520px)}
.prog{min-height:240px}
.photo .t,.prog .t{position:relative;max-width:none}
.photo .pic::after{background:linear-gradient(0deg,rgba(8,14,32,.92) 0,rgba(8,14,32,.5) 55%,transparent 85%)}}
@media (max-width:420px){.progs{grid-template-columns:minmax(0,1fr)}
.prog{min-height:200px}
.prog h3{font-size:24px}}
/* Dark mode: white text on filled buttons and chips needs a deeper blue than the link colour. */
:root{--fill:var(--navy);--red-fill:var(--red)}
[data-theme="dark"]{--fill:#2f5fc4;--red-fill:#d6321f}
[data-theme="dark"] .lang a[aria-current],[data-theme="dark"] .sub,[data-theme="dark"] .btn.fill,[data-theme="dark"] .tb.on,[data-theme="dark"] .thread .fl.on,[data-theme="dark"] .player3 .chip.on,[data-theme="dark"] .pj-skip:focus,[data-theme="dark"] .pj-pages .current,[data-theme="dark"] .pj-arch .btn.fl.on{background:var(--fill);border-color:var(--fill);color:#fff}
[data-theme="dark"] .sec.navy .btn.fill{background:#fff;border-color:#fff;color:var(--navy-2)}
[data-theme="dark"] .live{background:var(--red-fill)}
[data-theme="dark"] .ut .up{color:#3ccf7e}
/* Main menu: on screens wider than 1024px the sections show in the bar, and what does not fit moves under
   "More" (pajhwok.js), as in the design; up to 1024px (phones, tablets) the menu button opens the full menu. */
/* The page is never wider than 1320px, so this spacing holds on every wide screen. */
@media (min-width:1281px){.nav>a,.nav .grp>span,.nav .grp>button{padding:0 9px;font-size:13.5px}
.hdr .wrap{gap:20px}}
@media (min-width:1281px) and (max-width:1360px){.nav>a,.nav .grp>span,.nav .grp>button{padding:0 7px;font-size:13px}}
@media (min-width:1025px) and (max-width:1280px){.nav>a,.nav .grp>span,.nav .grp>button{padding:0 7px;font-size:13px}
.hdr .wrap{gap:16px}}
@media (max-width:1024px){.hdr .nav{display:none}
.pj-burger{display:grid}
.hdr .wrap{justify-content:space-between}}
.nav .grp[hidden],.nav .pj-moved{display:none!important}
.nav.pj-fit{-webkit-mask:none;mask:none}
/* Nothing runs off the end any more: no fade over the last section. */
.pj-more .dd{max-height:calc(100vh - 140px);overflow-y:auto}
.pj-more .pj-more-h{display:block;padding:10px 12px 4px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.pj-more .dd a.pj-more-sub{padding-inline-start:22px}
/* Safari before 18: the header is the frame for the menu dropdowns (fixed position), and keeps its
   background where color-mix() is missing (Safari before 16.2). */
@media (min-width:761px){.hdr{-webkit-backdrop-filter:blur(16px);transform:translateZ(0)}}
/* Phones keep the solid header (above). */
@supports not (color:color-mix(in oklab,red,red)){.hdr{background:var(--bg)}}
/* Focus rings that stay visible: inside video players, in navy sections, under the sticky header. */
html{scroll-padding-top:calc(100px + var(--pj-ab,0px))}
/* Signed in, WordPress's admin bar is fixed at the top of the window (32 px; 46 px up to 782 px wide; on phones up to
   600 px it scrolls away with the page): the theme's sticky parts stop under it, never behind it (user, 26 Oct 2026:
   "when the user is logged in that black admin bar is overlaping the menu and social icons"). */
html:has(>body.admin-bar){--pj-ab:32px}
@media (max-width:782px){html:has(>body.admin-bar){--pj-ab:46px}}
@media (max-width:600px){html:has(>body.admin-bar){--pj-ab:0px}}
.hdr,.rp{top:var(--pj-ab,0px)}
.lft,.lft-in,.rgt .ad.tall,.pj-tool-side>:last-child{top:calc(96px + var(--pj-ab,0px))}
@media (max-width:760px){html:has(.pj-sticky-ad){scroll-padding-bottom:70px}}
.player .play:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.sec.navy :focus-visible,.bcard :focus-visible,.pj-paywall :focus-visible,.photo:focus-visible,.prog:focus-visible{outline-color:#fff}
/* Windows high-contrast mode: chosen items keep showing which one is chosen. !important because the
   dark-mode fills ([data-theme="dark"] ..., which contrast themes like Night sky turn on) and the longer
   selectors (.thread .fl.on, .player3 .chip.on) would otherwise keep the blue fill under HighlightText. */
@media (forced-colors:active){.lang a[aria-current],.chip.on,.tb.on,.pj-pages .current,.fl.on{forced-color-adjust:none;background:Highlight!important;border-color:Highlight!important;color:HighlightText!important}}
/* The same for the tool pages: the chosen day, today, the next prayer and the chosen calendar tab. */
/* The smallest phones (folded Galaxy Fold, 280px): the top bar wraps instead of widening the page. */
@media (max-width:300px){.util .wrap{flex-wrap:wrap;height:auto;row-gap:4px;padding-block:6px}}
/* The weather tile's province list: easy to tap, and no zoom-in on iPhone. */
@media (pointer:coarse){.ut .pj-prov{font-size:16px;min-height:28px}}
/* Share icons: a visible sign that the link was copied. */
.share a.on,.share button.on{color:var(--navy);background:var(--navy-soft)}
/* The app: install and alerts bars, the offline note, the footer alerts button. */
.pj-appbar{position:fixed;inset-inline:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:58;max-width:560px;margin-inline:auto;display:flex;align-items:center;gap:12px;padding-block:12px;padding-inline:14px 8px;background:var(--bg);color:var(--ink);border:1px solid var(--line-2);border-radius:12px;box-shadow:0 18px 40px -14px rgba(13,17,23,.4);font-size:14px;line-height:1.4;animation:pj-appbar .25s ease-out}
@keyframes pj-appbar{from{transform:translateY(12px);opacity:0}}
.pj-appbar img{width:40px;height:40px;border-radius:9px;flex:none}
.pj-appbar-t{flex:1;min-width:0}
.pj-appbar-t b{display:block;font-weight:700}
.pj-appbar-t span{display:block;margin-top:2px;color:var(--mute);font-size:12.5px}
.pj-appbar-b{display:flex;align-items:center;gap:4px;flex:none}
.pj-appbar .btn{height:38px;padding:0 16px;cursor:pointer;font-family:inherit}
.pj-appbar-later{border:0;background:none;color:var(--mute);font:inherit;font-weight:600;padding:0 10px;min-height:44px;cursor:pointer}
.pj-appbar-x{border:0;background:none;color:var(--mute);font-size:22px;line-height:1;min-width:44px;min-height:44px;cursor:pointer;border-radius:50%}
.pj-appbar-later:hover,.pj-appbar-x:hover{color:var(--ink)}
@media (max-width:760px){body:has(.pj-sticky-ad) .pj-appbar{bottom:calc(72px + env(safe-area-inset-bottom,0px))}}
/* The sticky ad shows on phones only. */
body.pj-noscroll .pj-appbar{display:none}
@media (max-width:480px){.pj-appbar{flex-wrap:wrap}
.pj-appbar-b{width:100%;justify-content:flex-end}}
/* While a bar is open, the page keeps room for it: a link or button reached with Tab scrolls clear of
   the bar, and the footer can scroll above it. --pj-appbar-h (the bar's measured height, set by the
   page script) wins over these estimates; the bar sits higher when the phone's sticky ad is there. */
html:has(.pj-appbar){--pj-appbar-room:var(--pj-appbar-h,100px);scroll-padding-bottom:var(--pj-appbar-room)}
html:has(.pj-appbar):has(.pj-sticky-ad){--pj-appbar-room:var(--pj-appbar-h,160px)}
@media (max-width:480px){html:has(.pj-appbar){--pj-appbar-room:var(--pj-appbar-h,150px)}
html:has(.pj-appbar):has(.pj-sticky-ad){--pj-appbar-room:var(--pj-appbar-h,210px)}}
body:has(.pj-appbar) footer{padding-bottom:calc(28px + var(--pj-appbar-room,0px))}
.pj-offline{position:fixed;top:calc(8px + var(--pj-ab,0px) + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:58;width:max-content;max-width:calc(100% - 24px);padding:8px 16px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:13px;font-weight:600;box-shadow:0 8px 24px -10px rgba(0,0,0,.5)}
.pj-alerts{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);border-radius:999px;background:none;color:inherit;font:inherit;font-weight:600;padding:5px 12px;cursor:pointer}
.pj-alerts svg{width:16px;height:16px;flex:none}
.pj-alerts:hover{border-color:var(--navy);color:var(--navy)}
.pj-alerts.on{border-color:var(--navy);color:var(--navy);background:var(--navy-soft)}
.pj-alerts.on svg path:first-child{fill:currentColor}
.pj-alerts[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.pj-appbar{animation:none}}
@media print{.pj-appbar,.pj-offline,.pj-alerts{display:none!important}}
/* Side column of lists and pages, weather icons (the tool pages have more in tools.css). */
.pj-tool-main [hidden]{display:none!important}
/* Times with AM / PM (Site settings → Times): the AM / PM a little smaller than the figures */
.pj-ap{font-size:.55em;font-weight:700;letter-spacing:.02em}
.ut .pj-ap{display:inline;overflow:visible;font-family:Manrope,Vazirmatn,system-ui,sans-serif;font-size:11px;color:var(--mute)}
/* On the line of its time (the design shows every small line in a tile on its own line). */
/* Side column of lists and pages, weather icons (the tool pages have more in tools.css). */
@media print{.pj-tool-side,.pj-tool-ad{display:none!important}
.pj-tool-grid{display:block}}
/* ---- A search box in long drop-down lists (assets/js/find.js), on the site and the dashboard */
.pj-findable{pointer-events:none}
.pj-find-host{cursor:pointer}
.pj-find-back{position:fixed;inset:0;z-index:200000;background:transparent}
.pj-findbox{position:fixed;z-index:200001;display:flex;flex-direction:column;background:var(--bg,#fff);color:var(--ink,#1d2327);border:1px solid var(--line-2,#c3c4c7);border-radius:12px;box-shadow:0 14px 40px rgba(10,20,40,.22);overflow:hidden;font-family:inherit}
.pj-find-in{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line,#dcdcde)}
.pj-find-in svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--mute,#646970);stroke-width:2;stroke-linecap:round}
.pj-find-in input,.pj-find-in input:focus{flex:1;min-width:0;height:auto;min-height:0;margin:0;padding:4px 0;border:0;outline:0;box-shadow:none;background:transparent;font:inherit;font-size:16px;color:inherit}
.pj-find-list{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;margin:0;padding:6px;list-style:none;overflow-y:auto;overscroll-behavior:contain;outline:0}
.pj-find-list li{margin:0}
.pj-find-list [role=option]{padding:9px 12px;border-radius:8px;cursor:pointer;font-size:15px;line-height:1.35}
.pj-find-list .pj-on{background:var(--navy-soft,#f0f6fc);color:var(--navy,#2271b1)}
.pj-find-list [aria-selected=true]{font-weight:700}
.pj-find-list [aria-selected=true]::after{content:"✓";margin-inline-start:8px}
.pj-find-g{padding:10px 12px 4px;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mute,#646970)}
.pj-find-none{margin:0;padding:14px 16px;font-size:14px;color:var(--mute,#646970)}
.pj-findbox.pj-find-sheet{left:12px;right:12px;top:max(12px,env(safe-area-inset-top));max-height:min(72vh,560px)}
@media (max-width:640px){.pj-find-back{background:rgba(8,14,28,.45)}}
/* ------------------------------------------------------------------ Audit fixes (v1.4) */
/* Anything marked hidden stays hidden, even where the design gives it a display (the Listen players and
   button when this device has no voice for the language). */
[hidden]{display:none!important}
/* Dark mode: the browser's own parts (scroll bars, form fields, drop-down lists) follow the theme. */
:root{color-scheme:light}
[data-theme="dark"]{color-scheme:dark}
iframe{color-scheme:normal}
/* Ads and embeds keep a see-through background in dark mode. */
/* English pages: the switcher's Dari and Pashto names use the device's Arabic-script font, so English
   readers don't download the 45 KB Arabic font file for two words. */
html:not([dir=rtl]) .lang .rtl{font-family:Tahoma,"Segoe UI","Noto Sans Arabic",system-ui,sans-serif}
/* Header tiles: room above the sponsor's text for the "Sponsored" label (it was drawn over the text). */
.ut.sp{padding-top:14px}
/* Phones, two tiles a row: no line on the outer edge of the right-hand tiles. */
@media (max-width:760px){.ut:nth-child(2n){border-right:0}}
/* Dark mode: the Morning brief player's label and time on the lighter player box (WCAG AA). */
[data-theme="dark"] .player2 .k{color:#c7d6fa}
[data-theme="dark"] .player2 .mono{color:#c3cbe0}
/* Dark mode: white text on the tool pages' badges and chosen items needs the deeper blue (as buttons). */
/* Reader comments (comments.php; Site settings → Safety → Allow reader comments) */
.pj-comments{margin:40px 0 0;padding-top:28px;border-top:1px solid var(--line)}
.pj-comments h2{font-size:24px;margin:0 0 18px}
.pj-comment-list,.pj-comment-list .children{list-style:none;margin:0;padding:0}
.pj-comment-list .children{margin-inline-start:24px;padding-inline-start:16px;border-inline-start:2px solid var(--line)}
.pj-comment-list .comment-body{padding:14px 0;border-bottom:1px solid var(--line)}
.pj-comment-list .comment-author{font-weight:700}
.pj-comment-list .comment-author .says{display:none}
.pj-comment-list .comment-metadata,.pj-comment-list .comment-metadata a{font-size:12.5px;color:var(--mute)}
.pj-comment-list .comment-content p{margin:8px 0}
.pj-comment-list .reply a{font-size:13px;font-weight:700;color:var(--navy)}
.pj-comments .comment-respond{margin-top:24px}
.pj-comments .comment-reply-title{font-size:19px;margin:0 0 8px}
.pj-comments .comment-reply-title small{margin-inline-start:10px;font-size:13px}
.pj-comments form p{margin:0 0 14px;display:flex;flex-direction:column;gap:6px}
.pj-comments form label{font-size:13px;font-weight:700;color:var(--ink-2)}
.pj-comments form input[type=text],.pj-comments form input[type=email],.pj-comments form textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;width:100%;max-width:640px}
.pj-comments .comment-form-cookies-consent{flex-direction:row;align-items:flex-start;gap:8px}
.pj-comments .comment-form-cookies-consent label{font-weight:500}
.pj-comments .form-submit .btn{cursor:pointer;font-family:inherit}
/* Privacy and cookie notice (inc/privacy.php): a card at the bottom, above the phone's sticky ad */
.pj-consent{position:fixed;inset-inline:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:60;max-width:780px;margin-inline:auto;background:var(--bg);color:var(--ink);border:1px solid var(--line-2);border-radius:14px;box-shadow:0 18px 44px -14px rgba(13,17,23,.45);font-size:14px;line-height:1.5;animation:pj-appbar .25s ease-out}
.pj-consent-in{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:16px 18px}
.pj-consent-t{flex:1 1 320px;min-width:0}
.pj-consent h2{margin:0 0 4px;font-family:inherit;font-size:15px;font-weight:800;letter-spacing:0}
.pj-consent p{margin:0;color:var(--ink-2)}
.pj-consent-l a{color:var(--navy);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.pj-consent-b{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pj-consent .btn{cursor:pointer;font-family:inherit;font-size:13.5px;padding:9px 16px}
.pj-consent-more{border:0;background:none;color:var(--navy);font:inherit;font-size:13.5px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:9px 4px}
.pj-consent-p{flex-basis:100%;display:grid;gap:12px;padding-top:12px;border-top:1px solid var(--line)}
.pj-consent-c{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer}
.pj-consent-c span{display:flex;flex-direction:column;gap:2px;min-width:0}
.pj-consent-c small{color:var(--mute);font-size:12.5px}
.pj-consent-sw{appearance:none;-webkit-appearance:none;flex:none;width:42px;height:24px;margin:0;border:0;border-radius:999px;background:var(--line-2);position:relative;cursor:pointer;transition:background .15s}
.pj-consent-sw::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.pj-consent-sw:checked{background:var(--navy)}
.pj-consent-sw:checked::after{transform:translateX(18px)}
[dir=rtl] .pj-consent-sw:checked::after{transform:translateX(-18px)}
.pj-consent-sw:disabled{opacity:.55;cursor:default}
.pj-consent-sw:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.pj-consent-p .btn{justify-self:start}
html:has(.pj-consent:not([hidden])){scroll-padding-bottom:var(--pj-consent-h,180px)}
.pj-consent-open{margin-inline-start:16px;padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
@media (max-width:760px){html:has(.pj-sticky-ad) .pj-consent{bottom:calc(72px + env(safe-area-inset-bottom,0px))}}
@media (max-width:480px){.pj-consent-in{padding:14px}
.pj-consent-b{width:100%}
.pj-consent-b .btn{flex:1 1 auto}}
@media (prefers-reduced-motion:reduce){.pj-consent{animation:none}}
/* Back to top (inc/privacy.php): bottom corner, above the sticky ad and the app bar */
.pj-top{position:fixed;inset-inline-end:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:54;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--bg);color:var(--ink);border:1px solid var(--line-2);box-shadow:0 8px 22px -10px rgba(13,17,23,.45);text-decoration:none}
.pj-top svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pj-top:hover{border-color:var(--navy);color:var(--navy)}
@media (max-width:760px){html:has(.pj-sticky-ad) .pj-top{bottom:calc(76px + env(safe-area-inset-bottom,0px))}}
html:has(.pj-appbar) .pj-top{bottom:calc(var(--pj-appbar-room,100px) + 8px)}
html:has(.pj-consent:not([hidden])) .pj-top{display:none}
@media print{.pj-consent,.pj-top{display:none!important}}
/* Bottom extras: out of the way while the phone menu is open; the footer scrolls clear of the notice */
body.pj-noscroll .pj-consent,body.pj-noscroll .pj-top{display:none}
body:has(.pj-consent:not([hidden])) footer{padding-bottom:calc(28px + var(--pj-consent-h,180px))}
/* The header prayer tile in the six-tile row: each label above its time, so AM / PM stay inside the tile */
/* Information tiles: every tile the same shape, so labels, values and detail lines line up across the strip:
   the small label on top, the value under it, the detail line under that (never "TODAY21 Mizan"). */
.util2 .ut .k{display:block;line-height:1.2;margin:0 0 1px}
.util2 .ut b{line-height:1.1}
.util2 .ut small{line-height:1.25}
.util2 .pj-wtile small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Prayer tile: Fajr and Maghrib side by side, each label above its time, and "Prayer times · Kabul" in grey under them. */
.pj-ptile-in{display:flex;flex-direction:column;gap:0;min-width:0}
.util2 .pj-ptile-h{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pj-ptile-row{display:flex;flex-wrap:nowrap;gap:16px;align-items:flex-end}
.pj-ptile-row>span{display:flex;flex-direction:column;white-space:nowrap}
.util2 .pj-ptile-row .k{margin:0}
.util2 .pj-ptile b{font-size:19px}
/* Tiles on two or three rows (tablets, phones): the sponsor tile is a box set evenly inside its cell (flush, it
   touched the line on one side and stopped at the page margin on the other: it looked pushed sideways), its sides
   in line with the words of the tiles above it (8px in, it stuck out past them, close to the dividing line). */
@media (max-width:1100px){.util2 .ut.sp{margin:8px 14px;border-radius:10px;border:0;padding:22px 10px 10px}}
@media (max-width:420px){.util2 .ut.sp{margin:8px 10px}}
/* Tiles on two or three rows (tablets): every tile starts the same distance in, the first one too. */
@media (max-width:1100px) and (min-width:421px){.util2 .ut:first-child{padding-left:14px;padding-right:14px}}
.pj-roadtile .pj-tilelink:hover b{text-decoration:underline}
/* Comment form: a field people never see (robots fill it) */
.pj-comments .pj-hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* Not far left: right-to-left pages would scroll there. */
/* Advanced search (page-templates/advanced-search.php) */
.pj-advform{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:14px 16px;align-items:end;margin-top:18px;padding:18px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2)}
.pj-advf{display:grid;gap:6px;margin:0;min-width:0}
.pj-advf>label,.pj-advo legend{font-size:13px;font-weight:600;color:var(--ink-2)}
.pj-advf input[type=search],.pj-advf input[type=date],.pj-advf select{width:100%;min-width:0;height:44px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--bg);color:var(--ink);font:inherit}
.pj-advo{grid-column:1/3;border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.pj-advo legend{float:left;padding:0;margin-inline-end:6px}
.pj-advo label{display:inline-flex;gap:6px;align-items:center;font-size:14px;cursor:pointer}
.pj-advb{grid-column:3/-1;display:flex;gap:10px;justify-content:flex-end;margin:0}
.pj-advintro{margin-top:10px;color:var(--ink-2)}
.pj-adv-link{font-size:13px;font-weight:600;color:var(--navy);white-space:nowrap;align-self:center}
@media (max-width:900px){.pj-advform{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.pj-advk,.pj-advo,.pj-advb{grid-column:1/-1}
.pj-advb{justify-content:flex-start}}
@media (max-width:520px){.pj-advform{grid-template-columns:minmax(0,1fr);padding:14px}}
/* Daily newsletter page (page-templates/newsletter.php) */
.pj-nlbox{margin:28px 0;padding:22px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2)}
.pj-nlbox h2{margin:0;font-size:22px}
.pj-nlbox p[role=status]{margin:6px 0 16px;color:var(--mute)}
.pj-nlbox .form{justify-self:start;max-width:520px}
.pj-nlchoice{border:0;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px 20px}
.pj-nlchoice legend{width:100%;padding:0;margin-bottom:6px;font-size:14px;font-weight:700}
.pj-nlchoice label{display:inline-flex;gap:8px;align-items:center;font-size:15px;cursor:pointer}
.pj-nlchoice input{width:18px;height:18px;accent-color:var(--navy)}
/* Rows that scroll sideways (shorts, programmes): a heading line with "All" and the arrows. */
.pj-rowhead{display:flex;align-items:center;gap:14px;margin:56px 0 14px}
.pj-rowtitle{font-family:Manrope,sans-serif;font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin:0;color:var(--ink)}
.pj-rowall{font-size:12.5px;color:var(--mute);font-weight:600;margin-inline-start:auto}
.pj-rowall:hover{color:var(--navy)}
.pj-scrollbtns{display:inline-flex;gap:8px}
.pj-scrollbtns[hidden]{display:none}
.pj-rowhead .pj-scrollbtns:first-child,.pj-rowtitle+.pj-scrollbtns{margin-inline-start:auto}
.pj-sb{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;padding:0}
.pj-sb:hover:not(:disabled){border-color:var(--navy);color:var(--navy)}
.pj-sb:disabled{opacity:.35;cursor:default}
.pj-sb svg,.pj-shortnav svg{width:18px;height:18px}
[dir=rtl] .pj-sb svg,[dir=rtl] .pj-shortnav svg{transform:scaleX(-1)}
.shorts.pj-scroller{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc((100% - 5 * 16px) / 6);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;margin-top:0}
.shorts.pj-scroller::-webkit-scrollbar{display:none}
.shorts.pj-scroller>.short{scroll-snap-align:start}
@media (max-width:1100px){.shorts.pj-scroller{grid-auto-columns:calc((100% - 2 * 16px) / 3)}}
@media (max-width:760px){.shorts.pj-scroller{grid-auto-columns:calc((100% - 16px) / 2.2)}}
/* The Shorts page: a grid that grows as the reader scrolls. */
.pj-shortsgrid{margin-top:8px}
.pj-more-wrap{text-align:center;margin:28px 0 8px}
.pj-more-btn[aria-busy=true]{opacity:.6}
/* The player's next and previous buttons, beside the video (over it on small screens). */
.pj-shortnav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer;z-index:2}
.pj-shortnav:hover:not(:disabled){background:rgba(255,255,255,.28)}
.pj-shortnav:disabled{opacity:.25;cursor:default}
.pj-shortprev{left:max(12px,calc(50% - min(420px,100vw,calc((100dvh - 32px) * 9 / 16)) / 2 - 64px))}
.pj-shortnext{right:max(12px,calc(50% - min(420px,100vw,calc((100dvh - 32px) * 9 / 16)) / 2 - 64px))}
[dir=rtl] .pj-shortprev{left:auto;right:max(12px,calc(50% - min(420px,100vw,calc((100dvh - 32px) * 9 / 16)) / 2 - 64px))}
[dir=rtl] .pj-shortnext{right:auto;left:max(12px,calc(50% - min(420px,100vw,calc((100dvh - 32px) * 9 / 16)) / 2 - 64px))}
/* "Sponsored": paid for by an advertiser. */
.pj-sponsored{display:inline-block;margin-inline-start:8px;padding:1px 7px;border-radius:999px;background:#fff4d6;color:#7a4b00;font:700 10px/1.6 Manrope,sans-serif;letter-spacing:.08em;text-transform:uppercase;vertical-align:middle}
[data-theme=dark] .pj-sponsored{background:#4a3a12;color:#ffd98a}
[dir=rtl] .pj-sponsored{letter-spacing:0;text-transform:none}
/* Programs: four on the screen, the rest beyond the arrows. */
.pj-ledeact{display:flex;align-items:center;gap:12px}
.progs.pj-scroller{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc((100% - 3 * 20px) / 4);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.progs.pj-scroller::-webkit-scrollbar{display:none}
.progs.pj-scroller>.prog{scroll-snap-align:start}
@media (max-width:1100px){.progs.pj-scroller{grid-auto-columns:calc((100% - 20px) / 2)}}
@media (max-width:760px){.progs.pj-scroller{grid-auto-columns:calc((100% - 20px) / 1.6)}}
/* A card (1.1.2): the programme's own tall poster (4:5, its name in the artwork), with an "all episodes" icon over it
   and nothing under it. On the Programs page a programme without a poster shows its name on a plain dark card. */
.prog.pj-pcard{aspect-ratio:4/5;min-height:0;display:block;background:var(--navy-2)}
.prog.pj-pcard .pic{position:absolute;inset:0;border-radius:0;background:var(--navy-2)}
.prog.pj-pcard .pic::after{display:none}
.prog.pj-pcard .pic img{width:100%;height:100%;object-fit:cover}
.pj-allicon{position:absolute;right:14px;bottom:14px;z-index:1;width:46px;height:46px;border-radius:50%;background:rgba(8,14,32,.78);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 2px rgba(255,255,255,.55);transition:.2s}
.pj-allicon svg{width:22px;height:22px}
.prog.pj-pcard:hover .pj-allicon,.prog.pj-pcard:focus-visible .pj-allicon{background:var(--navy);box-shadow:0 0 0 2px #fff}
[dir=rtl] .pj-allicon{right:auto;left:14px}
.pj-pcard-plain{display:flex!important;align-items:center;justify-content:center;padding:24px}
.pj-pname{position:relative;z-index:1;color:#fff;font-size:26px;font-weight:700;line-height:1.15;text-align:center;overflow-wrap:anywhere}
/* The Programs page: every programme, four to a row (two on tablets and phones). */
.pj-progsgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:8px}
@media (max-width:1100px){.pj-progsgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.pj-progsgrid{grid-template-columns:minmax(0,1fr)}}
/* 1.1.0 audit (front end) ------------------------------------------------------------------------------------- */
/* The Shorts row heading and its "All shorts" link on the dark Video news band (they were dark on dark). */
.sec.navy .pj-rowtitle{color:#fff}
.sec.navy .pj-rowall{color:#c3cde3}
.sec.navy .pj-rowall:hover{color:#fff}
/* The row heading keeps the arrows' height before they appear (no jump). */
.pj-rowhead{min-height:36px}
/* Sponsor tile: whatever the advertiser gives (a big logo, a code box) stays inside the strip. */
.util2 .ut.sp{overflow:hidden}
.util2 .ut.sp img{width:auto;height:auto;max-width:100%;max-height:36px;object-fit:contain}
.util2 .ut.sp .pj-ad-img{display:flex;align-items:center;justify-content:center;height:100%}
.util2 .ut.sp iframe,.util2 .ut.sp ins{width:100%!important;max-height:44px;overflow:hidden}
/* Long road names and sponsor headlines wrap inside their tile instead of running under the next one. */
.util2 .pj-roadtile b,.util2 .ut.sp b{white-space:normal;overflow-wrap:anywhere;display:block}
/* The logo keeps its shape when a very narrow phone squeezes the header. */
.hdr .logo{object-fit:contain;object-position:left center}
[dir=rtl] .hdr .logo{object-position:right center}
/* Keyboard focus on picture cards (programmes, photo of the day, shorts): a ring inside the card, seen on any
   background and not cut off by the sideways-scrolling rows. */
.photo:focus-visible,.prog:focus-visible,.pj-scroller>a:focus-visible{outline:3px solid #fff;outline-offset:-5px;box-shadow:0 0 0 2px var(--navy)}
/* The weather tile's province choice is big enough to hit with a mouse. */
.ut .pj-prov{padding-block:6px;margin-block:-6px}
/* Taller to click, same place in the tile. */
/* A long one-word label under a story circle wraps instead of running into its neighbours. */
.st>span:not(.ring):not(.screen-reader-text){max-width:100%;overflow-wrap:anywhere}
.st{position:relative} /* Its hidden full headline (for screen readers) stays inside the scrolling row, not past the page edge. */
/* Old [pajhwok_shorts_slider] inside a story's text: the shorts keep their tall shape and plain titles. */
.body .short .pic{aspect-ratio:9/16}
.body .short .pic img{height:100%}
.body a.short,.body .pj-rowall{text-decoration:none}
/* Names on programme cards wrap inside the card. */
.prog h3{overflow-wrap:anywhere}
/* Phones and tablets: the header's Subscribe button is hidden there (no room), so the menu offers it. */
.pj-drawer-sub{font-weight:700;color:var(--navy)}
@media (min-width:1101px){.pj-drawer-sub{display:none}}
/* Old photos (2006-2008) have no size on record: their box keeps a 3:2 shape while the picture loads, so the text
   under it does not jump. */
.pj-photobig .pic:has(>img:not([width])){aspect-ratio:3/2}
.pj-photobig .pic>img:not([width]){width:100%;height:100%;object-fit:contain}

/* ------------------------------------------------------------------ 1.1.2 */
/* Video section: the big video with its title under it; beside it, the next videos in a list that scrolls up and down
   with arrows, as tall as the big video (one column with a shorter list on phones and tablets). */
/* One grid: the section heading and the list's heading (with its arrows and "All videos") on the top row, the big
   video and the list under them, starting level. */
.video.pj-v2{align-items:stretch;column-gap:36px;row-gap:0;grid-template-areas:"lede head" "main list"}
.video.pj-v2>.pj-vlede{grid-area:lede;margin:0 0 32px;align-self:end;min-width:0}
.pj-vmain{grid-area:main;display:flex;flex-direction:column;gap:18px;min-width:0}
.pj-vmain .vinfo{gap:10px}
.pj-vmain .vinfo h3 a{color:inherit}
.pj-vside{display:contents}
.pj-vside .pj-rowhead{grid-area:head;align-self:end;margin:0 0 32px;min-width:0}
.pj-vhead .pj-rowtitle{margin-inline-end:auto} /* The arrows, then "All videos", at the far end. */
.pj-vhead .pj-scrollbtns{margin-inline-start:0}
.pj-vhead .btn{white-space:nowrap}
.sec.navy .pj-vside .pj-sb{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.sec.navy .pj-vside .pj-sb:hover:not(:disabled){border-color:#fff;color:#fff}
/* A thin scroll bar to slide through the list, as on staging (1.1.3), besides the arrows. */
.pj-vside .vlist{grid-area:list;min-height:0;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.4) rgba(255,255,255,.08);overscroll-behavior-y:contain}
/* Four at a time, each a quarter of the column, so the fourth ends level with the big video's title; the arrows
   bring the next four. Fewer than four share the height and still end level. */
.pj-vside .vlist{display:flex;flex-direction:column}
.pj-vside .vlist li{flex:0 0 25%;min-height:0;display:flex;scroll-snap-align:start}
/* Only beside the big video (computers): stacked under it, a short list sharing a height it does not have squashed
   its videos to nothing (1.1.3). */
@media (min-width:1101px){.pj-vside .vlist li:first-child:nth-last-child(-n+3),.pj-vside .vlist li:first-child:nth-last-child(-n+3)~li{flex:1 1 0}}
.pj-vside .vlist a{flex:1;min-width:0;grid-template-columns:150px 1fr;align-items:center;padding:10px 0}
.pj-vside .vlist .pic{aspect-ratio:16/9}
/* A language with one video: the video alone, in the middle. */
.video.pj-v2-one{grid-template-columns:minmax(0,1fr);grid-template-areas:"lede" "main";max-width:900px;margin-inline:auto}
@media (max-width:1100px){.video.pj-v2{grid-template-areas:"lede" "main" "head" "list"}.pj-vside .pj-rowhead{align-self:auto;margin:28px 0 10px}.pj-vside .vlist{max-height:440px}.pj-vside .vlist li{flex:0 0 auto}.pj-vside .vlist a{grid-template-columns:128px 1fr}}
/* Special reports gallery: the "+N" tile shows the next photo, darkened, under the number. */
.gal .pic.more{position:relative;display:block;padding:0}
.gal .pic.more img{width:100%;height:100%;object-fit:cover;filter:brightness(.42)}
.pj-moren{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#fff;font-size:30px;font-weight:700;line-height:1}
.pj-moren small{display:block;margin-top:6px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
[dir=rtl] .pj-moren small{letter-spacing:0;text-transform:none}
/* Morning brief: the WhatsApp channel button (Home page layout → Top stories), where the newsletter button was: the
   theme's button shape in WhatsApp's dark green (white text readable on it), with the WhatsApp icon. */
.sec .pj-wa,.brief .pj-wa{background:#008069;border-color:#008069;color:#fff;align-self:flex-start;gap:10px;height:44px;padding:0 20px}
.brief .pj-wa:hover{background:#006e5a;border-color:#006e5a;color:#fff}
.pj-wa svg{width:20px;height:20px;fill:currentColor;flex:none}
.pj-wa:focus-visible{outline:3px solid #fff;outline-offset:2px}
/* Menus: items under a sub-item (a third level) follow it in the dropdown and the phone menu, set in a little. */
.nav .dd a.pj-dd-sub{padding-inline-start:26px;font-size:13.5px;color:var(--mute)}
.nav .dd a.pj-dd-sub:hover{color:var(--navy)}
.pj-drawer details ul.pj-drawer-sub{padding-block:0 4px;padding-inline-start:16px}
/* Story pages (1.1.2): with the repeated summary gone, the photo follows the buttons closely (it was 76px down). */
.art{row-gap:32px}
.art>.ahd{padding-bottom:0}
/* The path above the headline stays on one line: links whole, the story's own title shortened with "…". */
.crumb{align-items:baseline;min-width:0;max-width:100%}
.ahd,.pj-archhd{min-width:0}
.ahd{width:100%} /* A long one-line path never widens the page (it pushed phone pages wider than the screen). */
.crumb>a,.crumb>span[aria-hidden]{flex:none;white-space:nowrap}
.crumb>span[aria-current]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* No section name over a story's headline (the path above says it): the headline sits a little closer to the path. */
.ahd>.crumb+h1{margin-top:6px}
/* Video section (1.1.2): the side list always ends exactly at the bottom of the main video's title. Its items share the
   height: 4 on a normal computer screen, 5 with bigger pictures when the main video is larger (wide screens), 6 when
   it is very large, so nothing is spread out with gaps. */
@media (min-width:1101px){
.pj-vside .vlist{container-type:size}
@container (min-height:540px){
	.pj-vside .vlist li{flex-basis:20%}
	.pj-vside .vlist li:first-child:nth-last-child(-n+4),.pj-vside .vlist li:first-child:nth-last-child(-n+4)~li{flex:1 1 0}
}
@container (min-height:640px){.pj-vside .vlist a{grid-template-columns:clamp(150px,34%,200px) 1fr}}
@container (min-height:820px){
	.pj-vside .vlist li{flex-basis:calc(100% / 6)}
	.pj-vside .vlist li:first-child:nth-last-child(-n+5),.pj-vside .vlist li:first-child:nth-last-child(-n+5)~li{flex:1 1 0}
}
}
/* A programme's page (1.1.2): its newest episode big, the next two beside it (no list of titles), the rest below. */
.pj-archtop2 .lead{grid-column:span 8}
.pj-archtop2 .mid{grid-column:span 4}
@media (max-width:1100px){.pj-archtop2 .lead{grid-column:span 7}.pj-archtop2 .mid{grid-column:span 5}}
@media (max-width:760px){.pj-archtop2 .lead,.pj-archtop2 .mid{grid-column:1/-1}}
/* ...in the main column beside the sidebar: a headline sized to that width. */
.pj-tool-main .pj-archtop2 .lead h2{font-size:clamp(24px,2.3vw,34px)}
.pj-tool-main .pj-archtop2 .mid .card h3{font-size:18px}
/* Video pages (1.1.2): a landscape ad under the video's text, in place of the tall one beside it. */
.pj-vwide{margin:28px 0 8px}
.pj-vwide .ad{min-height:90px;max-height:250px}
.pj-vwide .ad:has(>.pj-house),.pj-vwide .ad:has(>span:only-child){height:90px}
/* Map names (1.1.2): placed from the left edge as on English pages; a Dari or Pashto name still reads right to left
   inside itself, but no longer grows back over its own dot. */
.mapbox .lb{direction:ltr}
/* Home (1.1.2): the photo strip fills the width whatever the number of photos (5 left an empty sixth place)... */
@media (min-width:1101px){.pstrip{grid-template-columns:repeat(var(--n,6),minmax(0,1fr))}}
/* ...and the reader poll is as tall as the Morning brief beside it, its vote count at the foot. */
.brief{align-items:stretch}
/* Most Viewed News: its heading across the card; the list and the Listen / WhatsApp column start on one line under it
   (the WhatsApp button right under Listen, as wide); each number on its headline's first line. */
.bcard{row-gap:0;align-content:start}
.bcard>.bhd{grid-column:1/-1}
.bcard .bside{justify-content:flex-start;align-self:start}
.brief .bside .pj-wa{align-self:stretch;justify-content:center}
.bcard li{align-items:baseline}
.bcard li::before{padding-top:0}
@media (max-width:1100px){.bcard .bside{margin-top:18px}}
.brief>.poll{display:flex;flex-direction:column}
.brief>.poll>.mono{margin-top:auto;padding-top:10px}
/* Search page (1.1.2): the search box lines up with the heading and the results (the shared form style put it at the end). */
.pj-archhd .pj-search-page,.pj-archhd .form{justify-self:start}
/* Programs page (1.1.2): as many posters across as fills the rows evenly. */
@media (min-width:1101px){.pj-progsgrid{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}}
/* List pages (1.1.2): the line under the heading runs the full width of the page's content (it stopped at 820px). */
.pj-archhd{max-width:none}
.pj-archhd>*:not(.pj-chips){max-width:820px}
/* Phones (1.1.2): the 300 × 250 ad under Latest news sits in the middle, not against one side. */
@media (max-width:760px){.rail .ad{margin-inline:auto}}
/* Social media icons (1.1.2, like wesaltv.com): each network in its own colours, no circles; in the top bar before
   "Sign in" and in the footer (Footer → Social media). X, TikTok and Threads take the text colour (light in dark mode). */
.pj-soc{display:flex;align-items:center;flex-wrap:wrap;gap:16px}
.pj-soc a{display:inline-flex;line-height:0;color:var(--ink);transition:transform .15s ease,opacity .15s ease}
.pj-soc a:hover{transform:translateY(-1px);opacity:.82;color:var(--ink)}
.pj-soc svg{display:block;fill:currentColor}
.pj-soc-top{gap:12px;padding-inline-end:6px;margin-inline-end:2px;border-inline-end:1px solid var(--line)}
.pj-soc-top svg{width:16px;height:16px}
.pj-soc-footer{gap:18px}
.pj-soc-footer svg{width:22px;height:22px}
.pj-soc:not(.pj-soc-brand) a{color:var(--ink-2)}
.pj-soc:not(.pj-soc-brand) a:hover{color:var(--navy);opacity:1}
@media (prefers-reduced-motion:reduce){.pj-soc a{transition:none}.pj-soc a:hover{transform:none}}
@media (max-width:640px){.pj-soc-top{display:none}} /* Phones: no room in the top bar; the footer shows them. */

/* ------------------------------------------------------------------ 1.1.3 */
/* Story pages, news column (Article page → Story page layout): the path, headline, byline and photo in the reading
   column, the share column and the sidebar beside them from the top. Placed on the grid, so the page's markup stays. */
@media (min-width:761px){
.art.pj-col{row-gap:0;grid-template-rows:auto auto 1fr}
.art.pj-col>.ahd{grid-column:2;grid-row:1}
.art.pj-col>.hero2{grid-column:2;grid-row:2}
.art.pj-col>.body{grid-column:2;grid-row:3}
.art.pj-col>.lft{grid-column:1;grid-row:1/4}
.art.pj-col>.rgt{grid-column:3;grid-row:1/4}
.art.pj-col:not(:has(>.hero2))>.body{grid-row:2/4}
.art.pj-col>.more,.art.pj-col>:not(.ahd):not(.hero2):not(.body):not(.lft):not(.rgt){grid-column:1/-1}
}
@media (min-width:761px) and (max-width:1100px){
.art.pj-col>.ahd,.art.pj-col>.hero2,.art.pj-col>.body{grid-column:1}
.art.pj-col>.rgt{grid-column:2}
}
.art.pj-col>.ahd{max-width:none;margin:0 0 22px;text-align:start;padding:0}
.art.pj-col>.ahd .crumb{justify-content:flex-start}
.art.pj-col>.ahd h1{font-size:clamp(30px,3.1vw,44px);margin:10px 0 14px}
.art.pj-col>.ahd .byl,.art.pj-col>.ahd .tools2{justify-content:flex-start}
.art.pj-col>.hero2{max-width:none;margin:0 0 26px}
.art.pj-col>.hero2 .pic{aspect-ratio:3/2}
.pj-one-shape .art.pj-col>.hero2 .pic{aspect-ratio:16/9}
/* Wide layout with one shape: the photo 16:9 and as wide as the headline, so nothing is cut beyond 16:9. */
.pj-one-shape .art:not(.pj-col)>.hero2{max-width:920px}
.pj-one-shape .art:not(.pj-col)>.hero2 .pic{aspect-ratio:16/9}
/* One picture shape everywhere (Site settings → Site look → Picture shape): 16:9. Shorts, programme posters, the
   story circles, the Picture of the day and the Cinematic look's photo tiles keep their own shapes. */
.pj-one-shape :is(.lead,.card,.rep,.vlist,.pstrip,.gal):not(.pj-tile) .pic,.pj-one-shape .lead:not(.pj-tile)>.pic,.pj-one-shape .card:not(.pj-tile)>.pic,.pj-one-shape .pstrip>.pic,.pj-one-shape .gal>.pic{aspect-ratio:16/9}
/* A photo of another shape, or too small for its place, shown whole and never enlarged, on a soft blurred copy of
   itself (Site settings → Site look). */
.pic.pj-fill{isolation:isolate}
.pic.pj-fill::before{content:"";position:absolute;inset:-28px;z-index:-1;background:var(--pj-fill) center/cover no-repeat;filter:blur(24px) saturate(1.15) brightness(.82);transform:scale(1.06)}
.pic.pj-fill>img{position:absolute;inset:0;margin:auto;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
a:hover .pic.pj-fill>img{transform:none}
/* A story's headline is underlined while the mouse is over the story, or the story has the keyboard focus (as on BBC
   and Reuters): the headline only, never the date, number or label beside it. Phones (no mouse) are unchanged. The
   line skips the letters that hang below it (ی ر و ج), set a little lower on Dari and Pashto pages. */
@media (hover:hover){
a:hover :is(h2,h3,h4,.pj-hl),:is(h2,h3,h4)>a:hover{text-decoration:underline;text-decoration-thickness:max(1px,.055em);text-underline-offset:.16em;text-decoration-skip-ink:auto}
}
a:focus-visible :is(h2,h3,h4,.pj-hl),:is(h2,h3,h4)>a:focus-visible{text-decoration:underline;text-decoration-thickness:max(1px,.055em);text-underline-offset:.16em;text-decoration-skip-ink:auto}
/* Square corners (Site settings → Site look → Corners): photos, cards and boxes at 3px, as on Reuters and the BBC; story
   circles, reporters' photos and round buttons stay round. The two-class entry in the list lifts the whole rule over
   the design's own corner rules. */
.pj-square{--r:3px;--r-sm:3px}
.pj-square :is(.pj-videobox .player,.pic,.player,.player2,.player3,.photo,.prog,.short,.bcard,.thread,.poll,.trust,.mapbox,.vlist .pic,.pstrip .pic,.pj-shortframe,.pj-person,.pj-paywall,.pj-appbar,.pj-consent,.pj-findbox,.pj-locked-media .player,.pj-photobig .pic,.body .is-style-pj-factbox,.body .rcp_restricted,.body .rcp-restricted-content-message,.body .rcp_restricted_message,.body .rcp_form fieldset,.body .rcp_subscription_level,.body .rcp_level,.pj-wcard,.pj-wdays li,.pj-wnow,.pj-rnow,.pj-conv,.pj-cnow,.pj-cconv,.pj-cmonth,.pj-cday,.pj-tools-nav,.pj-thero,.pj-tbox,.pj-pday li,.pj-uall li,.pj-kcity,.pj-ticon,.poll .opt){border-radius:3px}
.pj-square .body .pj-readalso{border-radius:0 3px 3px 0}
.pj-square[dir=rtl] .body .pj-readalso,[dir=rtl] .pj-square .body .pj-readalso{border-radius:3px 0 0 3px}
.pj-square :is(.st .ring,.st .ring .pic,.pj-avatar,.rep2 i,.by i,.pj-profile-photo,.pj-person i){border-radius:50%}
/* Compact headlines (Site settings → Site look → Headline size): headlines do not overpower the photos. */
.pj-compact .lead h2{font-size:clamp(25px,2.4vw,34px);line-height:1.27}
.pj-compact .card h3{font-size:clamp(16px,1.4vw,19px);line-height:1.36}
.pj-compact :is(.row4,.pj-grid,.more) .card h3{font-size:17px;line-height:1.4}
.pj-compact .fstory h3{font-size:clamp(24px,2.3vw,32px)}
.pj-compact .photo h3{font-size:clamp(23px,2.5vw,34px)}
.pj-compact .sec .lede h2{font-size:clamp(26px,2.7vw,36px)}
.pj-compact .rep h3{font-size:17px}
.pj-compact .ahd h1{font-size:clamp(28px,3.4vw,46px);line-height:1.15}
.pj-compact .art.pj-col>.ahd h1{font-size:clamp(27px,3.1vw,40px);line-height:1.2}
.pj-compact .pj-archhd h1{font-size:clamp(30px,3.4vw,44px)}
@media (max-width:760px){.pj-compact .ahd h1,.pj-compact .art.pj-col>.ahd h1{font-size:clamp(25px,7vw,32px)}}
/* Related news and more videos as a sliding row (Article page): four at a time on computers, three on tablets, two
   (and a little of the next) on phones; the arrows beside the "All ..." link. */
.pj-relnav{display:inline-flex;align-items:center;gap:14px}
.more .g4.pj-relrow{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc((100% - 3 * 24px) / 4);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding-bottom:4px}
.more .g4.pj-relrow::-webkit-scrollbar{display:none}
.more .g4.pj-relrow>.card{min-width:0;scroll-snap-align:start}
@media (max-width:1100px){.more .g4.pj-relrow{grid-auto-columns:calc((100% - 2 * 20px) / 3);gap:20px}}
@media (max-width:760px){.more .g4.pj-relrow{grid-auto-columns:calc((100% - 16px) / 2.2);gap:16px}}
@media (max-width:450px){.more .g4.pj-relrow{grid-auto-columns:78%}}
/* The header's "More" (•••) panel: in two columns when it is long (pajhwok.js keeps it on screen); a group (its name
   and its sub-items) never splits between the columns. */
.nav .pj-more .dd.pj-more-2{column-count:2;column-gap:10px;width:min(520px,calc(100vw - 32px));min-width:0}
.pj-more .dd.pj-more-2>a,.pj-more .pj-more-g{break-inside:avoid;display:block}
.pj-more .pj-more-g{padding-bottom:6px}
.pj-more .pj-more-g>a.pj-more-h{padding:10px 12px 4px}
.pj-more .pj-more-g>a.pj-more-h:hover{color:var(--navy)}
.pj-more .dd.pj-more-2>a+.pj-more-g{margin-top:0}
/* A small ⌄ beside each menu group in the bar, so readers see it opens (it turns up while its menu shows). */
.nav .grp:not(.pj-more)>button::before{content:"";order:2;flex:none;width:6px;height:6px;margin-inline-start:7px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);opacity:.7;transition:transform .15s}
.nav .grp.open:not(.pj-more)>button::before{transform:translateY(1px) rotate(225deg)}
/* Under the mouse the menu shows too, so the ⌄ turns up as well (not when a click has just closed it). */
@media (hover:hover){.nav .grp:not(.pj-more):not(.shut):hover>button::before{transform:translateY(1px) rotate(225deg)}}
@media (prefers-reduced-motion:reduce){.nav .grp>button::before{transition:none}}
/* The More panel shows every item at once, never a scroll bar: two columns, three when very long. */
.nav .pj-more .dd{max-height:none;overflow:visible}
.nav .pj-more .dd.pj-more-3{column-count:3;width:min(720px,calc(100vw - 32px))}
/* 1.1.3: home page videos play where they are (pajhwok.js "home video"): the player covers the picture, the play
   button and the time go; the short description under the big video keeps to three lines. */
.pj-v2 .player.pj-playing{background:#000}
.pj-v2 .player.pj-playing>.play,.pj-v2 .player.pj-playing>.dur{display:none}
.pj-v2 .vinfo p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* The big video's title at staging's size: 29px on computers down to 19px on phones (1.1.3). */
.pj-v2 .pj-vmain .vinfo h3{font-size:clamp(19px,2.15vw,29px)}
/* 1.1.3: the map drawn from real borders (inc/map-shape.php): the provinces with light borders between them, the
   Durand Line dotted in red, and the towns beyond it. */
.mapbox .land{fill:color-mix(in oklab,var(--navy) 22%,var(--bg));stroke:none}
.mapbox .pvb{fill:none;stroke:var(--bg);stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round}
.mapbox .durand{fill:none;stroke:var(--red);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:0 5.5}
.mapbox .town{fill:var(--ink)}
.mapbox .lb.tn{fill:var(--ink);font-weight:700}
/* 1.1.3: the rate tile's currencies in turn (Header → Information tiles; pajhwok.js "rate turns"), each as the tile
   always looked; the tile keeps the height of the tallest. */
.pj-turns{display:grid}
.pj-turn{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .35s ease,transform .35s ease,visibility 0s linear .35s}
.pj-turn.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease,transform .35s ease}
.pj-turn .k{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (prefers-reduced-motion:reduce){.pj-turn{transition:none;transform:none}}
/* 1.1.3: the weather tile's provinces in turn (pajhwok.js "weather tile"): a short fade while the numbers change. */
.pj-wtile[data-pj-wturns] [data-w],.pj-wtile[data-pj-wturns] .pj-prov{transition:opacity .2s ease}
.pj-wtile.pj-wout [data-w],.pj-wtile.pj-wout .pj-prov{opacity:0}
/* 1.1.3: Photo desk: photo sets (template-parts/home/photo.php, design A): the newest set big, four beside it; titles
   on a dark fade, the number of photos and the members lock on top. */
.pj-sets{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:repeat(2,250px);gap:12px}
.pj-set{position:relative;display:block;overflow:hidden;border-radius:var(--r,12px);background:var(--bg-3);color:#fff;text-decoration:none}
.pj-set-big{grid-row:span 2}
.pj-sets-1{grid-template-columns:1fr;grid-template-rows:440px}.pj-sets-1 .pj-set-big{grid-row:auto}
.pj-sets-2{grid-template-columns:2fr 1fr}.pj-sets-2 .pj-set:not(.pj-set-big){grid-row:span 2}
.pj-sets-3{grid-template-columns:2fr 1fr}
.pj-sets-4{grid-template-columns:2fr 1fr 1fr}.pj-sets-4 .pj-set:nth-child(2){grid-row:span 2}
.pj-set .pic{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;height:100%}
.pj-set .pic img{width:100%;height:100%;object-fit:cover}
.pj-set .pic.pj-fill>img{object-fit:contain}
.pj-set-t{position:absolute;inset:auto 0 0 0;padding:44px 16px 14px;background:linear-gradient(to top,rgba(5,10,22,.86),rgba(5,10,22,0));display:flex;flex-direction:column;gap:6px}
.pj-set-t h3{margin:0;color:#fff;font-size:16px;line-height:1.3}
.pj-set-big .pj-set-t{padding:90px 24px 22px}
.pj-set-big .pj-set-t h3{font-size:clamp(20px,2vw,28px);line-height:1.25}
.pj-set-t small{color:rgba(255,255,255,.85);font-size:12px}
.pj-set-tags{position:absolute;top:10px;inset-inline-end:10px;display:flex;gap:6px;z-index:1}
.pj-set-n,.pj-set-lock{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:2px;background:rgba(5,10,22,.74);color:#fff;font-size:11.5px;font-weight:700;line-height:1;white-space:nowrap}
.pj-set-lock{background:var(--red)}
.pj-set-n svg,.pj-set-lock svg{width:13px;height:13px;fill:currentColor;flex:none}
.pj-set:hover h3,.pj-set:focus-visible h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.pj-set:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
@media (max-width:760px){
.pj-sets,.pj-sets-2,.pj-sets-3,.pj-sets-4{grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:8px}
.pj-set{aspect-ratio:1/1}.pj-set-big{grid-column:1/-1;grid-row:auto;aspect-ratio:4/3}
.pj-sets-2 .pj-set:not(.pj-set-big),.pj-sets-4 .pj-set:nth-child(2){grid-row:auto}
.pj-set-t{padding:30px 10px 10px}.pj-set-t h3{font-size:13px}.pj-set-big .pj-set-t{padding:60px 14px 14px}.pj-set-big .pj-set-t h3{font-size:19px}
}
/* A photo set's page (template-parts/photo-set.php). */
.pj-setpage{padding-block:24px 60px}
.pj-sethd h1{margin:10px 0 14px;max-width:920px}
.pj-setmeta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:13.5px;color:var(--mute);margin-bottom:18px}
.pj-setmeta .pj-set-n{background:var(--ink)}
.pj-set-price{color:var(--ink);font-weight:800}
.pj-setacts{display:flex;gap:10px;margin-inline-start:auto}
.pj-setdesc{max-width:760px;margin:-4px 0 18px;color:var(--ink-2)}
.pj-setcover .pic{aspect-ratio:16/9;border-radius:var(--r,12px)}
.pj-setcover .pic img{width:100%;height:100%;object-fit:cover}
.pj-setcover .pic.pj-fill>img{object-fit:contain}
.pj-setpage .pj-paywall{margin:22px 0 4px}
.pj-setgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
.pj-setph{position:relative;display:block;margin:0;aspect-ratio:3/2;overflow:hidden;border-radius:var(--r,12px);background:var(--bg-3)}
.pj-setph img{width:100%;height:100%;object-fit:cover;display:block}
.pj-setno{position:absolute;bottom:8px;inset-inline-start:8px;padding:4px 6px;border-radius:2px;background:rgba(5,10,22,.72);color:#fff;font:700 11px/1 "JetBrains Mono",monospace}
.is-locked .pj-setph:not(.is-wm) img{filter:blur(14px) saturate(.8);transform:scale(1.2)}
.is-locked .pj-setph:not(.is-wm)::after{content:"";position:absolute;inset:0;background:rgba(11,18,32,.25) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm-3 8V7a3 3 0 0 1 6 0v3z'/%3E%3C/svg%3E") center/26px no-repeat}
.pj-setmore{display:grid;place-items:center;background:var(--navy)}.pj-setmore::after{display:none}
.pj-setmore b{color:#fff;font-size:28px}
.pj-setph figcaption{position:absolute;inset:auto 8px 8px auto;display:flex;gap:6px}
[dir=rtl] .pj-setph figcaption{inset:auto auto 8px 8px}
.pj-setph figcaption a{padding:6px 9px;border-radius:2px;background:rgba(255,255,255,.94);color:var(--navy);font-size:12px;font-weight:700;text-decoration:none}
.pj-setph figcaption a:hover{background:#fff;text-decoration:underline}
.pj-setlic{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:14px;padding:14px 18px;border:1px dashed var(--line-2);border-radius:var(--r,12px)}
@media (max-width:760px){.pj-setgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.pj-setacts{margin:0;width:100%}.pj-setacts .btn{flex:1;justify-content:center}.pj-setcover .pic{aspect-ratio:4/3}.pj-setlic{flex-direction:column;align-items:stretch}.pj-setph figcaption a{padding:5px 7px;font-size:11px}}
/* 1.1.3: the menu's More button as three dots, as on staging (Header → Logo and buttons). */
.nav .pj-more>button{min-width:40px;justify-content:center}
/* Drawn, not a text character: three dots on the middle of the menu's words in every language and font. */
.nav .pj-more-dots{display:block;width:23px;height:5px;fill:currentColor;transform:translateY(-2px)}
/* 1.1.3: a journalist without a photo: a person figure in the round badge (pj_person_placeholder()), not initials. */
.by i,.rep2 i,.pj-person i,.pj-profile-photo{overflow:hidden}
.pj-ph-person{display:block;width:100%;height:100%;fill:currentColor;opacity:.42;transform:translateY(8%)}

/* ------------------------------------------------------------------ 1.1.3 Widgets (inc/section-widgets.php)
   Each widget measures its own column (container queries): compact in the 200 px left column of story pages,
   roomier in the 300 px columns, spread out in a footer column or a home page row. A widget never changes the size
   of its column or of the page: it is as wide as its column, and anything wider (or placed outside it) is cut off
   inside it. */
.pj-wz{display:flex;flex-direction:column;gap:28px;min-width:0}
.pj-w{--pj-ui:Manrope,system-ui,sans-serif;--pj-serif:Newsreader,Georgia,serif;container:pjw/inline-size;position:relative;min-width:0;max-width:100%;overflow:clip;overflow-clip-margin:8px;overflow-wrap:break-word}
.pj-w :where(img,video,iframe,embed,object,table,select,input,textarea){max-width:100%}
.pj-w:not(.pj-own) :where(img,video){height:auto}
.pj-w:not(.pj-own) :where(table){display:block;overflow-x:auto}
.pj-w:not(.pj-own) :where(ul,ol){margin:0;padding-inline-start:18px;display:flex;flex-direction:column;gap:8px;font-size:14px}
.pj-w-hd{margin-bottom:14px}
.pj-w-foot{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;margin-top:14px}
.pj-w-foot .pj-scrollbtns{margin-inline-start:auto}
.pj-w-more{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--navy)}
.pj-w-more svg{width:14px;height:14px;flex:none;transition:transform .2s}
.pj-w-more:hover svg{transform:translateX(3px)}
.pj-w-note{margin:10px 0 0;font-size:11.5px;color:var(--mute);line-height:1.4}
/* Looks: plain (like the page), a light card, a navy card (its colours set once here, so every part follows). */
.pj-look-card{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:18px}
.pj-look-navy{--ink:#fff;--ink-2:#c9d4ee;--mute:#a9b4cc;--line:rgba(255,255,255,.14);--line-2:rgba(255,255,255,.3);--bg:var(--navy-2);--bg-2:rgba(255,255,255,.06);--bg-3:rgba(255,255,255,.1);--navy-soft:rgba(255,255,255,.1);--navy:#b9cdf6;background:var(--navy-2);color:#fff;border-radius:12px;padding:18px}
.pj-look-navy a:hover{color:#fff}
.pj-look-navy :focus-visible{outline-color:#fff}
.pj-look-navy .btn.fill{background:#fff;border-color:#fff;color:#122c66}.pj-look-navy .btn.fill:hover{background:#e8eefb;color:#122c66}
.pj-look-navy .form input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#fff}
.pj-look-navy .form input::placeholder{color:#a9b4cc}
.lft .pj-look-card,.lft .pj-look-navy{padding:14px}

/* The areas. Story pages: the right column keeps its gap; the left column (200 px) a little less. */
.lft .pj-wz{gap:24px}
.pj-unstick{position:static!important} /* A sticky column taller than the screen scrolls with the page instead. */
/* Up to 1,100 px the left column is hidden: its widgets follow the story, side by side. */
@media (max-width:1100px){
.art>.lft.pj-has-w{display:block;grid-column:1/-1;grid-row:auto;order:1;margin-top:8px;padding-top:28px;border-top:1px solid var(--line)}
.art>.lft.pj-has-w .lft-in{position:static}
.art>.lft.pj-has-w .lft-in>:not(.pj-wz){display:none}
.art>.lft.pj-has-w .pj-wz{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:28px;align-items:start}
}
/* Footer: a row under the link columns, up to four side by side. */
.pj-wz-pj-footer{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,max(240px,(100% - 3 * 32px) / 4)),1fr));gap:32px;align-items:start;margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}
.pj-wz-pj-footer .pj-w-hd h2,.pj-wz-pj-footer .pj-w:not(.pj-own) h2{font-family:Manrope;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:800}
/* Home page rows (Home page → Sections and order → Widget row 1, 2, 3). */
.pj-hrow{padding-top:0}
.pj-hrow-band{background:var(--bg-2);padding:48px 0;margin-bottom:64px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pj-wz.pj-wz-home{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(min(100%,max(260px,(100% - 3 * 28px) / 4)),1fr));align-items:start}
.pj-wz-home.pj-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pj-wz-home.pj-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pj-wz-home.pj-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.pj-wz-home.pj-cols-3,.pj-wz-home.pj-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.pj-wz.pj-wz-home{grid-template-columns:minmax(0,1fr)}}
@media print{.pj-wz{display:none!important}}

/* Latest news: the home page's timeline; a big first picture; or small pictures. */
.pj-wtl h3{font:600 14px/1.38 var(--pj-ui);margin-top:2px}
.pj-wtl li:last-child{padding-bottom:0}
.pj-wlead{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.pj-wlead .pic{aspect-ratio:3/2}
.pj-wlead h3{font:500 19px/1.25 var(--pj-serif)}
.pj-wrows{list-style:none;margin:0;padding:0}
.pj-wrows li+li{border-top:1px solid var(--line)}
.pj-wrows a{display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px;padding:11px 0;align-items:start}
.pj-wrows li:first-child a{padding-top:0}
.pj-wrows li:last-child a{padding-bottom:0}
.pj-wrows .pic{aspect-ratio:16/10;border-radius:6px}
.pj-wrows h3{font:600 13px/1.38 var(--pj-ui)}
.pj-wrows .mono{display:block;margin-top:4px}
/* Most read: numbered, as beside a story. */
.pj-wmost a{font-size:13.5px}
.pj-wmost-pics a{grid-template-columns:22px 56px minmax(0,1fr)}
.pj-wmost-pics .pic{aspect-ratio:16/10;border-radius:6px}
.pj-wmost li:last-child a{padding-bottom:0}
@container pjw (min-width:260px){
.pj-wrows a{grid-template-columns:88px minmax(0,1fr);gap:12px}
.pj-wrows h3{font-size:14px}
.pj-wmost-pics a{grid-template-columns:26px 72px minmax(0,1fr)}
}
@container pjw (max-width:259px){
.pj-wtl h3{font-size:13px}
.pj-wtl li{padding-bottom:14px}
.pj-wlead h3{font-size:16px}
.pj-wmost a{font-size:13px;grid-template-columns:20px 1fr;gap:6px}
.pj-wmost-pics a{grid-template-columns:20px minmax(0,1fr)}
.pj-wmost-pics .pic{display:none}
}
@container pjw (min-width:480px){
.pj-wlead{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto 1fr;gap:6px 20px;align-items:start}
.pj-wlead .pic{grid-row:1/3}
.pj-wlead .mono{align-self:end}
.pj-wlead h3{font-size:22px}
.pj-wmost{columns:2;column-gap:32px}
.pj-wmost li{break-inside:avoid}
}
@container pjw (min-width:560px){
.pj-wtl{columns:2;column-gap:36px}
.pj-wtl::before{display:none}
.pj-wtl li{break-inside:avoid;padding-bottom:16px}
.pj-wtl li:last-child{padding-bottom:16px}
.pj-wrows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
.pj-wrows li:nth-child(2){border-top:0}
.pj-wrows li:nth-child(2) a{padding-top:0}
.pj-wrows li:nth-last-child(2) a{padding-bottom:0}
}
@container pjw (min-width:900px){
.pj-wtl,.pj-wmost{columns:3}
.pj-wrows{grid-template-columns:repeat(3,minmax(0,1fr))}
.pj-wrows li:nth-child(3){border-top:0}
.pj-wrows li:nth-child(3) a{padding-top:0}
.pj-wrows li:nth-last-child(3) a{padding-bottom:0}
}

/* Weather: now, then the coming days; the reader's province picker. */
.pj-ww{display:grid;grid-template-areas:"now" "air" "days" "pick";min-width:0}
.pj-ww-now{grid-area:now;display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:10px}
.pj-ww-ic{display:grid;place-items:center;font-size:46px;line-height:1}
.pj-ww-t{font:500 42px/1 var(--pj-serif);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pj-ww-at{display:flex;flex-direction:column;gap:1px;min-width:0;font-size:13px;color:var(--ink-2)}
.pj-ww-at b{color:var(--ink);font-size:14.5px;font-weight:700}
.pj-ww-at .mono{margin-top:2px;align-self:flex-start}
.pj-ww-air{grid-area:air;margin:12px 0 0;font-size:12.5px;color:var(--mute)}
.pj-ww-air b{color:var(--ink);font-weight:700}
.pj-ww-days{grid-area:days;list-style:none;margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--line);display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;text-align:center}
.pj-ww-days li{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;min-width:0}
.pj-ww-days li>span{color:var(--mute);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pj-ww-days .pj-wi{font-size:26px;margin:2px 0}
.pj-ww-days b{font-weight:700;font-variant-numeric:tabular-nums}
.pj-ww-days small{color:var(--mute);font-variant-numeric:tabular-nums}
.pj-ww-pick{grid-area:pick;display:block;margin-top:14px}
.pj-ww-pick select{width:100%;height:36px;border-radius:999px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);padding:0 12px;font:inherit;font-size:13px;cursor:pointer}
@container pjw (max-width:259px){
.pj-ww-now{grid-template-columns:auto 1fr;gap:4px 8px}
.pj-ww-ic{font-size:36px}
.pj-ww-t{font-size:34px}
.pj-ww-at{grid-column:1/-1}
.pj-ww-days li:nth-child(n+4){display:none}
.pj-ww-days .pj-wi{font-size:22px}
}
@container pjw (min-width:480px){
.pj-ww{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"now days" "air days" "pick days";column-gap:24px;align-items:center}
.pj-ww-days{margin:0;padding:0;padding-inline-start:20px;border-top:0;border-inline-start:1px solid var(--line);align-self:stretch;align-content:center}
.pj-ww-t{font-size:52px}
.pj-ww-ic{font-size:56px}
}

/* Exchange rates. */
.pj-wr{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
.pj-wr th,.pj-wr td{padding:8px 0;border-top:1px solid var(--line);text-align:start;vertical-align:middle}
.pj-wr thead th{border-top:0;padding-top:0;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.pj-wr thead th+th,.pj-wr td{text-align:end}
.pj-wr td{font-weight:700;white-space:nowrap;padding-inline-start:12px}
.pj-wr tbody th b{display:block;font-weight:600;font-size:13.5px;line-height:1.3}
.pj-wr tbody th small{display:block;font:500 11px "JetBrains Mono",monospace;color:var(--mute)}
.pj-wr .up,.pj-wr .dn{display:block;font-size:11px;font-weight:700;line-height:1.2}
.pj-wr .up{color:#177245}.pj-wr .dn{color:color-mix(in srgb,var(--red) 85%,#000)}
[data-theme="dark"] .pj-wr .up,.pj-look-navy .pj-wr .up{color:#3ccf7e}
[data-theme="dark"] .pj-wr .dn,.pj-look-navy .pj-wr .dn{color:#ff8a7d}
@container pjw (max-width:259px){
.pj-wr{font-size:12.5px}
.pj-wr tbody th b{display:none}
.pj-wr tbody th small{font-size:11.5px;color:var(--ink);font-weight:700}
.pj-wr td{padding-inline-start:8px}
}
@container pjw (min-width:480px){.pj-wr td,.pj-wr th{padding-top:10px;padding-bottom:10px}}

/* Today's date. */
.pj-wd-big{display:flex;align-items:center;gap:14px}
.pj-wd-big>b{font:500 58px/.9 var(--pj-serif);color:var(--navy);min-width:1.05em;text-align:center;font-variant-numeric:tabular-nums}
.pj-wd-big>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.pj-wd-wd{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--navy)}
.pj-wd-big [data-p="m"]{font:600 17px/1.25 var(--pj-ui);color:var(--ink)}
.pj-wd-big small{font-size:11.5px;color:var(--mute)}
.pj-wd-also{list-style:none;margin:14px 0 0;padding:0}
.pj-wd-also li{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--line);font-size:13px;font-weight:600}
.pj-wd-also li:last-child{padding-bottom:0}
.pj-wd-also small{color:var(--mute);font-weight:500;font-size:12px}
@container pjw (max-width:259px){
.pj-wd-big{gap:10px}
.pj-wd-big>b{font-size:44px}
.pj-wd-big [data-p="m"]{font-size:15px}
.pj-wd-also li{flex-direction:column;gap:0}
}
@container pjw (min-width:480px){
.pj-wd{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center}
.pj-wd-also{margin:0;padding-inline-start:24px;border-inline-start:1px solid var(--line)}
.pj-wd-also li:first-child{border-top:0;padding-top:0}
.pj-wd-big>b{font-size:68px}
}

/* Prayer times: the next one marked. */
.pj-wp-where{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:2px 10px;margin:0 0 8px;font-size:13.5px}
.pj-wp-where span{color:var(--mute);font-size:12px}
.pj-wp ul{list-style:none;margin:0;padding:0}
.pj-wp li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;font-size:13.5px;border-top:1px solid var(--line)}
.pj-wp li:first-child,.pj-wp li.is-next,.pj-wp li.is-next+li{border-top-color:transparent}
.pj-wp li>span{display:flex;align-items:center;gap:8px;font-weight:600;min-width:0}
.pj-wp li b{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pj-wp li i{display:none;font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--navy);color:#fff;border-radius:999px;padding:2px 8px;line-height:1.5}
.pj-wp li.is-next{background:var(--navy-soft)}
.pj-wp li.is-next i{display:inline-block}
.pj-wp li.is-next b{color:var(--navy)}
.pj-look-navy .pj-wp li i{background:#fff;color:#122c66}
@container pjw (max-width:259px){
.pj-wp li{padding:7px 6px;font-size:12.5px}
.pj-wp li.is-next i{display:none}
}
@container pjw (min-width:480px){
.pj-wp ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pj-wp li{flex-direction:column;justify-content:center;gap:4px;padding:12px 8px;border:1px solid var(--line);text-align:center}
.pj-wp li:first-child,.pj-wp li.is-next+li{border-top-color:var(--line)}
.pj-wp li.is-next{border-color:transparent}
.pj-wp li>span{flex-direction:column;gap:4px}
.pj-wp li b{font-size:16px}
}
@container pjw (min-width:780px){.pj-wp ul{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* Story threads: the home page's cards, smaller. */
.pj-wth{display:grid;gap:14px}
.pj-w .pj-wth .thread{padding:16px;gap:12px}
.pj-w .pj-wth .thread h3{font-size:18px;line-height:1.2}
.pj-wth .tl li:last-child{padding-bottom:0}
@container pjw (max-width:259px){
.pj-w .pj-wth .thread{padding:12px}
.pj-wth .thread .top{flex-direction:column;align-items:flex-start}
.pj-w .pj-wth .thread h3{font-size:16px}
}
@container pjw (min-width:560px){.pj-wth{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container pjw (min-width:880px){.pj-wth{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Video news: the first plays here; the next ones listed. */
.pj-wv-main{display:flex;flex-direction:column;gap:10px}
.pj-wv-main .player{border-radius:10px}
.pj-wv-main h3{font:500 18px/1.25 var(--pj-serif)}
.pj-w .pj-wv-main .play b{width:54px;height:54px;box-shadow:0 0 0 8px rgba(255,255,255,.18)}
.pj-w .pj-wv-main .play b::after{border-left-width:17px;border-top-width:10px;border-bottom-width:10px;margin-left:4px}
.pj-w .pj-wv-main .dur{right:8px;bottom:8px}
.pj-wv-list{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.pj-wv-pic{position:relative;display:block;min-width:0}
.pj-wv-pic .pic{aspect-ratio:16/9;border-radius:6px}
.pj-w .pj-wv-pic .dur{right:4px;bottom:4px;font-size:10px;padding:1px 5px}
@container pjw (max-width:259px){
.pj-wv-main h3{font-size:16px}
.pj-w .pj-wv-main .play b{width:44px;height:44px;box-shadow:0 0 0 6px rgba(255,255,255,.18)}
}
@container pjw (min-width:560px){
.pj-wv{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;align-items:start}
.pj-wv-list{margin:0;padding:0;border:0}
.pj-wv-list a{grid-template-columns:110px minmax(0,1fr)}
.pj-wv-main h3{font-size:22px}
}

/* Shorts: a row that scrolls sideways. */
.pj-w .shorts.pj-wsh{margin:0;gap:10px;grid-auto-columns:calc((100% - 10px) / 2)}
.pj-wsh .short{border-radius:8px}
.pj-wsh .short .t{padding:10px}
.pj-wsh .short h3{font:700 12.5px/1.3 var(--pj-ui);color:#fff}
.pj-w .pj-wsh .short .dur{left:6px;top:6px;font-size:10px;padding:1px 5px}
@container pjw (min-width:480px){.pj-w .shorts.pj-wsh{grid-auto-columns:calc((100% - 2 * 10px) / 3)}}
@container pjw (min-width:720px){.pj-w .shorts.pj-wsh{grid-auto-columns:calc((100% - 4 * 12px) / 5);gap:12px}}

/* Opinion. */
.pj-wop{list-style:none;margin:0;padding:0}
.pj-wop li+li{border-top:1px solid var(--line)}
.pj-wop a{display:block;padding:14px 0}
.pj-wop li:first-child a{padding-top:0}
.pj-wop li:last-child a{padding-bottom:0}
.pj-wop .q{display:block;height:18px;font:400 46px/1 var(--pj-serif);color:var(--navy);overflow:hidden}
.pj-wop h3{font:italic 400 19px/1.3 var(--pj-serif)}
.pj-wop p{margin:6px 0 0;font-size:13px;color:var(--mute);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pj-w .pj-wop .by{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:13px;font-weight:600}
.pj-w .pj-wop .by i{width:32px;height:32px;flex:none;font-size:11px}
.pj-wop .by i img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.pj-wop .by small{display:block;font-weight:500;color:var(--mute);font-size:12px}
@container pjw (max-width:259px){.pj-wop h3{font-size:16.5px}}
@container pjw (min-width:560px){
.pj-wop{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 28px}
.pj-wop li+li{border-top:0}
.pj-wop a{padding:0}
}

/* Photo sets: the newest big, the others as rows. */
.pj-wps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pj-wps a{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center}
.pj-wps .pic{aspect-ratio:4/3;border-radius:6px}
.pj-wps h3{font:600 13.5px/1.35 var(--pj-ui)}
.pj-wps .pj-set-n{display:inline-flex;align-items:center;gap:5px;margin-top:4px;font-size:12px;color:var(--mute)}
.pj-wps .pj-set-n svg{width:13px;height:13px;fill:currentColor;flex:none}
.pj-wps .pj-wps-big a{display:block;position:relative}
.pj-wps-big .pic{aspect-ratio:3/2;border-radius:10px}
.pj-wps-big .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(8,14,32,.88))}
.pj-wps-big .pj-wps-t{position:absolute;inset-inline:0;bottom:0;padding:14px;color:#fff}
.pj-wps-big h3{font:500 18px/1.25 var(--pj-serif);color:#fff}
.pj-wps-big .pj-set-n{color:#dfe6f5}
@container pjw (max-width:259px){
.pj-wps a{grid-template-columns:52px minmax(0,1fr);gap:10px}
.pj-wps h3{font-size:12.5px}
.pj-wps-big h3{font-size:15px}
.pj-wps-big .pj-wps-t{padding:10px}
}
@container pjw (min-width:560px){
.pj-wps{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:24px;align-content:start}
.pj-wps-big{grid-row:span var(--n,4)}
.pj-wps-big .pic{aspect-ratio:auto;height:100%;min-height:220px}
.pj-wps-big a{height:100%}
.pj-wps-big h3{font-size:22px}
}

/* Programs: the posters. */
.pj-wpg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pj-wpg .prog{border-radius:8px}
.pj-w .pj-wpg .pj-allicon{right:8px;bottom:8px;width:32px;height:32px}
.pj-w .pj-wpg .pj-allicon svg{width:16px;height:16px}
.pj-w .pj-wpg .pj-pname{font-size:15px}
.pj-wpg .pj-pcard-plain{padding:12px}
@container pjw (min-width:480px){.pj-wpg{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.pj-w .pj-wpg .pj-pname{font-size:18px}}
@container pjw (min-width:720px){.pj-wpg{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Newsletter sign-up. */
.pj-wnl>p{margin:0 0 12px;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.pj-wnl .form{max-width:none;width:100%;flex-direction:column}
.pj-wnl .form input:not(.pj-hp){height:42px;min-width:0;width:100%}
.pj-wnl .form .btn{height:42px;justify-content:center}
@container pjw (min-width:480px){.pj-wnl .form{flex-direction:row}.pj-wnl .form input:not(.pj-hp){width:auto}}

/* Social media. */
.pj-wso{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.pj-wso a{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);color:var(--ink-2);background:var(--bg);transition:border-color .15s,transform .15s}
.pj-wso a:hover{border-color:var(--navy);color:var(--navy);transform:translateY(-1px)}
.pj-wso svg{width:18px;height:18px;fill:currentColor;flex:none}
.pj-wso.pj-wso-names{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.pj-wso-names a{width:auto;height:40px;border-radius:999px;justify-content:flex-start;padding:0 14px;font-size:13.5px;font-weight:600;color:var(--ink)}
.pj-wso-names span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@container pjw (min-width:260px){.pj-wso.pj-wso-names{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container pjw (min-width:560px){.pj-wso.pj-wso-names{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.pj-wso a{transition:none}.pj-wso a:hover{transform:none}}

/* Useful tools. */
.pj-wtools{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.pj-wtools a{display:flex;align-items:center;gap:12px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;font-size:13.5px;font-weight:600;line-height:1.3;background:var(--bg);transition:border-color .15s}
.pj-wtools a:hover{border-color:var(--navy);color:var(--navy)}
.pj-wtl-i{flex:none;width:34px;height:34px;border-radius:8px;background:var(--navy-soft);color:var(--navy);display:grid;place-items:center}
.pj-wtl-i svg{width:20px;height:20px}
@container pjw (max-width:259px){
.pj-wtools a{gap:8px;padding:7px 8px;font-size:12.5px}
.pj-wtl-i{width:28px;height:28px}
.pj-wtl-i svg{width:17px;height:17px}
}
@container pjw (min-width:480px){.pj-wtools{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container pjw (min-width:860px){.pj-wtools{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ------------------------------------------------------------------ 1.1.3 Mega menus (inc/mega-menu.php)
   A main-menu group switched to "Mega menu" (Appearance → Menus) opens as a wide panel under the bar: its sections
   on one side, the latest stories of those sections in two columns on the other, each with its picture. */
.nav .dd.pj-mega-dd{width:min(1180px,calc(100vw - 32px));min-width:0;padding:26px 32px 28px;max-height:calc(100vh - 120px);overflow-y:auto;border-radius:0 0 14px 14px}
.pj-mega-in{display:grid;grid-template-columns:minmax(170px,1fr) minmax(0,3fr);gap:0 36px}
.pj-mega-browse{display:flex;flex-direction:column;align-items:flex-start;padding-inline-end:28px;border-inline-end:1px solid var(--line);min-width:0}
.pj-mega-h{display:block;margin:0 0 12px;font:800 15px/1.3 Manrope,system-ui,sans-serif;color:var(--ink)}
.nav .pj-mega-browse a{padding:6px 0;font-size:15px;font-weight:500;color:var(--mute);background:none;border-radius:0}
.nav .pj-mega-browse a:hover,.nav .pj-mega-browse a[aria-current]{background:none;color:var(--navy)}
.nav .pj-mega-browse a.pj-dd-sub{padding-inline-start:14px;font-size:14px}
.pj-mega-latest{min-width:0}
.pj-mega-latest ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.pj-mega-latest li{border-top:1px solid var(--line);min-width:0}
.pj-mega-latest li:nth-child(-n+2){border-top:0}
.nav .dd a.pj-mega-story{display:grid;grid-template-columns:minmax(0,1fr) 84px;gap:16px;align-items:start;padding:14px 0;border-radius:0;background:none;color:var(--ink)}
.pj-mega-latest li:nth-child(-n+2) a.pj-mega-story{padding-top:4px}
.nav .dd a.pj-mega-story:hover{background:none;color:var(--navy)}
.pj-mega-story b{font:700 15px/1.4 Manrope,system-ui,sans-serif;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pj-mega-story .mono{display:block;margin-top:6px}
.pj-mega-story .pic{width:84px;aspect-ratio:1;border-radius:6px}
@media (max-width:1180px){.pj-mega-in{grid-template-columns:minmax(150px,1fr) minmax(0,3.2fr);gap:0 26px}.nav .dd a.pj-mega-story{grid-template-columns:minmax(0,1fr) 72px;gap:14px}.pj-mega-story .pic{width:72px}.pj-mega-story b{font-size:14.5px}}

/* ------------------------------------------------------------------ 1.1.3 Province map: every province tapped opens its
   latest stories (inc/map-panel.php, pajhwok.js 'map panel'): beside the map on wide screens, from the bottom on phones. */
.mapbox.pj-tap circle,.mapbox.pj-tap text{pointer-events:none} /* A tap on a dot or a name reaches its province. */
.pvz a{cursor:pointer;outline:none}
.pvz path{fill:transparent;stroke:transparent;stroke-width:1.6;stroke-linejoin:round;transition:fill .15s,stroke .15s}
.pvz a:hover path,.pvz a:focus-visible path{fill:color-mix(in srgb,var(--navy) 20%,transparent)}
.pvz a:focus-visible path,.pvz a.is-on path{stroke:var(--navy)}
.pvz a.is-on path{fill:color-mix(in srgb,var(--navy) 30%,transparent)}
.pj-pvtip{position:absolute;z-index:3;pointer-events:none;transform:translate(-50%,calc(-100% - 12px));background:var(--ink);color:var(--bg);font-size:12.5px;font-weight:700;line-height:1.3;padding:6px 10px;border-radius:6px;white-space:nowrap;box-shadow:0 6px 18px rgba(8,14,32,.18)}
.mapside.pj-pv-open>:not(.pj-pvwrap){display:none!important}
.pj-pvwrap{display:flex;flex-direction:column;gap:14px;min-width:0;animation:pj-pvin .25s ease}
@keyframes pj-pvin{from{opacity:0;transform:translateY(8px)}}
.pj-pvback{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:var(--navy);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.pj-pvback::before{content:"←";font-size:15px}
[dir=rtl] .pj-pvback::before{content:"→"}
.pj-pvp{display:flex;flex-direction:column;gap:14px;min-width:0}
.pj-pvp-hd{display:flex;flex-direction:column;gap:4px}
.pj-pvp-hd h3{font-size:28px;line-height:1.15;outline:none}
.pj-pvp-list a{grid-template-columns:88px minmax(0,1fr);gap:12px}
.pj-pvp-list h4{font:600 14.5px/1.4 Manrope,system-ui,sans-serif;margin:0}
.pj-pvp-list .mono{display:block;margin-top:4px}
.pj-pvp-list .pic{aspect-ratio:16/10;border-radius:6px}
.pj-pvp-none{margin:0;color:var(--mute);font-size:14px}
.pj-pvsheet{position:fixed;inset:auto 0 0;margin:0;width:100%;max-width:none;max-height:min(82vh,640px);padding:6px 18px calc(20px + env(safe-area-inset-bottom,0px));border:0;border-radius:18px 18px 0 0;background:var(--bg);color:var(--ink);box-shadow:0 -20px 60px rgba(8,14,32,.28);overflow:auto;overscroll-behavior:contain}
.pj-pvsheet[open]{animation:pj-pvup .3s cubic-bezier(.2,.8,.2,1)}
@keyframes pj-pvup{from{transform:translateY(100%)}}
.pj-pvsheet::backdrop{background:rgba(8,14,32,.45)}
.pj-pvhandle{display:block;width:48px;height:5px;margin:6px auto 14px;border-radius:3px;background:var(--line-2);box-shadow:0 0 0 14px transparent;touch-action:none;cursor:grab}
.pj-pvx{position:absolute;top:12px;inset-inline-end:14px;width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--bg);color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
.pj-pvsheet .pj-pvp-hd{padding-inline-end:44px}
@media (prefers-reduced-motion:reduce){.pj-pvwrap,.pj-pvsheet[open]{animation:none}.pvz path{transition:none}}

/* ------------------------------------------------------------------ 1.1.3 Search: chips, the words found marked, a few
   words of the text around them (search.php, inc/search-index.php, pajhwok.js 'search chips'). */
.pj-sres{display:flex;flex-direction:column;gap:14px;min-width:0;transition:opacity .15s}
.pj-sres[aria-busy]{opacity:.5}
.pj-sres>.pj-archmeta{margin:0}
.pj-schipsbar{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.pj-schips{display:flex;flex-wrap:wrap;gap:6px}
.pj-chip{cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.pj-chip:hover{border-color:var(--navy);color:var(--navy)}
.pj-chip[aria-current]{background:var(--navy);border-color:var(--navy);color:#fff}
.pj-results mark,.pj-snip mark{background:color-mix(in srgb,var(--navy) 15%,transparent);color:inherit;border-radius:3px;padding:0 2px}
.pj-snip{margin:5px 0 6px;font-size:13.5px;line-height:1.6;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (prefers-reduced-motion:reduce){.pj-sres,.pj-chip{transition:none}}

/* ------------------------------------------------------------------ 1.1.3 The page bar under lists (inc/pagebar.php):
   ‹ Newer · Page [n] of N · Older › and Jump to month, loaded in place (pajhwok.js 'list in place'). */
[data-pj-pagearea]{min-width:0;transition:opacity .15s}
[data-pj-pagearea][aria-busy]{opacity:.5}
.pj-pagebar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px 18px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:14px}
.pj-pb-step{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--navy);white-space:nowrap}
.pj-pb-step:first-child{justify-self:start}
.pj-pb-step:nth-child(3){justify-self:end}
.pj-pb-step:hover{color:var(--navy-2)}
.pj-pb-go{display:flex;align-items:center;gap:8px;margin:0;color:var(--ink-2)}
.pj-pb-go label,.pj-pb-month label{display:flex;align-items:center;gap:8px;white-space:nowrap}
.pj-pb-go input{width:5em;height:38px;padding:0 8px;border:1px solid var(--line-2);border-radius:999px;background:var(--bg);color:var(--ink);font:inherit;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.pj-pb-go .btn,.pj-pb-month .btn{height:38px;padding:0 16px}
.pj-pb-month{grid-column:1/-1;justify-self:center;margin:0;color:var(--ink-2)}
.pj-pb-month select{height:38px;max-width:min(240px,60vw);padding:0 14px;border:1px solid var(--line-2);border-radius:999px;background:var(--bg);color:var(--ink);font:inherit;cursor:pointer}
@media (max-width:560px){
.pj-pagebar{grid-template-columns:1fr 1fr}
.pj-pb-go{grid-column:1/-1;grid-row:1;justify-self:center}
.pj-pb-step:first-child{grid-row:2}
.pj-pb-step:nth-child(3){grid-row:2;grid-column:2}
}
@media (prefers-reduced-motion:reduce){[data-pj-pagearea]{transition:none}}

/* 1.1.3: the home page map's layers, News · Weather · Roads (inc/map-layers.php, pajhwok.js 'map layers'). The
   switch sits in the map's empty top-left corner (Turkmenistan's side, the same in Dari and Pashto, whose map is not
   turned round); on phones above the map. Weather colours each province by its temperature, five degrees a band. */
.mapsec{--wb0:#3f66c9;--wb1:#7393e0;--wb2:#a9c0ef;--wb3:#d7e2f5;--wb4:#f2ead3;--wb5:#f5d39c;--wb6:#efaf6a;--wb7:#e3854a;--wb8:#cc5a36;--pj-amber:#d9850b}
[data-theme="dark"] .mapsec{--wb0:#2d4d9c;--wb1:#36599f;--wb2:#415f88;--wb3:#4b5f72;--wb4:#67634e;--wb5:#85663b;--wb6:#985d31;--wb7:#a2502b;--wb8:#a43e27;--pj-amber:#f0a53a}
/* The tabs and their key: a row of their own above the map, never over it (user, 25 Oct 2026: "these labels should not
   disturb the map"). On the Alerts layer the row keeps room at its end for the Download button. */
.pj-layers{position:static;margin:0 0 14px;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 14px}
.mapbox[data-layer="al"]:has(.pj-aldl:not([hidden])) .pj-layers{padding-inline-end:150px}
.pj-lysw{display:inline-flex;gap:2px;padding:3px;background:var(--bg);border:1px solid var(--line);border-radius:999px;box-shadow:0 1px 2px rgba(13,17,23,.06)}
.pj-lysw button{font:600 12.5px/1 Manrope,system-ui,sans-serif;padding:7px 13px;border:0;border-radius:999px;background:none;color:var(--ink-2);cursor:pointer}
.pj-lysw button:hover{color:var(--ink);background:var(--bg-2)}
.pj-lysw button[aria-pressed="true"]{background:var(--navy);color:#fff}
.pj-lysw button:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.pj-lylg{display:inline-flex;align-items:center;gap:8px;padding:4px 8px;border-radius:6px;background:color-mix(in srgb,var(--bg) 88%,transparent);font:600 11px/1.2 Manrope,system-ui,sans-serif;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pj-lylg-wx i{width:96px;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--wb0),var(--wb2),var(--wb4),var(--wb6),var(--wb8))}
.pj-lylg-rd span{display:inline-flex;align-items:center;gap:5px}
.pj-lylg-rd i{width:16px;height:3px;border-radius:2px;background:var(--red)}
.pj-lylg-rd i.is-slow{background:repeating-linear-gradient(90deg,var(--pj-amber) 0 5px,transparent 5px 8px)}
.mapbox:not([data-layer="wx"]) .pj-lylg-wx,.mapbox:not([data-layer="rd"]) .pj-lylg-rd{display:none}
.mapbox .ly-wx,.mapbox .ly-rd{display:none}
.mapbox[data-layer="wx"] .ly-wx,.mapbox[data-layer="rd"] .ly-rd{display:inline}
.mapbox:is([data-layer="wx"],[data-layer="rd"]) :is(.halo,.pv,.lb:not(.tn)){display:none}
.mapbox[data-layer="wx"] .pvz path{stroke:var(--bg);stroke-width:.9}
.mapbox[data-layer="wx"] .pvz .wb0 path{fill:var(--wb0)}.mapbox[data-layer="wx"] .pvz .wb1 path{fill:var(--wb1)}.mapbox[data-layer="wx"] .pvz .wb2 path{fill:var(--wb2)}
.mapbox[data-layer="wx"] .pvz .wb3 path{fill:var(--wb3)}.mapbox[data-layer="wx"] .pvz .wb4 path{fill:var(--wb4)}.mapbox[data-layer="wx"] .pvz .wb5 path{fill:var(--wb5)}
.mapbox[data-layer="wx"] .pvz .wb6 path{fill:var(--wb6)}.mapbox[data-layer="wx"] .pvz .wb7 path{fill:var(--wb7)}.mapbox[data-layer="wx"] .pvz .wb8 path{fill:var(--wb8)}
.mapbox[data-layer="wx"] .pvz a:is(:hover,:focus-visible,.is-on) path{stroke:var(--ink);stroke-width:1.6}
.mapbox .wxt{font:700 11px Manrope,system-ui,sans-serif;fill:var(--ink);paint-order:stroke;stroke:color-mix(in srgb,var(--bg) 70%,transparent);stroke-width:2.6px;stroke-linejoin:round;pointer-events:none}
.mapbox .ly-wx .pj-wi{width:14px;height:14px;pointer-events:none}
.mapbox .ly-rd{pointer-events:none}
.mapbox .rdc{fill:none;stroke:var(--bg);stroke-width:4.4;stroke-linecap:round;stroke-linejoin:round}
.mapbox .rd{fill:none;stroke:color-mix(in srgb,var(--ink-2) 62%,transparent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:stroke}
.mapbox .rd.is-slow{stroke:var(--pj-amber);stroke-width:2.8;stroke-dasharray:6 4}
.mapbox .rd.is-closed{stroke:var(--red);stroke-width:3}
.mapbox .hub{fill:var(--ink);stroke:var(--bg);stroke-width:1.4}
.mapbox .xing{fill:var(--bg);stroke:var(--ink);stroke-width:1.4}
.mapbox .mk circle{fill:var(--red);stroke:var(--bg);stroke-width:2}
.mapbox .mk.is-slow circle{fill:var(--pj-amber)}
.mapbox .mk path{fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round}
.mapbox .rlb{font:600 10.5px Manrope,system-ui,sans-serif;fill:var(--ink);paint-order:stroke;stroke:var(--bg);stroke-width:3px;stroke-linejoin:round;direction:ltr}
.mapbox .rlb.xg{font-weight:500;fill:var(--ink-2)}
.mapbox .rlb.is-closed{fill:var(--red);font-weight:800}
.mapbox .rlb.is-slow{fill:var(--pj-amber);font-weight:800}
.mapside .pj-ly{display:flex;flex-direction:column;gap:18px}
.pj-rdnote{margin:0;color:var(--ink-2);font-size:14px;line-height:1.5}
.pj-rdlist li>span{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:11px 0;border-bottom:1px solid var(--line);align-items:center;font-size:14px}
.pj-rdlist li>:is(a,span){grid-template-columns:minmax(0,1fr) auto}
.pj-rdlist b{grid-column:1}.pj-rdlist .pj-hl{grid-column:1;color:var(--mute);font-size:13px}.pj-rdlist .pj-hl:empty{display:none}
.pj-rdst{grid-column:2;grid-row:1/span 2;font:700 11px/1 Manrope,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;padding:5px 8px;border-radius:999px;color:#fff;background:var(--red)}
.pj-rdst.is-slow{background:var(--pj-amber)}
@media (max-width:600px){.pj-layers{margin:0 0 12px}.mapbox[data-layer="al"]:has(.pj-aldl:not([hidden])) .pj-layers{padding-inline-end:0}}

/* 1.1.3: story circles open full screen, one story after another (template-parts/home/stories.php, pajhwok.js
   'stories'). Dark in both themes, like a phone's stories; a card nine wide by sixteen high on computers, the whole
   screen on phones. */
.pj-stv{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(6,9,16,.94);color:#fff;overflow:hidden}
.pj-stv::backdrop{background:rgba(6,9,16,.5)}
.pj-stv[open]{display:grid;place-items:center}
.pj-stv-frame{position:relative;touch-action:none;user-select:none;-webkit-user-select:none}
.pj-stv-box{position:relative;width:min(100vw,calc(min(92vh,860px) * 9 / 16));height:min(100vh,92vh,860px);border-radius:14px;overflow:hidden;background:#0b0e15;animation:pj-stv-in .22s ease-out}
@keyframes pj-stv-in{from{opacity:0;transform:scale(.96)}}
.pj-stv-bars{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));inset-inline:10px;z-index:4;display:flex;gap:4px}
.pj-stv-bars span{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.32);overflow:hidden}
.pj-stv-bars i{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:left}
.pj-stv-bars .done i{transform:none}
.pj-stv-bars .run i{animation:pj-stv-fill var(--pj-stv-secs,7s) linear forwards}
.pj-stv-still .pj-stv-bars .run i{animation-play-state:paused}
@keyframes pj-stv-fill{to{transform:none}}
.pj-stv-top{position:absolute;top:calc(20px + env(safe-area-inset-top,0px));inset-inline-end:6px;z-index:4;display:flex;gap:2px}
.pj-stv button{display:grid;place-items:center;border:0;background:none;color:#fff;cursor:pointer;padding:0}
.pj-stv-top button{width:40px;height:40px;border-radius:50%}
.pj-stv-top button:hover{background:rgba(255,255,255,.12)}
.pj-stv button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pj-stv-pause svg path[d^="M8 5l"]{fill:currentColor}
.pj-stv button:focus-visible,.pj-stv a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pj-stv-stage{position:absolute;inset:0}
.pj-stv-card{position:absolute;inset:0;container-type:inline-size;display:flex;flex-direction:column;padding:calc(66px + env(safe-area-inset-top,0px)) 18px calc(18px + env(safe-area-inset-bottom,0px));animation:pj-stv-fade .2s ease-out}
.pj-stv-card[hidden]{display:none}
@keyframes pj-stv-fade{from{opacity:.3}}
.pj-stv-bg{position:absolute;inset:-48px;z-index:0}
.pj-stv-bg img{width:100%;height:100%;object-fit:cover;filter:blur(30px) saturate(1.3) brightness(.42);transform:scale(1.1)}
.pj-stv-pic{position:relative;z-index:1;flex:1 1 auto;min-height:min(66cqw,34vh);max-height:100cqw;max-width:100%;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.06);box-shadow:0 12px 32px rgba(0,0,0,.4)}
.pj-stv-pic img{width:100%;height:100%;object-fit:cover;display:block}
.pj-stv-txt{position:relative;z-index:1;flex:none;margin-top:auto;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:18px 2px 16px;overflow:hidden}
.pj-stv-txt .k{color:#ff9c8f;font:700 11px/1.2 Manrope,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.pj-stv-txt h2{margin:0;color:#fff;font:500 clamp(22px,6vw,28px)/1.2 Newsreader,Georgia,serif;text-wrap:balance;outline:none}
.pj-stv-txt p{margin:0;color:rgba(255,255,255,.84);font-size:15px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.pj-stv-txt .mono{color:rgba(255,255,255,.62);font-size:12px}
.pj-stv-read{position:relative;z-index:3;display:flex;justify-content:center;align-items:center;gap:8px;min-height:46px;border-radius:999px;background:#fff;color:#0d1117;font-weight:700;text-decoration:none}
.pj-stv-read:hover{background:#e8eefb}
/* The sides of the card: the previous and next stories (on phones the whole sides, above the "Read" button). */
.pj-stv-go{position:absolute;z-index:3;top:calc(60px + env(safe-area-inset-top,0px));bottom:90px;width:34%}
.pj-stv-prev{inset-inline-start:0}.pj-stv-next{inset-inline-end:0}
.pj-stv-go svg{display:none}
@media (min-width:700px) and (hover:hover){
	.pj-stv-go{top:50%;bottom:auto;width:46px;height:46px;margin-top:-23px;border-radius:50%;background:rgba(255,255,255,.14)}
	.pj-stv-go:hover{background:rgba(255,255,255,.26)}
	.pj-stv-go svg{display:block}
	.pj-stv-prev{inset-inline-start:-66px}.pj-stv-next{inset-inline-end:-66px}
}
@media (max-width:699px){.pj-stv-box{width:100vw;height:100vh;height:100dvh;border-radius:0}.pj-stv-pic{max-height:125cqw}}
@media (prefers-reduced-motion:reduce){.pj-stv-box,.pj-stv-card{animation:none}}
/* The Weather layer: each province's name under its drawing and temperature; a province tapped shows its weather
   beside the map (inc/map-layers.php pj_map_weather_panel_html()). */
.mapbox .wxn{font:600 9.5px Manrope,system-ui,sans-serif;fill:var(--ink-2);paint-order:stroke;stroke:color-mix(in srgb,var(--bg) 70%,transparent);stroke-width:2.4px;stroke-linejoin:round;pointer-events:none;direction:ltr}
.mapbox .wxt{direction:ltr}
.pj-wxp-now{display:flex;align-items:center;gap:14px}
.pj-wxp-now .pj-wi{width:54px;height:54px;flex:none}
.pj-wxp-now b{font:500 46px/1 Newsreader,Georgia,serif;font-variant-numeric:tabular-nums}
.pj-wxp-now span{display:flex;flex-direction:column;gap:3px;min-width:0}
.pj-wxp-now strong{font-size:16px}
.pj-wxp-now small{color:var(--mute);font-size:12.5px}
.pj-wxp-days{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.pj-wxp-days li{display:grid;grid-template-columns:minmax(72px,auto) 24px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.pj-wxp-days .pj-wi{width:22px;height:22px}
.pj-wxp-days span:not(.mono){color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj-wxp-days .mono{font-variant-numeric:tabular-nums}

/* Pictures in stories with their Media Library caption, small and grey (1.1.3, inc/single.php pj_image_captions()):
   the picture and its caption in one box that keeps the picture's place (left, right, centre) and width; on phones
   floated pictures take the full width, as before. */
.body .pj-imgbox{display:block;max-width:100%;margin:0}
.body .pj-imgbox:not(.pj-imgbox-w){width:fit-content}
.body .pj-imgbox.aligncenter{margin-inline:auto}
.body .pj-imgbox.alignleft{float:left;margin:.3em 1.4em 1em 0;max-width:50%}
.body .pj-imgbox.alignright{float:right;margin:.3em 0 1em 1.4em;max-width:50%}
.body .pj-imgbox img{display:block;float:none;clear:none;margin:0;max-width:100%;height:auto}
.body .pj-imgbox-w img{width:100%}
.pj-imgcap{display:block;margin-top:8px;font-family:Vazirmatn,Tahoma,system-ui,sans-serif;font-size:12.5px;line-height:1.55;font-weight:400;color:var(--mute);text-align:start}
.body .pj-imgbox.aligncenter .pj-imgcap{text-align:center}
@media (max-width:760px){.body .pj-imgbox.alignleft,.body .pj-imgbox.alignright{float:none;margin:1em auto;max-width:100%}}

/* Video pictures in lists and cards: a small play sign in the corner instead of the big round button (1.1.3, user:
   "the play icons on videos are very big … add a nice play icon below in one side", as on staging). The players'
   own button (a story's video, the home page's big video) stays. */
.play.pj-vb{inset:auto auto 12px 12px;width:34px;height:34px;display:grid;place-items:center;border-radius:5px;background:rgba(9,16,35,.84);transition:background .2s}
.play.pj-vb b{width:auto;height:auto;border-radius:0;background:none;box-shadow:none;display:block;transition:none}
.play.pj-vb b::after{content:"";display:block;border-left:12px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;margin:0 0 0 3px}
a:hover .play.pj-vb{background:var(--red)}
a:hover .play.pj-vb b{transform:none}
.lead .play.pj-vb{width:42px;height:42px;inset:auto auto 16px 16px}
.lead .play.pj-vb b::after{border-left-width:15px;border-top-width:9px;border-bottom-width:9px}
.vlist .play.pj-vb,.pj-w .play.pj-vb{width:26px;height:26px;inset:auto auto 8px 8px}
.vlist .play.pj-vb b::after,.pj-w .play.pj-vb b::after{border-left-width:9px;border-top-width:5px;border-bottom-width:5px;margin-left:2px}

/* Lists as rows (1.1.3; Article page → Section and list pages → "How the stories are listed"): time (and section),
   headline and a few lines beside the picture, as on staging; the first page opens with one big story and two
   beside it (.pj-archtop2). On phones a small picture beside the headline. */
.pj-rows{display:flex;flex-direction:column}
.pj-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:24px;align-items:start;padding:22px 0;border-bottom:1px solid var(--line)}
.pj-rows>.pj-row:first-child{padding-top:4px}
.pj-row-tx{display:flex;flex-direction:column;gap:8px;min-width:0}
.pj-row-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;color:var(--mute)}
.pj-row-meta .k{margin:0}
.pj-row h3{margin:0;font-size:22px;line-height:1.3;text-wrap:balance}
.pj-row h3 a{color:inherit;text-decoration:none}
.pj-row p{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pj-row-pic{display:block;min-width:0}
.pj-row-pic .pic{aspect-ratio:3/2;border-radius:var(--r)}
.pj-rows>.pj-gridad{padding:22px 0;border-bottom:1px solid var(--line)}
@media (max-width:640px){
	.pj-row{grid-template-columns:minmax(0,1fr) 112px;gap:14px;padding:16px 0}
	.pj-row h3{font-size:17px}
	.pj-row p{-webkit-line-clamp:2;font-size:14px}
	.pj-row .play.pj-vb{width:24px;height:24px;inset:auto auto 6px 6px}
	.pj-row .play.pj-vb b::after{border-left-width:8px;border-top-width:5px;border-bottom-width:5px;margin-left:2px}
	.pj-row .dur{display:none}
}
/* The programme posters' "all episodes" sign in the same small dark square as the videos' play sign (1.1.3). */
.pj-allicon{width:36px;height:36px;border-radius:5px;box-shadow:none;background:rgba(9,16,35,.84);right:12px;bottom:12px}
.pj-allicon svg{width:19px;height:19px}
.prog.pj-pcard:hover .pj-allicon,.prog.pj-pcard:focus-visible .pj-allicon{background:var(--red);box-shadow:none}
[dir=rtl] .pj-allicon{right:auto;left:12px}

/* A video list's newest video playing in place (1.1.3, archive.php .pj-archvid; pajhwok.js 'home video'), in the
   main column on a white page: dark text, not the home page's navy band's. */
.pj-archvid .pj-vmain{gap:12px}
.pj-archvid .vinfo{gap:8px}
.pj-archvid .vinfo h3{font-size:clamp(22px,2vw,30px);line-height:1.25;color:var(--ink)}
.pj-archvid .vinfo p{color:var(--ink-2);font-size:16px}
.pj-archvid .vinfo .meta{display:flex;gap:10px;color:var(--mute);font-size:12.5px}

/* Interviews on the home page (1.1.3, template-parts/home/interviews.php; in place of Opinion): the newest
   interview's video picture, the next headlines beside it. */
.pj-intvbox{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px;align-items:start}
.pj-intv-lead{display:flex;flex-direction:column;gap:10px;color:inherit;text-decoration:none}
.pj-intv-lead .pic{aspect-ratio:16/9;border-radius:var(--r)}
.pj-intv-lead h3{margin:0;font-size:clamp(20px,1.8vw,26px);line-height:1.3}
.pj-intv-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--navy)}
.pj-intv-list li a{display:flex;flex-direction:column;gap:6px;padding:16px 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.pj-intv-list h3{margin:0;font-size:17px;line-height:1.4}
.pj-intv .mono{font-size:12px;color:var(--mute)}
@media (max-width:760px){.pj-intvbox{grid-template-columns:minmax(0,1fr);gap:18px}}
/* The Interviews at the top, in the reader poll's place beside Most Viewed News (Home page layout → Interviews →
   Where): a card like the poll's, the video, its headline, two more. */
.pj-intvtop{display:flex;flex-direction:column;gap:12px;background:var(--bg-2);border-radius:12px;padding:20px}
.pj-intvtop-hd{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pj-intvtop-hd a{font-size:12.5px;font-weight:700;color:var(--navy);text-decoration:none;white-space:nowrap}
.pj-intvtop-hd a:hover{text-decoration:underline}
.pj-intvtop .pj-intv-lead{gap:8px}
.pj-intvtop .pj-intv-lead .pic{border-radius:8px}
.pj-intvtop .pj-intv-lead h3{font-size:16px;line-height:1.4}
.pj-intvtop .mono{font-size:11.5px;color:var(--mute)}
/* The other two: their headlines only (user: "make the other 2 as title only"), two lines at most. */
.pj-intvtop-hl{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.pj-intvtop-hl li a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding:9px 0;border-bottom:1px solid var(--line);color:inherit;font-size:14px;font-weight:600;line-height:1.45;text-decoration:none}
.pj-intvtop-hl li:last-child a{border-bottom:0;padding-bottom:0}
.pj-intvtop-hl a:hover .pj-hl{text-decoration:underline}
.pj-square .pj-intvtop,.pj-square .pj-intvtop .pic{border-radius:3px}
/* Under Most Viewed News (narrower screens, the row stacked): the big one beside the two headlines, never one picture
   the width of the page. */
@media (max-width:1100px) and (min-width:641px){.pj-intvtop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 28px;align-items:start}.pj-intvtop-hd{grid-column:1/-1}.pj-intvtop-hl li:first-child a{padding-top:0}.pj-intvtop-hl{border-top:0}}
/* Most Viewed News switched off: the box alone in the row, laid out the same way. */
@media (min-width:1101px){.brief>.pj-intvtop:only-child{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 28px;align-items:start}.brief>.pj-intvtop:only-child .pj-intvtop-hd{grid-column:1/-1}.brief>.pj-intvtop:only-child .pj-intvtop-hl{border-top:0}.brief>.pj-intvtop:only-child .pj-intvtop-hl li:first-child a{padding-top:0}}
/* A video's picture from YouTube (no picture of its own, inc/compat.php pj_video_pic()): the 16:9 picture whole, the
   still's black bars cut off, the rest of a box of another shape filled softly (the blurred copy of .pj-fill). */
.pic.pj-ytpic>img{inset:0;margin:auto;width:100%;height:auto;max-width:none;max-height:none;aspect-ratio:16/9;object-fit:cover}
/* Features & investigations, the big report (Home page → Special reports → The big report: "side"): the picture with
   the headline under it, three more of its pictures beside them, as tall as the two together, so each comes out
   close to a photo's shape (staging's: "the ratio is bad"). */
.feat.pj-feat2{grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-areas:"big side" "story side";gap:22px 24px;align-items:stretch}
.pj-fbig{grid-area:big;display:block;color:inherit}
.pj-fbig .pic{aspect-ratio:16/9}
.pj-fside{grid-area:side;display:grid;grid-auto-rows:minmax(0,1fr);gap:10px;min-height:0;color:inherit}
.pj-fside .pic{height:100%;min-height:0}
.pj-fside .pic img{position:absolute;inset:0}
.pj-fside .pic.more,#pj-main .pj-fside .pic.more{margin:0;padding:0;border:0;max-width:none;width:auto;grid-column:auto}
.pj-fside .pic.more img{filter:brightness(.42)}
.pj-feat2 .fstory{grid-area:story;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 20px;align-content:start}
:is(.pj-feat2,.pj-feat3) .fstory>*{grid-column:1/-1}
:is(.pj-feat2,.pj-feat3) .fstory h3{margin:0;font-size:clamp(24px,2.2vw,32px);line-height:1.25;text-wrap:balance}
:is(.pj-feat2,.pj-feat3) .fstory p{font-size:16px}
:is(.pj-feat2,.pj-feat3) .fstory>.by{grid-column:1}
:is(.pj-feat2,.pj-feat3) .fstory>.btn{grid-column:2;align-self:center!important;white-space:nowrap}
@media (max-width:1100px){
.feat.pj-feat2{grid-template-columns:minmax(0,1fr);grid-template-areas:"big" "story" "side";gap:18px}
.pj-fside{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto}
.pj-fside .pic{height:auto;aspect-ratio:4/3}
.pj-feat2 .fstory{margin-bottom:4px}
}
@media (max-width:520px){:is(.pj-feat2,.pj-feat3) .fstory>:is(.by,.btn){grid-column:1/-1}:is(.pj-feat2,.pj-feat3) .fstory>.btn{justify-self:start}}
/* Features & investigations, the "squares" template (Home page → Special reports → The big report): one big square
   picture and two small squares (the second darkened under +N), the headline under them, and a 300 px side column
   with the tall ad or the widgets of "Home page · beside the big special report". Below 1,100 px the tall ad hides
   (as beside the reports grid) and widgets go under the report. */
.feat.pj-feat3{grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.pj-f3main{display:flex;flex-direction:column;gap:20px;min-width:0}
.pj-f3pics{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:10px;color:inherit}
.pj-f3pics>.pic{aspect-ratio:1/1}
.pj-f3pics>.pic:first-child{grid-row:1/3;aspect-ratio:auto}
.pj-f3pics .pic img{position:absolute;inset:0}
.pj-f3pics .pic.more,#pj-main .pj-f3pics .pic.more{margin:0;padding:0;border:0;max-width:none;width:auto;grid-column:auto}
.pj-f3pics .pic.more img{filter:brightness(.42)}
.pj-feat3 .fstory{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 20px}
.pj-f3side{display:flex;flex-direction:column;gap:28px;min-width:0}
.pj-f3side>.ad.tall{aspect-ratio:300/600;width:100%}
.reports.pj-noad{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){
.feat.pj-feat3{grid-template-columns:minmax(0,1fr)}
.pj-f3side>.ad.tall,.pj-f3side:has(>.ad.tall:only-child){display:none}
.pj-f3side .pj-wz{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:28px;align-items:start}
}
@media (max-width:760px){.reports.pj-noad{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 1.1.3: the map's Alerts layer (Home page → Province map; inc/map-alerts.php): provinces coloured by heavy snow (four
   blues), heavy rain, a flood or an earthquake; each earthquake a red dot as big as its magnitude with rings, the snow
   and rain amounts written; and the download button in the map's other corner (pajhwok.js 'map alerts picture'). */
.mapsec{--al-q:#d93a2b;--al-qs:#fbe3e0;--al-s1:#d6e9fb;--al-s2:#a9d0f5;--al-s3:#6fadea;--al-s4:#3a86d1;--al-r:#f6cf8e;--al-f:#f3a35c;--al-land:#e3e8ef;--al-mag:#a3271b;--al-snow:#0d3f73;--al-rain:#7a4a00}
[data-theme="dark"] .mapsec{--al-qs:#4a2522;--al-s1:#1f3a57;--al-s2:#25507e;--al-s3:#2f6aa8;--al-s4:#3d86d1;--al-r:#6b4a1d;--al-f:#8a4a1a;--al-land:#2a303a;--al-mag:#ff8f80;--al-snow:#cfe6ff;--al-rain:#ffd28a}
.mapbox:not([data-layer="al"]) .pj-lylg-al{display:none}
.mapbox .ly-al{display:none}
.mapbox[data-layer="al"] .ly-al{display:inline}
.mapbox[data-layer="al"] :is(.halo,.pv,.lb:not(.tn)){display:none}
.mapbox[data-layer="al"] .pvz path{fill:var(--al-land);stroke:var(--bg);stroke-width:.9}
.mapbox[data-layer="al"] .pvz [data-al~="q"] path{fill:var(--al-qs)}.mapbox[data-layer="al"] .pvz [data-al~="f"] path{fill:var(--al-f)}
.mapbox[data-layer="al"] .pvz [data-al~="r"] path{fill:var(--al-r)}
.mapbox[data-layer="al"] .pvz [data-al~="s1"] path{fill:var(--al-s1)}.mapbox[data-layer="al"] .pvz [data-al~="s2"] path{fill:var(--al-s2)}
.mapbox[data-layer="al"] .pvz [data-al~="s3"] path{fill:var(--al-s3)}.mapbox[data-layer="al"] .pvz [data-al~="s4"] path{fill:var(--al-s4)}
.mapbox[data-layer="al"] .pvz a:is(:hover,:focus-visible,.is-on) path{stroke:var(--ink);stroke-width:1.6}
.mapbox .ly-al{pointer-events:none}
.mapbox .alq{fill:var(--al-q);stroke:var(--bg);stroke-width:1.5}
.mapbox .alr{fill:none;stroke:var(--al-q);stroke-width:1.3;opacity:.5}
.mapbox .alr.is-far{opacity:.22}
.mapbox .alq.is-old{opacity:.55} /* Older earthquakes: a lighter dot, no rings; the newest keeps its rings. */
.mapbox :is(.alm,.alt){font:800 11px Manrope,system-ui,sans-serif;paint-order:stroke;stroke:var(--bg);stroke-width:3px;stroke-linejoin:round}
.mapbox .alm{fill:var(--al-mag);direction:ltr}
.mapbox .alp{font:700 10.5px Manrope,system-ui,sans-serif;fill:var(--ink);paint-order:stroke;stroke:var(--bg);stroke-width:3px;stroke-linejoin:round}
.mapbox .alt.is-snow{fill:var(--al-snow)}.mapbox .alt.is-rain{fill:var(--al-rain)}
.mapbox .alf circle{fill:var(--al-f);stroke:var(--bg);stroke-width:1.6}.mapbox .alf.is-red circle{fill:var(--red)}
.mapbox .alf path{fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round}
.mapbox .aln{fill:var(--navy);stroke:var(--bg);stroke-width:1.6}
.pj-lylg-al{flex-wrap:wrap;gap:4px 10px;max-width:100%}
.pj-lylg-al span{display:inline-flex;align-items:center;gap:5px}
.pj-lylg-al i{width:12px;height:10px;border-radius:2px}
.pj-lylg-al i.is-q{width:9px;height:9px;border-radius:50%;background:var(--al-q);box-shadow:0 0 0 3px var(--al-qs)}
.pj-lylg-al i.is-s{background:linear-gradient(90deg,var(--al-s1),var(--al-s4))}.pj-lylg-al i.is-r{background:var(--al-r)}
.pj-lylg-al i.is-f{width:10px;height:10px;border-radius:50%;background:var(--al-f)}.pj-lylg-al i.is-n{width:9px;height:9px;border-radius:50%;background:var(--navy)}
.pj-aldl{position:absolute;top:24px;inset-inline-end:24px;z-index:2;display:none;align-items:center;gap:6px;padding:6px 8px 6px 11px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);font:600 12.5px/1 Manrope,system-ui,sans-serif;cursor:pointer;box-shadow:0 1px 2px rgba(13,17,23,.06)}
.pj-aldl svg{width:15px;height:15px}
.pj-aldl b{font:800 10px/1 Manrope,system-ui,sans-serif;letter-spacing:.06em;padding:3px 5px;border-radius:4px;background:var(--navy);color:#fff}
.pj-aldl:hover{border-color:var(--navy);color:var(--navy)}
.pj-aldl:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.pj-aldl[disabled]{opacity:.6;cursor:progress}
.mapbox[data-layer="al"] .pj-aldl:not([hidden]){display:inline-flex}
.pj-alnote{margin:0;color:var(--ink-2);font-size:14px;line-height:1.5}
.pj-alsrc{margin:0;color:var(--mute);font-size:12px;line-height:1.6}
.pj-allist li>span{display:grid;grid-template-columns:110px 1fr auto;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);align-items:center;font-size:14px}
@media (max-width:600px){.pj-aldl{position:static;margin:0 0 12px}}
/* The download button's menu: which picture (all the alerts, or one kind as breaking news), its headline, Save. */
.pj-aldlm{position:absolute;top:64px;inset-inline-end:24px;z-index:3;width:min(320px,calc(100% - 28px));display:flex;flex-direction:column;gap:12px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);box-shadow:0 10px 30px rgba(13,17,23,.16);font-size:14px}
.pj-aldlm fieldset{margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:2px}
.pj-aldlm legend{padding:0 0 6px;font-weight:700;font-size:14px}
.pj-aldlm label.pj-aldlk{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:8px;cursor:pointer}
.pj-aldlm label.pj-aldlk:hover{background:var(--bg-2)}
.pj-aldlm label.pj-aldlk input{accent-color:var(--navy);margin:0}
.pj-aldlm .pj-aldlh{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:13px}
.pj-aldlm textarea{font:500 14px/1.45 inherit;font-family:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);resize:vertical;min-height:64px}
.pj-aldlm .pj-aldlgo{display:inline-flex;justify-content:center;align-items:center;gap:7px;padding:10px 14px;border:0;border-radius:999px;background:var(--navy);color:#fff;font:700 13.5px/1 Manrope,system-ui,sans-serif;cursor:pointer}
.pj-aldlm .pj-aldlgo[disabled]{opacity:.65;cursor:progress}
.pj-aldlm small{color:var(--mute);font-size:12px}
.pj-aldlm .pj-aldlx{position:absolute;top:8px;right:8px;width:28px;height:28px;border:0;border-radius:50%;background:none;color:var(--ink-2);font-size:20px;line-height:1;cursor:pointer}
[dir=rtl] .pj-aldlm .pj-aldlx{right:auto;left:8px}
@media (max-width:600px){.pj-aldlm{position:static;width:100%;margin:0 0 12px}}
/* The province map's lighter dots: the provinces with no story today, for their stories of the week (Home page →
   Province map → "Fill the map with the rest of the week"); their names a little lighter; the key beside the map. */
.mapbox .pv.is-week{opacity:.45}.mapbox .pv.is-week:hover{opacity:.7}
.mapbox .lb.wk{fill:var(--mute);font-weight:500}
.pj-mapkey{display:flex;flex-wrap:wrap;gap:6px 16px;margin:-6px 0 0;color:var(--ink-2);font-size:12.5px}
.pj-mapkey span{display:inline-flex;align-items:center;gap:6px}
.pj-mapkey i{width:10px;height:10px;border-radius:50%;background:var(--navy)}
.pj-mapkey i.is-week{width:8px;height:8px;opacity:.45}
.pvlist li.is-week .mono{color:var(--mute);font-size:12px;white-space:nowrap}
/* A set's photos (a locked set's as previews: inc/photo-watermark.php) open in the page's own viewer, never as the
   picture's file. A locked set's pictures cannot be dragged away or long-pressed to save (the button takes the touch). */
.pj-phbtn{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.pj-phbtn:focus-visible{outline:3px solid var(--sky,#3b82f6);outline-offset:-3px}
.pj-phbtn img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.pj-phbtn:hover img{transform:scale(1.04)}
.pj-setno{pointer-events:none}
.is-locked .pj-setph img{pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
.pj-setacts .pj-dlall svg{width:16px;height:16px}
/* The viewer: a box over the dimmed page (user: "the preview should not be full screen man"), the photo on a dark band
   with previous / next on its sides, its number and Close above, its buttons below. */
.pj-phv{width:min(940px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 40px);margin:auto;padding:0;border:0;border-radius:var(--r,12px);background:var(--bg,#fff);color:var(--ink,#0b1220);box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:auto;overscroll-behavior:contain}
.pj-phv[open]{display:flex;flex-direction:column}
.pj-phv::backdrop{background:rgba(6,11,22,.72)}
.pj-phv svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pj-phv-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px 10px 18px}
[dir=rtl] .pj-phv-top{padding:10px 18px 10px 12px}
.pj-phv-n{font:700 13px/1 "JetBrains Mono",monospace;letter-spacing:.04em;color:var(--mute)}
.pj-phv-x{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--bg-3,#eef1f5);color:inherit;cursor:pointer;transition:background .2s}
.pj-phv-x:hover{background:var(--line-2,#d5dae2)}
.pj-phv-stage{position:relative;display:grid;place-items:center;min-height:260px;background:#0b1220;touch-action:none}
.pj-phv-stage img{display:block;height:auto;max-width:100%;max-height:min(66vh,620px);object-fit:contain;-webkit-user-select:none;user-select:none}
.pj-phv-stage.is-loading::after{content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:pj-phv-spin .8s linear infinite}
@keyframes pj-phv-spin{to{transform:rotate(360deg)}}
.pj-phv.is-locked .pj-phv-stage img{pointer-events:none;-webkit-user-drag:none;-webkit-touch-callout:none}
.pj-phv-go{position:absolute;top:50%;display:grid;place-items:center;width:44px;height:44px;margin-top:-22px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.88);color:#0b1220;box-shadow:0 4px 14px rgba(0,0,0,.3);cursor:pointer;transition:background .2s,transform .2s}
.pj-phv-go:hover{background:#fff;transform:scale(1.06)}
.pj-phv-prev{inset-inline-start:14px}
.pj-phv-next{inset-inline-end:14px}
.pj-phv-x:focus-visible,.pj-phv-go:focus-visible{outline:3px solid var(--sky,#3b82f6);outline-offset:2px}
.pj-phv-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 18px;padding:14px 18px 16px}
.pj-phv-foot p{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;line-height:1.5;color:var(--ink-2,inherit)}
.pj-phv-foot p svg{width:16px;height:16px;flex:none;fill:currentColor;stroke:none;color:var(--mute)}
.pj-phv-btns{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:760px){.pj-phv{width:calc(100% - 20px);max-height:calc(100dvh - 20px)}.pj-phv-stage{min-height:200px}.pj-phv-stage img{max-height:58vh}.pj-phv-go{width:38px;height:38px;margin-top:-19px}.pj-phv-prev{inset-inline-start:8px}.pj-phv-next{inset-inline-end:8px}.pj-phv-foot{justify-content:center;text-align:center;padding:12px 14px 14px}.pj-phv-btns{justify-content:center}.pj-phv-foot .btn{height:38px;padding:0 14px}}
@media (prefers-reduced-motion:reduce){.pj-phbtn img{transition:none}.pj-phbtn:hover img{transform:none}}
/* A photo set's "Buy on Flickr" button (Home page → Picture of the day → Flickr shop, or the set's own Flickr link). */
.pj-setacts .pj-flickr{display:inline-flex;align-items:center;gap:7px}
.pj-setacts .pj-flickr svg{width:22px;height:22px;flex:none}
/* The photos page (archive-photo.php; Article page → Photos page): a collage of the newest sets' covers, slowly moving
   (still for readers who ask for less motion), fading into the page behind the heading; then the sets, the newest big. */
.pj-phhero{position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:560px;margin:0 0 36px;overflow:hidden;border-radius:0 0 20px 20px}
.pj-phmosaic{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:150px;grid-auto-flow:dense;gap:8px;align-content:start;padding-top:8px}
.pj-phmosaic span{position:relative;overflow:hidden;border-radius:12px;background:var(--bg-3)}
.pj-phmosaic span:nth-child(1){grid-column:span 2;grid-row:span 2}
.pj-phmosaic span:nth-child(4){grid-row:span 2}
.pj-phmosaic span:nth-child(6),.pj-phmosaic span:nth-child(9){grid-column:span 2}
.pj-phmosaic img{display:block;width:100%;height:100%;object-fit:cover;animation:pj-phdrift 26s ease-in-out infinite alternate}
.pj-phmosaic span:nth-child(even) img{animation-delay:-13s}
@keyframes pj-phdrift{from{transform:scale(1.02)}to{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.pj-phmosaic img{animation:none}}
.pj-phhero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 46% 42% at 50% 84%,var(--bg) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 55%,transparent 100%),linear-gradient(180deg,color-mix(in srgb,var(--bg) 4%,transparent) 0%,color-mix(in srgb,var(--bg) 30%,transparent) 34%,color-mix(in srgb,var(--bg) 86%,transparent) 62%,var(--bg) 88%)}
.pj-phcrumbs{padding:18px 0 10px;font-size:12.5px}
.pj-phhero-tx{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:780px;padding:0 20px 6px;text-align:center}
.pj-phhero-tx .k{color:var(--navy)}
.pj-phhero-tx h1{margin:0;font-size:clamp(34px,4.4vw,58px);line-height:1.1;text-wrap:balance}
.pj-phhero-tx p{margin:0;color:var(--ink-2);font-size:18px;line-height:1.6}
.pj-phhero-tx .pj-phstats{color:var(--mute);font-size:13px;letter-spacing:.04em}
.pj-phbtns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px!important}
.pj-phbtns .pj-flickr{display:inline-flex;align-items:center;gap:7px}
.pj-phbtns .pj-flickr svg{width:20px;height:20px;flex:none}
.pj-phsets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px;scroll-margin-top:110px}
#pj-phsets{scroll-margin-top:110px}
.pj-phset{position:relative;display:flex;flex-direction:column;gap:12px;color:inherit;text-decoration:none}
.pj-phset .pic{aspect-ratio:4/3;border-radius:14px}
.pj-phset .pic img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pj-phset:hover .pic img{transform:scale(1.05)}
.pj-phset:hover h3{color:var(--navy)}
.pj-phset .pj-set-tags{top:12px;inset-inline-end:12px}
.pj-phset-tx{display:flex;flex-direction:column;gap:6px}
.pj-phset-tx .mono{color:var(--mute);font-size:12.5px}
.pj-phset-tx h3{margin:0;font-size:19px;line-height:1.35;transition:color .2s}
.pj-phset-tx small{color:var(--ink-2);font-size:13px}
.pj-phsets .pj-gridad{grid-column:1/-1}
@media (max-width:1100px){.pj-phsets{grid-template-columns:repeat(2,minmax(0,1fr))}.pj-phmosaic{grid-auto-rows:120px}.pj-phhero{min-height:480px}}
@media (max-width:760px){.pj-phhero{min-height:560px;border-radius:0}.pj-phmosaic{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:96px;gap:6px}.pj-phhero-tx p{font-size:16px}.pj-phsets{grid-template-columns:minmax(0,1fr);gap:26px}}
/* The Share menu of single pages (inc/template-tags.php "Share menu"): under its button, brand icons and names. */
.pj-sharem{position:absolute;z-index:80;min-width:230px;padding:6px 0;background:var(--bg);border:1px solid var(--line);border-radius:10px;box-shadow:0 16px 40px rgba(13,17,23,.18)}
.pj-sharem a,.pj-sharem button{display:flex;align-items:center;gap:16px;width:100%;padding:12px 22px;border:0;background:none;color:var(--ink);font:inherit;font-size:16px;font-weight:700;line-height:1.3;text-align:start;text-decoration:none;cursor:pointer}
.pj-sharem a:hover,.pj-sharem button:hover,.pj-sharem a:focus-visible,.pj-sharem button:focus-visible{background:var(--bg-2);outline:none}
.pj-sharem svg{width:28px;height:28px;flex:none}
.pj-sharem .pj-sm-line{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[data-theme="dark"] .pj-sharem{box-shadow:0 16px 40px rgba(0,0,0,.5)}
@media (max-width:480px){.pj-sharem{min-width:210px}.pj-sharem a,.pj-sharem button{padding:11px 18px;font-size:15px}}