/* =====================================================================
   Tfaseel News — public stylesheet (v2)
   Mobile-first · RTL/LTR via logical properties · light & dark
   Brand colours from the logo · reading-first article layout
   ===================================================================== */
:root {
  --pink: #EE2554; --yellow: #FDC010; --purple: #4A235A; --orange: #EE6340; --teal: #2ECDB5; --blue: #0E5DA8;
  --bg: #f3f4f7;
  --surface: #ffffff;
  --text: #121419;
  --text-2: #3a3f4a;
  --muted: #6b7280;
  --line: #e6e8ee;
  --link: #0E5DA8;
  --accent: var(--pink);
  --brand: var(--purple);
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .06);
  --wrap: 1240px;
  --font: system-ui, sans-serif;
  --header-h: 58px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d0f13; --surface: #161920; --text: #eef0f4; --text-2: #c9ced8; --muted: #949cab; --line: #262b35;
    --link: #78b8ff; --brand: #cfa5e2; --shadow: 0 1px 2px rgba(0,0,0,.5);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; color: inherit; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; background: var(--brand); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { top: 8px; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 16px; }
.narrow { max-width: 820px; }
.muted { color: var(--muted); }
.mt { margin-top: 16px; }
.desk-only { display: none !important; }
.empty-state { text-align: center; padding: 60px 16px; color: var(--muted); }

/* ------------------------------------------------------------- brand bar */
.brandbar { display: flex; height: 3px; }
.brandbar i { flex: 1; }
.brandbar i:nth-child(1) { background: var(--pink); } .brandbar i:nth-child(2) { background: var(--yellow); } .brandbar i:nth-child(3) { background: var(--purple); }
.brandbar i:nth-child(4) { background: var(--orange); } .brandbar i:nth-child(5) { background: var(--teal); } .brandbar i:nth-child(6) { background: var(--blue); }

/* ------------------------------------------------------------- header */
.site-header { background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(1.6) blur(10px); -webkit-backdrop-filter: saturate(1.6) blur(10px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.header-row { display: flex; align-items: center; gap: 8px; min-height: var(--header-h); }
.logo { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.logo img { width: 62px; flex: none; }
.logo-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.logo-text strong { font-size: 1.08rem; font-weight: 800; color: var(--brand); white-space: nowrap; }
.logo-text small { display: none; font-size: .74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-tools { display: flex; align-items: center; gap: 4px; }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; background: transparent; border-radius: 50%; }
.icon-btn:hover { background: var(--bg); }
.langsw { position: relative; }
.langsw-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding-inline: 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: .82rem; font-weight: 700; }
.langsw-btn span { display: none; }
.langsw-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); min-width: 180px; list-style: none; margin: 0; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.16); display: none; z-index: 60; }
.langsw.open .langsw-menu { display: block; }
.langsw-menu a { display: block; padding: 9px 12px; border-radius: 9px; font-weight: 700; font-size: .92rem; }
.langsw-menu a:hover, .langsw-menu a.active { background: var(--bg); color: var(--brand); }
.langsw-menu a.active::after { content: " ✓"; color: var(--teal); }
.searchbar { display: flex; gap: 8px; padding-block: 10px; }
.searchbar[hidden] { display: none; }
.searchbar input, .search-big input { flex: 1; min-width: 0; height: 44px; padding-inline: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); font: inherit; }
.searchbar button { height: 44px; padding-inline: 18px; border: 0; border-radius: 12px; background: var(--brand); color: #fff; font-weight: 700; }

/* section strip — the single navigation on every device */
.catnav { border-top: 1px solid var(--line); }
.catnav-inner { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.catnav-inner::-webkit-scrollbar { display: none; }
.catnav a { flex: none; scroll-snap-align: start; padding: 10px 11px; font-size: .88rem; font-weight: 700; white-space: nowrap; color: var(--text-2); border-bottom: 3px solid transparent; }
.catnav a:hover, .catnav a.active { color: var(--text); border-bottom-color: var(--c, var(--accent)); }

/* ------------------------------------------------------------- breaking */
.breaking { background: var(--surface); border-bottom: 1px solid var(--line); }
.breaking-row { display: flex; align-items: center; gap: 10px; height: 40px; overflow: hidden; }
.breaking-label { flex: none; display: inline-flex; align-items: center; gap: 6px; background: var(--pink); color: #fff; font-weight: 800; font-size: .76rem; padding: 3px 10px; border-radius: 999px; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.ticker { overflow: hidden; flex: 1; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.ticker-track { display: inline-flex; gap: 44px; white-space: nowrap; animation: ticker 50s linear infinite; font-size: .9rem; font-weight: 600; }
.rtl .ticker-track { animation-name: ticker-rtl; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track a::before { content: "●"; color: var(--pink); margin-inline-end: 8px; font-size: .55em; vertical-align: middle; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ticker-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } .ticker { overflow-x: auto; } }

/* ------------------------------------------------------------- layout */
.main { min-height: 50vh; padding-bottom: 28px; }
.layout { display: grid; gap: 24px; margin-top: 8px; }
.content-col, .side-col { min-width: 0; }
.block { margin-block: 26px; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; font-size: 1.12rem; font-weight: 800; }
.section-title span { display: inline-flex; align-items: center; gap: 8px; }
.section-title span::before { content: ""; width: 5px; height: 1.05em; border-radius: 3px; background: var(--c, var(--accent)); }
.section-title a { font-size: .8rem; font-weight: 700; color: var(--link); }
.mini-title { font-size: .95rem; font-weight: 800; margin: 0 0 10px; }
.mini-title span { color: var(--muted); font-weight: 600; }
.list { display: flex; flex-direction: column; }
.grid { display: grid; gap: 16px; }
.chip { display: inline-block; padding: 5px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .8rem; font-weight: 600; color: var(--text-2); }
.chip:hover { border-color: var(--brand); color: var(--brand); }

/* horizontal swipe rows (mobile) → grids (desktop) */
.hscroll { display: grid; grid-auto-flow: column; grid-auto-columns: 76%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * { scroll-snap-align: start; }

/* ------------------------------------------------------------- cards */
.card { position: relative; min-width: 0; }
.card-link { display: flex; flex-direction: column; height: 100%; }
.card-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: color-mix(in srgb, var(--line) 70%, var(--bg)); border-radius: var(--radius); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card-link:hover .card-media img { transform: scale(1.04); }
.card-body { display: flex; flex-direction: column; gap: 5px; padding-top: 10px; flex: 1; min-width: 0; }
.card-title { margin: 0; font-size: 1.02rem; line-height: 1.5; font-weight: 800; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.card-link:hover .card-title { color: var(--link); }
.card-summary { color: var(--muted); font-size: .9rem; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-meta { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 2px; font-size: .74rem; color: var(--muted); }
.card-meta .src { font-weight: 800; color: var(--text-2); }
.card-meta .src::after { content: "·"; margin-inline-start: 6px; color: var(--muted); font-weight: 400; }
.kicker { align-self: flex-start; font-size: .72rem; font-weight: 800; color: var(--c, var(--accent)); }
.flag-breaking { display: inline-block; background: var(--pink); color: #fff; font-size: .68em; line-height: 1.6; padding: 0 7px; border-radius: 5px; vertical-align: .12em; margin-inline-end: 3px; }
.play-badge { position: absolute; inset-inline-end: 10px; bottom: 10px; width: 32px; height: 32px; display: grid; place-items: center; background: rgba(0,0,0,.6); color: #fff; border-radius: 50%; }
.ph { width: 100%; height: 100%; background: linear-gradient(135deg, var(--purple), var(--blue)); position: relative; }
.ph::after { content: ""; position: absolute; inset: 28% 34%; background: url("../img/logo.png") center / contain no-repeat; opacity: .35; filter: brightness(3); }

/* tile: card inside swipe rows */
.card-tile .card-link { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.card-tile .card-media { border-radius: 0; }
.card-tile .card-body { padding: 10px 12px 12px; }
.card-tile .card-title { font-size: .95rem; }

/* row: compact list item */
.card-row { border-bottom: 1px solid var(--line); }
.list .card-row:last-child { border-bottom: 0; }
.card-row .card-link { flex-direction: row; gap: 12px; padding-block: 12px; }
.card-row .card-media { flex: none; width: 112px; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); }
.card-row .card-body { padding: 0; gap: 4px; }
.card-row .card-title { font-size: .95rem; line-height: 1.55; }
/* homepage "latest": image + section + title + two-line summary + meta */
.card-feed { border-bottom: 1px solid var(--line); }
.list .card-feed:last-child { border-bottom: 0; }
.card-feed .card-link { flex-direction: row; gap: 14px; padding-block: 14px; align-items: flex-start; }
.card-feed .card-media { flex: none; width: 128px; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); }
.card-feed .card-body { padding: 0; gap: 6px; min-width: 0; }
.card-feed .card-title { font-size: 1rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-feed .card-summary { font-size: .86rem; color: var(--muted); line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 639px) { .card-feed .kicker { font-size: .68rem; } .card-feed .card-summary { -webkit-line-clamp: 2; font-size: .82rem; } }
@media (min-width: 768px) {
  .card-feed .card-media { width: 240px; aspect-ratio: 16 / 10; }
  .card-feed .card-title { font-size: 1.12rem; -webkit-line-clamp: 2; }
}
.card-mini .card-link { flex-direction: row; gap: 10px; padding-block: 8px; }
.card-mini .card-media { flex: none; width: 76px; aspect-ratio: 1; border-radius: var(--radius-sm); }
.card-mini .card-body { padding: 0; }
.card-mini .card-title { font-size: .88rem; }

/* slide: full-bleed image, title on gradient */
.card-slide, .card-slide .card-link { height: 100%; }
.card-slide .card-media { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.card-slide .card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 6, 14, .92) 0%, rgba(8, 6, 14, .55) 42%, rgba(8, 6, 14, 0) 72%); }
.card-slide .card-body { position: absolute; inset-inline: 0; bottom: 0; padding: 18px 18px 34px; color: #fff; z-index: 1; gap: 8px; }
.card-slide .kicker { background: var(--c, var(--accent)); color: #fff; padding: 2px 10px; border-radius: 999px; font-size: .72rem; }
.card-slide .card-title { font-size: 1.32rem; line-height: 1.45; -webkit-line-clamp: 3; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.card-slide .card-link:hover .card-title { color: #fff; }
.card-slide .card-meta, .card-slide .card-meta .src { color: rgba(255,255,255,.82); }

/* ------------------------------------------------------------- hero: slider + now feed */
.hero { display: grid; gap: 16px; margin-top: 12px; }
.slider { position: relative; border-radius: var(--radius); overflow: hidden; background: #111; box-shadow: var(--shadow); }
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: 4 / 5; }
.slides::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; position: relative; }
.slider-nav { display: none; position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: #111; place-items: center; z-index: 3; box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.slider-nav.prev { inset-inline-start: 14px; transform: translateY(-50%) scaleX(-1); }
.slider-nav.next { inset-inline-end: 14px; }
.rtl .slider-nav.prev { transform: translateY(-50%); }
.rtl .slider-nav.next { transform: translateY(-50%) scaleX(-1); }
.slider-dots { position: absolute; bottom: 12px; inset-inline: 0; display: flex; justify-content: center; gap: 6px; z-index: 3; }
.slider-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px; background: rgba(255,255,255,.5); transition: width .3s, background .3s; }
.slider-dots button.on { width: 22px; background: #fff; }

.now-feed { display: none; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px 10px; }
.now-title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 1rem; font-weight: 800; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 0 rgba(238,37,84,.6); animation: live 1.8s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 9px rgba(238,37,84,0); } 100% { box-shadow: 0 0 0 0 rgba(238,37,84,0); } }
.now-feed ol { list-style: none; margin: 0; padding: 0; }
.now-feed li { position: relative; padding: 9px 0; padding-inline-start: 16px; border-bottom: 1px solid var(--line); }
.now-feed li::before { content: ""; position: absolute; inset-inline-start: 2px; top: 16px; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.now-feed li:last-child { border-bottom: 0; }
.now-feed time { display: block; font-size: .72rem; color: var(--muted); font-weight: 700; }
.now-feed li a { font-size: .9rem; font-weight: 700; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.now-feed li a:hover { color: var(--link); }
.now-all { display: block; text-align: center; padding: 8px; font-size: .8rem; font-weight: 700; color: var(--link); }
.now-feed li:nth-child(n+5) { display: none; }

/* category blocks */
.cat-grid { display: grid; gap: 4px 20px; }
.cat-grid > .card-default .card-title { font-size: 1.15rem; }

/* most read */
.side-box { background: var(--surface); border-radius: var(--radius); padding: 14px 16px 6px; box-shadow: var(--shadow); }
.ranked { list-style: none; counter-reset: r; margin: 0; padding: 0; }
.ranked li { counter-increment: r; display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); font-weight: 700; font-size: .9rem; line-height: 1.55; }
.ranked li:last-child { border-bottom: 0; }
.ranked li::before { content: counter(r); flex: none; font-size: 1.5rem; font-weight: 900; line-height: 1; width: 26px; color: transparent; -webkit-text-stroke: 1.5px var(--brand); }
.ranked li a { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ranked li a:hover { color: var(--link); }

/* ------------------------------------------------------------- article */
.read-progress { position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 50; pointer-events: none; }
.read-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pink), var(--yellow), var(--teal)); transition: width .1s linear; }
.rtl .read-progress i { margin-inline-start: auto; }
.article-layout { display: grid; gap: 24px; margin-top: 14px; }
.article { min-width: 0; }
.article-head { max-width: 760px; }
.article-head .kicker { display: inline-block; margin-bottom: 8px; font-size: .78rem; }
.article-head .kicker-parent { color: var(--muted); }
.article-head .kicker-parent::after { content: "›"; margin-inline: 6px; }
.article-title { margin: 0 0 10px; font-size: 1.62rem; line-height: 1.42; font-weight: 800; letter-spacing: -.01em; }
.article-subtitle { margin: 0 0 12px; font-size: 1.02rem; color: var(--text-2); font-weight: 500; line-height: 1.7; }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-block: 10px; border-block: 1px solid var(--line); font-size: .78rem; color: var(--muted); }
.source-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--teal) 14%, var(--surface)); color: var(--text-2); font-weight: 600; }
.source-badge svg { color: var(--teal); }
.source-badge a, .source-badge strong { color: var(--text); font-weight: 800; }
.source-badge a:hover { color: var(--link); }
.byline-author { font-weight: 800; color: var(--text); }
.byline-time { white-space: nowrap; }
.byline .share-compact { margin-inline-start: auto; }

.article-figure { margin: 16px -16px 0; }
.article-figure img { width: 100%; max-height: 72vh; object-fit: cover; }
.article-figure figcaption { padding: 7px 16px 0; font-size: .74rem; color: var(--muted); }
.credit { opacity: .85; }
.article-lead { max-width: 720px; margin: 18px 0 0; font-size: 1.06rem; line-height: 1.85; font-weight: 600; color: var(--text-2); }
.article-body { max-width: 720px; margin-top: 18px; font-size: 1.1rem; line-height: 2; color: var(--text); overflow-wrap: anywhere; }
.ltr .article-body { line-height: 1.8; font-size: 1.08rem; }
.lang-zh .article-body { line-height: 1.95; }
.article-body p { margin: 0 0 1.15em; }
.article-body h2, .article-body h3 { line-height: 1.45; margin: 1.5em 0 .6em; font-size: 1.22rem; }
.article-body a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.article-body img { border-radius: var(--radius-sm); margin-block: 1em; }
.article-body blockquote { margin: 1.3em 0; padding: 4px 16px; border-inline-start: 4px solid var(--accent); font-size: 1.12rem; font-weight: 600; color: var(--text-2); }
.article-body ul, .article-body ol { padding-inline-start: 1.3em; }
.article-body table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; font-size: .92rem; }
.article-body th, .article-body td { border: 1px solid var(--line); padding: 8px; }
.article-body iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radius-sm); }
.article-body figcaption { font-size: .78rem; color: var(--muted); }
.article-video { max-width: 720px; margin-top: 18px; }
.yt { position: relative; display: block; width: 100%; padding: 0; border: 0; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; }
.yt img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.yt-play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; display: grid; place-items: center; background: var(--pink); color: #fff; border-radius: 50%; }
.yt iframe { width: 100%; height: 100%; border: 0; }

.gallery { margin-top: 24px; }
.gallery-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
.gallery-strip::-webkit-scrollbar { display: none; }
.gallery-strip a { scroll-snap-align: start; }
.gallery-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); }

.article-foot { max-width: 720px; margin-top: 26px; display: flex; flex-direction: column; gap: 16px; }
.source-box { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-inline-start: 4px solid var(--teal); border-radius: var(--radius-sm); }
.source-box svg { flex: none; color: var(--teal); margin-top: 2px; }
.source-box div { display: flex; flex-direction: column; gap: 2px; font-size: .88rem; }
.source-box-label { font-size: .72rem; color: var(--muted); font-weight: 700; }
.source-box a, .source-box strong { font-weight: 800; color: var(--text); }
.source-box a:hover { color: var(--link); }
.source-box small { color: var(--muted); font-size: .74rem; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.versions { padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.versions-title { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: .8rem; color: var(--muted); margin-bottom: 8px; }
.versions-list { display: flex; flex-wrap: wrap; gap: 6px; }
.versions-list a { padding: 5px 12px; background: var(--bg); border-radius: 999px; font-weight: 700; font-size: .85rem; color: var(--brand); }
.versions-list a:hover { background: var(--brand); color: #fff; }

/* share — deliberately small */
.share { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.share-label { font-size: .74rem; font-weight: 700; color: var(--muted); margin-inline-end: 2px; }
.share a, .share button { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 0; padding: 0; color: #fff; transition: transform .15s, opacity .15s; }
.share a:hover, .share button:hover { transform: translateY(-1px); opacity: .9; color: #fff; }
.share-compact a, .share-compact button { width: 28px; height: 28px; }
.s-wa { background: #25D366; } .s-x { background: #111; } .s-fb { background: #1877F2; } .s-tg { background: #229ED9; } .s-copy { background: #7b8494; }
.more-news { margin-top: 30px; }

/* ------------------------------------------------------------- listings */
.list-head { padding: 22px 0 4px; }
.list-head h1 { margin: 0; font-size: 1.5rem; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.list-head h1::before { content: ""; width: 6px; height: 1.05em; border-radius: 3px; background: var(--c, var(--accent)); }
.list-head p { color: var(--muted); margin: 6px 0 0; }
.list-parent { display: inline-block; font-size: .78rem; font-weight: 800; color: var(--c, var(--accent)); margin-bottom: 4px; }
.subcats { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 2px; scrollbar-width: none; }
.subcats::-webkit-scrollbar { display: none; }
.subcats a { flex: none; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; font-weight: 700; white-space: nowrap; }
.subcats a:hover { border-color: var(--c, var(--accent)); }
.subcats a[aria-current] { background: var(--c, var(--accent)); border-color: var(--c, var(--accent)); color: #fff; }
.list-lead { margin-bottom: 18px; }
.list-lead .card-title { font-size: 1.3rem; }
.search-big { display: flex; gap: 8px; margin-top: 14px; }
.search-big button { width: 50px; border: 0; border-radius: 12px; background: var(--brand); color: #fff; display: grid; place-items: center; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 28px 0 8px; }
.pagination a, .pagination span { min-width: 40px; height: 40px; padding-inline: 12px; display: grid; place-items: center; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-weight: 700; font-size: .9rem; }
.pagination span[aria-current] { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ------------------------------------------------------------- static / forms */
.static-page { background: var(--surface); border-radius: var(--radius); padding: 22px; margin-top: 20px; box-shadow: var(--shadow); }
.static-page h1 { margin-top: 0; }
.contact-form { display: grid; gap: 14px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.contact-form label { display: grid; gap: 6px; font-weight: 700; font-size: .9rem; }
.contact-form input, .contact-form textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); font: inherit; }
.hp { position: absolute; inset-inline-start: -9999px; }
.btn { display: inline-block; padding: 12px 22px; border: 0; border-radius: 12px; background: var(--brand); color: #fff; font-weight: 800; }
.alert { padding: 12px 14px; border-radius: 12px; margin: 14px 0; font-weight: 600; }
.alert.ok { background: #e6faf6; color: #0b6b5c; }
.alert.err { background: #fde8ec; color: #a1153a; }
.notfound { text-align: center; padding-top: 40px; }
.nf-code { font-size: 5rem; font-weight: 900; background: linear-gradient(90deg, var(--pink), var(--yellow), var(--purple), var(--orange), var(--teal), var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.grid-2, .grid-3 { display: grid; gap: 20px; }

/* ------------------------------------------------------------- ads */
.ad { text-align: center; margin: 16px auto; }
.ad-label { display: block; font-size: .66rem; color: var(--muted); margin-bottom: 4px; letter-spacing: .08em; }
.ad img { margin-inline: auto; border-radius: 8px; }
.ad-header, .ad-footer { max-width: var(--wrap); padding-inline: 16px; }

/* ------------------------------------------------------------- footer */
.site-footer { background: #170c1f; color: #cfc4d8; margin-top: 36px; font-size: .88rem; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; gap: 24px; padding-block: 28px; }
.logo-footer { color: #fff; flex: none; }
.logo-footer img { width: 62px; }
.logo-footer strong { font-size: 1.1rem; }
.footer-about p { margin: 10px 0; opacity: .8; display: none; }
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-col strong { color: #fff; margin-bottom: 2px; }
.socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.socials a { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; }
.socials a:hover { background: var(--pink); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-block: 14px; font-size: .78rem; opacity: .7; }

/* ------------------------------------------------------------- language-specific typography */
.lang-ur { line-height: 2.1; }
.lang-ur .card-title { line-height: 2; }
.lang-ur .article-title { line-height: 1.95; }
.lang-ur .article-body { line-height: 2.5; font-size: 1.14rem; }
.lang-ur .now-feed li a, .lang-ur .ranked li { line-height: 2; }
.lang-ur .flag-breaking { line-height: 1.7; font-size: .6em; }
.lang-hi .article-body, .lang-bn .article-body { line-height: 1.95; }

/* ------------------------------------------------------------- breakpoints */
@media (min-width: 640px) {
  .slides { aspect-ratio: 16 / 10; }
  .card-slide .card-title { font-size: 1.6rem; }
  .hscroll { grid-auto-columns: 42%; }
  .gallery-strip { grid-auto-columns: 46%; }
  .grid-2, .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .article-figure { margin-inline: 0; }
  .article-figure img { border-radius: var(--radius); }
  .article-figure figcaption { padding-inline: 0; }
  .article-title { font-size: 2rem; }
  .langsw-btn span { display: inline; }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-about { grid-column: 1 / -1; }
  .footer-about p { display: block; }
  .cat-grid { grid-template-columns: 1.1fr 1fr; }
  .cat-grid > .card-default { grid-row: span 3; }
}
@media (min-width: 1024px) {
  :root { --header-h: 70px; }
  .desk-only { display: block !important; }
  nav.desk-only { display: flex !important; }
  .logo img { width: 92px; }
  .logo-text strong { font-size: 1.32rem; }
  .logo-text small { display: block; }
  .hero { grid-template-columns: minmax(0, 1fr) 340px; align-items: stretch; margin-top: 18px; }
  .slider { min-height: 440px; }
  .slides { aspect-ratio: auto; width: 100%; height: 100%; position: absolute; inset: 0; }
  .slider-nav { display: grid; opacity: 0; transition: opacity .2s; }
  .slider:hover .slider-nav { opacity: 1; }
  .card-slide .card-body { padding: 28px 30px 42px; }
  .card-slide .card-title { font-size: 2rem; max-width: 92%; }
  .now-feed { display: block; }
  .now-feed li:nth-child(n+5) { display: block; }
  .hscroll { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .hscroll > :nth-child(n+5) { display: none; }
  .layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .article-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; margin-top: 26px; }
  .article-title { font-size: 2.45rem; line-height: 1.32; }
  .article-subtitle { font-size: 1.18rem; }
  .article-body { font-size: 1.2rem; }
  .ltr .article-body { font-size: 1.15rem; }
  .gallery-strip { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); margin-inline: 0; padding-inline: 0; overflow: visible; }
  .sticky { position: sticky; top: 130px; }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .footer-about { grid-column: auto; }
  .catnav a { padding-inline: 13px; font-size: .92rem; }
}
@media (max-width: 380px) {
  .logo img { width: 52px; }
  .card-slide .card-title { font-size: 1.18rem; }
}
@media print {
  .site-header, .breaking, .site-footer, .share, .side-col, .ad, .more-news, .read-progress { display: none !important; }
}

/* =====================================================================
   v2.1 — mobile drawer navigation + homepage "soul"
   ===================================================================== */
/* one navigation per device: drawer on phones/tablets, section bar on desktop */
.menu-btn { display: inline-grid; }
.catnav { display: none; }
@media (min-width: 1024px) { .menu-btn { display: none; } .catnav { display: block; } }

.drawer { position: fixed; inset: 0; z-index: 80; background: rgba(12, 8, 18, .45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fade .2s ease; }
.drawer[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
.drawer-panel { position: absolute; inset-block: 0; inset-inline-start: 0; width: min(86vw, 350px); background: var(--surface); overflow-y: auto; padding: 10px 14px 28px; box-shadow: 0 0 60px rgba(0,0,0,.3); animation: slidein .25s cubic-bezier(.2,.8,.2,1); }
@keyframes slidein { from { transform: translateX(-100%); } }
.rtl .drawer-panel { animation-name: slidein-rtl; }
@keyframes slidein-rtl { from { transform: translateX(100%); } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 10px; }
.drawer-head .logo img { width: 54px; }
.drawer-search { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 0 12px; height: 44px; background: var(--bg); border-radius: 12px; color: var(--muted); }
.drawer-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--text); outline: none; }
.drawer-nav { display: flex; flex-direction: column; padding-block: 4px; }
.drawer-nav a { display: flex; align-items: center; gap: 12px; padding: 9px 6px; border-radius: 10px; font-weight: 700; font-size: .95rem; }
.drawer-nav a:hover, .drawer-nav a.active { background: var(--bg); }
.drawer-sub { display: flex; flex-wrap: wrap; gap: 4px 6px; padding: 0 44px 6px 6px; }
[dir="ltr"] .drawer-sub { padding: 0 6px 6px 44px; }
.drawer-nav .drawer-sub a { padding: 3px 0; font-size: .82rem; font-weight: 600; color: var(--muted); }
.drawer-nav .drawer-sub a:not(:last-child)::after { content: "·"; margin-inline-start: 6px; }
.drawer-nav .drawer-sub a:hover { background: none; color: var(--text); }
.drawer-nav .ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; color: var(--c); background: color-mix(in srgb, var(--c) 13%, var(--surface)); }
.drawer-langs { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.drawer-langs strong { font-size: .8rem; color: var(--muted); }
.drawer-langs div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 8px; }
.drawer-langs a { text-align: center; padding: 8px; border-radius: 10px; background: var(--bg); font-weight: 700; font-size: .9rem; }
.drawer-langs a.active { background: var(--brand); color: #fff; }
.drawer-pages { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 16px; font-size: .8rem; color: var(--muted); }

/* slider: progress line of the auto-play */
.slider-progress { position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.15); z-index: 3; }
.slider-progress i { display: block; height: 100%; width: 0; background: var(--yellow); }
.card-slide .card-title { letter-spacing: -.005em; }

/* topic chips with coloured icons */
.topics { margin-top: 18px; }
.topics-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px 6px; scroll-snap-type: x proximity; }
.topics-row::-webkit-scrollbar { display: none; }
.topic { flex: none; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 76px; text-align: center; font-size: .74rem; font-weight: 700; color: var(--text-2); line-height: 1.35; }
.topic-ico { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent); transition: transform .2s, background .2s, color .2s; }
.topic:hover .topic-ico { transform: translateY(-2px); background: var(--c); color: #fff; }

/* "your language" band */
.lang-band { margin: 34px 0; background: linear-gradient(120deg, #2a1236 0%, #4A235A 45%, #0E5DA8 100%); color: #fff; position: relative; overflow: hidden; }
.lang-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 15% 20%, rgba(238,37,84,.35), transparent 40%), radial-gradient(circle at 85% 80%, rgba(46,205,181,.3), transparent 45%); }
.lang-band-inner { position: relative; display: grid; gap: 16px; padding-block: 28px; }
.lang-band h2 { margin: 0 0 6px; font-size: 1.35rem; font-weight: 800; }
.lang-band p { margin: 0; opacity: .85; font-size: .92rem; }
.lang-band-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lang-band-chips a { padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); font-weight: 700; font-size: .92rem; backdrop-filter: blur(4px); transition: background .2s, color .2s; }
.lang-band-chips a:hover, .lang-band-chips a.on { background: #fff; color: var(--purple); }

/* colourful section panels */
.panels { display: grid; gap: 18px; }
.panel { background: color-mix(in srgb, var(--c) 6%, var(--surface)); border-radius: 18px; padding: 14px 16px 6px; border-top: 4px solid var(--c); box-shadow: var(--shadow); min-width: 0; }
.panel-head { display: flex; align-items: center; gap: 10px; margin: 2px 0 12px; font-size: 1.08rem; font-weight: 800; }
.panel-ico { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--c); color: #fff; flex: none; }
.panel-name { flex: 1; }
.panel-head a { font-size: .78rem; font-weight: 700; color: var(--c); }
.panel .card-default .card-title { font-size: 1.08rem; }
.panel .card-row { border-color: color-mix(in srgb, var(--c) 18%, var(--line)); }

/* resident's corner */
.resident { margin-block: 34px 10px; }
.resident-inner { border-radius: 20px; padding: 22px 18px; background: var(--surface); box-shadow: var(--shadow); background-image: linear-gradient(135deg, color-mix(in srgb, var(--teal) 10%, transparent), transparent 55%); }
.resident-head h2 { margin: 0 0 4px; font-size: 1.25rem; font-weight: 800; }
.resident-head p { margin: 0 0 16px; color: var(--muted); font-size: .9rem; }
.resident-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.resident-grid a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; border-radius: 14px; background: var(--bg); text-align: center; font-weight: 700; font-size: .8rem; line-height: 1.4; transition: transform .2s; }
.resident-grid a:hover { transform: translateY(-2px); }
.resident-grid .topic-ico { width: 46px; height: 46px; }

/* most read: brand numbers */
.most-read .ranked li::before { -webkit-text-stroke: 0; color: var(--pink); opacity: .9; }
.most-read .ranked li:nth-child(n+4)::before { color: var(--muted); opacity: .5; }

@media (min-width: 768px) {
  .panels { grid-template-columns: repeat(2, 1fr); }
  .lang-band-inner { grid-template-columns: 1fr 1.2fr; align-items: center; padding-block: 36px; }
  .resident-grid { grid-template-columns: repeat(6, 1fr); }
  .resident-inner { padding: 26px 28px; }
}
@media (min-width: 1024px) {
  .topics-row { justify-content: space-between; margin-inline: 0; padding-inline: 0; overflow: visible; flex-wrap: wrap; }
  .topic { width: 84px; }
  .panels { grid-template-columns: repeat(3, 1fr); }
  .lang-band h2 { font-size: 1.6rem; }
}

/* =====================================================================
   v3 — institutional front page
   ===================================================================== */
/* edition strip */
.edition { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: .78rem; color: var(--muted); }
.edition-date strong { color: var(--text); font-weight: 800; }
.edition-date .sep { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--muted); margin-inline: 8px; vertical-align: middle; opacity: .6; }
.edition-live { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--pink); white-space: nowrap; }

/* front: slider + two lead stories */
.front { display: grid; gap: 12px; margin-top: 14px; }
.front-side { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.card-overlay .card-link { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow); }
.card-overlay .card-media { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.card-overlay .card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,6,14,.9), rgba(8,6,14,.2) 60%, transparent); }
.card-overlay .card-body { position: absolute; inset-inline: 0; bottom: 0; padding: 12px; color: #fff; z-index: 1; gap: 4px; }
.card-overlay .kicker { background: var(--c, var(--accent)); color: #fff; padding: 1px 8px; border-radius: 999px; font-size: .66rem; }
.card-overlay .card-title { font-size: .92rem; line-height: 1.45; }
.card-overlay .card-link:hover .card-title { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.card-overlay .card-meta, .card-overlay .card-meta .src { color: rgba(255,255,255,.8); }

/* live timeline (horizontal) */
.timeline { margin-top: 22px; display: grid; gap: 10px; }
.timeline-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1rem; font-weight: 800; }
.timeline-track { list-style: none; margin: 0 -16px; padding: 4px 16px 10px; display: grid; grid-auto-flow: column; grid-auto-columns: 70%; gap: 0; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.timeline-track::-webkit-scrollbar { display: none; }
.timeline-track li { scroll-snap-align: start; position: relative; padding: 18px 14px 0 0; padding-inline: 0 18px; border-top: 2px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.timeline-track li::before { content: ""; position: absolute; top: -7px; inset-inline-start: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 3px solid var(--pink); }
.timeline-track li:nth-child(n+2)::before { border-color: var(--teal); }
.timeline-track time { font-size: .72rem; font-weight: 800; color: var(--muted); }
.timeline-track a { font-size: .9rem; font-weight: 700; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.timeline-track a:hover { color: var(--link); }
.tl-src { font-size: .7rem; font-weight: 800; color: var(--text-2); }

/* one story — many languages */
.multi { margin: 34px 0; background: #160b1e; color: #fff; position: relative; overflow: hidden; }
.multi::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 10% 10%, rgba(238,37,84,.35), transparent 38%), radial-gradient(circle at 90% 90%, rgba(14,93,168,.45), transparent 42%), radial-gradient(circle at 60% 30%, rgba(46,205,181,.18), transparent 35%); }
.multi-inner { position: relative; display: grid; gap: 20px; padding-block: 30px; }
.multi-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 800; letter-spacing: .06em; color: var(--yellow); text-transform: uppercase; }
.multi h2 { margin: 8px 0 6px; font-size: 1.5rem; font-weight: 800; line-height: 1.35; }
.multi-intro p { margin: 0 0 16px; opacity: .8; font-size: .92rem; line-height: 1.7; }
.multi-langs { display: flex; flex-wrap: wrap; gap: 6px; }
.multi-langs button { padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff; font-weight: 700; font-size: .88rem; transition: background .2s, color .2s; }
.multi-langs button:hover { background: rgba(255,255,255,.16); }
.multi-langs button.on { background: #fff; color: var(--purple); border-color: #fff; }
.multi-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; overflow: hidden; backdrop-filter: blur(6px); }
.multi-media { aspect-ratio: 16 / 9; overflow: hidden; }
.multi-media img { width: 100%; height: 100%; object-fit: cover; }
.multi-title { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; animation: mlin .35s ease; }
.multi-title[hidden] { display: none; }
@keyframes mlin { from { opacity: 0; transform: translateY(6px); } }
.ml-lang { font-size: .72rem; font-weight: 800; color: var(--teal); }
.multi-title strong { font-size: 1.15rem; line-height: 1.55; }
.ml-cta { font-size: .8rem; font-weight: 700; opacity: .8; }
.rtl .ml-cta, [dir="rtl"] > .ml-cta { direction: rtl; }
.multi-title:hover strong { text-decoration: underline; text-underline-offset: 4px; }

/* section panels: ad spans full row */
.panels-ad { grid-column: 1 / -1; }
.panels-ad .ad { margin: 0; }

/* in pictures */
.pictures { margin: 34px 0 0; background: #0f0a14; padding-block: 28px 32px; }
.pictures-title { color: #fff; margin: 0 0 14px; font-size: 1.2rem; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.pictures-title::before { content: ""; width: 5px; height: 1.05em; border-radius: 3px; background: var(--yellow); }
.pictures-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.pic { position: relative; display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 1; }
.pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.pic:hover img { transform: scale(1.05); }
.pic span { position: absolute; inset-inline: 0; bottom: 0; padding: 30px 10px 8px; font-size: .74rem; font-weight: 700; color: #fff; background: linear-gradient(to top, rgba(0,0,0,.8), transparent); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pic-0 { grid-column: span 2; aspect-ratio: 16 / 9; }
.pic-0 span { font-size: .95rem; }
.pic:nth-child(n+6) { display: none; }

/* newsroom in numbers */
.figures { margin-block: 30px 6px; }
.figures-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.fig { background: var(--surface); padding: 18px 14px; display: flex; flex-direction: column; gap: 2px; text-align: center; }
.fig b { font-size: 2rem; font-weight: 900; line-height: 1.1; background: linear-gradient(90deg, var(--pink), var(--orange)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fig:nth-child(2) b { background-image: linear-gradient(90deg, var(--purple), var(--blue)); }
.fig:nth-child(3) b { background-image: linear-gradient(90deg, var(--teal), var(--blue)); }
.fig:nth-child(4) b { background-image: linear-gradient(90deg, var(--yellow), var(--orange)); }
.fig span { font-size: .78rem; font-weight: 700; color: var(--muted); }
.figures-langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; }
.figures-langs a { padding: 6px 13px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 700; font-size: .85rem; }
.figures-langs a.on, .figures-langs a:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ads */
.ad { margin: 14px auto; }
.ad-home_top { margin-top: 12px; }
.ad-home_infeed { margin: 6px 0; }
.ad-house a { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--brand) 35%, var(--line)); background: linear-gradient(120deg, color-mix(in srgb, var(--purple) 6%, var(--surface)), color-mix(in srgb, var(--teal) 7%, var(--surface))); text-align: start; position: relative; overflow: hidden; }
.house-bar { position: absolute; inset-inline: 0; top: 0; display: flex; height: 3px; }
.house-bar i { flex: 1; }
.house-bar i:nth-child(1) { background: var(--pink); } .house-bar i:nth-child(2) { background: var(--yellow); } .house-bar i:nth-child(3) { background: var(--purple); }
.house-bar i:nth-child(4) { background: var(--orange); } .house-bar i:nth-child(5) { background: var(--teal); } .house-bar i:nth-child(6) { background: var(--blue); }
.house-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.house-text strong { font-size: .98rem; font-weight: 800; color: var(--brand); }
.house-text small { font-size: .78rem; color: var(--muted); line-height: 1.5; }
.house-cta { flex: none; padding: 8px 14px; border-radius: 999px; background: var(--brand); color: #fff; font-size: .8rem; font-weight: 800; white-space: nowrap; }
.ad-sidebar.ad-house a { flex-direction: column; align-items: flex-start; min-height: 230px; justify-content: center; }
.ad-home_top.ad-house a { min-height: 96px; }

@media (min-width: 640px) {
  .timeline-track { grid-auto-columns: 34%; }
  .pictures-grid { grid-template-columns: repeat(4, 1fr); }
  .pic-0 { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  .pic:nth-child(n+6) { display: block; }
  .figures-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  .front { grid-template-columns: minmax(0, 1fr) 300px; align-items: stretch; }
  .front .slider { min-height: 470px; }
  .front-side { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .card-overlay .card-link { aspect-ratio: auto; height: 100%; }
  .card-overlay .card-title { font-size: 1rem; }
  .timeline { grid-template-columns: 120px minmax(0, 1fr); align-items: start; }
  .timeline-title { padding-top: 10px; }
  .timeline-track { grid-auto-columns: 25%; margin: 0; padding-inline: 0; }
  .multi-inner { grid-template-columns: 1fr 1.1fr; align-items: center; padding-block: 44px; gap: 44px; }
  .multi h2 { font-size: 2rem; }
  .pictures-grid { grid-template-columns: repeat(5, 1fr); grid-auto-rows: 150px; }
  .pic { aspect-ratio: auto; }
  .ad-home_top.ad-house a { min-height: 120px; padding-inline: 28px; }
  .ad-home_top .house-text strong { font-size: 1.15rem; }
}

/* language flags (decorative; the language name is always written next to them) */
.flag { display: inline-block; flex: none; width: auto; height: 1em; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.1); vertical-align: -0.12em; margin-inline-end: 6px; }
.langsw-btn .flag { height: 15px; margin: 0; }
/* keep flags in one column: links follow the page direction (each name is one word, so it still renders correctly) */
[data-lang]:has(> .flag), [data-ml]:has(> .flag) { display: inline-flex; align-items: center; direction: inherit; }
.langsw-menu [data-lang]:has(> .flag), .footer-col [data-lang]:has(> .flag) { display: flex; }

/* homepage latest: the six stories under the in-feed ad as two rows of three */
.latest-grid { margin-top: 18px; }
.latest-grid .card-title { font-size: .98rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 639px) {
  .latest-grid { grid-template-columns: repeat(2, 1fr); gap: 14px 12px; }
  .latest-grid .card-title { font-size: .86rem; line-height: 1.5; }
  .latest-grid .card-meta { font-size: .72rem; }
}

/* footer: sections and languages in two columns */
.footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.footer-links a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* homepage: a section left alone on the last row of the 3-column grid takes the whole row */
@media (min-width: 1024px) {
  .panel-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 28px; align-items: start; padding-bottom: 14px; }
  .panel-wide .panel-head { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1.2fr 1.5fr 1fr 1.5fr; }
}

/* latest news: a dense table of the edition's stories, with the languages each story exists in */
.news-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.news-table thead th { text-align: start; font-size: .74rem; font-weight: 700; color: var(--muted); padding: 0 10px 8px; border-bottom: 2px solid var(--brand); white-space: nowrap; }
.news-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.news-table tbody tr:hover { background: color-mix(in srgb, var(--pink) 4%, transparent); }
.nt-time { white-space: nowrap; color: var(--muted); font-size: .8rem; }
.nt-time time { display: flex; flex-direction: column; gap: 2px; }
.nt-time b { color: var(--text); font-size: .95rem; font-variant-numeric: tabular-nums; }
.nt-sec .kicker { white-space: nowrap; }
.nt-title h2 { font-size: 1rem; line-height: 1.55; margin: 0; font-weight: 700; }
.nt-title h2 a:hover { color: var(--pink); }
.nt-src { display: block; margin-top: 4px; font-size: .75rem; color: var(--muted); }
.nt-langs { min-width: 120px; }
.nt-langs a { display: inline-flex; margin: 0 2px 4px 0; opacity: .85; border-radius: 2px; }
.nt-langs a:hover, .nt-langs a[aria-current] { opacity: 1; outline: 2px solid color-mix(in srgb, var(--pink) 50%, transparent); outline-offset: 1px; }
.nt-langs .flag { display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.nt-count { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 5px; margin-inline-end: 6px; border-radius: 9px; background: var(--bg); font-size: .7rem; font-weight: 800; vertical-align: top; }
@media (max-width: 767px) {
  .news-table thead { display: none; }
  .news-table, .news-table tbody, .news-table tr, .news-table td { display: block; }
  .news-table tr { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .news-table td { padding: 0; border: 0; }
  .nt-time { grid-column: 1; }
  .nt-time time { flex-direction: row; gap: 6px; align-items: baseline; }
  .nt-sec { grid-column: 2; text-align: end; }
  .nt-title, .nt-langs { grid-column: 1 / -1; }
}

/* "Tfaseel News in numbers" */
.numbers { padding-block: 22px 10px; }
.numbers-head h1 { font-size: 1.8rem; margin: 0 0 6px; }
.numbers-head p { color: var(--muted); margin: 0 0 18px; max-width: 70ch; }
.num-block { margin-bottom: 30px; }
.num-block .section-title .flag { vertical-align: -2px; }
.num-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.num { flex: 1 1 140px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; display: flex; flex-direction: column; gap: 4px; border-top: 3px solid var(--purple); }
.num b { font-size: 1.7rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--purple); }
.num span { color: var(--muted); font-size: .85rem; }
.num.big { flex: 2 1 100%; border-top-color: var(--pink); }
.num.big b { font-size: 2.4rem; color: var(--pink); }
.num-sub { font-size: 1rem; margin: 22px 0 10px; }
.num-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.num-bars li { display: grid; grid-template-columns: minmax(110px, 180px) 1fr auto; align-items: center; gap: 10px; font-size: .9rem; }
.num-bars li a { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.num-bars i { height: 10px; border-radius: 5px; background: var(--line); position: relative; overflow: hidden; }
.num-bars i::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--w); border-radius: 5px; background: var(--c, var(--purple)); }
.num-bars li.on i::after { background: var(--pink); }
.num-bars b { font-variant-numeric: tabular-nums; min-width: 4ch; text-align: end; }
.num-note { font-size: .8rem; }
@media (min-width: 768px) {
  .num.big { flex: 2 1 280px; }
  .num.big b { font-size: 3rem; }
}

/* "Advertise with us" */
.adv h2 { font-size: 1.15rem; margin: 26px 0 10px; }
.adv p { line-height: 1.8; }
.adv-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.adv-figs div { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; border-top: 3px solid var(--pink); display: flex; flex-direction: column; gap: 2px; }
.adv-figs b { font-size: 1.6rem; font-weight: 800; color: var(--purple); font-variant-numeric: tabular-nums; }
.adv-figs span { font-size: .8rem; color: var(--muted); }
.adv-langs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.adv-langs span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .82rem; }
.adv-pos { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.adv-pos li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.adv-pos b { color: var(--muted); font-weight: 600; font-size: .85rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* article photo lightbox */
.lb-link { display: block; cursor: zoom-in; }
.lb { position: fixed; inset: 0; z-index: 1000; background: rgba(10, 6, 14, .94); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 56px 12px 40px; }
.lb[hidden] { display: none; }
html.lb-open { overflow: hidden; }
.lb-fig { margin: 0; grid-column: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100%; min-height: 0; }
.lb-fig img { max-width: 100%; max-height: calc(100vh - 150px); object-fit: contain; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.lb-fig figcaption { color: #e9e3ee; font-size: .9rem; text-align: center; max-width: 70ch; line-height: 1.6; }
.lb-fig figcaption[hidden] { display: none; }
.lb-close, .lb-nav { border: 0; background: rgba(255,255,255,.12); color: #fff; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.lb-close:hover, .lb-nav:hover { background: var(--pink); }
.lb-close { position: absolute; top: 12px; inset-inline-end: 12px; width: 42px; height: 42px; }
.lb-nav { width: 46px; height: 46px; }
.lb-nav[hidden] { visibility: hidden; display: grid; }
.lb-prev { grid-column: 1; transform: scaleX(-1); }
.lb-next { grid-column: 3; }
[dir="rtl"] .lb-prev { transform: none; }
[dir="rtl"] .lb-next { transform: scaleX(-1); }
.lb-count { position: absolute; top: 20px; inset-inline-start: 18px; color: #cfc4d8; font-size: .85rem; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .lb { grid-template-columns: minmax(0, 1fr); padding-inline: 8px; }
  .lb-fig { grid-column: 1; }
  .lb-nav { position: absolute; bottom: 14px; }
  .lb-prev { inset-inline-start: 20px; }
  .lb-next { inset-inline-end: 20px; }
}

/* "Advertise with us" media kit */
.mk-hero { background: radial-gradient(120% 140% at 85% 0%, #7a2b74 0%, var(--purple) 45%, #1d0d26 100%); color: #fff; padding: 46px 0 18px; margin-bottom: 26px; }
.mk-hero-in { display: grid; gap: 26px; align-items: center; }
.mk-kicker { display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .02em; background: rgba(255,255,255,.12); padding: 4px 12px; border-radius: 999px; }
.mk-hero h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.3; margin: 12px 0 10px; }
.mk-hero p { color: #e6d9ec; max-width: 60ch; margin: 0 0 18px; line-height: 1.8; }
.mk-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: #d8c9e0; font-size: .85rem; }
.mk-btn { background: var(--pink); color: #fff; border: 0; padding: 12px 22px; border-radius: 999px; font-weight: 800; }
.mk-btn:hover { background: #d81b48; color: #fff; }
.mk-hero-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mk-hero-kpis div { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 16px 14px; display: flex; flex-direction: column; gap: 4px; }
.mk-hero-kpis b { font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 800; color: var(--yellow); font-variant-numeric: tabular-nums; }
.mk-hero-kpis span { font-size: .78rem; color: #e6d9ec; }
.mk-langs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; }
.mk-langs span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: .78rem; }
.mk-langs span.on { background: var(--pink); }
.mk { padding-bottom: 10px; }
.mk-intro { max-width: 80ch; margin-bottom: 18px; }
.mk-block { margin-bottom: 34px; }
.mk-card { background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); padding: 18px; margin: 0; }
.mk-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.mk-kpis div { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); padding: 16px; border-top: 3px solid var(--pink); display: flex; flex-direction: column; gap: 4px; }
.mk-kpis div:nth-child(2) { border-top-color: var(--purple); }
.mk-kpis div:nth-child(3) { border-top-color: var(--teal); }
.mk-kpis div:nth-child(4) { border-top-color: var(--yellow); }
.mk-kpis b { font-size: 1.8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.mk-kpis span { color: var(--muted); font-size: .82rem; }
.mk-charts { display: grid; gap: 14px; }
.mk-card figcaption { font-weight: 800; margin-bottom: 12px; }
.mk-cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; height: 220px; align-items: end; }
.mk-col { height: 100%; display: grid; grid-template-rows: auto 1fr auto; align-items: end; text-align: center; min-width: 0; }
.mk-col b { font-size: .66rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.mk-col i { display: block; height: var(--h); min-height: 3px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--pink), var(--purple)); align-self: end; }
.mk-col span { font-size: .66rem; color: var(--muted); padding-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.mk-note { font-size: .75rem; color: var(--muted); margin: 10px 0 0; }
.mk-bars { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.mk-bars li { display: grid; grid-template-columns: minmax(96px, 150px) 1fr auto; gap: 10px; align-items: center; font-size: .84rem; }
.mk-bars span { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.mk-bars i { height: 10px; border-radius: 5px; background: var(--line); position: relative; overflow: hidden; }
.mk-bars i::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--w); border-radius: 5px; background: var(--c, var(--purple)); }
.mk-bars li.on i::after { background: var(--pink); }
.mk-bars b { font-variant-numeric: tabular-nums; min-width: 4ch; text-align: end; }
.mk-why { display: grid; gap: 12px; }
.mk-why h3 { font-size: 1rem; margin: 10px 0 6px; }
.mk-why p { margin: 0; color: var(--muted); line-height: 1.7; font-size: .9rem; }
.mk-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--pink); }
.mk-ico-2 { background: var(--purple); } .mk-ico-3 { background: var(--teal); } .mk-ico-4 { background: var(--orange); }
.mk-place { display: grid; gap: 18px; align-items: start; }
.mk-mock { background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); padding: 14px; display: grid; gap: 8px; max-width: 520px; width: 100%; margin-inline: auto; }
.mk-browser { display: flex; gap: 5px; } .mk-browser i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.mk-m-head { display: flex; gap: 8px; align-items: center; } .mk-logo { width: 54px; height: 14px; border-radius: 4px; background: var(--purple); opacity: .8; } .mk-nav { flex: 1; height: 8px; border-radius: 4px; background: var(--line); }
.mk-m-body { display: grid; grid-template-columns: 1fr 28%; gap: 8px; }
.mk-m-main { display: grid; gap: 7px; }
.mk-m-lead { height: 70px; border-radius: 8px; background: color-mix(in srgb, var(--purple) 14%, var(--bg)); }
.mk-m-rows, .mk-m-text { display: grid; gap: 5px; } .mk-m-rows i, .mk-m-text i { height: 8px; border-radius: 4px; background: var(--line); } .mk-m-rows i:nth-child(2) { width: 70%; }
.mk-slot { position: relative; border-radius: 8px; border: 2px dashed var(--pink); background: color-mix(in srgb, var(--pink) 10%, transparent); min-height: 26px; display: grid; place-items: center; }
.mk-slot em, .mk-slots em { font-style: normal; width: 22px; height: 22px; border-radius: 50%; background: var(--pink); color: #fff; font-size: .72rem; font-weight: 800; display: grid; place-items: center; flex: none; }
.mk-s-bill { min-height: 54px; } .mk-s-feed { min-height: 38px; } .mk-s-in { min-height: 40px; width: 60%; } .mk-s-side { min-height: 150px; align-self: start; }
.mk-slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mk-slots li { display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: 12px; box-shadow: var(--shadow); padding: 10px 12px; }
.mk-slots span { flex: 1; font-weight: 600; font-size: .9rem; }
.mk-slots b { color: var(--muted); font-size: .78rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mk-split { display: grid; gap: 14px; }
.mk-split h2 { font-size: 1.1rem; margin: 0 0 8px; } .mk-split p { line-height: 1.8; margin: 0 0 10px; color: var(--muted); }
.mk-chips { display: flex; flex-wrap: wrap; gap: 6px; } .mk-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: .8rem; }
.mk-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; counter-reset: s; }
.mk-steps li { display: flex; gap: 12px; align-items: center; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); padding: 14px 16px; font-weight: 600; }
.mk-steps em { font-style: normal; width: 34px; height: 34px; border-radius: 50%; background: var(--purple); color: #fff; display: grid; place-items: center; font-weight: 800; flex: none; }
.mk-form-wrap { background: linear-gradient(135deg, color-mix(in srgb, var(--purple) 8%, var(--surface)), var(--surface)); border-radius: 22px; box-shadow: var(--shadow); padding: 22px; scroll-margin-top: 120px; }
.mk-form-head h2 { margin: 0 0 4px; } .mk-form-head p { margin: 0 0 14px; color: var(--muted); }
.mk-form { display: grid; gap: 12px; }
@media (min-width: 768px) {
  .mk-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mk-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-split { grid-template-columns: 1fr 1fr; }
  .mk-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mk-steps li { flex-direction: column; align-items: flex-start; }
  .mk-form { grid-template-columns: 1fr 1fr; } .mk-form .mk-full { grid-column: 1 / -1; } .mk-form button { justify-self: start; }
}
@media (min-width: 1024px) {
  .mk-hero-in { grid-template-columns: 1.25fr 1fr; }
  .mk-charts { grid-template-columns: 1.3fr 1fr; }
  .mk-why { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mk-place { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 480px) { .mk-hero-kpis { grid-template-columns: 1fr 1fr 1fr; } .mk-hero-kpis div { padding: 12px 8px; } .mk-cols span { font-size: .58rem; } }