/* ============================================================================
   Varahi9 Media — the public news home (varahi9media.com).

   MOBILE FIRST. Below 1024 px the page is an app (phones AND small tablets):
   the ink bar with Dailyhunt's section strip under it, Dailyhunt's story card
   and reading view (measured on an iPhone at 440 pt; the numbers are in
   references/eenadu-ntnews-dailyhunt-teardown.md), the approved floating tab
   bar and bottom-sheet menu. From 1024 px: a newspaper front page in the
   Eenadu / NT News grammar — utility strip, masthead, red section bar, hero
   slider + stacks, a Latest column, a right rail, 3-column section blocks.

   Colours are Varahi9's (Newsroom Ink: ink #14151A, accent #B72E2F). No
   reference site's logo, icon, colour or text is used.

   NO INLINE STYLE ANYWHERE: the apex CSP is style-src 'self'. State lives in
   attributes (data-theme, data-ts, aria-current, hidden).
   ========================================================================== */

:root{
  --ink:#14151A; --ink-2:#22242B; --ink-text:#FFFFFF; --ink-muted:#A8A29C;
  --accent:#B72E2F; --accent-dark:#962425; --accent-text:#A3282A; --accent-quiet:#F7E7E6; --on-accent:#FFFFFF;
  --page:#FFFFFF; --bg:#F5F3F1; --surface:#FFFFFF; --sunken:#F1EEEA;
  --border:#E4DED8; --border-subtle:#EEE9E4;
  --text:#1B1C20; --text-2:#5E5852; --text-3:#756E68;
  --chip-on:#14151A; --chip-on-text:#FFFFFF;
  --shadow-card:0 1px 3px rgba(20,21,26,.12);
  --shadow-pop:0 24px 60px -20px rgba(20,21,26,.35);
  --tabbar-h:64px; --gap:12px;
  --font:"Noto Sans Telugu","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --ink:#0B0C0F; --ink-2:#1F2127; --ink-text:#F3F1EE; --ink-muted:#A8A29C;
  --accent:#C8393B; --accent-dark:#A92E30; --accent-text:#F07A7C; --accent-quiet:rgba(240,122,124,.14); --on-accent:#FFFFFF;
  --page:#16171B; --bg:#0F1013; --surface:#1D1E23; --sunken:#24262C;
  --border:#33353D; --border-subtle:#2A2C33;
  --text:#ECEAE6; --text-2:#B4AEA8; --text-3:#9A948E;
  --chip-on:#ECEAE6; --chip-on-text:#14151A;
  --shadow-card:0 1px 3px rgba(0,0,0,.5);
  --shadow-pop:0 24px 60px -20px rgba(0,0,0,.75);
  color-scheme:dark;
}
/* Scripts beyond Telugu and Latin come from the system (Kohinoor / Sangam
   on iOS, Noto on Android, Nirmala on Windows): the font list falls through
   to them glyph by glyph. Urdu gets a Naskh face for the interface and
   taller lines; Nastaliq is kept for reading text. */
:lang(ur){font-family:"Noto Naskh Arabic","Geeza Pro","Segoe UI",system-ui,sans-serif}
/* A story in another language inside an Urdu interface keeps its own face. */
:lang(ur) [lang]:not(:lang(ur)){font-family:var(--font)}
.card__h:lang(ur),.art__body:lang(ur),.art__h1:lang(ur){font-family:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Noto Naskh Arabic",serif;line-height:2.1}
/* Text size (Settings › Text size): reading text is set in rem, chrome in px. */
html{font-size:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html[data-ts="s"]{font-size:93.75%}
html[data-ts="l"]{font-size:112.5%}
html[data-ts="xl"]{font-size:125%}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--page);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  padding-bottom:calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom))}
body.locked{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
/* height:auto: a picture's width/height attributes reserve its box (no
   layout shift) without overriding a class's aspect-ratio or fixed size. */
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}
[hidden]{display:none!important}
svg{flex:none}
.sp{flex:1}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Hidden by clipping, not by a far-off position: in a right-to-left page an
   element at left:-9999px becomes 10 000 px of sideways scroll. */
.skip{position:absolute;top:8px;inset-inline-start:8px;z-index:100;padding:12px 18px;background:var(--accent);color:#fff;font-weight:700;
  clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.skip:focus{clip-path:none;width:auto;height:auto;overflow:visible}
img,svg image{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

.only-desk{display:none!important}
.dh,.dnav,.dfab{display:none}
/* The story's card is a box on the desktop only: on the phone its children
   stay in the reading view's own column, exactly as before. */
.art__card{display:contents}

/* ── shared parts ─────────────────────────────────────────────────────── */
.badge{position:absolute;top:-6px;inset-inline-end:-9px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--accent);color:#fff;font:700 11px/18px "Inter",system-ui,sans-serif;text-align:center;border:2px solid var(--surface)}
.soon{flex:none;display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;background:var(--sunken);
  color:var(--text-3);font-size:11px;font-weight:700;line-height:1;white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:12px;
  border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:14.5px;font-weight:700;white-space:nowrap}
.btn--primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn--primary:hover{background:var(--accent-dark)}
.btn--sm{min-height:36px;padding:0 14px;border-radius:10px;font-size:13.5px}
.btn:disabled{opacity:.5;cursor:default}
.av{position:relative;flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;overflow:hidden;
  background:linear-gradient(135deg,#B72E2F,#6E1718);color:#fff;font:700 13px "Inter",system-ui,sans-serif}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.av--lg{width:52px;height:52px;font-size:17px}
.chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;background:var(--sunken);font-size:11.5px;font-weight:600;color:var(--text-2)}
.chip--role{background:var(--accent-quiet);color:var(--accent-text)}
.kick{display:inline-block;color:var(--accent-text);font-size:13px;font-weight:700}
.meta{display:block;color:var(--text-3);font-size:12px;line-height:1.5}
/* THE RING (Founder, 2026-10-27): every wait on the site shows it — never a
   skeleton — once the wait passes 150 ms (site.js RING_AFTER; spin--late
   does the same in CSS for a ring that is drawn at once). It sits in the
   middle of whatever is waiting, or inside the button that is. */
.spin{display:inline-block;flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--border);border-top-color:var(--accent);animation:spin .8s linear infinite}
.spin--lg{width:32px;height:32px;border-width:3px}
.spin--ink{border-color:rgba(255,255,255,.22);border-top-color:#fff}
.spin--late{opacity:0;animation:spin .8s linear infinite,ring-late .01s linear .15s forwards}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ring-late{to{opacity:1}}
.ringwrap{display:flex;align-items:center;justify-content:center;min-height:min(60vh,520px);padding:24px}
.ringwrap--sm{min-height:0;padding:0}
.ringwrap--sheet{min-height:220px}
/* A button that waits keeps its label, unseen, so its width never changes. */
.btn[aria-busy="true"]{opacity:1;cursor:progress}
.btn.is-ring{position:relative;color:transparent}
.btn.is-ring > .spin{position:absolute;inset:0;margin:auto}
.btn--primary.is-ring > .spin{border-color:rgba(255,255,255,.35);border-top-color:#fff}
/* Leaving for another page: a ring in the middle of the screen. */
.navring{position:fixed;z-index:95;left:50%;top:50%;display:grid;place-items:center;width:64px;height:64px;margin:-32px 0 0 -32px;
  border-radius:18px;background:var(--surface);box-shadow:var(--shadow-pop);pointer-events:none}
.toast{position:fixed;z-index:90;left:50%;bottom:calc(var(--tabbar-h) + 36px + env(safe-area-inset-bottom));transform:translateX(-50%);
  padding:10px 16px;border-radius:12px;background:var(--ink);color:#fff;font-size:14px;font-weight:600;box-shadow:var(--shadow-pop)}

/* ═══ PHONE: the bar (66 px, Dailyhunt) + the section strip (51 px) ═══ */
.mbar{position:sticky;top:0;z-index:40}
.mbar__top{display:flex;align-items:center;gap:8px;height:calc(66px + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) calc(12px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));
  background:var(--ink);color:var(--ink-text)}
.mbar__brand{display:flex;align-items:center;gap:10px;min-width:0}
.mbar__logo{width:36px;height:36px;border-radius:50%}
.mbar__name{display:flex;flex-direction:column;line-height:1.1;font-family:"Inter",var(--font)}
.mbar__name b{font-size:18px;letter-spacing:-.01em}
.mbar__name span{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
html:not([lang="en"]) .mbar__name span{letter-spacing:0;font-size:12px;text-transform:none}
.mbar__acts{display:flex;align-items:center;gap:8px}
.mbtn{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);color:var(--ink-text)}
.mbtn .badge{border-color:var(--ink)}
.mme{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:2px solid var(--accent)}
.mme--wait{border-color:rgba(255,255,255,.18)}
.mme--wait .spin{width:22px;height:22px}
.msign{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:18px;border:1px solid rgba(255,255,255,.35);
  color:var(--ink-text);font-size:13.5px;font-weight:700;white-space:nowrap}

.tabs{display:flex;align-items:stretch;gap:20px;height:51px;padding-block:0;padding-inline:calc(20px + env(safe-area-inset-left)) 0;
  background:var(--page);border-bottom:1px solid var(--border);overflow:hidden}
.tab{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;padding:10px 0;
  color:var(--text-2);font-size:14px;line-height:22.4px;white-space:nowrap}
.tab[aria-current="page"]{color:var(--accent-text);font-weight:600}
.tab[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px 2px 0 0;background:var(--accent)}
.tab--more{margin-inline-start:auto;padding-inline-end:calc(16px + env(safe-area-inset-right));padding-inline-start:12px;
  background:linear-gradient(90deg,transparent,var(--page) 12px)}
.tab--more[aria-current="page"]::after{inset-inline-start:12px;inset-inline-end:16px}

/* ═══ PHONE: the feed and the story card (Dailyhunt anatomy) ═══
   gutter 20 · image full width at its own ratio, square corners · 20 · the
   headline 20/32 bold, 3 lines at most · 20 · the source row (12/20, ✓,
   • time; WhatsApp and ⋮ at 22×26, 12 apart) · 10 · a 1 px hairline · 20 */
.main{min-height:60vh}
.view{display:block}
.feed{padding:0 calc(20px + env(safe-area-inset-right)) 0 calc(20px + env(safe-area-inset-left))}
.card{padding:20px 0 10px;border-bottom:1px solid var(--border)}
.feed > .card:first-child{padding-top:0}
.card__link{display:block}
.card__img{display:block;width:100%;height:auto;background:var(--sunken);margin:0 0 20px}
/* A picture the API sent without its size still gets its box before it
   loads (16:9), so nothing below it jumps. */
.card__img:not([height]){aspect-ratio:16/9;object-fit:cover}
.card__h{margin:0;font-size:1.25rem;line-height:2rem;font-weight:700;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.feed > .card:first-child .card__link > .card__h:first-child{padding-top:20px}
.src{display:flex;align-items:center;min-height:26px;margin-top:20px;font-size:12px;line-height:20px;color:var(--text-3);min-width:0}
.src__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:"Inter",var(--font)}
.src__logo{flex:none;width:20px;height:20px;border-radius:50%;margin-inline-end:6px}
.vf{flex:none;display:inline-grid;place-items:center;width:12px;height:12px;margin-inline-start:5px;border-radius:50%;background:var(--accent);color:#fff}
.vf svg{stroke-width:3.5}
.src__dot{margin:0 6px 0 7px}
.src__time{white-space:nowrap}
.src__acts{margin-inline-start:auto;display:flex;align-items:center;gap:12px;padding-inline-start:12px}
.src__btn{display:grid;place-items:center;width:22px;height:26px;color:var(--text)}
.morebtn{display:flex;margin:20px auto 0;min-width:200px}
/* Skeleton while the newsroom answers (same rhythm as a card). */

/* The official channels. */
.blockh{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);margin:0 0 10px}
html:not([lang="en"]) .blockh{letter-spacing:0;font-size:15px;text-transform:none}
.chans__list{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.chan{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 14px;min-width:0}
.chan + .chan{border-top:1px solid var(--border-subtle)}
.chan__ico{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--sunken);color:var(--text-2)}
.chan__ico--yt{background:#E62117;color:#fff}
.chan__ico--ig{background:linear-gradient(45deg,#F9A825,#E1306C 55%,#7B3FE4);color:#fff}
.chan__ico--fb{background:#1877F2;color:#fff}
.chan__ico--x{background:#14151A;color:#fff}
:root[data-theme="dark"] .chan__ico--x{background:#fff;color:#14151A}
.chan__name{min-width:0;font-weight:700;font-size:14.5px;line-height:1.3}
.chan__handle{flex:0 1 auto;min-width:0;direction:ltr;unicode-bidi:isolate;color:var(--text-3);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:"Inter",var(--font)}
.chan__go{margin-inline-start:auto;color:var(--text-3)}

/* A deliberate empty page. */
.home{display:flex;flex-direction:column;gap:20px;padding:20px calc(20px + env(safe-area-inset-right)) 0 calc(20px + env(safe-area-inset-left))}
.home__main,.home__rail{display:flex;flex-direction:column;gap:16px;min-width:0}
.empty{display:flex;flex-direction:column;align-items:center;gap:14px;padding:40px 20px;text-align:center;
  background:var(--surface);border:1px solid var(--border);border-radius:16px}
.empty__ico{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--accent-quiet);color:var(--accent-text)}
.empty__t{max-width:30ch;font-size:1rem;line-height:1.7;font-weight:600;color:var(--text-2)}
.sech{padding:20px 20px 0;font-size:1.375rem;line-height:1.45;font-weight:800}
.home > .sech{padding:0}

/* ═══ ADVERTISEMENT POSITIONS (Founder, 2026-10-27) — one component:
   <aside class="ad ad--KIND" data-slot data-size>, its box reserved at its
   size (nothing moves when an advertisement arrives), labelled
   "Advertisement". Until an ad network is approved every position shows our
   house card (.hz), "Advertise with Varahi9 Media", a mailto to support@.
   Phone: Dailyhunt's panel, measured — a grey panel, the label centred
   over a 300×250 creative; in the feed after a card's hairline, in a story
   after the first paragraph, 32 above and below. ═══ */
.ad{position:relative;display:block;margin-inline:auto;color:var(--text-3)}
.ad__label{display:block;font:600 10.5px/16px "Inter",var(--font);letter-spacing:.12em;text-transform:uppercase;text-align:center;color:var(--text-3)}
html:not([lang="en"]) .ad__label{letter-spacing:0;text-transform:none;font-size:11.5px}
/* QUIET BY DESIGN (Founder review, 2026-10-27): a house card sits where an
   advert will go, so it must read like an advert space, not like news. Solid
   red cards in every slot outshouted the stories; Eenadu's empty positions are
   pale panels. Pale panel, ink text, one outlined red button. */
.hz{display:flex;align-items:center;gap:12px;width:100%;height:100%;padding:12px 16px;border-radius:6px;overflow:hidden;
  background:var(--sunken);border:1px solid var(--border-subtle);color:var(--text);text-align:start;text-decoration:none}
.hz--ink{background:var(--surface);border-color:var(--border)}
/* A position inside a story's text keeps its own colours (not the body's link style). */
.ad .hz{color:var(--text);text-decoration:none;text-align:inherit}
.ad--feed .hz,.ad--art .hz{text-align:center}
.hz__logo{flex:none;width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--border)}
.hz__txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.hz__t{font:800 16px/1.25 "Inter",var(--font);letter-spacing:-.01em}
.hz__s{font-size:12.5px;line-height:1.45;color:var(--text-2)}
.hz__cta{flex:none;display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 14px;border-radius:16px;
  background:transparent;border:1px solid var(--accent);color:var(--accent-text);font-size:13px;font-weight:700;white-space:nowrap}
.hz--ink .hz__cta{background:transparent;color:var(--accent-text)}
.hz:hover .hz__cta{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.ad--feed,.ad--art{clear:both;width:348px;max-width:100%;padding:6px 24px 24px;background:var(--sunken)}
.ad--feed{margin:10px auto 0}
.ad--art{width:320px;padding:6px 10px 10px;margin:32px auto}
.ad--feed .ad__label,.ad--art .ad__label{margin-bottom:6px}
.ad--feed .hz,.ad--art .hz{width:300px;max-width:100%;height:250px;margin-inline:auto;flex-direction:column;justify-content:center;gap:12px;padding:20px;text-align:center}
.ad--feed .hz__logo,.ad--art .hz__logo{width:60px;height:60px}
.ad--feed .hz__txt,.ad--art .hz__txt{flex:0 0 auto;align-items:center}
.ad--feed .hz__t,.ad--art .hz__t{font-size:19px}
.ad--lb,.ad--strip,.ad--mid,.ad--r80,.ad--mrec,.ad--r136,.ad--skin{display:none}

/* ═══ PHONE: the reading view (Dailyhunt) ═══
   top bar 67 · breadcrumb 12/20 · hero full bleed · the headline box (2 px
   rule, 10 padding, 20 from each edge) rising 42 px over the picture's foot,
   headline 24/36 bold, source row 12/20 · 25 · body 16 px, paragraphs 16
   apart · share row · more stories (gutter 16, headline 18 semibold). */
body[data-view="story"] .mbar{display:none}
.art__top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:18px;height:calc(67px + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) calc(16px + env(safe-area-inset-right)) 0 calc(10px + env(safe-area-inset-left));
  background:var(--page);border-bottom:1px solid var(--border)}
.art__tbtn{display:grid;place-items:center;width:36px;height:40px;color:var(--text)}
.art{display:flex;flex-direction:column}
.art__crumbs{display:block;padding:19px 20px 20px;font-size:12px;line-height:20px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.art__crumbs a{text-decoration:underline;text-underline-offset:2px}
.art__hero{margin:0}
.art__hero img{width:100%;height:auto;background:var(--sunken)}
.art__hero img:not([height]){aspect-ratio:16/9;object-fit:contain}
.art__box{position:relative;margin:-42px 20px 0;padding:10px;border:2px solid var(--text);background:var(--page)}
.art__box--flat{margin-top:0}
.art__h1{margin:0 0 12px;font-size:1.5rem;line-height:1.5;font-weight:700}
.art__src{display:flex;align-items:center;flex-wrap:wrap;font-size:12px;line-height:20px;color:var(--text-2)}
.art__body{padding:25px 20px 0;font-size:1rem;line-height:1.7}
.art__body:lang(en){line-height:1.6}
.art__body p,.art__body ul,.art__body ol,.art__body blockquote,.art__body figure{margin:0 0 16px}
.art__body h2,.art__body h3{margin:24px 0 10px;font-size:1.125rem;line-height:1.5}
.art__body ul,.art__body ol{padding-inline-start:22px}
.art__body ul{list-style:disc}
.art__body ol{list-style:decimal}
.art__body li + li{margin-top:6px}
.art__body a{color:var(--accent-text);text-decoration:underline}
.art__body img{width:100%;height:auto}
.art__body figcaption{font-size:12px;color:var(--text-3);margin-top:6px}
.art__body blockquote{padding-inline-start:14px;border-inline-start:3px solid var(--accent);color:var(--text-2)}
.art__lede{font-weight:500}
.dropcap{float:left;margin-block:6px 0;margin-inline:0 10px;font-size:3.5rem;line-height:.95;font-weight:700;color:var(--text)}
.art__kp{clear:both;padding:14px 16px;border-radius:12px;background:var(--sunken)}
.art__kp h2{margin:0 0 8px;font-size:.9375rem}
.art__note{clear:both;padding:12px 14px;border-radius:12px;background:var(--sunken);color:var(--text-2);font-size:.875rem;line-height:1.6}
.art__note--fix{background:var(--accent-quiet);color:var(--text)}
.art__end{clear:both;padding:8px 20px 0}
.share{display:flex;align-items:center;gap:10px}
.share__b{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--border);color:var(--text-2)}
.share__b--wa{background:#1DA851;border-color:#1DA851;color:#fff}
.art__rel{padding-top:28px}
.art__rel > .blockh{padding:0 16px}
.art__rel .feed{padding:0 16px}
.card--rel .card__h{font-size:1.125rem;line-height:1.45;font-weight:600}

/* ═══ PHONE: tab bar (approved: floating, max 560 px, centred) ═══ */
.tabbar{position:fixed;z-index:30;left:var(--gap);right:var(--gap);bottom:calc(var(--gap) + env(safe-area-inset-bottom));
  max-width:560px;margin-inline:auto;display:flex;height:var(--tabbar-h);padding:0 6px;
  background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:0 10px 30px -10px rgba(20,21,26,.3)}
.tb{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;color:var(--text-2)}
.tb__ico{position:relative;display:grid}
/* A long label (Tamil, Malayalam) takes a second line rather than an ellipsis. */
.tb__l{max-width:100%;font-size:11px;font-weight:600;line-height:1.2;text-align:center;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tb[aria-current="page"]{color:var(--accent-text)}
.tb.is-soon{color:var(--text-3)}
.tb.is-soon .tb__ico,.tb.is-soon .tb__l{opacity:.55}
.tb__soon{position:absolute;top:5px;inset-inline-start:50%;margin-inline-start:4px;padding:1px 5px;border-radius:999px;background:var(--sunken);
  color:var(--text-2);font-size:9.5px;font-weight:700;line-height:1.35;white-space:nowrap}

/* ═══ SHEET (phone menu, More list, story options) ═══ */
.sheet{position:fixed;inset:0;z-index:60}
.sheet__scrim{position:absolute;inset:0;background:rgba(20,21,26,.5)}
.sheet__panel{position:absolute;left:0;right:0;bottom:0;max-width:640px;margin-inline:auto;max-height:88vh;overflow:auto;overscroll-behavior:contain;
  padding:8px calc(16px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  background:var(--bg);border-radius:22px 22px 0 0;outline:none}
.sheet__grab{width:40px;height:5px;margin:2px auto 12px;border-radius:3px;background:var(--border)}
.sheet__x{position:absolute;inset-inline-end:12px;top:10px;z-index:1;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--sunken)}

/* the menu (sheet on a phone, dropdown on a desktop) */
.menu{display:flex;flex-direction:column;gap:16px}
.menu__id{display:flex;align-items:center;gap:12px;padding:14px;padding-inline-end:44px;background:var(--surface);border:1px solid var(--border);border-radius:16px}
.drop .menu__id{padding-inline-end:14px}
.menu__who{min-width:0}
.menu__name{font-weight:700;font-size:16px}
.menu__mail{font-size:12.5px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:"Inter",var(--font)}
.menu__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.menu__auth{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-inline-end:44px}
.menu__gh{margin:0 0 6px 4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
html:not([lang="en"]) .menu__gh{letter-spacing:0;font-size:12.5px;text-transform:none}
.menu__list{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.menu__i{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:50px;padding:8px 14px;text-align:start}
.menu__i + .menu__i{border-top:1px solid var(--border-subtle)}
.menu__i:hover{background:var(--sunken)}
.menu__i.is-soon{cursor:default;color:var(--text-2)}
.menu__i.is-soon:hover{background:none}
.menu__i.is-soon .menu__ico{opacity:.6}
.menu__ico{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--sunken);color:var(--text-2)}
.menu__t{flex:1;min-width:0;font-weight:600;font-size:14.5px}
.menu__val{color:var(--text-3);font-size:13px;white-space:nowrap}
.menu__i .badge{position:static;border:0}
.menu__chev{color:var(--text-3)}
.menu__check{color:var(--accent-text)}
.menu__opt[aria-checked="true"] .menu__t{color:var(--accent-text)}
.menu__subh{display:flex;align-items:center;gap:8px;min-height:40px;padding-inline-end:44px}
.drop .menu__subh{padding-inline-end:0}
.menu__subh h3{font-size:16px}
.menu__back{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--sunken)}
.menu__out{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:14px;
  background:var(--surface);border:1px solid var(--border);color:var(--accent-text);font-weight:700}

/* ═══ THE CHOOSER BOX (More ▾): the console's pickPanel, rebuilt for the
   site — box-shaped, a tick box per option, Cancel / Apply. Width and place
   are set from script (CSSOM); rows arrive one after another. ═══ */
.pbox{position:fixed;z-index:65;display:flex;flex-direction:column;gap:4px;max-height:min(70vh,520px);padding:10px;
  background:var(--surface);border:1.5px solid var(--border);border-radius:14px;
  box-shadow:0 2px 6px rgba(20,21,26,.08),0 24px 48px -12px rgba(20,21,26,.32);animation:box-in .22s cubic-bezier(.2,.9,.3,1.15) both}
:root[data-theme="dark"] .pbox{border-color:#4A4D57}
@keyframes box-in{from{opacity:0;transform:translateY(-6px) scale(.94)}to{opacity:1;transform:none}}
.pbox__title{padding:6px 8px 8px;margin-bottom:4px;border-bottom:1px solid var(--border-subtle);
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
html:not([lang="en"]) .pbox__title{letter-spacing:0;font-size:13px;text-transform:none}
.pbox__list{display:flex;flex-direction:column;gap:2px;min-height:0;overflow:auto}
.ptick{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:0 10px;border:1px solid transparent;border-radius:10px;
  color:var(--text);font-size:14.5px;font-weight:550;text-align:start;animation:row-in .26s cubic-bezier(.2,.8,.3,1) both}
.ptick:nth-child(2){animation-delay:22ms}.ptick:nth-child(3){animation-delay:44ms}.ptick:nth-child(4){animation-delay:66ms}
.ptick:nth-child(5){animation-delay:88ms}.ptick:nth-child(n+6){animation-delay:110ms}
@keyframes row-in{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.ptick:hover{background:var(--sunken)}
.ptick[aria-checked="true"]{background:var(--accent-quiet);border-color:rgba(183,46,47,.28)}
.ptick:disabled{opacity:.55;cursor:default}
.ptick__box{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:6px;border:2px solid var(--text-3);
  background:var(--surface);color:transparent;transition:background-color .14s ease,border-color .14s ease,color .14s ease}
.ptick[aria-checked="true"] .ptick__box{background:var(--accent);border-color:var(--accent);color:#fff}
.ptick__box svg{stroke-width:2.5}
.ptick__lbl{flex:1 1 auto;min-width:0}
.pbox__foot{display:flex;gap:8px;margin-top:4px;padding:10px 2px 2px;border-top:1px solid var(--border-subtle)}
.pbox__foot .btn{flex:1 1 0}
.tab--more[aria-expanded="true"] svg{transform:rotate(180deg)}

/* ═══ LANGUAGES: Dailyhunt's button and "Select preferred languages" ═══
   Button: our drawing of a filled "अ" tile over an outlined "A" tile, 30 px,
   top right of the bar. Picker: a 2-column grid of round pills, 1.5 px outline
   in the language's colour, a 20 px filled badge with the white code, the
   name in 12 px; chosen = filled with its colour, the badge turned white
   (Dailyhunt's treatment). Colours per language come from data-lang. */
[data-lang="en"]{--lc:#5FA866}[data-lang="hi"]{--lc:#E8623F}[data-lang="mr"]{--lc:#E97D7D}[data-lang="gu"]{--lc:#7DD9BE}
[data-lang="pa"]{--lc:#E8B53F}[data-lang="bn"]{--lc:#8A2BE2}[data-lang="kn"]{--lc:#C9643B}[data-lang="ta"]{--lc:#6E9BE0}
[data-lang="te"]{--lc:#E8C27A}[data-lang="ml"]{--lc:#E39566}[data-lang="or"]{--lc:#3FA88A}[data-lang="ur"]{--lc:#5A63D9}
[data-lang="bho"]{--lc:#B5412E}[data-lang="ne"]{--lc:#D9584A}[data-lang="as"]{--lc:#8E44AD}
/* text on a filled pill: ink where white would not read */
[data-lang="en"],[data-lang="gu"],[data-lang="pa"],[data-lang="te"],[data-lang="ml"],[data-lang="mr"],[data-lang="ta"],[data-lang="or"]{--lon:#14151A}
.lbtn{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:var(--ink-text)}
.lic{display:block;overflow:visible}
.lic__back{fill:none;stroke:currentColor;stroke-width:1.6}
.lic__a{fill:currentColor;font:700 11px "Inter",system-ui,sans-serif}
.lic__front{fill:currentColor}
.lic__deva{fill:var(--ink);font:700 12px "Kohinoor Devanagari","Noto Sans Devanagari","Nirmala UI",system-ui,sans-serif}
.lbtn--mast{color:var(--text);border:1px solid var(--border);border-radius:10px;margin-inline-end:6px}
.lbtn--mast .lic__deva{fill:var(--page)}
/* The circle: the language's own letter, white on its colour. Indic
   letters sit high or low in their em box, so each script gets a small
   measured shift (--gy, in em) that puts the INK in the optical centre. */
.lbadge{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--lc,var(--accent));color:#fff;
  font:700 15px/1 var(--font);overflow:hidden}
.lbadge__g{display:block;line-height:1;white-space:nowrap;transform:translateY(var(--gy,0))}
.lbadge[data-script="latn"]{font-size:14px}
/* --gy measured from the rendered ink (canvas pixel scan, the iOS/macOS system
   fonts and our Noto Sans Telugu, 2026-10-27): positive moves the letter down. */
.lbadge[data-lang="hi"]{--gy:-0.02em}.lbadge[data-lang="mr"]{--gy:-0.02em}.lbadge[data-lang="gu"]{--gy:-0.223em}.lbadge[data-lang="pa"]{--gy:0.06em}.lbadge[data-lang="bn"]{--gy:0.02em}.lbadge[data-lang="kn"]{--gy:0.03em}.lbadge[data-lang="ta"]{--gy:-0.233em}.lbadge[data-lang="te"]{--gy:-0.01em}.lbadge[data-lang="ml"]{--gy:-0.1em}.lbadge[data-lang="or"]{--gy:0.02em}.lbadge[data-lang="ur"]{--gy:0.223em}.lbadge[data-lang="bho"]{--gy:0.12em}.lbadge[data-lang="ne"]{--gy:0.12em}.lbadge[data-lang="as"]{--gy:-0.03em}
.lp{display:flex;flex-direction:column;gap:16px;padding-top:4px}
.lp__h{padding-inline:44px;font-size:16px;font-weight:700;text-align:center;color:var(--text)}
.lp__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lp__pill{display:flex;align-items:center;gap:10px;min-width:0;height:52px;padding:0 10px 0 9px;border-radius:999px;border:1.5px solid var(--lc);
  background:transparent;color:var(--text);text-align:start;transition:background-color .15s ease,color .15s ease}
/* one height for every pill: the name block is centred whether it holds one line or two */
.lp__names{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1px}
.lp__name{font:500 13px/1.3 "Inter",system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp__native{font:400 11.5px/1.35 var(--font);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Urdu reads right to left but lines up with the English name above it:
   the side follows the page, not the span. */
.lp__native[dir="rtl"]{text-align:left}
[dir="rtl"] .lp__native[dir="rtl"]{text-align:right}
.lp__pill[aria-checked="true"] .lp__native{color:inherit;opacity:.82}
.lp__tick{display:none}
.lp__pill[aria-checked="true"]{background:var(--lc);color:var(--lon,#fff)}
.lp__pill[aria-checked="true"] .lbadge{background:#fff;color:var(--lc);box-shadow:0 0 0 1px var(--lc)}
.lp__pill[aria-checked="true"] .lp__tick{display:grid;place-items:center;margin-inline-end:4px}
.lp__pill[aria-checked="true"] .lp__tick svg{stroke-width:2.5}
.lp__pill[aria-disabled="true"]{cursor:default}
.lp__apply{width:100%}
.lpd{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:24px}
.lpd__scrim{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.lp__dialog{position:relative;width:min(560px,100%);max-height:calc(100vh - 48px);overflow:auto;padding:20px;border-radius:12px;background:var(--surface);
  animation:box-in .2s ease-out both}
.lp__x{position:absolute;top:12px;inset-inline-end:12px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:var(--text-2)}
/* "No stories in Marathi yet." — one line per empty language */
.lnotes{display:flex;flex-direction:column;gap:8px;margin:14px 0 6px;padding:12px 14px;border-radius:12px;background:var(--sunken);text-align:start}
.empty .lnotes{align-self:stretch;margin:4px 0 0}
.lnotes__i{display:flex;align-items:center;gap:10px;font-size:13.5px;line-height:1.6;color:var(--text-2)}
.lnotes .lbadge{width:24px;height:24px;font-size:11.5px}

/* ═══ SEARCH ═══ */
.srch{position:fixed;inset:0;z-index:70}
.srch__scrim{position:absolute;inset:0;background:rgba(20,21,26,.5)}
.srch__panel{position:absolute;left:0;right:0;top:0;max-height:100%;overflow:auto;background:var(--page);
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 16px env(safe-area-inset-left);border-radius:0 0 20px 20px}
.srch__bar{display:flex;align-items:center;gap:10px;height:66px;padding:0 12px 0 20px;border-bottom:1px solid var(--border);color:var(--text-3)}
.srch__in{flex:1;min-width:0;height:44px;border:0;outline:0;background:transparent;color:var(--text);font:500 16px var(--font)}
.srch__in::-webkit-search-cancel-button{display:none}
.srch__x{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--text)}
.srch__msg{display:flex;justify-content:center;padding:28px 20px;color:var(--text-2);text-align:center}
.srch__list li + li{border-top:1px solid var(--border-subtle)}
.srch__i{display:flex;flex-direction:column;gap:2px;padding:14px 20px}
.srch__t{font-size:1rem;line-height:1.55;font-weight:600}
.srch__m{font-size:12px;color:var(--text-3)}

/* ═══ TRUST PAGES (/about/, /editorial-policy/, /corrections/, /contact/,
   /grievance/): drawn by the Worker, English then Telugu, one reading column ═══ */
.page{max-width:720px;margin:0 auto;padding:24px calc(20px + env(safe-area-inset-right)) 8px calc(20px + env(safe-area-inset-left));font-size:1rem;line-height:1.7}
.page__h1{margin:0 0 14px;font-size:1.75rem;line-height:1.3;font-weight:800}
.page__h1--te{font-size:1.5rem;line-height:1.5}
.page h2{margin:28px 0 8px;font-size:1.125rem;line-height:1.45;font-weight:700}
.page p,.page ul{margin:0 0 12px}
.page ul{padding-inline-start:22px}
.page li + li{margin-top:6px}
.page a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
.page__lede{font-size:1.0625rem;color:var(--text-2)}
.page__links{list-style:none;padding:0!important}
.page__links li{padding:10px 0;border-bottom:1px solid var(--border-subtle);margin:0!important}
.page__card{margin:8px 0 12px;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.page__pair{display:grid;gap:10px}
.page__pair .page__card{margin:0}
.page__k{margin:0 0 4px!important;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
:lang(te) .page__k,.page__te .page__k{letter-spacing:0;text-transform:none;font-size:13px}
.page__v{margin:0!important;line-height:1.6}
.page a.btn{display:inline-flex;margin:4px 0 12px;color:var(--on-accent);text-decoration:none}
.page__te{margin-top:40px;padding-top:28px;border-top:2px solid var(--border);line-height:1.8}
@media (min-width:600px){ .page__pair{grid-template-columns:1fr 1fr} }

/* ═══ SEARCH PAGE (/search/?q=) ═══ */
.srch-page .srch__form{display:flex;align-items:center;gap:10px;height:52px;padding:0 14px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--text-3)}
.srch__in--page{height:48px}

/* ═══ FOOTER (phone) ═══ */
.foot{margin-top:36px;padding:28px 20px 20px;border-top:1px solid var(--border);color:var(--text-2);font-size:13px;text-align:center}
.foot__in{display:flex;flex-direction:column;align-items:center;gap:14px}
.foot__brand{display:flex;align-items:center;gap:10px;color:var(--text)}
.foot__brand img{width:40px;height:40px;border-radius:50%}
.foot__brand b{font-family:"Inter",var(--font);font-size:16px}
.foot__secs{display:none}
.foot__trust{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;font-size:13px}
.foot__trust a{text-decoration:underline;text-underline-offset:2px}
.foot__chans{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.foot__chans a{display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 6px;border-radius:50%;border:1px solid var(--border);color:var(--text-2)}
.foot__contact a{color:var(--accent-text);text-decoration:underline}
.foot__legal{color:var(--text-3);font-size:12px}

/* Narrow phones: the pill keeps its badge, then the brand keeps its mark. */
@media (max-width:359px){ .mbar__name{display:none} }

/* ═══ SMALL TABLETS (600–1023): the same app, a wider reading column ═══ */
@media (min-width:600px){
  .feed,.home,.art,.sech,.art__top{max-width:680px;margin-inline:auto}
  .art__top{max-width:none}
  .art > *,.art__rel{max-width:680px}
  .home{width:100%}
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP (1024 px and wider): Eenadu's grammar, measured on the live site
   2026-10-27 (references/eenadu-desktop-v2.md), in Varahi9's identity — our
   logo, our red wherever the reference uses its blue, our self-hosted fonts,
   our own stories. Nothing of the reference's code or assets: every value
   here was measured on the rendered page and written afresh.

   ONE COLUMN OF 1200 UNITS. The reference is drawn on a 1200 px column, and
   --d is one of its units in CSS pixels: 1px from 1248 px wide; 0.86px from
   1351 to 1459 px (the reference zooms its column to 1032 there, so the two
   sit side by side at 1440 exactly); below 1248 it shrinks with the window
   (0.81 at 1024) so nothing ever scrolls sideways — where the reference
   itself overflows by 176 px. Bars, tabs, gaps and labels are sized in --d;
   reading text in rem, and on the desktop 1 rem is 16 units, so the Text
   size setting scales the stories and nothing else.

   Telugu sizes are the reference's converted from its legacy face to Noto
   Sans Telugu by measured advance width (x 0.625: its 24 px reads as our 15).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  :root{
    --d:min(1px, calc((100vw - 48px) / 1200));
    --dshadow:0 0 calc(2 * var(--d)) rgba(20,21,26,.45);
    --nav-a:var(--accent); --nav-b:#6E1718; --nav-hi:#FFD166; --tag:#FFE37A;
  }
  :root[data-theme="dark"]{--dshadow:0 0 0 1px var(--border);--nav-b:#4A1112}
  html{font-size:calc(16 * var(--d))}
  html[data-ts="s"]{font-size:calc(15 * var(--d))}
  html[data-ts="l"]{font-size:calc(18 * var(--d))}
  html[data-ts="xl"]{font-size:calc(20 * var(--d))}
  body{padding-bottom:0;background:var(--page);font-size:calc(15 * var(--d))}
  .mbar,.tabs,.tabbar,.only-phone,.art__top{display:none!important}
  .only-desk{display:revert!important}
  .wrap{width:calc(1200 * var(--d));max-width:none;margin:0 auto;padding:0}

  /* ── the strip (28): a yellow tag, the latest headlines, search ── */
  .dh{display:block;background:var(--page)}
  .dtop{display:flex;align-items:center;gap:calc(12 * var(--d));height:calc(28 * var(--d));padding-inline-end:calc(7 * var(--d));background:var(--accent);color:#fff}
  .dtop__news{flex:1;min-width:0;display:flex;align-items:center;gap:calc(8 * var(--d));height:100%;overflow:hidden}
  .dtop__acts{flex:none;display:flex;align-items:center;gap:calc(10 * var(--d));height:100%}
  .dtop__btn{position:relative;display:grid;place-items:center;width:calc(26 * var(--d));height:calc(22 * var(--d));border-radius:calc(4 * var(--d));color:#fff}
  .dtop__btn:hover{background:rgba(255,255,255,.14)}
  .dtop__btn .badge{top:calc(-5 * var(--d));inset-inline-end:calc(-7 * var(--d));min-width:calc(15 * var(--d));height:calc(15 * var(--d));padding:0 calc(4 * var(--d));border-radius:calc(8 * var(--d));font-size:calc(9 * var(--d));line-height:calc(11 * var(--d));border-color:var(--accent)}
  .lbtn--strip{width:calc(28 * var(--d));height:calc(24 * var(--d));border-radius:calc(4 * var(--d));color:#fff}
  .lbtn--strip .lic{width:calc(22 * var(--d));height:calc(22 * var(--d))}
  .lbtn--strip .lic__deva{fill:var(--accent)}
  .dtop .dlink{color:#fff;font-size:calc(12.5 * var(--d));font-weight:700}
  .dtop .dlink:hover{color:var(--nav-hi)}
  .dpill{display:inline-flex;align-items:center;height:calc(20 * var(--d));padding:0 calc(10 * var(--d));border-radius:calc(10 * var(--d));background:#fff;color:#962425;font-size:calc(12 * var(--d));font-weight:700;white-space:nowrap}
  .dtop .dme{gap:calc(6 * var(--d));height:calc(22 * var(--d));padding:0 calc(4 * var(--d)) 0 calc(1 * var(--d));border:0;border-radius:calc(11 * var(--d));background:rgba(0,0,0,.18);color:#fff}
  .dtop .dme .av{width:calc(20 * var(--d));height:calc(20 * var(--d));font-size:calc(9 * var(--d))}
  .dtop .dme--wait{width:calc(90 * var(--d));background:rgba(0,0,0,.18)}
  .dtop .dme__who{flex-direction:row;align-items:baseline;gap:calc(6 * var(--d));max-width:calc(180 * var(--d))}
  .dtop .dme__who b{font-size:calc(12 * var(--d))}
  .dtop .dme__who span{font-size:calc(11 * var(--d));color:rgba(255,255,255,.8)}
  .dtop .drop{top:calc(26 * var(--d));z-index:60}
  .dtop__tag{flex:none;padding:0 calc(6 * var(--d));color:var(--tag);font:700 calc(13 * var(--d))/1 "Inter",var(--font);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
  html:not([lang="en"]) .dtop__tag{letter-spacing:0;text-transform:none;font-size:calc(14 * var(--d))}
  .dtop__view{flex:1;min-width:0;overflow:hidden}
  .dtop__track{display:flex;width:max-content;animation:marquee 80s linear infinite}
  .dtop:hover .dtop__track,.dtop:focus-within .dtop__track{animation-play-state:paused}
  .dtop__seq{display:flex;gap:calc(44 * var(--d));padding-inline-end:calc(44 * var(--d))}
  .dtop__i{color:#fff;font-size:calc(13 * var(--d));font-weight:700;line-height:calc(28 * var(--d));white-space:nowrap}
  .dtop__i:hover{color:var(--nav-hi)}
  .dtop__chans{display:flex;align-items:center;gap:calc(4 * var(--d))}
  .dtop__chan{display:grid;place-items:center;width:calc(24 * var(--d));height:calc(22 * var(--d));border-radius:calc(4 * var(--d));color:#fff}
  .dtop__chan:hover{color:var(--nav-hi)}
  .dtop__srch{flex:none;display:grid;place-items:center;width:calc(28 * var(--d));height:calc(21 * var(--d));border-radius:calc(5 * var(--d));background:#F7E7E6;color:#962425}
  @keyframes marquee{to{transform:translateX(-50%)}}

  /* ── masthead (100): logo + name + date · language, account · tiles ── */
  .dmast{display:flex;align-items:center;justify-content:space-between;gap:calc(12 * var(--d));height:calc(100 * var(--d))}
  .dmast__brand{display:flex;align-items:center;gap:calc(12 * var(--d));padding-inline-start:calc(5 * var(--d))}
  .dmast__logo{width:calc(60 * var(--d));height:calc(60 * var(--d));border-radius:50%}
  .dmast__name{display:flex;flex-direction:column;gap:calc(6 * var(--d))}
  .dmast__name b{font:800 calc(28 * var(--d))/1 "Inter",var(--font);letter-spacing:-.02em;color:var(--text);white-space:nowrap}
  .dmast__date{font-size:calc(12.5 * var(--d));line-height:1.3;font-weight:600;color:var(--text);white-space:nowrap}
  .dmast__acts{flex:none;display:flex;align-items:center}
  .dtiles{display:flex;flex-direction:column;gap:calc(4 * var(--d));width:calc(152 * var(--d))}
  .dtiles__box{display:flex;height:calc(52 * var(--d));border:1px solid var(--border);border-radius:calc(5 * var(--d));overflow:hidden;background:var(--surface)}
  .dtile{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(4 * var(--d));padding:0 calc(3 * var(--d));
    color:var(--text);font:700 calc(11.5 * var(--d))/1.15 "Inter",var(--font);text-align:center}
  html:not([lang="en"]) .dtile{font-size:calc(12.5 * var(--d))}
  .dtile + .dtile{border-inline-start:1px solid var(--border)}
  .dtile:hover,.dtile[aria-current="page"]{color:var(--accent-text)}
  .dtile__l{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dtiles__ep{position:relative;display:flex;align-items:center;justify-content:center;height:calc(18 * var(--d));border:1px solid var(--border);border-radius:calc(3 * var(--d));
    color:var(--text-3);font:700 calc(11.5 * var(--d))/1 "Inter",var(--font);letter-spacing:.06em;text-transform:uppercase;cursor:default}
  html:not([lang="en"]) .dtiles__ep{letter-spacing:0;text-transform:none;font-size:calc(12 * var(--d))}
  .dtiles__ep .soon{position:absolute;top:calc(-9 * var(--d));inset-inline-end:calc(-6 * var(--d));height:calc(16 * var(--d));padding:0 calc(6 * var(--d));font-size:calc(10 * var(--d))}
  .dme__wrap{position:relative}
  .dme{display:flex;align-items:center;gap:calc(10 * var(--d));height:calc(46 * var(--d));padding:0 calc(10 * var(--d)) 0 calc(5 * var(--d));border:1px solid var(--border);border-radius:calc(24 * var(--d));background:var(--surface)}
  .dme .av{width:calc(34 * var(--d));height:calc(34 * var(--d));font-size:calc(13 * var(--d))}
  .dme--wait{width:calc(150 * var(--d));justify-content:center;background:var(--sunken);border-color:transparent}
  .dme__who{display:flex;flex-direction:column;line-height:1.2;text-align:start;max-width:calc(150 * var(--d))}
  .dme__who b{font-size:calc(13.5 * var(--d))}
  .dme__who span{font-size:calc(11.5 * var(--d));color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dlink{font-weight:700;font-size:calc(14 * var(--d));color:var(--text)}
  .dlink:hover{color:var(--accent-text)}
  .drop{position:absolute;inset-inline-end:0;top:54px;z-index:50;width:360px;max-height:calc(100vh - 170px);overflow:auto;padding:12px;
    background:var(--bg);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-pop);text-align:start}
  .drop .menu{gap:12px}
  .drop .menu__i{min-height:40px;padding:6px 12px}
  .drop .menu__ico{width:28px;height:28px}
  .drop .menu__t{font-size:13.5px}
  .drop .menu__auth{padding-inline-end:0}


  /* ── advertisement positions, at the reference's measured sizes ── */
  .ad--lb,.ad--strip,.ad--mid,.ad--r80,.ad--mrec,.ad--r136{display:block}
  .ad--lb,.ad--strip,.ad--mid,.ad--r80,.ad--mrec,.ad--r136,.ad--skin{margin:0}
  .ad__label{position:absolute;top:0;inset-inline-start:0;z-index:1;padding:calc(2 * var(--d)) calc(6 * var(--d));border-end-end-radius:calc(4 * var(--d));background:var(--surface);
    color:#5E5852;font-size:calc(9 * var(--d));line-height:1.2;letter-spacing:.1em}
  html:not([lang="en"]) .ad__label{font-size:calc(10 * var(--d));letter-spacing:0}
  .ad .hz{border-radius:calc(5 * var(--d));gap:calc(12 * var(--d));padding:0 calc(16 * var(--d))}
  .ad--lb{flex:none;width:calc(728 * var(--d));height:calc(90 * var(--d))}
  .ad--lb .hz{padding:0 calc(24 * var(--d));gap:calc(16 * var(--d))}
  .ad--lb .hz__logo{width:calc(56 * var(--d));height:calc(56 * var(--d))}
  .ad--lb .hz__t{font-size:calc(21 * var(--d))}
  .ad--lb .hz__s{font-size:calc(13 * var(--d))}
  .ad--lb .hz__cta,.ad--mid .hz__cta,.ad--mrec .hz__cta,.ad--skin .hz__cta,.ad--r136 .hz__cta{height:calc(34 * var(--d));padding:0 calc(16 * var(--d));border-radius:calc(17 * var(--d));font-size:calc(13.5 * var(--d))}
  .ad--strip{width:calc(620 * var(--d));height:calc(40 * var(--d));margin-top:calc(10 * var(--d))}
  .ad--strip + .ad--strip{margin-top:calc(10 * var(--d))}
  .ad--strip .hz{padding:0 calc(12 * var(--d));gap:calc(10 * var(--d))}
  .ad--strip .hz__logo{width:calc(28 * var(--d));height:calc(28 * var(--d))}
  .ad--strip .hz__t{font-size:calc(15 * var(--d))}
  .ad--strip .hz__s{display:none}
  .ad--strip .hz__cta,.ad--r80 .hz__cta{height:calc(26 * var(--d));padding:0 calc(12 * var(--d));border-radius:calc(13 * var(--d));font-size:calc(12 * var(--d))}
  .ad--strip .ad__label,.ad--r80 .ad__label{display:none}
  .ad--mid{width:calc(885 * var(--d));height:calc(290 * var(--d))}
  .ad--mid .hz{padding:0 calc(56 * var(--d));gap:calc(36 * var(--d))}
  .ad--mid .hz__logo{width:calc(140 * var(--d));height:calc(140 * var(--d));box-shadow:0 0 0 1px var(--border)}
  .ad--mid .hz__txt{gap:calc(10 * var(--d))}
  .ad--mid .hz__t{font-size:calc(36 * var(--d))}
  .ad--mid .hz__s{font-size:calc(17 * var(--d))}
  .ad--mid .hz__cta{height:calc(46 * var(--d));padding:0 calc(24 * var(--d));border-radius:calc(23 * var(--d));font-size:calc(16 * var(--d))}
  .ad--r80{width:calc(300 * var(--d));height:calc(80 * var(--d))}
  .ad--r80 .hz{padding:0 calc(12 * var(--d));gap:calc(10 * var(--d))}
  .ad--r80 .hz__logo{width:calc(44 * var(--d));height:calc(44 * var(--d))}
  .ad--r80 .hz__t{font-size:calc(14 * var(--d))}
  .ad--r80 .hz__s{display:none}
  .ad--mrec{width:calc(300 * var(--d));height:calc(250 * var(--d))}
  .ad--mrec .hz,.ad--skin .hz,.ad--r136 .hz{flex-direction:column;justify-content:center;text-align:center;padding:calc(16 * var(--d))}
  .ad--mrec .hz__txt,.ad--skin .hz__txt,.ad--r136 .hz__txt{flex:0 0 auto;align-items:center}
  .ad--mrec .hz__logo{width:calc(64 * var(--d));height:calc(64 * var(--d))}
  .ad--mrec .hz__t{font-size:calc(20 * var(--d))}
  .ad--mrec .hz__s{font-size:calc(13 * var(--d))}
  .ad--r136{width:calc(300 * var(--d));height:calc(136 * var(--d))}
  .ad--r136 .hz{gap:calc(8 * var(--d));padding:calc(10 * var(--d)) calc(16 * var(--d))}
  .ad--r136 .hz__logo,.ad--r136 .hz__s{display:none}
  .ad--r136 .hz__t{font-size:calc(17 * var(--d))}
  .ad--skin{position:fixed;top:0;z-index:5;width:calc(120 * var(--d));height:calc(600 * var(--d))}
  .ad--skin-l{left:calc((100vw - 1200 * var(--d)) / 2 - 130 * var(--d))}
  .ad--skin-r{left:calc((100vw - 1200 * var(--d)) / 2 + 1210 * var(--d))}
  .ad--skin .hz{gap:calc(16 * var(--d));padding:calc(24 * var(--d)) calc(10 * var(--d));border-radius:0}
  .ad--skin .hz__logo{width:calc(64 * var(--d));height:calc(64 * var(--d))}
  .ad--skin .hz__t{font-size:calc(17 * var(--d))}
  .ad--skin .hz__s{font-size:calc(12.5 * var(--d))}
  .ad--skin .hz__cta{white-space:normal;height:auto;min-height:calc(34 * var(--d));padding:calc(6 * var(--d)) calc(12 * var(--d));text-align:center}

  /* ── the section bar (38, sticky): a red gradient, white rules, gold on hover ── */
  /* Transparent outside the column, so the side positions show past it;
     the 10-unit band under the bar is the column's own (a shadow). */
  .dnav{display:block;position:sticky;top:0;z-index:40;padding-bottom:calc(10 * var(--d));pointer-events:none}
  .dnav__bar{display:flex;align-items:stretch;height:calc(38 * var(--d));border-radius:calc(3 * var(--d));background:linear-gradient(var(--nav-a),var(--nav-b));color:#fff;
    pointer-events:auto;box-shadow:0 calc(10 * var(--d)) 0 var(--page)}
  .dnav__in{flex:1;min-width:0;display:flex;align-items:stretch}
  .dnav__in.is-measuring > *{flex-grow:0!important}
  .dnav__side{flex:none;display:flex;align-items:stretch}
  .dnav__a{position:relative;flex:1 0 auto;display:flex;align-items:center;justify-content:center;gap:calc(7 * var(--d));padding:0 calc(14 * var(--d));
    color:#fff;font-size:calc(15 * var(--d));font-weight:600;line-height:1;white-space:nowrap;border-inline-end:1px solid rgba(255,255,255,.9)}
  .dnav__a--home{flex:0 0 auto;width:calc(54 * var(--d));padding:0;color:var(--nav-hi)}
  .dnav__a:hover,.dnav__a[aria-current="page"],.dnav__dd:hover > .dnav__a,.dnav__dd:focus-within > .dnav__a{color:var(--nav-hi)}
  .dnav__side > :last-child,.dnav__side > :last-child > .dnav__a{border-inline-end:0}
  .dnav__dd{position:relative;flex:1 0 auto;display:flex}
  .dnav__dd > .dnav__a{flex:1 0 auto}
  .dnav__caret{width:0;height:0;border-inline:calc(5 * var(--d)) solid transparent;border-top:calc(5 * var(--d)) solid var(--nav-hi)}
  .dnav__panel{position:absolute;top:100%;inset-inline-start:0;z-index:5;display:none;grid-template-columns:repeat(2,minmax(calc(120 * var(--d)),max-content));min-width:calc(240 * var(--d));
    background:var(--nav-b);box-shadow:0 calc(12 * var(--d)) calc(24 * var(--d)) calc(-10 * var(--d)) rgba(0,0,0,.5)}
  .dnav__panel--1{grid-template-columns:minmax(calc(200 * var(--d)),auto);min-width:0}
  .dnav__dd--end > .dnav__panel{inset-inline-start:auto;inset-inline-end:0}
  .dnav__dd:hover > .dnav__panel,.dnav__dd:focus-within > .dnav__panel{display:grid}
  .dnav__pi{display:flex;align-items:center;gap:calc(8 * var(--d));height:calc(38 * var(--d));padding:0 calc(14 * var(--d));color:#fff;font-size:calc(14 * var(--d));font-weight:500;white-space:nowrap}
  .dnav__pi:hover,.dnav__pi[aria-current="page"]{color:var(--nav-hi)}
  .dnav__pi.is-soon{cursor:default;color:rgba(255,255,255,.62)}
  .dnav__pi .soon{height:calc(17 * var(--d));padding:0 calc(6 * var(--d));font-size:calc(10 * var(--d));background:rgba(255,255,255,.16);color:#fff}
  .dnav__morewrap{position:relative;flex:0 0 auto;display:flex;margin-inline-start:auto}
  .dnav__more{border-inline-start:1px solid rgba(255,255,255,.9)}

  .main{min-height:50vh}
  .view{width:calc(1200 * var(--d));max-width:none;margin:0 auto;padding:0 0 calc(40 * var(--d))}
  .home,.feed,.sech,.art{max-width:none;margin:0;padding:0}
  .sech{display:flex;align-items:center;min-height:calc(38 * var(--d));margin:0;padding:0;border:0;color:var(--accent-text);font-size:calc(21 * var(--d));line-height:1.4;font-weight:700}
  .home--empty{display:grid;grid-template-columns:calc(885 * var(--d)) calc(300 * var(--d));gap:calc(15 * var(--d));align-items:start}
  .home--empty > .sech{grid-column:1 / -1;margin-bottom:0}
  .empty{padding:calc(72 * var(--d)) calc(32 * var(--d));gap:calc(16 * var(--d));border-radius:calc(5 * var(--d))}
  .empty__ico{width:calc(76 * var(--d));height:calc(76 * var(--d))}
  .empty__t{font-size:1.125rem}
  .blockh{font-size:calc(19 * var(--d));letter-spacing:0;text-transform:none;color:var(--text);margin:0 0 calc(8 * var(--d))}
  .home__rail .chans__list,.drail .chans__list{border-radius:calc(5 * var(--d));box-shadow:var(--dshadow);border:0}
  .home__rail .chan,.drail .chan{min-height:calc(46 * var(--d));padding:calc(6 * var(--d)) calc(12 * var(--d))}
  .home__rail .chan__ico,.drail .chan__ico{width:calc(28 * var(--d));height:calc(28 * var(--d));border-radius:calc(7 * var(--d))}
  .home__rail .chan__name,.drail .chan__name{font-size:calc(13.5 * var(--d))}
  .home__rail .chan__handle,.drail .chan__handle{font-size:calc(12 * var(--d))}

  /* ── the front: main 885 (slider 620 · 12 · Latest 253) · 15 · rail 300 ── */
  .dhome{display:grid;grid-template-columns:calc(885 * var(--d)) calc(300 * var(--d));column-gap:calc(15 * var(--d));align-items:start}
  .dhome__main,.dhome__rail{min-width:0}
  .dtopgrid{display:grid;grid-template-columns:calc(620 * var(--d)) calc(253 * var(--d));column-gap:calc(12 * var(--d));align-items:start}
  .dtopgrid__lead{min-width:0}

  /* the slider: picture 620×283, caption 31, dots 24; counter 44, arrows 33×31; 20 s a slide */
  .dsl{position:relative}
  .dsl__view{position:relative;overflow:hidden}
  .dsl__track{display:flex;transition:transform .25s ease}
  .dsl__item{flex:0 0 100%;min-width:0}
  .dsl__a{display:block;color:var(--text);text-align:center}
  .dsl__img{display:block;width:100%;height:calc(283 * var(--d));object-fit:cover;background:var(--sunken)}
  .dsl__txt{display:flex;align-items:center;justify-content:center;height:calc(283 * var(--d));padding:calc(24 * var(--d)) calc(64 * var(--d));background:var(--ink);color:#fff;
    font-size:1.5rem;line-height:1.55;font-weight:700;text-align:center}
  .dsl__cap{display:block;height:calc(31 * var(--d));padding:calc(3 * var(--d)) calc(10 * var(--d)) 0;font-size:.9375rem;line-height:calc(28 * var(--d));font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dsl__count{position:absolute;top:calc(5 * var(--d));inset-inline-end:calc(5 * var(--d));display:grid;place-items:center;width:calc(44 * var(--d));height:calc(44 * var(--d));border-radius:50%;
    background:#fff;border:1px solid #14151A;color:#B72E2F;font:600 calc(15 * var(--d))/1 "Inter",system-ui,sans-serif}
  .dsl__arrow{position:absolute;top:calc(126 * var(--d));display:grid;place-items:center;width:calc(33 * var(--d));height:calc(31 * var(--d));border-radius:calc(3 * var(--d));background:rgba(189,193,195,.92);color:#14151A}
  .dsl__arrow:hover{background:#fff}
  .dsl__arrow--prev{inset-inline-start:0}
  .dsl__arrow--next{inset-inline-end:0}
  .dsl__dots{display:flex;justify-content:center;align-items:center;height:calc(24 * var(--d))}
  .dsl__dot{display:grid;place-items:center;width:calc(28 * var(--d));height:calc(20 * var(--d))}
  .dsl__dot::before{content:"";width:calc(10 * var(--d));height:calc(10 * var(--d));border-radius:calc(30 * var(--d));background:#D6D6D6;transition:width .2s ease}
  :root[data-theme="dark"] .dsl__dot::before{background:#4A4D57}
  .dsl__dot[aria-current="true"]::before{width:calc(25 * var(--d));background:var(--accent)}

  /* six thumb cards, 2 × 3: 302×91, padding 7, thumb 110×77, 15 apart */
  .dcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(15 * var(--d));margin-top:calc(6 * var(--d))}
  .dcards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dcard{min-width:0;border-radius:calc(5 * var(--d));background:var(--surface);box-shadow:var(--dshadow)}
  .dcard__a{display:flex;gap:calc(7 * var(--d));min-height:calc(91 * var(--d));padding:calc(7 * var(--d))}
  .dcard__img{flex:none;width:calc(110 * var(--d));height:calc(77 * var(--d));border-radius:calc(5 * var(--d));object-fit:cover;background:var(--sunken)}
  .dcard__h{min-width:0;color:var(--accent-text);font-size:1rem;line-height:1.5625;font-weight:600;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

  /* Latest (253): red title between two bars, square bullets, hairlines, More */
  .dlatest{min-width:0;scroll-margin-top:calc(60 * var(--d))}
  .dlatest__h{display:flex;align-items:center;justify-content:center;gap:calc(7 * var(--d));height:calc(38 * var(--d));color:var(--accent-text);font-size:calc(20 * var(--d));font-weight:700;line-height:1}
  .dlatest__h::before,.dlatest__h::after{content:"";flex:0 1 calc(60 * var(--d));height:calc(4 * var(--d));border-radius:calc(2 * var(--d));background:linear-gradient(90deg,transparent,var(--accent))}
  .dlatest__h::after{background:linear-gradient(90deg,var(--accent),transparent)}
  .dlatest__box{position:relative;padding:calc(2.5 * var(--d)) 0 calc(16 * var(--d));border:1px solid var(--border);border-radius:calc(5 * var(--d));background:var(--surface)}
  .dlatest__list li{position:relative;margin:calc(5 * var(--d));padding:0 0 calc(3 * var(--d));padding-inline-start:calc(11 * var(--d));border-bottom:1px solid var(--border)}
  .dlatest__list li:last-child{border-bottom:0}
  .dlatest__list li::before{content:"";position:absolute;inset-inline-start:0;top:calc(10 * var(--d));width:calc(6 * var(--d));height:calc(6 * var(--d));background:var(--text)}
  .dlatest__a{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:var(--text);font-size:.9375rem;line-height:1.7333;font-weight:500}
  .dmore{position:absolute;bottom:calc(-14 * var(--d));inset-inline-end:calc(14 * var(--d));display:inline-flex;align-items:center;gap:calc(6 * var(--d));height:calc(27 * var(--d));padding:0 calc(8 * var(--d));
    border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:calc(12.5 * var(--d));font-weight:600;white-space:nowrap}
  .dmore:hover{color:var(--accent-text)}
  .dmore[aria-busy="true"]{color:transparent}

  /* the rail (300) */
  .drail{display:flex;flex-direction:column;gap:calc(15 * var(--d));min-width:0}
  .dhd{display:flex;align-items:center;gap:calc(8 * var(--d));min-height:calc(36 * var(--d))}
  .dhd__t{flex:1;min-width:0;margin:0;color:var(--text);font-size:calc(19 * var(--d));font-weight:700;line-height:1.3}
  .ddist{position:relative;display:flex;align-items:center;gap:calc(5 * var(--d));height:calc(35 * var(--d));margin-top:calc(7 * var(--d))}
  .ddist__l{flex:0 0 auto;padding-inline-end:calc(6 * var(--d));color:var(--accent-text);font-size:calc(16 * var(--d));font-weight:700}
  .ddist__b{flex:1 1 0;min-width:0;display:grid;place-items:center;height:calc(35 * var(--d));padding:0 calc(4 * var(--d));border-radius:calc(5 * var(--d));color:#fff;font-size:calc(13 * var(--d));font-weight:600;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.55;cursor:default}
  .ddist__b--ap{background:var(--accent)}
  .ddist__b--tg{background:#3B3D45}
  .ddist > .soon{position:absolute;top:calc(-9 * var(--d));inset-inline-end:calc(-4 * var(--d));height:calc(17 * var(--d));padding:0 calc(6 * var(--d));font-size:calc(10 * var(--d))}
  .drd__ctl{display:flex;align-items:center;gap:calc(2 * var(--d));color:var(--text);font:700 calc(15 * var(--d))/1 "Inter",system-ui,sans-serif}
  .drd__btn{display:grid;place-items:center;width:calc(22 * var(--d));height:calc(31 * var(--d));color:var(--text)}
  .drd__card{padding:calc(5 * var(--d));border-radius:calc(5 * var(--d));background:var(--surface);box-shadow:var(--dshadow)}
  .drd__a{display:block;text-align:center}
  .drd__img{display:block;width:100%;height:calc(163 * var(--d));border-radius:calc(5 * var(--d));object-fit:cover;background:var(--sunken)}
  .drd__t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:calc(4 * var(--d));padding:0 calc(5 * var(--d));
    color:var(--accent-text);font-size:1rem;line-height:1.5;font-weight:600}
  .drs__list{display:flex;flex-direction:column;gap:calc(10 * var(--d))}
  .drow{min-width:0;border-radius:calc(5 * var(--d));background:var(--surface);box-shadow:var(--dshadow)}
  .drow__a{display:flex;gap:calc(6 * var(--d));padding:calc(6 * var(--d))}
  .drow__img{flex:none;width:calc(110 * var(--d));height:calc(77 * var(--d));border-radius:calc(5 * var(--d));object-fit:cover;background:var(--sunken)}
  .drow__txt{display:flex;flex-direction:column;min-width:0}
  .drow__h{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--accent-text);font-size:.9375rem;line-height:1.6;font-weight:600}
  .drow__ex{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;color:var(--text);font-size:.875rem;line-height:1.75}
  .drm{display:flex;flex-direction:column;gap:calc(6 * var(--d));padding:calc(6 * var(--d));border-radius:calc(5 * var(--d));background:var(--surface);box-shadow:var(--dshadow)}
  .drm__lead{display:block}
  .drm__img{display:block;width:100%;height:calc(172 * var(--d));border-radius:calc(5 * var(--d));object-fit:cover;background:var(--sunken)}
  .drm__h{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:calc(5 * var(--d));color:var(--accent-text);font-size:.9375rem;line-height:1.6;font-weight:600}
  .drm__ex{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--text);font-size:.875rem;line-height:1.75}
  .drm .drow{box-shadow:none}
  .drm .drow__a{padding:0}
  .dst__tabs{display:flex;height:calc(37 * var(--d));background:#E3E3E3}
  :root[data-theme="dark"] .dst__tabs{background:var(--sunken)}
  .dst__tab{flex:1 1 0;min-width:0;display:grid;place-items:center;padding:0 calc(10 * var(--d));color:var(--text);font-size:calc(16 * var(--d));font-weight:600;white-space:nowrap}
  .dst__tab[aria-selected="true"]{background:var(--accent);color:#fff;clip-path:polygon(0 0,100% 0,calc(100% - calc(22 * var(--d))) 100%,0 100%)}
  .dst__tab[aria-selected="true"]:last-child{clip-path:polygon(calc(22 * var(--d)) 0,100% 0,100% 100%,0 100%)}
  .dst__panel{display:flex;flex-direction:column;gap:calc(8 * var(--d));margin-top:calc(8 * var(--d))}

  /* section header tab: 35 high, a 23-wide slant on its trailing edge, ↗ */
  .dtab{display:flex;align-items:center;gap:calc(8 * var(--d));margin:0 0 calc(8 * var(--d));line-height:1}
  .dtab__a{position:relative;display:inline-flex;align-items:center;gap:calc(10 * var(--d));height:calc(35 * var(--d));padding:calc(3 * var(--d)) calc(12 * var(--d)) 0 calc(15 * var(--d));margin-inline-end:calc(23 * var(--d));
    background:var(--accent);color:#fff;font-size:calc(19 * var(--d));font-weight:700;white-space:nowrap}
  .dtab__a::after{content:"";position:absolute;top:0;bottom:0;inset-inline-start:100%;width:calc(23 * var(--d));background:inherit;clip-path:polygon(0 0,0 100%,100% 100%)}
  .dtab__a.is-soon{cursor:default}
  .dtab .soon,.dhd .soon{height:calc(19 * var(--d));padding:0 calc(8 * var(--d));font-size:calc(11 * var(--d))}

  /* below the front: galleries, section blocks, headline tabs, horoscope */
  .dlower{display:flex;flex-direction:column;gap:calc(18 * var(--d));margin-top:calc(10 * var(--d))}
  .dlower__wait{min-height:calc(120 * var(--d))}
  .dlower__wait .ringwrap{min-height:calc(120 * var(--d))}
  .dvid__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(24 * var(--d))}
  .dvid__ch{display:flex;align-items:center;gap:calc(12 * var(--d));min-height:calc(64 * var(--d));padding:calc(10 * var(--d)) calc(14 * var(--d));border-radius:calc(5 * var(--d));background:var(--surface);box-shadow:var(--dshadow);color:var(--text)}
  .dvid__ico{flex:none;display:grid;place-items:center;width:calc(40 * var(--d));height:calc(40 * var(--d));border-radius:calc(8 * var(--d));background:#E62117;color:#fff}
  .dvid__t{display:flex;flex-direction:column;gap:calc(2 * var(--d));min-width:0;font-size:calc(15 * var(--d));font-weight:700}
  .dvid__t span{font:500 calc(13 * var(--d))/1.3 "Inter",var(--font);color:var(--text-3);direction:ltr;unicode-bidi:isolate}
  .dvid__go{margin-inline-start:auto;color:var(--text-3)}
  .dsoon2{display:flex;justify-content:space-between;gap:calc(24 * var(--d))}
  .dsoon2 .dtab{margin:0}
  .dsecs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:calc(18 * var(--d))}
  .dsec{position:relative;min-width:0;padding-inline:calc(10 * var(--d)) calc(12 * var(--d))}
  .dsec:not(:nth-child(3n+1))::before{content:"";position:absolute;inset-inline-start:0;top:calc(60 * var(--d));bottom:calc(10 * var(--d));width:calc(2 * var(--d));
    background:linear-gradient(transparent,var(--accent) 15%,var(--accent) 85%,transparent);opacity:.3}
  .dsec__card{display:block;padding:calc(8 * var(--d));border:1px solid var(--border);border-radius:calc(5 * var(--d));background:var(--surface)}
  .dsec__img{display:block;width:100%;height:calc(180 * var(--d));border-radius:calc(5 * var(--d));object-fit:cover;background:var(--sunken)}
  .dsec__h{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:calc(4 * var(--d));color:var(--accent-text);font-size:1rem;line-height:1.75;font-weight:600}
  .dsec__list{padding-top:calc(8 * var(--d));padding-inline-start:calc(17 * var(--d))}
  .dsec__list li{position:relative;padding:calc(4 * var(--d)) 0}
  .dsec__list li::before{content:"";position:absolute;inset-inline-start:calc(-17 * var(--d));top:calc(12 * var(--d));width:calc(10 * var(--d));height:calc(10 * var(--d));border-radius:50%;background:var(--accent)}
  .dsec__li{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--text);font-size:.9375rem;line-height:1.6;font-weight:500}
  .dedt__h{display:flex;align-items:center;gap:calc(6 * var(--d));height:calc(30 * var(--d));margin:0 0 calc(10 * var(--d));line-height:1}
  .dedt__brand{color:var(--text);font:800 calc(24 * var(--d))/1 "Inter",var(--font);letter-spacing:-.02em}
  .dedt__label{display:inline-flex;align-items:center;height:calc(28 * var(--d));padding:0 calc(9 * var(--d));border-radius:calc(3 * var(--d));background:var(--accent);color:#fff;font-size:calc(17 * var(--d));font-weight:700}
  .dedt__tabs{display:flex;height:calc(37 * var(--d))}
  .dedt__tab{display:flex;align-items:center;padding:calc(2 * var(--d)) calc(12 * var(--d)) 0;border:1px solid var(--accent);border-inline-start-width:0;background:var(--surface);
    color:var(--accent-text);font-size:calc(17 * var(--d));font-weight:600;white-space:nowrap}
  .dedt__tab:first-child{border-inline-start-width:1px}
  .dedt__tab[aria-selected="true"]{background:var(--accent);color:#fff}
  .dedt__panel{position:relative;display:grid;grid-template-columns:calc(330 * var(--d)) minmax(0,1fr);gap:calc(14 * var(--d));padding:calc(9 * var(--d)) calc(6 * var(--d)) calc(22 * var(--d));border-radius:0 0 calc(5 * var(--d)) calc(5 * var(--d));
    background:var(--surface);box-shadow:var(--dshadow)}
  .dedt__lead{display:block;min-width:0}
  .dedt__img{display:block;width:100%;height:calc(186 * var(--d));border-radius:calc(5 * var(--d));object-fit:cover;background:var(--sunken)}
  .dedt__lh{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:calc(6 * var(--d));color:var(--accent-text);font-size:1rem;line-height:1.75;font-weight:600}
  .dedt__ex{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--text);font-size:.875rem;line-height:1.75}
  .dedt__rows{display:flex;flex-direction:column;gap:calc(4 * var(--d));min-width:0}
  .dedt__rows .drow{box-shadow:none}
  .dhoro{display:flex;align-items:center;justify-content:center;gap:calc(10 * var(--d));min-height:calc(56 * var(--d));border-radius:calc(5 * var(--d));background:var(--surface);box-shadow:var(--dshadow)}
  .dhoro__t{margin:0;color:var(--accent-text);font-size:calc(20 * var(--d));font-weight:700}
  .dhoro .soon{height:calc(19 * var(--d));padding:0 calc(8 * var(--d));font-size:calc(11 * var(--d))}

  /* ── a section page: red title, 2 columns of 435 (2 leads, then rows), More 200×38 ── */
  body[data-view="section"] .sech{width:calc(885 * var(--d))}
  .dsecpage{display:grid;grid-template-columns:calc(885 * var(--d)) calc(300 * var(--d));column-gap:calc(15 * var(--d));align-items:start;margin-top:calc(-38 * var(--d))}
  .dsecpage__main{min-width:0;padding-top:calc(38 * var(--d))}
  .dsgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(15 * var(--d))}
  .dslead,.dscard{min-width:0;border-radius:calc(5 * var(--d));background:var(--surface);box-shadow:var(--dshadow)}
  .dslead__a{display:block;padding:calc(8 * var(--d))}
  .dslead__img{display:block;width:100%;height:calc(238 * var(--d));border:2px solid #B3B3B3;border-radius:calc(5 * var(--d));object-fit:cover;background:var(--sunken)}
  .dslead__h{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:calc(7 * var(--d));color:var(--accent-text);font-size:1rem;line-height:1.75;font-weight:700}
  .dslead__ex{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:calc(3 * var(--d));color:var(--text);font-size:.875rem;line-height:1.85}
  .dscard__a{display:flex;gap:calc(8 * var(--d));padding:calc(8 * var(--d))}
  .dscard__img{flex:none;width:calc(124 * var(--d));height:calc(88 * var(--d));border:2px solid #B3B3B3;border-radius:calc(5 * var(--d));object-fit:cover;background:var(--sunken)}
  :root[data-theme="dark"] .dslead__img,:root[data-theme="dark"] .dscard__img{border-color:var(--border)}
  .dscard__txt{display:flex;flex-direction:column;min-width:0}
  .dscard__h{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--accent-text);font-size:1rem;line-height:1.625;font-weight:600}
  .dscard__ex{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;margin-top:calc(2 * var(--d));color:var(--text);font-size:.875rem;line-height:1.75}
  .morebtn{display:flex;width:calc(200 * var(--d));min-width:0;height:calc(38 * var(--d));min-height:0;margin:calc(14 * var(--d)) 0 0;margin-inline-start:calc(342 * var(--d));padding:0;border:2px solid var(--accent);border-radius:calc(5 * var(--d));
    background:var(--accent);color:#fff;font-size:calc(16 * var(--d));font-weight:600}
  .morebtn:hover{background:var(--accent-dark)}

  /* ── a story: Latest 200 · 20 · the story 660 · 20 · rail 300 ── */
  .artgrid{display:grid;grid-template-columns:calc(200 * var(--d)) calc(660 * var(--d)) calc(300 * var(--d));column-gap:calc(20 * var(--d));align-items:start}
  .artgrid--noleft > .art{grid-column:2}
  .dleft{min-width:0}
  .dleft .dtab__a{height:calc(34 * var(--d));padding:calc(3 * var(--d)) calc(14 * var(--d)) calc(1 * var(--d)) calc(10 * var(--d));font-size:calc(16 * var(--d));margin-inline-end:calc(23 * var(--d))}
  .dleft__list li{margin-bottom:calc(8 * var(--d));padding:calc(3 * var(--d)) calc(3 * var(--d)) calc(3 * var(--d)) calc(5 * var(--d));border:1px solid var(--border);border-radius:calc(10 * var(--d));background:var(--surface)}
  .dleft__a{position:relative;display:block;padding-inline-start:calc(10 * var(--d));color:var(--text);font-size:.875rem;line-height:1.7;font-weight:500}
  .dleft__a::before{content:"";position:absolute;inset-inline-start:calc(1 * var(--d));top:calc(10 * var(--d));width:calc(5 * var(--d));height:calc(5 * var(--d));border-radius:50%;background:var(--text)}
  .art{display:flex;flex-direction:column;min-width:0}
  .art__crumbs{order:0;display:block;height:calc(38 * var(--d));margin:0 0 calc(5 * var(--d));padding:0 calc(8 * var(--d));background:var(--sunken);font-size:calc(14 * var(--d));line-height:calc(38 * var(--d));color:var(--text-2);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .art__crumbs a{color:var(--text);font-weight:600;text-decoration:none}
  .art__card{order:1;display:flex;flex-direction:column;padding:calc(15 * var(--d)) calc(15 * var(--d)) calc(7 * var(--d));border-radius:calc(5 * var(--d));background:var(--surface);box-shadow:0 0 calc(10 * var(--d)) rgba(110,110,110,.5)}
  :root[data-theme="dark"] .art__card{box-shadow:0 0 0 1px var(--border)}
  .art__box{order:1;position:static;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:calc(12 * var(--d));margin:0;padding:0 0 calc(10 * var(--d));border:0;background:none}
  .art__box > .art__h1{grid-column:1 / -1}
  .art__h1{margin:0 0 calc(8 * var(--d));color:var(--accent-text);font-size:1.5rem;line-height:1.5;font-weight:700;text-align:center}
  .art__h1:lang(en){font-size:1.625rem;line-height:1.4}
  .art__src{display:flex;align-items:center;flex-wrap:wrap;min-height:calc(41 * var(--d));padding:0;border:0;font-size:calc(13 * var(--d));line-height:1.5;color:var(--text-2)}
  .art__src .src__logo{width:calc(36 * var(--d));height:calc(36 * var(--d));margin-inline-end:calc(8 * var(--d));border:calc(3 * var(--d)) solid rgba(183,46,47,.24);border-radius:50%}
  .src__upd{margin-inline-start:calc(10 * var(--d));color:var(--text-3);font-size:calc(12 * var(--d))}
  .art__share{margin:0}
  .art__share .share,.art__end .share{gap:calc(8 * var(--d))}
  .art__share .share__b,.art__end .share__b{width:calc(32 * var(--d));height:calc(32 * var(--d))}
  .share__b--ts{background:#DFDFDF;border-color:#DFDFDF;color:#14151A;font:700 calc(13 * var(--d))/1 "Inter",system-ui,sans-serif}
  .art__hero{order:2;margin:0 0 calc(10 * var(--d))}
  .art__hero img{display:block;width:100%;height:auto;max-height:calc(560 * var(--d));object-fit:contain;background:var(--sunken)}
  .art__body{order:3;max-width:none;padding:0;font-size:1.25rem;line-height:1.8;text-align:justify}
  .art__body:lang(en){font-size:1.1875rem;line-height:1.7}
  .art__body p{margin:0 0 calc(12 * var(--d));padding:calc(5 * var(--d)) calc(1 * var(--d)) 0}
  .art__body h2,.art__body h3{color:var(--accent-text)}
  .art__end{order:4;padding:calc(8 * var(--d)) 0 0}
  .art__rel{order:2;padding-top:calc(24 * var(--d))}
  .art__rel > .dtab{margin-bottom:calc(10 * var(--d))}

  /* ── footer: a red panel of groups (labelled), then the darker bar ── */
  .foot{margin-top:calc(10 * var(--d));padding:0;background:none;border:0;color:#fff;text-align:start}
  :root[data-theme="dark"] .foot{background:none}
  .foot__in{display:grid;grid-template-columns:calc(440 * var(--d)) minmax(0,1fr) calc(320 * var(--d));
    grid-template-areas:"l1 l2 l3" "secs trust chans" "secs trust contact" "brand legal legal";gap:0;align-items:start;background:var(--accent);color:#fff}
  .foot__brand,.foot__legal{align-self:stretch}
  .foot__lbl{justify-self:start;margin:calc(16 * var(--d)) calc(14 * var(--d)) calc(8 * var(--d));padding:calc(4 * var(--d)) calc(8 * var(--d));border-radius:calc(3 * var(--d));background:#14151A;color:#fff;font:700 calc(11 * var(--d))/1.2 "Inter",var(--font);letter-spacing:.06em;text-transform:uppercase}
  html:not([lang="en"]) .foot__lbl:not([lang="en"]){letter-spacing:0;text-transform:none;font-size:calc(12 * var(--d))}
  .foot__lbl--secs{grid-area:l1}
  .foot__lbl--trust{grid-area:l2}
  .foot__lbl--chans{grid-area:l3}
  .foot__secs{grid-area:secs;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:0 calc(16 * var(--d));padding:0 calc(14 * var(--d)) calc(16 * var(--d));font-size:calc(13 * var(--d))}
  .foot__trust{grid-area:trust;display:block;padding:0 calc(14 * var(--d)) calc(16 * var(--d));font-size:calc(13 * var(--d))}
  .foot__secs li,.foot__trust li{position:relative;padding-inline-start:calc(12 * var(--d))}
  .foot__secs li::before,.foot__trust li::before{content:"";position:absolute;inset-inline-start:0;top:calc(10 * var(--d));width:calc(4 * var(--d));height:calc(4 * var(--d));border-radius:50%;background:rgba(255,255,255,.7)}
  .foot__secs a,.foot__trust a{color:#fff;line-height:calc(24 * var(--d));text-decoration:none}
  .foot__secs a:hover,.foot__trust a:hover{text-decoration:underline}
  .foot__chans{grid-area:chans;display:flex;flex-wrap:wrap;align-content:start;justify-content:flex-start;gap:calc(8 * var(--d));padding:0 calc(14 * var(--d))}
  .foot__chans a{display:grid;place-items:center;width:auto;min-width:calc(34 * var(--d));height:calc(34 * var(--d));padding:0 calc(8 * var(--d));font-size:calc(12 * var(--d));border:0;border-radius:calc(6 * var(--d));background:#fff;color:#962425}
  .foot__contact{grid-area:contact;padding:calc(12 * var(--d)) calc(14 * var(--d)) calc(16 * var(--d));color:#fff;font-size:calc(13 * var(--d))}
  .foot__contact a{color:#fff;text-decoration:underline}
  .foot__brand{grid-area:brand;display:flex;align-items:center;gap:calc(10 * var(--d));padding:calc(12 * var(--d)) calc(14 * var(--d));background:var(--nav-b);color:#fff}
  .foot__brand img{width:calc(44 * var(--d));height:calc(44 * var(--d));border-radius:50%}
  .foot__brand b{font-size:calc(18 * var(--d))}
  .foot__legal{grid-area:legal;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;padding:calc(12 * var(--d)) calc(14 * var(--d));background:var(--nav-b);color:rgba(255,255,255,.78);font-size:calc(12 * var(--d));text-align:end}
  .page{max-width:calc(780 * var(--d));padding:calc(8 * var(--d)) 0}

  /* the day / night switch and back-to-top, 38 square, in the rail's line (the reference's places) */
  .dfab{position:fixed;bottom:calc(4 * var(--d));z-index:35;display:grid;place-items:center;width:calc(38 * var(--d));height:calc(38 * var(--d));border-radius:calc(5 * var(--d));box-shadow:0 calc(2 * var(--d)) calc(8 * var(--d)) rgba(0,0,0,.25)}
  .dfab--theme{inset-inline-end:calc((100vw - 1200 * var(--d)) / 2 + 220 * var(--d));background:#F4B860;color:#14151A}
  :root[data-theme="dark"] .dfab--theme{background:var(--accent);color:#fff}
  .dfab--top{inset-inline-end:calc((100vw - 1200 * var(--d)) / 2 + 175 * var(--d));background:var(--accent);color:#fff}

  /* search: a panel under the masthead */
  .srch__panel{left:50%;top:24px;width:min(720px,calc(100% - 48px));transform:translateX(-50%);max-height:calc(100vh - 48px);border-radius:16px;padding:0}
}
/* The reference zooms its 1200 column to 0.86 between 1351 and 1459 px
   (1032 at 1440); so does this page, so the two match side by side. */
@media (min-width:1351px) and (max-width:1459.98px){
  :root{--d:.86px}
}
/* The side positions need 130 units each side of the column. */
@media (min-width:1351px){
  .ad--skin{display:block}
}

/* RIGHT TO LEFT (Urdu as the interface language) */
.art__body[dir="rtl"] .dropcap,[dir="rtl"] .art__body:not([dir]) .dropcap{float:right;margin-inline:0 10px}
[dir="rtl"] .tab--more{background:linear-gradient(270deg,transparent,var(--page) 12px)}
[dir="rtl"] svg.i-chevronRight,[dir="rtl"] svg.i-chevLeft,[dir="rtl"] svg.i-external,[dir="rtl"] svg.i-logOut,[dir="rtl"] svg.i-logIn{transform:scaleX(-1)}
[dir="rtl"] .dtop__view{direction:ltr}
[dir="rtl"] .dtab__a::after{clip-path:polygon(100% 0,100% 100%,0 100%)}
[dir="rtl"] .dlatest__h::before{background:linear-gradient(270deg,transparent,var(--accent))}
[dir="rtl"] .dlatest__h::after{background:linear-gradient(270deg,var(--accent),transparent)}
[dir="rtl"] .dst__tab[aria-selected="true"]{clip-path:polygon(calc(22 * var(--d)) 0,100% 0,100% 100%,0 100%)}
[dir="rtl"] .dst__tab[aria-selected="true"]:last-child{clip-path:polygon(0 0,100% 0,calc(100% - 22 * var(--d)) 100%,0 100%)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  /* The ring still turns (Founder's rule), at half speed: a ring that stands
     still reads as a page that has stopped. */
  .spin{animation-duration:1.6s!important;animation-iteration-count:infinite!important}
  .spin--late{animation-duration:1.6s,.01s!important;animation-iteration-count:infinite,1!important}
}