/* portalplus.css: opt-in polish layer for portal-family sites (brand.json "portalPlus": true + this file in sharedStyles).
   Every rule sits under .pt-plus, which only those sites carry; nayi/fusion sites never load it. Logo and masthead are not touched.
   Aims (critic + owner, 2026-10-05): larger, darker text; clean photo frames without tape/tilt gimmicks; face-friendly crops;
   video rows that end on a whole card; widgets that never collide; the phone tab bar never covering the first screen. */

/* ---- reading: darker, larger list headlines and meta ---- */
:where(.pt-site.pt-plus:not(.ny-site):not(.fx-site)){--ptp-meta:color-mix(in srgb,var(--ink) 72%,var(--muted))}
.pt-plus .nf-h-sm{font-size:16.5px;line-height:1.45}
.pt-plus .nf-list li a,.pt-plus .nf-rel a,.pt-plus .nf-latest li a,.pt-plus .pt-trendlist li a{font-size:16px;line-height:1.5;color:var(--ink);font-weight:600}
.pt-plus .pt-tl-side .nf-h-sm{font-size:15.5px;line-height:1.45}
.pt-plus .pt-rail .nf-latest li a{font-size:15.5px}
.pt-plus time,.pt-plus .nf-meta,.pt-plus .nf-meta *{color:var(--ptp-meta)}
.pt-plus .nf-meta{font-size:13.5px}
.pt-plus .nf-dek{color:color-mix(in srgb,var(--ink) 82%,var(--muted));font-size:16px}
.pt-plus .nf-lh{letter-spacing:-.005em}

/* ---- article page: 18px text, strong contrast, a photo that leaves room for the story ---- */
.pt-plus .article-body p,.pt-plus .article-body li{font-size:18.5px;line-height:1.8;color:var(--ink)}
@media(max-width:760px){
  .pt-plus .article-body p,.pt-plus .article-body li{font-size:18px;line-height:1.78}
  .pt-plus main figure img,.pt-plus main .k-figure img{max-height:46vh;width:100%;object-fit:cover;object-position:50% 28%}
}

/* ---- photos: one clean frame per skin, crops that keep faces (upper third) ---- */
.pt-plus .pt-center .nf-ph img,.pt-plus .pt-vfig img,.pt-plus .pt-ws img,.pt-plus .pt-rail .nf-ph img{object-position:50% 30%}
.pt-plus.pt-sk-img-polaroid .pt-center .nf-ph-mid::before,.pt-plus.pt-sk-img-polaroid .pt-center .nf-ph-lead::before{display:none}
.pt-plus.pt-sk-img-polaroid .pt-center .nf-mid .nf-ph-mid,.pt-plus.pt-sk-img-polaroid .pt-fcard .pt-yt,
.pt-plus.pt-sk-img-tilt .pt-center .nf-ph-mid,.pt-plus.pt-sk-img-tilt .pt-center .nf-ph-lead,.pt-plus.pt-sk-img-tilt .pt-fcard .pt-yt,.pt-plus.pt-sk-img-tilt .pt-ws{transform:none !important}
.pt-plus.pt-sk-img-brutal .pt-center .nf-ph,.pt-plus.pt-sk-img-brutal .pt-fcard .pt-yt,.pt-plus.pt-sk-img-brutal .pt-vfig,.pt-plus.pt-sk-img-brutal .pt-ws{border:0;border-radius:10px;box-shadow:inset 0 -5px 0 var(--acc),0 8px 20px #0000001f}
.pt-plus.pt-sk-img-brutal .pt-center .nf-ph-thumb{box-shadow:inset 0 -3px 0 var(--acc)}
.pt-plus .nf-ph{background:color-mix(in srgb,var(--acc) 10%,var(--card))}

/* ---- video and themed-video rows: whole cards only, no half card at the edge on desktop ---- */
@media(min-width:900px){
  .pt-plus .pt-vrow,.pt-plus .pt-frow{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-columns:auto;overflow:visible}
  .pt-plus .pt-vrow>:nth-child(n+7),.pt-plus .pt-frow>:nth-child(n+7){display:none}
  .pt-plus.pt-L-feed .pt-vrow,.pt-plus .pt-norail .pt-vrow{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.pt-plus .pt-vh,.pt-plus .pt-fh{font-size:16px;line-height:1.45}
.pt-plus .pt-vrow:empty{display:none}

/* ---- widgets: headings and their links never run into each other ---- */
.pt-plus .pt-rail .k-sh{flex-wrap:wrap;row-gap:4px;align-items:center}
.pt-plus .pt-rail .k-sh .k-shh{min-width:0;flex:1 1 auto}
.pt-plus .pt-rail .k-sh .k-more{white-space:nowrap;margin-left:auto}

/* ---- phones: the tab bar slides in once the reader scrolls (portalplus.js), so it never covers the first screen ---- */
@media(max-width:760px){
  .pt-plus .pt-tabs{transition:transform .25s ease,visibility .25s}
  .pt-plus.ptp-js:not(.ptp-scrolled) .pt-tabs{transform:translateY(110%);visibility:hidden;box-shadow:none}
  .pt-plus .pt-under-row:has(>:only-child){grid-template-columns:1fr}
}
@media(min-width:761px){
  .pt-plus .pt-under-row:has(>:only-child){grid-template-columns:1fr}
  .pt-plus .pt-under-row>.nf-mid:only-child:not(.nf-noimg){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:18px;align-items:start}
}

/* ---- section heads: a filled head (slash, pill, tab, stamp) keeps light text inside a light video block ---- */
.pt-plus.pt-sk-v-light .pt-video .k-sh .k-shh{color:var(--ink)}
.pt-plus.pt-sk-h-slash.pt-sk-v-light .pt-video .k-sh .k-shh{color:var(--bg,#fff)}
.pt-plus.pt-sk-h-pill .pt-video .k-sh .k-shh,.pt-plus.pt-sk-h-tab .pt-video .k-sh .k-shh{color:var(--on-acc,#fff)}
.pt-plus.pt-sk-h-stamp .pt-video .k-sh .k-shh{color:var(--acc)}

/* ---- phone first screen: the lead photo, its headline and two related headlines (instead of a lone headline) ---- */
@media(max-width:760px){
  .pt-plus .pt-center .nf-lead .nf-rel{display:block;margin-top:10px}
  .pt-plus .pt-center .nf-lead .nf-rel li:nth-child(n+3){display:none}
  .pt-plus .pt-center .nf-lead-tab{display:flex;flex-direction:column}
  .pt-plus .pt-center .nf-lead-tab>.nf-ph{order:-1;margin-bottom:12px}
}
.pt-plus .pt-tab-row:empty,.pt-plus .pt-under-row:empty,.pt-plus .pt-hero-row:empty{display:none}
/* tabloid lead: the photo spans its column (it sat at two-thirds width beside an empty strip) */
.pt-plus .pt-tab-lead .nf-ph-lead{width:100%;max-height:none;aspect-ratio:16/9;display:block}
.pt-plus .pt-tab-lead .nf-ph-lead img{width:100%;height:100%;object-fit:cover}
/* a lead block whose side column came out empty spans the full width: photo beside its headline */
.pt-plus .pt-top:has(>.pt-top-side:empty){grid-template-columns:minmax(0,1fr)}
.pt-plus .pt-top>.pt-top-side:empty{display:none}

/* ---- web/photo stories: whole cards on desktop, captions on a firm dark band (critic: cramped white text over busy photos) ---- */
@media(min-width:900px){
  .pt-plus .pt-ws-row{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-columns:auto;overflow:visible}
  .pt-plus .pt-ws-row>:nth-child(n+5){display:none}
  .pt-plus .pt-ws-row .pt-ws{aspect-ratio:3/4}
}
.pt-plus .pt-ws::after{background:linear-gradient(transparent 30%,#000000b3 58%,#000000f2)}
.pt-plus .pt-ws b{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font-size:15.5px;text-shadow:0 1px 2px #000}

/* ---- no English source line under the air-quality box (owner: no source labels on pages) ---- */
.pt-plus .pt-aqi .p-note{display:none}
/* very long lead headlines (as issued) get a calmer size so the lead keeps its photo and summary on screen */
.pt-plus .nf-lead.ptp-long .nf-lh{font-size:clamp(23px,2.3vw,31px);line-height:1.28}
@media(max-width:760px){.pt-plus .nf-lead.ptp-long .nf-lh{font-size:20px;line-height:1.36}}

/* ---- rail "ticket" skin: a solid accent edge instead of a dashed one (critic: dashed dividers look unfinished) ---- */
.pt-plus.pt-sk-w-ticket .pt-rail .pt-box,.pt-plus.pt-sk-w-ticket .pt-rail .p-box{border-left-style:solid}

/* ---- district hub: cards flow in columns, so a short card never leaves a hole beside a tall one ---- */
@media(min-width:761px){
  .pt-plus .pt-dcards{display:block;columns:2;column-gap:12px}
  .pt-plus .pt-dcards>.pt-dcard{break-inside:avoid;margin:0 0 12px}
}
.pt-plus .pt-dcard li{font-size:15px}
.pt-plus .pt-hub-map text{font-weight:700}

/* ---- phone: the side lists beside the lead show their first four items, so photo stories follow sooner ---- */
@media(max-width:760px){
  .pt-plus .pt-top-side.pt-tl-side li:nth-child(n+5),.pt-plus .pt-trendlist li:nth-child(n+5){display:none}
}

/* ---- phone: no blank band between the lead's headlines and the next stories ---- */
@media(max-width:760px){.pt-plus .pt-top{gap:4px}}

/* ---- story thumbnails big enough to show a face (critic: tiny, muddy thumbnails) ---- */
.pt-plus .pt-center .nf-row .nf-ph-thumb{width:132px;flex-basis:132px}
.pt-plus.pt-L-leftmenu .pt-top-side .nf-ph-thumb{width:112px;flex-basis:112px}
@media(max-width:760px){.pt-plus .pt-center .nf-row .nf-ph-thumb{width:116px;flex-basis:116px}}

/* ---- desktop video/fun rows: no lone card stranded on a second row ---- */
@media(min-width:900px){
  .pt-plus .pt-vrow>:nth-child(3n+1):nth-child(n+4):last-child,
  .pt-plus .pt-vrow>:nth-child(3n+1):nth-child(n+4):nth-last-child(2),.pt-plus .pt-vrow>:nth-child(3n+2):nth-child(n+5):last-child,
  .pt-plus .pt-frow>:nth-child(3n+1):nth-child(n+4):last-child,
  .pt-plus .pt-frow>:nth-child(3n+1):nth-child(n+4):nth-last-child(2),.pt-plus .pt-frow>:nth-child(3n+2):nth-child(n+5):last-child{display:none}
}

/* ---- first screen: only strong photos up top, so a row with one or two of them lets each card grow ---- */
.pt-plus .pt-hero-row,.pt-plus .pt-tab-row{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.pt-plus .pt-top-side .nf-row.nf-noimg{padding-top:10px;padding-bottom:10px}
.pt-plus .pt-top-side .nf-row.nf-noimg .nf-h-sm{font-size:17px}

/* ---- dark video blocks: a filled slash head stands out in the accent colour, card text readable on dark ---- */
.pt-plus.pt-sk-h-slash:not(.pt-sk-v-light) .pt-video .k-sh .k-shh{background:var(--acc);color:var(--on-acc,#fff)}
.pt-plus.pt-sk-h-slash:not(.pt-sk-v-light) .pt-video .k-sh .k-shh .pt-i{color:var(--on-acc,#fff)}
.pt-plus.pt-sk-h-slash:not(.pt-sk-v-light) .pt-video .k-sh{border-bottom-color:var(--acc)}
.pt-plus:not(.pt-sk-v-light) .pt-video .pt-vch,.pt-plus:not(.pt-sk-v-light) .pt-video .pt-vch time,.pt-plus:not(.pt-sk-v-light) .pt-video .pt-vd{color:#e7e2d8;font-size:13.5px}
.pt-plus:not(.pt-sk-v-light) .pt-fun .pt-fch{font-size:13.5px}

/* ---- identity: a second desi accent (--ptp-acc2, per site in site_fixes) used deliberately beside the brand colour ---- */
.pt-plus .pt-nav{box-shadow:inset 0 -4px 0 var(--ptp-acc2,var(--acc3))}
.pt-plus .nf-rank,.pt-plus .pt-trendlist .pt-n{color:var(--ptp-acc2,var(--acc))}
.pt-plus .pt-center .nf-kick{display:inline-block;padding-left:8px;border-left:3px solid var(--ptp-acc2,var(--acc3))}
.pt-plus .nf-lead-tab .nf-kick,.pt-plus .nf-tab .nf-kick{border-left:0;padding-left:8px}
.pt-plus .pt-rail .pt-box,.pt-plus .pt-rail .p-box{border-top:4px solid var(--ptp-acc2,var(--acc3))}
.pt-plus.pt-sk-w-block .pt-rail .pt-box,.pt-plus.pt-sk-w-block .pt-rail .p-box{border-top-color:var(--ptp-acc2,var(--acc3))}
.pt-plus .pt-chips a:hover,.pt-plus .pt-trend-in a:hover{border-color:var(--ptp-acc2,var(--acc3))}
.pt-plus .pt-tl-dot{background:var(--ptp-acc2,var(--red))}

/* ---- clarity: section boxes flow in two columns, so a short box never leaves a hole beside a tall one ---- */
@media(min-width:761px){
  .pt-plus .pt-boxes{display:block;columns:2;column-gap:22px}
  .pt-plus .pt-boxes>.pt-sbox{break-inside:avoid;display:block;margin:0 0 22px}
}

/* ---- small rail text: forecast temperatures, dates and notes at 13px+ in full ink ---- */
.pt-plus .pt-rail .p-wx-days li,.pt-plus .pt-rail .p-wx-days span,.pt-plus .pt-rail .p-wx-hl span{font-size:13px;color:var(--ink)}
.pt-plus .pt-rail time{font-size:13px}

/* ---- phone section strip: a soft fade at the right edge says it scrolls ---- */
@media(max-width:760px){
  .pt-plus .pt-nav{position:relative}
  .pt-plus .pt-nav::after{content:"";position:absolute;top:0;right:0;bottom:4px;width:34px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--nav-bg,var(--acc)))}
}

/* ---- section labels sit straight (critic: tilted sticker labels read as a scrapbook) ---- */
.pt-plus.pt-sk-h-stamp .pt-main .k-shh{transform:none}
@media(max-width:760px){.pt-plus .pt-trendlist li:nth-child(n+4){display:none}}
@media(max-width:760px){.pt-plus .pt-under-row{grid-template-columns:minmax(0,1fr)}}

/* ---- "board" game skin: the cards keep their own colour gradients (inline), so their text must be light ---- */
.pt-plus.pt-sk-g-board .pt-game-row a:nth-child(n),.pt-plus.pt-sk-g-board .pt-game-row a:nth-child(n) b,.pt-plus.pt-sk-g-board .pt-game-row a:nth-child(n) small{color:#fff;text-shadow:0 1px 2px #0008}