/* ==========================================================================
   شبكة نيوز الفلسطينية — main.css
   One design system, two skins (body.skin-kufiya | body.skin-wall), dark mode.
   Layout breakpoints: ≥1600 wide · ≤1279 · ≤1023 tablet · ≤767 phone · ≤380 small phone.
   Motion: transform/opacity only; nothing is hidden unless JS will show it
   (html.js), and everything is off under prefers-reduced-motion.
   ========================================================================== */

/* ── Fonts (self-hosted, OFL) ─────────────────────────────────────────── */
@font-face { font-family: "PNN Kufi"; src: url(../fonts/kufi-arabic.woff2) format("woff2"); font-weight: 400 900; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "PNN Kufi"; src: url(../fonts/kufi-latin.woff2) format("woff2"); font-weight: 400 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "PNN Readex"; src: url(../fonts/readex-arabic.woff2) format("woff2"); font-weight: 300 700; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "PNN Readex"; src: url(../fonts/readex-latin.woff2) format("woff2"); font-weight: 300 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root {
  --red: #d7141a; --red-d: #a80f14; --red-soft: #fde8e8;
  --ink: #0e0e10; --ink-2: #1a1b20; --gold: #c9a227; --green: #0f7a3d; --paper: #f4efe4;
  --bg: #ffffff; --surface: #f5f4f1; --card: #ffffff; --text: #131316; --muted: #5d5e66; --line: #e7e4de;
  --head: "PNN Kufi", "Noto Kufi Arabic", Tahoma, sans-serif;
  --body: "PNN Readex", "Readex Pro", "Segoe UI", Tahoma, sans-serif;
  --r: 14px; --r-s: 8px; --r-l: 18px;
  --shadow: 0 1px 2px rgb(0 0 0 / .06), 0 6px 18px rgb(0 0 0 / .07);
  --shadow-h: 0 4px 10px rgb(0 0 0 / .08), 0 20px 40px rgb(0 0 0 / .16);
  --wrap: 1280px; --gutter: clamp(14px, 3vw, 28px);
  --ease: cubic-bezier(.2, .7, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1);
  --fs-scale: 1;
  --hero-h: clamp(420px, 38vw, 580px);
  --net-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M0 9 9 0 18 9 9 18Z' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Ccircle cx='9' cy='9' r='1.7'/%3E%3C/svg%3E");
  --net-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M0 9 9 0 18 9 9 18Z' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3Ccircle cx='9' cy='9' r='1.7' fill='%23fff'/%3E%3C/svg%3E");
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg: #0f1013; --surface: #17181d; --card: #1b1c22; --text: #eceae6; --muted: #a3a3ad; --line: #2a2b33;
  --red-soft: #3a1517; --paper: #22201b;
  --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 6px 18px rgb(0 0 0 / .35);
  --shadow-h: 0 4px 10px rgb(0 0 0 / .4), 0 20px 40px rgb(0 0 0 / .5);
  color-scheme: dark;
}
@media not all /* was prefers-color-scheme: dark; dark is the reader's choice */ {
  html:not([data-theme="light"]) {
    --bg: #0f1013; --surface: #17181d; --card: #1b1c22; --text: #eceae6; --muted: #a3a3ad; --line: #2a2b33;
    --red-soft: #3a1517; --paper: #22201b;
    --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 6px 18px rgb(0 0 0 / .35);
    --shadow-h: 0 4px 10px rgb(0 0 0 / .4), 0 20px 40px rgb(0 0 0 / .5);
    color-scheme: dark;
  }
}
body.skin-wall { --bg: #e4dfd4; --surface: #ede9df; --card: #f7f3ea; --line: #cfc8b9; }
html[data-theme="dark"] body.skin-wall { --bg: #141210; --surface: #1c1a16; --card: #24211c; --line: #3a362e; }

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* The hidden attribute always wins: .breaking/.tape/.totop/.share__menu set their own display. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
/* A slanted band or a long word must never make the page scroll sideways. */
html, body { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); font-size: 16px; line-height: 1.7;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; transition: background-color .3s, color .3s; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s; }
a:hover { color: var(--red); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--head); line-height: 1.45; margin: 0; letter-spacing: 0; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.screen-reader-text { 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; z-index: 100; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 6px; }
.skip:focus { top: 8px; }
.icon { width: 20px; height: 20px; fill: currentColor; flex: none; }
.iconbtn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; color: inherit; transition: background .2s, transform .25s var(--ease); }
.iconbtn:hover { background: rgb(127 127 127 / .16); transform: translateY(-1px); }
.btn { display: inline-block; background: var(--red); color: #fff; padding: 10px 22px; border-radius: 999px; font-family: var(--head); font-weight: 700; transition: background .2s, transform .2s var(--ease); }
.btn:hover { color: #fff; background: var(--red-d); transform: translateY(-2px); }
.main { min-height: 60vh; }

/* ── Reading progress ─────────────────────────────────────────────────── */
.progress { position: fixed; inset: 0 0 auto 0; height: 4px; z-index: 80; pointer-events: none; }
.progress span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold), var(--red)); transform-origin: right; transform: scaleX(0); }

/* ── Top bar ──────────────────────────────────────────────────────────── */
.topbar { background: var(--ink); color: #d9d8d3; font-size: 13px; }
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; }
.topbar__date { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.topbar__date .sep { opacity: .45; }
.topbar__tools { display: flex; gap: 2px; flex: none; }
.topbar .iconbtn { width: 32px; height: 32px; color: #e9e7e2; }
.topbar .icon { width: 17px; height: 17px; }
.clock { font-variant-numeric: tabular-nums; color: #fff; font-weight: 700; }

/* ── Header ───────────────────────────────────────────────────────────── */
.site-header { position: relative; background: var(--bg); border-bottom: 1px solid var(--line); }
.site-header__in { display: flex; align-items: center; gap: 18px; min-height: 92px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); flex: none; }
.brand:hover { color: var(--text); }
.brand__emblem { width: 56px; height: 66px; object-fit: contain; filter: drop-shadow(0 3px 8px rgb(0 0 0 / .2)); transition: transform .6s var(--ease-out); }
.brand:hover .brand__emblem { transform: rotate(-6deg) scale(1.06); }
.brand__text { display: grid; line-height: 1.12; }
.brand__name { font-family: var(--head); font-weight: 900; font-size: 32px; }
.brand__name b { color: var(--red); font-weight: 900; }
.brand__sub { font-family: var(--head); font-weight: 600; font-size: 15px; color: var(--muted); letter-spacing: .5px; }
.brand--small .brand__emblem { width: 40px; height: 48px; }
.brand--small .brand__name { font-size: 22px; }
.brand--small .brand__sub { font-size: 12.5px; }

.site-search { display: flex; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding-inline: 16px 5px; transition: box-shadow .25s, border-color .25s, background .25s; }
.site-search:focus-within { border-color: var(--red); background: var(--card); box-shadow: 0 0 0 4px rgb(215 20 26 / .12); }
.site-search input { flex: 1; border: 0; background: transparent; color: var(--text); padding: 11px 4px; font: inherit; outline: none; min-width: 0; }
.site-search input::-webkit-search-cancel-button { filter: grayscale(1); }
.site-search button { flex: none; border: 0; background: var(--red); color: #fff; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; transition: transform .25s var(--ease), background .2s; }
.site-search button:hover { background: var(--red-d); transform: rotate(-12deg) scale(1.06); }
.site-search--header { margin-inline-start: auto; width: min(360px, 38vw); }
.site-search--big { margin: 18px 0 6px; width: min(560px, 100%); background: var(--card); }
.menu-btn { display: none; color: var(--text); }

/* ── Section nav (sticky; shows the emblem once stuck) ────────────────── */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 3px solid var(--ink);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); transition: box-shadow .3s; }
html[data-theme="dark"] .nav { border-bottom-color: var(--red); }
@media not all /* was prefers-color-scheme: dark; dark is the reader's choice */ { html:not([data-theme="light"]) .nav { border-bottom-color: var(--red); } }
.nav.is-stuck { box-shadow: 0 10px 24px rgb(0 0 0 / .1); }
.nav__in { display: flex; align-items: center; }
.nav__mini { flex: none; display: grid; place-items: center; width: 0; overflow: hidden; opacity: 0; transition: width .4s var(--ease-out), opacity .3s, margin .4s var(--ease-out); }
.nav__mini img { width: 27px; height: 32px; object-fit: contain; }
.nav.is-stuck .nav__mini { width: 34px; opacity: 1; margin-inline-end: 8px; }
.nav__links { position: relative; flex: 1; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.nav__links::-webkit-scrollbar { display: none; }
.nav__link { position: relative; flex: none; padding: 14px 14px; font-family: var(--head); font-weight: 700; font-size: 15.5px; white-space: nowrap; scroll-snap-align: start; transition: color .2s; }
.nav__link.is-active { color: var(--red); }
/* One indicator glides under the hovered / current link (site.js); without JS each link has its own. */
.nav__ink { position: absolute; bottom: 7px; left: 0; height: 3px; width: 0; border-radius: 3px; background: var(--red); pointer-events: none;
  transition: transform .45s var(--ease-out), width .45s var(--ease-out), opacity .3s; opacity: 0; }
/* More sections than fit: edge fades + arrows (desktop); phones swipe. */
.nav__in { position: relative; }
.nav__arrow { position: absolute; top: 50%; z-index: 2; width: 34px; height: 34px; margin-top: -17px; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--text);
  font-size: 22px; line-height: 1; display: grid; place-items: center; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s var(--ease); }
.nav__arrow:hover { color: var(--red); transform: scale(1.08); }
.nav__arrow--more { inset-inline-end: calc(var(--gutter) - 6px); }
.nav__arrow--back { inset-inline-start: calc(var(--gutter) + 40px); }
.nav.has-more .nav__arrow--more, .nav.has-back .nav__arrow--back { opacity: 1; pointer-events: auto; }
.nav.has-more .nav__links { mask-image: linear-gradient(to left, #000 calc(100% - 90px), transparent); }
.nav.has-back .nav__links { mask-image: linear-gradient(to right, #000 calc(100% - 90px), transparent); }
.nav.has-more.has-back .nav__links { mask-image: linear-gradient(to right, transparent, #000 90px, #000 calc(100% - 90px), transparent); }
html:not(.js) .nav__link.is-active::after { content: ""; position: absolute; inset-inline: 14px; bottom: 7px; height: 3px; border-radius: 3px; background: var(--red); }

/* ── Drawer (phones and tablets) ──────────────────────────────────────── */
.drawer { position: fixed; inset: 0; z-index: 90; }
.drawer[hidden] { display: none; }
.drawer__backdrop { position: absolute; inset: 0; background: rgb(10 10 12 / .55); opacity: 0; transition: opacity .35s; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.drawer__panel { position: absolute; inset-block: 0; inset-inline-start: 0; width: min(360px, 88vw); background: var(--bg); display: flex; flex-direction: column; gap: 14px;
  padding: 16px 18px 22px; overflow-y: auto; box-shadow: -20px 0 50px rgb(0 0 0 / .3); transform: translateX(100%); transition: transform .45s var(--ease-out); }
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.drawer__close { color: var(--text); }
.drawer__nav { display: grid; }
.drawer__nav a { display: flex; align-items: center; justify-content: space-between; padding: 12px 6px; border-bottom: 1px dashed var(--line); font-family: var(--head); font-weight: 700; font-size: 17px;
  opacity: 0; transform: translateX(24px); transition: opacity .4s, transform .5s var(--ease-out), color .2s, padding .25s var(--ease); }
.drawer__nav a::after { content: "←"; color: var(--red); opacity: .55; transition: transform .25s var(--ease); }
.drawer__nav a:hover { padding-inline-start: 12px; }
.drawer__nav a:hover::after { transform: translateX(-4px); opacity: 1; }
.drawer.is-open .drawer__nav a { opacity: 1; transform: none; }
.drawer__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.drawer__theme { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px; padding: 8px 14px; font-family: var(--head); font-weight: 700; }
.drawer__socials { display: flex; gap: 4px; color: var(--text); }
body.is-locked { overflow: hidden; }

/* ── «آخر الأخبار» tape ───────────────────────────────────────────────── */
.tape { position: relative; display: flex; align-items: stretch; margin: 14px 0 0; overflow: hidden; background: var(--ink); color: #fff; transform: rotate(-.6deg); box-shadow: 0 8px 20px rgb(0 0 0 / .12); }
body.skin-wall .tape { background: var(--red); transform: rotate(-1.1deg) scaleX(1.03); }
.tape__label { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 18px; font-family: var(--head); font-weight: 800; background: var(--red); z-index: 1; position: relative; }
.tape__label::after { content: ""; position: absolute; inset-block: 0; inset-inline-end: -12px; width: 12px; background: var(--red); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.tape__dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pulse-w 1.6s infinite; }
body.skin-wall .tape__label, body.skin-wall .tape__label::after { background: var(--ink); }
.tape__viewport { overflow: hidden; flex: 1; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.tape__track { display: flex; width: max-content; padding: 11px 0; animation: tape var(--tape-speed, 70s) linear infinite; }
.tape:hover .tape__track, .tape:focus-within .tape__track { animation-play-state: paused; }
.tape__item { display: inline-flex; align-items: center; gap: 10px; padding-inline: 20px; white-space: nowrap; font-weight: 600; color: #fff; }
.tape__item::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.tape__item time { opacity: .7; font-size: 13px; }
.tape__item:hover { color: var(--gold); }
@keyframes tape { from { transform: translateX(0); } to { transform: translateX(50%); } }

/* ── Breaking bar (bottom, two-tone) ──────────────────────────────────── */
.breaking { position: fixed; inset: auto 0 0 0; z-index: 70; display: flex; align-items: stretch; min-height: 60px; color: #fff; background: var(--red);
  box-shadow: 0 -10px 30px rgb(0 0 0 / .25); transform: translateY(110%); transition: transform .6s var(--ease-out); }
.breaking.is-on { transform: translateY(0); }
.breaking::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .18) 45%, transparent 60%); background-size: 250% 100%; animation: sheen 3.2s linear infinite; pointer-events: none; }
.breaking__label { position: relative; flex: none; display: grid; place-items: center; padding: 0 22px 0 30px; background: var(--ink); font-family: var(--head); font-weight: 900; font-size: 22px; }
.breaking__label::after { content: ""; position: absolute; inset-block: 0; inset-inline-end: -14px; width: 14px; background: var(--net-light) 0 0 / 9px 9px, var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.breaking__label::before { content: ""; position: absolute; inset-inline-start: 11px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--red); animation: pulse 1.2s infinite; }
.breaking__body { position: relative; flex: 1; display: flex; align-items: center; gap: 12px; padding: 8px 26px; overflow: hidden; }
.breaking__time { flex: none; background: rgb(0 0 0 / .25); border-radius: 6px; padding: 2px 8px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.breaking__text { font-family: var(--head); font-weight: 700; font-size: 18px; color: #fff; line-height: 1.5; }
.breaking__text:hover { color: #fff; text-decoration: underline; }
.breaking__text.is-swap { animation: swap .6s var(--ease-out); }
.breaking__close { position: relative; flex: none; border: 0; background: rgb(0 0 0 / .18); color: #fff; width: 50px; display: grid; place-items: center; }
.breaking__close:hover { background: rgb(0 0 0 / .32); }
body.has-breaking { padding-bottom: 64px; }

/* ── Kickers, meta ────────────────────────────────────────────────────── */
.card__kickers { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.kicker { display: inline-block; font-family: var(--head); font-weight: 700; font-size: 12.5px; line-height: 1.65; padding: 1px 10px; border-radius: 4px; background: var(--red); color: #fff; transition: background .2s, transform .2s var(--ease); }
.kicker:hover { color: #fff; background: var(--red-d); transform: translateY(-1px); }
.kicker--breaking { background: var(--gold); color: var(--ink); animation: blink 1.4s steps(2, start) 3; }
.card__meta { font-size: 13px; color: var(--muted); margin-top: 8px; }
.card__lead { color: var(--muted); margin: 6px 0 0; font-size: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Section heads ────────────────────────────────────────────────────── */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 20px; padding-bottom: 12px; position: relative; }
.sec-head::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 6px; background: var(--net-dark) 0 50% / 9px 9px; opacity: .16; }
html[data-theme="dark"] .sec-head::after { background-image: var(--net-light); opacity: .2; }
@media not all /* was prefers-color-scheme: dark; dark is the reader's choice */ { html:not([data-theme="light"]) .sec-head::after { background-image: var(--net-light); opacity: .2; } }
.sec-head__title { position: relative; font-size: 25px; font-weight: 900; padding-inline-start: 18px; }
.sec-head__title::before { content: ""; position: absolute; inset-inline-start: 0; top: 7px; bottom: 7px; width: 7px; border-radius: 3px; background: var(--red); transform-origin: bottom; }
.sec-head__title::after { content: ""; position: absolute; inset-inline-start: 0; bottom: -12px; height: 6px; width: 60px; background: var(--red); border-radius: 3px; z-index: 1; transform-origin: right; }
body.skin-wall .sec-head__title { font-size: clamp(28px, 4vw, 44px); padding-inline-start: 0; }
body.skin-wall .sec-head__title::before { display: none; }
body.skin-wall .sec-head::after { height: 4px; background: var(--ink); opacity: 1; }
.sec-head__more { display: inline-flex; align-items: center; gap: 6px; font-family: var(--head); font-weight: 700; font-size: 14px; color: var(--red); white-space: nowrap; padding: 4px 12px; border: 1px solid transparent; border-radius: 999px; transition: border-color .25s, background .25s; }
.sec-head__more span { display: inline-block; transition: transform .3s var(--ease); }
.sec-head__more:hover { border-color: var(--red); background: var(--red-soft); }
.sec-head__more:hover span { transform: translateX(-5px); }

/* ── Cards ────────────────────────────────────────────────────────────── */
.card { position: relative; }
.card__media { position: relative; display: block; overflow: hidden; border-radius: var(--r); background: var(--surface); isolation: isolate; }
/* Loading shimmer behind the photo until it has decoded (site.js adds .is-loaded). */
.card__media::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / .35) 40%, transparent 60%) var(--surface); background-size: 220% 100%; animation: shimmer 1.4s linear infinite; }
.card__media .img, .card__media .ph { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .9s var(--ease-out), opacity .5s, filter .5s; }
html.js .card__media .img:not(.is-loaded) { opacity: 0; animation: img-fallback 0s 2.5s forwards; }
.card:hover .card__media .img { transform: scale(1.07); }
.ph { display: block; background: var(--net-dark) 0 0 / 14px 14px, linear-gradient(135deg, var(--surface), var(--line)); opacity: .5; }
.img-label { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; z-index: 2; background: rgb(0 0 0 / .62); color: #fff; font-size: 11.5px; padding: 1px 8px; border-radius: 4px; }
.card__title { font-size: 18px; font-weight: 700; line-height: 1.55; }
.card__title a { background: linear-gradient(var(--red), var(--red)) 100% 100% / 0 2px no-repeat; transition: background-size .45s var(--ease-out), color .2s; }
.card:hover .card__title a { background-size: 100% 2px; }

/* overlay: text over a gradient */
.card--overlay .card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .9) 0%, rgb(0 0 0 / .55) 38%, rgb(0 0 0 / .08) 70%, transparent 100%); pointer-events: none; transition: opacity .4s; }
.card--overlay .card__body { position: absolute; inset: auto 0 0 0; z-index: 1; padding: 16px 18px; color: #fff; pointer-events: none; text-shadow: 0 1px 12px rgb(0 0 0 / .35); }
.card--overlay .card__body a { pointer-events: auto; }
.card--overlay .card__title a:hover { color: #fff; }
.card--overlay .card__meta, .card--overlay .card__lead { color: rgb(255 255 255 / .85); }
.card--overlay { border-radius: var(--r); transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.card--overlay:hover { transform: translateY(-4px); box-shadow: var(--shadow-h); }

/* ── Home: rotator + top stories + «موجز» ─────────────────────────────── */
.home-top { display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "rot side brief"; gap: 18px; margin-top: 26px; }
.rotator { grid-area: rot; position: relative; min-height: var(--hero-h); border-radius: var(--r-l); overflow: hidden; background: var(--ink); isolation: isolate; box-shadow: var(--shadow); }
.rotator__slides { display: grid; height: 100%; }
.rotator__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .9s var(--ease), visibility 0s .9s; }
.rotator__slide.is-active { opacity: 1; visibility: visible; z-index: 1; transition: opacity .9s var(--ease); }
.card--hero { height: 100%; min-height: var(--hero-h); border-radius: 0; }
.card--hero:hover { transform: none; box-shadow: none; }
.card--hero .card__media { position: absolute; inset: 0; border-radius: 0; }
.card--hero .card__media .img, .card--hero .card__media .ph { aspect-ratio: auto; height: 100%; }
.card--hero .card__title { font-size: clamp(23px, 2.5vw, 36px); font-weight: 900; line-height: 1.4; max-width: 28ch; }
.card--hero .card__body { padding: 26px 28px 96px; }
.card--hero .card__lead { font-size: 16px; max-width: 62ch; -webkit-line-clamp: 2; }
.rotator__slide.is-active .card__media .img { animation: kenburns 9s ease-out both; }
.rotator__slide.is-active .card__body > * { animation: rise .8s var(--ease-out) both; }
.rotator__slide.is-active .card__body > :nth-child(2) { animation-delay: .12s; }
.rotator__slide.is-active .card__body > :nth-child(3) { animation-delay: .22s; }
.rotator__slide.is-active .card__body > :nth-child(4) { animation-delay: .3s; }
.rotator__tabs { position: absolute; z-index: 3; inset: auto 0 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; padding: 0 22px 16px; }
.rotator__tab { display: grid; gap: 7px; text-align: start; background: none; border: 0; padding: 10px 0 0; color: rgb(255 255 255 / .62); font-family: var(--head); font-weight: 700; font-size: 13px; line-height: 1.5; transition: color .3s; }
.rotator__tab:hover, .rotator__tab.is-active { color: #fff; }
.rotator__bar { display: block; height: 3px; border-radius: 3px; background: rgb(255 255 255 / .25); overflow: hidden; }
.rotator__bar span { display: block; height: 100%; background: var(--red); transform: scaleX(0); transform-origin: right; }
.rotator__tab.is-done .rotator__bar span { transform: scaleX(1); }
.rotator__tab.is-active .rotator__bar span { animation: fill var(--rot-dur, 7s) linear forwards; }
.rotator.is-paused .rotator__tab.is-active .rotator__bar span { animation-play-state: paused; }
.rotator__tab-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.top-side { grid-area: side; display: grid; grid-template-rows: 1fr 1fr; gap: 18px; min-height: var(--hero-h); }
.card--side { min-height: 0; height: 100%; }
.card--side .card__media { position: absolute; inset: 0; }
.card--side .card__media .img, .card--side .card__media .ph { aspect-ratio: auto; height: 100%; }
.card--side .card__title { font-size: 17px; }
.card--side .card__body { padding: 12px 14px; }

/* «موجز»: same height as the rotator; the list scrolls itself (site.js) and pauses on hover. */
.brief { grid-area: brief; display: flex; flex-direction: column; height: var(--hero-h); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); padding: 16px 18px 6px; box-shadow: var(--shadow); }
.brief .sec-head { margin-bottom: 8px; }
.brief .sec-head__title { font-size: 20px; }
.brief__list { flex: 1; overflow-y: auto; scrollbar-width: thin; scroll-behavior: smooth; overscroll-behavior: contain; list-style: none; margin: 0; padding: 0; counter-reset: b;
  mask-image: linear-gradient(to bottom, #000 88%, transparent); }
.card--list { counter-increment: b; border-bottom: 1px dashed var(--line); }
.card--list:last-child { border-bottom: 0; }
.card--list a { display: grid; grid-template-columns: 30px 1fr; gap: 2px 10px; padding: 10px 0; transition: transform .25s var(--ease); }
.card--list a:hover { transform: translateX(-4px); }
.card--list a::before { content: counter(b); grid-row: span 2; font-family: var(--head); font-weight: 900; font-size: 22px; color: var(--red); line-height: 1.3; }
.card--list .card__title { font-size: 15px; font-weight: 700; font-family: var(--head); }
.card--list time { font-size: 12.5px; color: var(--muted); }

/* row: image beside text */
.card--row { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 14px; align-items: start; padding-block: 12px; border-bottom: 1px solid var(--line); }
.card--row:last-child { border-bottom: 0; }
.card--row .card__title { font-size: 16.5px; }
.card--row .card__media { border-radius: var(--r-s); }

/* stack: image on top, text below (section / search listings) */
.card--stack { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s; }
.card--stack:hover { transform: translateY(-5px); box-shadow: var(--shadow-h); border-color: transparent; }
.card--stack .card__media { border-radius: 0; }
.card--stack .card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.card--stack .card__title { font-size: 18px; }
.card--stack .card__meta { margin-top: auto; padding-top: 10px; }
.card--stack::after { content: ""; position: absolute; inset-inline-start: 0; top: 0; height: 4px; width: 100%; background: var(--red); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease-out); }
.card--stack:hover::after { transform: scaleX(1); }

/* ── Home blocks ──────────────────────────────────────────────────────── */
.block { margin-top: 52px; }
.block__grid { display: grid; gap: 20px; }
.block--lead .block__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.block--lead .card--lead { grid-row: span 3; min-height: 420px; }
.card--lead .card__media { position: absolute; inset: 0; }
.card--lead .card__media .img, .card--lead .card__media .ph { aspect-ratio: auto; height: 100%; }
.card--lead .card__title { font-size: clamp(20px, 2.2vw, 29px); font-weight: 800; }
.card--lead .card__body { padding: 20px 22px; }
.block--lead .card--row { padding-top: 0; }
.block--grid .block__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card--tile .card__media .img, .card--tile .card__media .ph { aspect-ratio: 4 / 5; }
.card--tile .card__title { font-size: 16.5px; }

/* poster cards («الجدار» skin, and reports/opinion in both skins) */
.block--posters .block__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
body.skin-wall .block--grid .block__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.card--poster { padding: 12px 12px 16px; border-radius: 4px; box-shadow: 0 8px 20px rgb(0 0 0 / .16); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); --tilt: 0deg; transform: rotate(var(--tilt)); }
.card--poster:nth-child(3n+1) { --tilt: -.6deg; }
.card--poster:nth-child(3n+2) { --tilt: .5deg; }
.card--poster:nth-child(3n) { --tilt: -.3deg; }
.card--poster:hover { transform: rotate(0) translateY(-6px) scale(1.01); box-shadow: 0 18px 36px rgb(0 0 0 / .24); }
.card--poster .card__media { border-radius: 2px; }
.card--poster .card__body { padding: 12px 4px 0; }
.card--poster .card__title { font-size: 18px; font-weight: 800; }
.poster--ink { background: #17121c; color: #fff; }
.poster--red { background: var(--red); color: #fff; }
.poster--green { background: var(--green); color: #fff; }
.poster--paper { background: var(--paper); color: #17121c; }
.poster--ink .card__meta, .poster--red .card__meta, .poster--green .card__meta,
.poster--ink .card__lead, .poster--red .card__lead, .poster--green .card__lead { color: rgb(255 255 255 / .8); }
.poster--red .kicker { background: var(--ink); }
.poster--ink .card__title a:hover, .poster--red .card__title a:hover, .poster--green .card__title a:hover { color: #fff; }
.card--poster[data-tape]::before { content: ""; position: absolute; top: -12px; width: 92px; height: 26px; background: rgb(246 241 228 / .78); box-shadow: 0 1px 3px rgb(0 0 0 / .18); z-index: 2; }
.card--poster[data-tape="r"]::before { inset-inline-start: 16px; transform: rotate(-5deg); }
.card--poster[data-tape="l"]::before { inset-inline-end: 16px; transform: rotate(4deg); }
.card--poster[data-tape="c"]::before { inset-inline-start: calc(50% - 46px); transform: rotate(-2deg); }

/* videos (reels) */
.reels { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 210px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
.reel { position: relative; display: block; border-radius: 16px; overflow: hidden; scroll-snap-align: start; background: var(--ink); aspect-ratio: 9 / 16; transition: transform .45s var(--ease-out); }
.reel:hover { transform: translateY(-5px); }
.reel .img, .reel .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.reel:hover .img { transform: scale(1.08); }
.reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .85), transparent 55%); }
.reel__play { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 1; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--red); color: #fff; transition: transform .3s var(--ease); }
.reel:hover .reel__play { transform: scale(1.12); animation: pulse 1.4s infinite; }
.reel__title { position: absolute; inset: auto 0 0 0; z-index: 1; padding: 12px; color: #fff; font-family: var(--head); font-weight: 700; font-size: 14.5px; line-height: 1.5; }

/* most read */
.most { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 28px; }
.most__item { display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.most__n { font-family: var(--head); font-weight: 900; font-size: 50px; line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--red); transition: color .35s, transform .35s var(--ease-out); }
.most__item:hover .most__n { color: var(--red); transform: scale(1.08) rotate(-4deg); }
.most__item a { font-family: var(--head); font-weight: 700; font-size: 16px; line-height: 1.55; }

/* ── Article ──────────────────────────────────────────────────────────── */
.article { max-width: 920px; margin-top: 20px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.crumbs a:hover { color: var(--red); }
.article__head > * { animation: rise .7s var(--ease-out) both; }
.article__head > :nth-child(2) { animation-delay: .06s; }
.article__head > :nth-child(3) { animation-delay: .12s; }
.article__head > :nth-child(4) { animation-delay: .18s; }
.article__head > :nth-child(5) { animation-delay: .24s; }
.article__title { font-size: clamp(26px, 3.6vw, 42px); font-weight: 900; line-height: 1.42; margin-top: 6px; }
.article__lead { font-size: clamp(18px, 1.7vw, 21px); color: var(--muted); line-height: 1.85; margin: 14px 0 0; font-weight: 500; }
.article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; font-size: 14px; color: var(--muted); }
.article__meta .by { font-family: var(--head); font-weight: 700; color: var(--text); }
.readtime::before { content: "· "; }
.badge { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 4px; }
.badge--update { background: var(--gold); color: var(--ink); }
.badge--correction { background: var(--surface); border: 1px solid var(--line); color: var(--text); }
/* ── Reading tools: «تصغير 100% تكبير», وضع القراءة, استمع ───────────── */
.rtools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.rtools__size { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: 999px; background: var(--card); overflow: hidden; }
.rtools__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--text); font: 700 14px/1 var(--body); cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease-out); }
.rtools__size .rtools__btn { border: 0; border-radius: 0; }
.rtools__btn:hover:not(:disabled) { background: var(--surface); color: var(--red); }
.rtools__btn:active:not(:disabled) { transform: scale(.96); }
.rtools__btn:disabled { opacity: .4; cursor: default; }
.rtools__btn .icon { width: 18px; height: 18px; }
.rtools__a { font-family: var(--body); font-weight: 700; line-height: 1; }
.rtools__a--sm { font-size: 14px; }
.rtools__a--lg { font-size: 21px; }
.rtools__pct { min-width: 58px; padding: 0 8px; border: 0; border-inline: 1px solid var(--line); background: var(--surface); color: var(--text);
  font: 800 13px/1 var(--head); font-variant-numeric: tabular-nums; cursor: pointer; }
.rtools__pct .is-bump, .rtools__pct span.is-bump { display: inline-block; animation: fs-bump .35s var(--ease-out); }
@keyframes fs-bump { 40% { transform: scale(1.25); color: var(--red); } }
.rtools__btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
html[data-theme="dark"] .rtools__btn[aria-pressed="true"] { background: var(--red); border-color: var(--red); }
.rtools [data-listen].is-on .icon { animation: listen-pulse 1.2s ease-in-out infinite; }
@keyframes listen-pulse { 50% { transform: scale(1.18); opacity: .7; } }
/* the paragraph being read aloud */
.article__body .is-speaking, .article__lead.is-speaking { background: color-mix(in srgb, var(--gold) 22%, transparent); border-radius: 6px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 22%, transparent); transition: background .3s; }
/* reading mode: warm paper, a narrower column, more air, nothing moving around it */
html.is-reading { --bg: #f6f0e3; --card: #fbf7ee; --surface: #efe7d6; --line: #e2d7c1; --text: #2a251d; }
html.is-reading[data-theme="dark"] { --bg: #1a1814; --card: #211e19; --surface: #2a261f; --line: #3a342a; --text: #e9e2d3; }
@media not all /* was prefers-color-scheme: dark; dark is the reader's choice */ { html.is-reading:not([data-theme="light"]) { --bg: #1a1814; --card: #211e19; --surface: #2a261f; --line: #3a342a; --text: #e9e2d3; } }
html.is-reading .article__body { max-width: 680px; margin-inline: auto; line-height: 2.25; }
html.is-reading .article__head, html.is-reading .article__figure { max-width: 760px; margin-inline: auto; }
html.is-reading .tape, html.is-reading .share--float, html.is-reading .related { display: none !important; }
.article__figure { margin: 24px 0 0; position: relative; animation: rise .9s .15s var(--ease-out) both; }
.article__figure .img { width: 100%; border-radius: var(--r-l); aspect-ratio: 16 / 9; object-fit: cover; box-shadow: var(--shadow); }
.article__figure figcaption { font-size: 13.5px; color: var(--muted); padding-top: 8px; }
.article__body { font-size: calc(19px * var(--fs-scale)); line-height: 2.05; margin-top: 24px; max-width: 760px; }
.article__body p { margin: 0 0 1.05em; }
.article__body h2 { font-size: 1.25em; font-weight: 800; margin: 1.4em 0 .6em; padding-inline-start: 12px; border-inline-start: 5px solid var(--red); }
.article__body blockquote { margin: 1.4em 0; padding: 16px 22px; background: var(--surface); border-inline-start: 5px solid var(--red); border-radius: 0 var(--r-s) var(--r-s) 0; font-family: var(--head); font-weight: 600; font-size: 1.02em; }
.article__body blockquote p { margin: 0; }
.article__body blockquote p::before { content: "«"; color: var(--red); }
.article__body blockquote p::after { content: "»"; color: var(--red); }
.article__body blockquote cite { display: block; font-style: normal; font-family: var(--body); font-weight: 500; font-size: .82em; color: var(--muted); margin-top: 6px; }
.article__body ul { padding-inline-start: 1.2em; }
.article__body li { margin-bottom: .35em; }
.article__body li::marker { color: var(--red); }
.article__body figure { margin: 1.4em 0; }
.article__body figure img { border-radius: var(--r-s); }
.article__body figcaption { font-size: 14px; color: var(--muted); }
.article__body .dateline, .article__lead .dateline { color: var(--red); font-family: var(--head); font-weight: 800; }
.article__body .pnn-update { background: color-mix(in srgb, var(--gold) 14%, transparent); border-inline-start: 5px solid var(--gold); padding: 10px 16px; border-radius: 0 var(--r-s) var(--r-s) 0; }
.article__body .pnn-update time strong { color: var(--text); font-family: var(--head); }
.article__body .pnn-correction { background: var(--surface); border: 1px dashed var(--line); padding: 10px 16px; border-radius: var(--r-s); font-size: .9em; }
.yt { position: relative; margin: 1.4em 0; border-radius: var(--r); overflow: hidden; background: var(--ink); }
.yt__btn { display: block; position: relative; width: 100%; border: 0; padding: 0; background: none; }
.yt__btn img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: .9; }
.yt__btn .icon { position: absolute; top: 50%; left: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; padding: 18px; border-radius: 50%; background: var(--red); color: #fff; transition: transform .3s var(--ease); }
.yt__btn:hover .icon { transform: scale(1.1); }
.yt iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.sources { margin-top: 28px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--r); max-width: 760px; }
.sources__h { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.sources ul { margin: 0; padding-inline-start: 1.2em; font-size: 14.5px; }
.sources a { color: var(--red); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 24px; }
.tags__h { font-family: var(--head); font-weight: 800; }
.tags a { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; font-size: 14px; transition: background .2s, color .2s, transform .2s var(--ease); }
.tags a:hover { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-2px); }

/* share */
.share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.share__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; min-width: 42px; padding: 0 14px; border: 0; border-radius: 999px; color: #fff; font-family: var(--head); font-weight: 700; font-size: 14px; transition: transform .25s var(--ease), filter .2s, box-shadow .25s; }
.share__btn:hover { color: #fff; transform: translateY(-3px); filter: brightness(1.08); box-shadow: 0 8px 18px rgb(0 0 0 / .18); }
.share__btn--wa { background: #1fa855; } .share__btn--tg { background: #229ed9; } .share__btn--x { background: #111; } .share__btn--fb { background: #1877f2; }
html[data-theme="dark"] .share__btn--x { background: #2c2d34; box-shadow: inset 0 0 0 1px #45464f; }
@media not all /* was prefers-color-scheme: dark; dark is the reader's choice */ { html:not([data-theme="light"]) .share__btn--x { background: #2c2d34; box-shadow: inset 0 0 0 1px #45464f; } }
.share__btn--copy, .share__btn--native { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.share__btn--copy:hover, .share__btn--native:hover { color: var(--text); }
.share__btn--copy.is-done { background: var(--green); color: #fff; border-color: var(--green); }
.share--bottom { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.share { align-items: center; }
.share__label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--head); font-weight: 800; font-size: 14px; color: var(--muted); margin-inline-end: 4px; }
.share__label .icon { width: 17px; height: 17px; color: var(--red); }
.share__btn--more { background: var(--surface); color: var(--text); border: 1px solid var(--line); width: 42px; padding: 0; }
.share__btn--more:hover { color: var(--text); }
.share__btn--more[aria-expanded="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.share__more { position: relative; }
.share__menu { position: absolute; z-index: 60; top: calc(100% + 8px); inset-inline-end: 0; min-width: 220px; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-h); display: grid; gap: 2px; transform-origin: top left; animation: pop .22s var(--ease-out); }
.share--float .share__menu, .share--bottom .share__menu { top: auto; bottom: calc(100% + 8px); transform-origin: bottom left; }
.share__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font-family: var(--head); font-weight: 700; font-size: 14.5px; text-align: start; cursor: pointer; }
.share__item:hover { background: var(--surface); color: var(--red); }
.share__item .icon { width: 19px; height: 19px; }
html:not(.is-touch) [data-touch-only] { display: none; }
/* Phones: the share bar follows the reader (site.js shows it between the two in-article bars). */
.share--float { display: none; }
@keyframes pop { from { opacity: 0; transform: scale(.94) translateY(-4px); } to { opacity: 1; transform: none; } }
/* Highlight a sentence → share it as a quote. */
.qshare { position: absolute; z-index: 75; display: flex; gap: 4px; padding: 5px; background: var(--ink); border-radius: 999px; box-shadow: 0 10px 26px rgb(0 0 0 / .3); animation: pop .2s var(--ease-out); }
.qshare::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--ink); }
.qshare button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: #fff; }
.qshare button:hover { background: rgb(255 255 255 / .14); }
.qshare .icon { width: 18px; height: 18px; }
.qshare__wa { color: #25d366 !important; } .qshare__tg { color: #36a9e1 !important; }

/* ── Listings: section, region, tag, search ───────────────────────────── */
.listing__head { position: relative; margin-bottom: 30px; padding: 34px 0 30px; background: var(--ink); color: #fff; overflow: hidden; isolation: isolate; }
.listing__head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--net-light) 0 0 / 22px 22px; opacity: .07; animation: drift 40s linear infinite; }
.listing__head::after { content: ""; position: absolute; inset: auto 0 0 0; height: 6px; background: linear-gradient(90deg, var(--red), var(--gold), var(--green)); }
.listing__kind { display: inline-block; background: var(--red); color: #fff; font-family: var(--head); font-weight: 800; font-size: 13px; padding: 2px 12px; border-radius: 4px; animation: rise .6s var(--ease-out) both; }
.listing__title { font-size: clamp(28px, 4.4vw, 48px); font-weight: 900; margin-top: 8px; animation: rise .7s .08s var(--ease-out) both; }
.listing__desc { color: rgb(255 255 255 / .75); max-width: 70ch; }
.listing__count { display: inline-block; margin-top: 6px; color: rgb(255 255 255 / .65); font-size: 14px; }
.listing__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.card--wide { grid-column: 1 / -1; min-height: clamp(320px, 34vw, 480px); }
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 34px 0; }
.pager .page-numbers { padding: 7px 15px; border: 1px solid var(--line); border-radius: 10px; font-weight: 700; transition: background .2s, color .2s, border-color .2s; }
.pager a.page-numbers:hover { border-color: var(--red); color: var(--red); }
.pager .current { background: var(--red); border-color: var(--red); color: #fff; }
.empty { color: var(--muted); padding: 40px 0; text-align: center; }
.notfound { text-align: center; padding: 70px 0; display: grid; justify-items: center; }
.notfound__code { font-family: var(--head); font-weight: 900; font-size: clamp(90px, 18vw, 150px); line-height: 1; margin: 0; color: transparent; -webkit-text-stroke: 3px var(--red); animation: float 4s ease-in-out infinite; }

/* footer */
.footer { position: relative; margin-top: 76px; background: var(--ink); color: #cfcdc7; padding-bottom: 20px; }
.footer__pattern { height: 14px; background: var(--net-light) 0 0 / 14px 14px, linear-gradient(90deg, var(--ink), #2a2b31, var(--ink)); opacity: .5; }
.footer__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 30px; padding-top: 36px; }
.footer__brand { display: flex; gap: 14px; align-items: center; }
.footer__name { font-family: var(--head); font-weight: 900; font-size: 22px; color: #fff; margin: 0; }
.footer__tag { margin: 2px 0 0; color: #9d9ba3; }
.footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.footer__cols div { display: grid; gap: 6px; align-content: start; }
.footer__h { font-family: var(--head); font-weight: 800; color: #fff; margin: 0 0 4px; }
.footer a { transition: color .2s, padding .2s; }
.footer a:hover { color: var(--gold); padding-inline-start: 4px; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; border-top: 1px solid rgb(255 255 255 / .1); margin-top: 28px; padding-top: 14px; font-size: 13px; color: #8e8c94; }
.footer__in { grid-template-areas: "brand cols" "follow cols"; }
.footer__brand { grid-area: brand; }
.footer__cols { grid-area: cols; }
.footer__follow { grid-area: follow; }

/* ── The network's accounts (template-parts/social.php) ─────────────────
   Each icon fills with its platform's colour from the centre on hover; in the
   footer they rise one after another as it scrolls in. An account not added
   yet is a button: a click stays here and shows «قريباً». */
.soc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.soc li { position: relative; }
.soc__a { --brand: var(--red); position: relative; isolation: isolate; display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: color .25s, transform .35s var(--ease-out), box-shadow .35s; }
.soc__a::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--brand); transform: scale(0); transition: transform .4s var(--ease-out); }
.soc__a .icon { width: 17px; height: 17px; transition: transform .4s var(--ease-out); }
.soc__a:hover, .soc__a:focus-visible { color: #fff; transform: translateY(-2px); }
.soc__a:hover::before, .soc__a:focus-visible::before { transform: scale(1); }
.soc__a:hover .icon, .soc__a:focus-visible .icon { transform: scale(1.12) rotate(-8deg); }
.soc__a--facebook { --brand: #1877f2; }
.soc__a--instagram { --brand: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 62%, #285aeb 95%); }
.soc__a--x { --brand: #26272c; }
.soc__a--telegram { --brand: #229ed9; }
.soc__a--whatsapp { --brand: #1fae54; }
.soc__a--youtube { --brand: #ff0033; }
.soc__a--tiktok { --brand: linear-gradient(135deg, #25f4ee 0%, #111 38%, #111 62%, #fe2c55 100%); }
.soc__a--threads { --brand: #26272c; }
.soc__tip { position: absolute; left: 50%; bottom: calc(100% + 9px); z-index: 5; padding: 3px 10px; border-radius: 999px; background: var(--gold); color: var(--ink);
  font: 800 12px/1.5 var(--head); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 6px) scale(.9); transition: opacity .2s, transform .3s var(--ease-out); }
.soc__tip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--gold); }
.soc__a.is-tip .soc__tip { opacity: 1; transform: translate(-50%, 0) scale(1); }
.soc__a.is-tip { animation: soc-nudge .45s var(--ease-out); }
@keyframes soc-nudge { 30% { transform: rotate(-12deg); } 65% { transform: rotate(9deg); } }
/* topbar: the bubble opens downwards, over the header */
.topbar { position: relative; z-index: 55; }
.topbar__tools { align-items: center; }
.topbar__div { width: 1px; height: 18px; margin: 0 6px; background: rgb(255 255 255 / .18); }
.soc--top .soc__a { width: 30px; height: 30px; color: #e9e7e2; }
.soc--top .soc__tip { bottom: auto; top: calc(100% + 9px); transform: translate(-50%, -6px) scale(.9); }
.soc--top .soc__tip::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--gold); }
.soc--top .soc__a.is-tip .soc__tip { transform: translate(-50%, 0) scale(1); }
/* phone menu */
.drawer__follow { margin-top: auto; padding: 14px 0 4px; border-top: 1px solid var(--line); }
.drawer__h { margin: 0 0 10px; font-family: var(--head); font-weight: 800; font-size: 14px; color: var(--muted); }
.soc--drawer { display: grid; grid-template-columns: repeat(4, max-content); gap: 8px 10px; }
.soc--drawer .soc__a { width: 42px; height: 42px; background: var(--surface); color: var(--text); }
.soc--drawer .soc__a .icon { width: 19px; height: 19px; }
/* footer */
.footer__follow .footer__h { margin-bottom: 12px; }
.soc--footer { display: grid; grid-template-columns: repeat(4, max-content); gap: 14px 12px; }   /* 4 + 4, not 6 + 2 */
.soc--footer li { display: grid; justify-items: center; gap: 6px; min-width: 52px; }
.soc--footer .soc__a { width: 48px; height: 48px; color: #fff; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); }
.soc--footer .soc__a .icon { width: 21px; height: 21px; }
.soc--footer .soc__a:hover, .soc--footer .soc__a:focus-visible { transform: translateY(-5px); box-shadow: 0 14px 26px -12px rgb(0 0 0 / .9); }
.soc__name { font-size: 11.5px; color: #9d9ba3; transition: color .2s; }
.soc--footer li:hover .soc__name { color: #fff; }
.footer a.soc__a:hover { padding-inline-start: 0; color: #fff; }
html.js .footer__follow.reveal.is-pre .soc li { opacity: 0; transform: translateY(16px) scale(.85); }
html.js .footer__follow.reveal.is-pre.is-in .soc li { opacity: 1; transform: none;
  transition: opacity .5s var(--ease-out), transform .65s var(--ease-out); transition-delay: calc(.25s + var(--i) * 70ms); }

/* back to top */
.totop { position: fixed; inset-inline-end: 18px; bottom: 22px; z-index: 65; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 24px rgb(215 20 26 / .35); opacity: 0; transform: translateY(16px) scale(.8); transition: opacity .35s, transform .45s var(--ease-out); }
.totop.is-on { opacity: 1; transform: none; }
.totop:hover { background: var(--red-d); }
body.has-breaking .totop { bottom: 82px; }

/* ── Motion ───────────────────────────────────────────────────────────── */
/* Content is never hidden by default: site.js marks only what starts BELOW the
   first screen (.reveal.is-pre) and shows it as it scrolls in. The first
   screen plays a short entrance instead (no blank page while loading). */
html.js .reveal.is-pre { opacity: 0; transform: translateY(28px); }
html.js .reveal.is-pre.is-in { opacity: 1; transform: none; transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
html.js .card--poster.reveal.is-pre.is-in { transform: rotate(var(--tilt)); }
html.js .reveal.is-first { animation: rise .7s var(--ease-out) both; }
.sec-head.is-in .sec-head__title::before { animation: grow-y .6s var(--ease-out) both; }
.sec-head.is-in .sec-head__title::after { animation: grow-x .8s .1s var(--ease-out) both; }
.sec-head.is-in::after { animation: slide-net 1.2s var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes kenburns { from { transform: scale(1.14) translate3d(1.5%, 1%, 0); } to { transform: scale(1.02) translate3d(0, 0, 0); } }
@keyframes fill { to { transform: scaleX(1); } }
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@keyframes img-fallback { to { opacity: 1; } }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes slide-net { from { background-position: 120px 50%; opacity: 0; } to { opacity: .16; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgb(215 20 26 / .8); } 70% { box-shadow: 0 0 0 10px rgb(215 20 26 / 0); } 100% { box-shadow: 0 0 0 0 rgb(215 20 26 / 0); } }
@keyframes pulse-w { 0% { box-shadow: 0 0 0 0 rgb(255 255 255 / .8); } 70% { box-shadow: 0 0 0 8px rgb(255 255 255 / 0); } 100% { box-shadow: 0 0 0 0 rgb(255 255 255 / 0); } }
@keyframes swap { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sheen { from { background-position: 150% 0; } to { background-position: -150% 0; } }
@keyframes blink { to { visibility: hidden; } }
@keyframes drift { from { background-position: 0 0; } to { background-position: 220px 110px; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Page-to-page: the card photo grows into the article photo (Chrome), the rest cross-fades. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; }
::view-transition-group(*) { animation-duration: .45s; animation-timing-function: var(--ease-out); }

/* ── ≥1600: more room ─────────────────────────────────────────────────── */
@media (min-width: 1600px) {
  :root { --wrap: 1440px; --hero-h: 600px; }
  .card--hero .card__title { font-size: 40px; }
}

/* ── ≤1279 ────────────────────────────────────────────────────────────── */
@media (max-width: 1279px) {
  .home-top { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); grid-template-areas: "rot side" "brief brief"; }
  .brief { height: auto; }
  .brief__list { columns: 2; column-gap: 28px; overflow: visible; mask-image: none; }
  .card--list { break-inside: avoid; }
}

/* ── ≤1023: tablets ───────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  :root { --hero-h: clamp(380px, 56vw, 520px); }
  .site-header__in { min-height: 80px; }
  .home-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "rot rot" "side side" "brief brief"; }
  .top-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; min-height: 0; }
  .card--side { min-height: 230px; }
  .block--grid .block__grid, body.skin-wall .block--grid .block__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .block--posters .block__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .most { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .listing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rotator__tab-title { -webkit-line-clamp: 1; }
}

/* ── ≤767: phones ─────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  :root { --hero-h: clamp(360px, 108vw, 470px); --r-l: 14px; }
  body { font-size: 15.5px; }
  html { scroll-padding-top: 60px; }
  .topbar__in { min-height: 34px; }
  .topbar__hijri, .topbar__hijri + .sep, .topbar__tz { display: none; }
  .topbar__date .sep:first-of-type { display: none; }
  .site-header__in { min-height: 66px; gap: 10px; }
  .brand__emblem { width: 40px; height: 48px; }
  .brand__name { font-size: 23px; }
  .brand__sub { font-size: 12.5px; }
  .site-search--header { display: none; }
  .menu-btn { display: inline-grid; margin-inline-start: auto; width: 44px; height: 44px; }
  .menu-btn .icon { width: 24px; height: 24px; }
  .nav__link { padding: 12px 11px; font-size: 14.5px; }
  .nav__arrow { display: none; }
  .nav__links { scroll-snap-type: x proximity; }
  .tape { margin-top: 10px; }
  .tape__label { padding: 0 12px; font-size: 14px; }
  .tape__item { font-size: 14px; padding-inline: 14px; }
  .home-top { margin-top: 16px; gap: 14px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "rot" "side" "brief"; }
  .card--hero .card__body { padding: 18px 16px 52px; }
  .card--hero .card__title { font-size: clamp(21px, 6.2vw, 26px); }
  .card--hero .card__lead { display: none; }
  .rotator__tabs { padding: 0 16px 14px; gap: 8px; }
  .rotator__tab { padding-top: 0; }
  .rotator__tab-title { display: none; }
  /* Rows of cards become a swipeable strip that bleeds to the screen edge. */
  .top-side, .swipe, .block--grid .block__grid, .block--posters .block__grid, body.skin-wall .block--grid .block__grid {
    display: grid; grid-template-columns: none; grid-template-rows: none; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px; scroll-padding-inline: var(--gutter); }
  .top-side::-webkit-scrollbar, .swipe::-webkit-scrollbar { display: none; }
  .top-side > *, .swipe > * { scroll-snap-align: start; }
  .card--side { min-height: 210px; }
  .block--posters .block__grid { grid-auto-columns: 82%; padding-top: 18px; }
  .reels { grid-auto-columns: 46%; }
  .brief { padding: 14px 14px 4px; }
  .brief__list { columns: 1; }
  .block { margin-top: 38px; }
  .sec-head__title { font-size: 21px; }
  .block--lead .block__grid { grid-template-columns: minmax(0, 1fr); }
  .block--lead .card--lead { grid-row: auto; min-height: 300px; }
  .card--row { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 12px; }
  .card--row .card__title { font-size: 15.5px; }
  .card--row .card__lead { display: none; }
  .most { grid-template-columns: minmax(0, 1fr); }
  .most__n { font-size: 40px; }
  .listing__head { padding: 24px 0 22px; margin-bottom: 20px; }
  .listing__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .card--wide { min-height: 300px; }
  .rtools__l { display: none; }
  .rtools [data-read-mode] .rtools__l, .rtools [data-listen] .rtools__l { display: inline; }
  .rtools__btn { padding: 0 12px; }
  .article__body { font-size: calc(18px * var(--fs-scale)); line-height: 1.95; }
  .footer__in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "follow" "cols"; }
  /* the accounts take the topbar on phones; the date is in every story's header */
  .topbar__day, .topbar__day + .sep { display: none; }
  .topbar__div { margin: 0 2px; }
  .soc--top { gap: 0; }
  .soc--top .soc__a { width: 28px; height: 28px; }
  .soc--top .soc__a .icon { width: 16px; height: 16px; }
  .breaking { min-height: 54px; }
  .breaking__label { font-size: 17px; padding: 0 14px 0 24px; }
  .breaking__body { padding: 6px 18px; }
  .breaking__text { font-size: 15px; }
  .share__btn { padding: 0 12px; }
  .share__btn span { display: none; }
  .share__btn--native span { display: inline; }   /* copy stays an icon: with its label the «…» wraps under 460px */
  .share__label { display: none; }
  .share--float { display: flex; position: fixed; z-index: 66; inset: auto 10px calc(10px + env(safe-area-inset-bottom)) 10px; justify-content: space-between; gap: 6px; margin: 0;
    padding: 7px; background: color-mix(in srgb, var(--card) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 12px 30px rgb(0 0 0 / .22); transform: translateY(140%); transition: transform .45s var(--ease-out); }
  .share--float.is-on { transform: none; }
  .share--float .share__btn { flex: 1; height: 42px; min-width: 0; padding: 0; }
  .share--float .share__btn--copy, .share--float .share__btn--more { flex: 0 0 42px; }
  body.has-float-share .totop { bottom: 78px; }
  body.has-breaking .share--float { bottom: 66px; }
  .tape, body.skin-wall .tape { transform: none; }
  .totop { width: 42px; height: 42px; inset-inline-end: 12px; bottom: 14px; }
}

/* ── ≤380: small phones ───────────────────────────────────────────────── */
@media (max-width: 380px) {
  .brand__name { font-size: 20px; }
  .brand__emblem { width: 34px; height: 42px; }
  .topbar { font-size: 12px; }
  .top-side, .swipe, .block--grid .block__grid { grid-auto-columns: 86%; }
  .card--hero .card__title { font-size: 20px; }
  .share__btn--native span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html.js .reveal.is-pre { opacity: 1; transform: none; }
  html.js .footer__follow.reveal.is-pre .soc li { opacity: 1; transform: none; }
  html.js .card__media .img:not(.is-loaded) { opacity: 1; }
  .tape__track { flex-wrap: wrap; width: auto; }
  @view-transition { navigation: none; }
}
@media print {
  .topbar, .nav, .tape, .breaking, .share, .footer, .site-search, .related, .progress, .rtools, .drawer, .totop, .menu-btn { display: none !important; }
  body { background: #fff; color: #000; }
  .article__body { font-size: 12pt; }
}

/* «موجز» keeps a compact heading in both skins. */
body.skin-wall .brief .sec-head__title { font-size: 22px; }
body.skin-wall .brief .sec-head::after { height: 3px; }

/* == The network's look (2026-11-05): paper, ink, kufiya; every section its own shape == */
body.skin-wall .sec-head { margin-bottom: 26px; padding-bottom: 10px; }
body.skin-wall .sec-head::after { height: 5px; }
body.skin-wall .sec-head__title { font-size: clamp(30px, 4.2vw, 50px); line-height: 1.25; }
body.skin-wall .sec-head__title::after { bottom: -10px; height: 5px; width: clamp(70px, 12vw, 150px); border-radius: 0; z-index: 1; }
.block { margin-top: clamp(44px, 6vw, 76px); }
body.skin-wall .card--poster .card__title { font-size: clamp(18px, 1.7vw, 22px); font-weight: 900; line-height: 1.5; }
/* feature: one large coloured story beside two paper ones */
.block--feature .block__grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 26px; }
.block--feature .card--block { grid-row: span 2; }
.card--block { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.card--block .card__media { border-radius: 0; }
.card--block .card__media .img, .card--block .card__media .ph { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }
.card--block .card__body { flex: 1; padding: clamp(18px, 2.4vw, 30px); }
body.skin-wall .card--block .card__title { font-size: clamp(25px, 3vw, 42px); line-height: 1.32; }
.card--block .card__lead { font-size: 16.5px; opacity: .92; }
/* text poster: a story with no real photo */
.card--textposter { display: flex; min-height: 240px; padding: 22px 20px; background-image: var(--net-light); background-size: 18px 18px; background-blend-mode: soft-light; }
.card--textposter .card__body { display: flex; flex-direction: column; padding: 0; width: 100%; }
body.skin-wall .card--textposter .card__title { font-size: clamp(21px, 2vw, 27px); line-height: 1.42; }
.card--textposter .card__meta { margin-top: auto; padding-top: 14px; }
/* strip: a dark band across the whole page, under the kufiya pattern */
.block--strip { position: relative; padding-block: clamp(30px, 4vw, 48px); color: #fff; box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); }
.block--strip::before { content: ""; position: absolute; inset: 0 -100vmax auto; height: 12px; background: var(--net-light) 0 0 / 12px 12px; opacity: .35; }
body.skin-wall .block--strip .sec-head::after { background: rgb(255 255 255 / .85); }
.block--strip .sec-head__title { color: #fff; }
.block--strip .sec-head__more { color: #fff; border-color: rgb(255 255 255 / .35); }
.block--strip .sec-head__more:hover { background: var(--red); border-color: var(--red); color: #fff; }
body.skin-wall .block--strip .block__grid { gap: 16px; }
.block--strip .card--tile { box-shadow: 0 10px 26px rgb(0 0 0 / .5); }
/* top of the page: a heavier lead story; the brief as a paper sheet with a black head */
body.skin-wall .card--hero .card__title { font-size: clamp(26px, 3vw, 44px); line-height: 1.32; }
body.skin-wall .brief { border: 0; border-top: 6px solid var(--ink); border-radius: 2px; box-shadow: 0 8px 22px rgb(0 0 0 / .12); }
body.skin-wall .rotator, body.skin-wall .card--side { border-radius: 4px; }
body.skin-wall .site-header { background: var(--ink); border-bottom: 0; color: #fff; }
body.skin-wall .site-header .brand__name, body.skin-wall .site-header .iconbtn { color: #fff; }
body.skin-wall .site-header .brand__sub { color: #cfcdc7; }
body.skin-wall .topbar { border-bottom: 1px solid rgb(255 255 255 / .1); }
body.skin-wall .nav { border-bottom-width: 4px; border-bottom-color: var(--red); }
@media (max-width: 1023px) {
  .block--feature .block__grid { grid-template-columns: minmax(0, 1fr); }
  .block--feature .card--block { grid-row: auto; }
}
@media (max-width: 767px) {
  .card--textposter { min-height: 200px; }
  .card--poster { --tilt: 0deg !important; }
}

/* dark band: drawn by a pseudo-element (the box-shadow + clip-path version did not paint) */
.block--strip { box-shadow: none; clip-path: none; isolation: isolate; }
.block--strip::before { inset: 0 -100vmax; height: auto; z-index: -1; background: var(--ink); opacity: 1; border-top: 12px solid var(--red); }
/* a feature with no photo: the words carry it */
.card--block.card--textposter { justify-content: center; }
.card--block.card--textposter .card__body { justify-content: center; }
body.skin-wall .card--block.card--textposter .card__title { font-size: clamp(30px, 4vw, 54px); line-height: 1.28; }
/* hashtags */
.tags { padding: 16px 18px; background: var(--card); border-inline-start: 6px solid var(--red); border-radius: 4px; }
.tags__h { flex-basis: 100%; font-size: 17px; }
.tags a { font-family: var(--head); font-weight: 700; color: var(--text); }
/* «اقرأ أيضاً» inside the story */
.alsoread { margin: 1.4em 0; font-size: 16px; line-height: 1.6; }
.alsoread a { display: flex; align-items: center; gap: 14px; padding: 10px; background: var(--card); border: 1px solid var(--line); border-inline-start: 5px solid var(--red); border-radius: 6px; transition: transform .3s var(--ease-out), box-shadow .3s; }
.alsoread a:hover { transform: translateX(-4px); box-shadow: var(--shadow); color: inherit; }
.alsoread__media { flex: none; width: 112px; }
.alsoread__media .img, .alsoread__media .ph { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; display: block; }
.alsoread__txt { display: grid; gap: 2px; font-family: var(--head); font-weight: 800; }
.alsoread__txt b { color: var(--red); font-size: 13.5px; }
/* «الخبر التالي» */
.nextup { position: fixed; z-index: 64; inset-inline-start: 18px; bottom: 22px; display: flex; align-items: center; gap: 10px; width: min(360px, calc(100vw - 96px)); padding: 8px 30px 8px 8px; padding-inline: 8px 30px; background: var(--ink); color: #fff; border-radius: 8px; box-shadow: 0 14px 34px rgb(0 0 0 / .35);
  opacity: 0; pointer-events: none; transform: translateY(24px); transition: opacity .35s, transform .45s var(--ease-out); }
.nextup.is-on { opacity: 1; pointer-events: auto; transform: none; }
.nextup:hover { color: #fff; }
.nextup__media { flex: none; width: 72px; }
.nextup__media .img, .nextup__media .ph { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 5px; display: block; }
.nextup__txt { display: grid; gap: 2px; font-family: var(--head); font-weight: 700; font-size: 13.5px; line-height: 1.45; overflow: hidden; }
.nextup__txt span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nextup__txt b { color: var(--gold); font-size: 12.5px; }
.nextup__x { position: absolute; inset-inline-end: 4px; top: 4px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
html.is-reading .nextup { opacity: .92; }
@media (max-width: 767px) {
  .nextup { inset-inline: 10px 64px; width: auto; bottom: 14px; }
  body.has-float-share .nextup { bottom: 78px; }
  .alsoread__media { width: 84px; }
  .related .block__grid { grid-template-columns: minmax(0, 1fr); }
}
@media print { .nextup, .alsoread { display: none !important; } }

/* == «نبض الأحداث»: pulses, not articles == */
.pulsedot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgb(215 20 26 / .6); animation: pulsedot 1.6s infinite; }
@keyframes pulsedot { 70% { box-shadow: 0 0 0 10px rgb(215 20 26 / 0); } 100% { box-shadow: 0 0 0 0 rgb(215 20 26 / 0); } }
.nav__link--pulse { display: inline-flex; align-items: center; gap: 7px; color: var(--red); font-weight: 900; }
body.skin-wall .brief.brief--pulse { background: var(--ink); color: #eceae6; border-top-color: var(--red); }
.pulsehead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid rgb(255 255 255 / .14); }
.pulsehead__t { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 900; color: #fff; }
.pulsehead a { font-family: var(--head); font-size: 13px; font-weight: 700; color: var(--gold); }
.pulselist { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 0; scrollbar-width: thin; }
.pulselist a { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; padding: 11px 0; border-bottom: 1px solid rgb(255 255 255 / .08); font-family: var(--head); font-weight: 700; font-size: 14.5px; line-height: 1.55; color: #eceae6; }
.pulselist a:hover { color: var(--gold); }
.pulselist time { color: var(--red); font-weight: 900; font-variant-numeric: tabular-nums; filter: brightness(1.35); }
.pulsepage__head { position: relative; padding: clamp(36px, 6vw, 72px) 0; background: var(--ink); color: #fff; border-bottom: 6px solid var(--red); overflow: hidden; }
.pulsepage__head::after { content: ""; position: absolute; inset: 0; background: var(--net-light) 0 0 / 22px 22px; opacity: .06; pointer-events: none; }
.pulsepage__head h1 { font-size: clamp(42px, 7vw, 84px); font-weight: 900; line-height: 1.15; }
.pulsepage__head p { margin: 6px 0 0; color: #cfcdc7; font-size: 18px; }
p.pulsepage__live { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 10px; padding: 3px 14px; background: rgb(255 255 255 / .08); border-radius: 999px; color: #fff; font: 800 14px var(--head); }
.pulseline { position: relative; max-width: 860px; padding-block: 28px 10px; }
.pulse__day { position: sticky; top: 56px; z-index: 5; display: inline-block; margin: 26px 0 16px; padding: 4px 16px; background: var(--ink); color: #fff; border-radius: 4px; font-size: 15px; font-weight: 800; }
.pulse { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 18px; position: relative; padding-bottom: 22px; scroll-margin-top: 90px; }
.pulse::before { content: ""; position: absolute; inset-block: 8px -8px; inset-inline-start: 82px; width: 2px; background: var(--line); }
.pulse::after { content: ""; position: absolute; top: 9px; inset-inline-start: 77px; width: 12px; height: 12px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px var(--bg); }
.pulse__time { font: 900 21px/1.4 var(--head); font-variant-numeric: tabular-nums; text-align: end; }
.pulse__body { margin-inline-start: 18px; padding: 16px 18px; background: var(--card); border-radius: 6px; box-shadow: var(--shadow); transition: transform .3s var(--ease-out); }
.pulse__body:hover { transform: translateX(-4px); }
.pulse:target .pulse__body { outline: 3px solid var(--gold); }
.pulse__title { font-size: clamp(18px, 2vw, 23px); font-weight: 900; line-height: 1.45; }
.pulse__text { margin: 8px 0 0; font-size: 16.5px; line-height: 1.9; }
.pulse__acts { display: flex; gap: 14px; margin-top: 10px; font: 700 13px var(--head); color: var(--muted); }
.pulse__acts a { display: inline-flex; align-items: center; gap: 5px; }
.pulse__acts .icon { width: 15px; height: 15px; }
.pulse__more { display: block; width: max-content; margin: 10px auto 0; padding: 10px 26px; background: var(--ink); color: #fff; border-radius: 999px; font: 800 15px var(--head); }
.pulse__none { padding: 40px 0; text-align: center; color: var(--muted); }
@media (max-width: 767px) {
  .pulse { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pulse::before, .pulse::after { display: none; }
  .pulse__time { text-align: start; color: var(--red); font-size: 17px; }
  .pulse__body { margin-inline-start: 0; }
  body.skin-wall .brief.brief--pulse { height: auto; max-height: 460px; }
}

/* consent: equal weight for both answers; never blocks reading */
.consent { position: fixed; z-index: 95; inset-inline: 14px; bottom: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; max-width: 860px; margin-inline: auto; padding: 16px 20px; background: var(--ink); color: #eceae6; border-top: 4px solid var(--red); border-radius: 6px; box-shadow: 0 18px 44px rgb(0 0 0 / .4); animation: rise .5s var(--ease-out) both; }
.consent__txt { flex: 1 1 340px; }
.consent__txt b { font: 900 16px var(--head); color: #fff; }
.consent__txt p { margin: 4px 0 0; font-size: 14px; line-height: 1.7; }
.consent__txt a { color: var(--gold); text-decoration: underline; }
.consent__btns { display: flex; gap: 8px; }
.consent__btns button { min-width: 104px; height: 42px; border: 1px solid #fff; border-radius: 6px; font: 800 15px var(--head); cursor: pointer; }
.consent__yes { background: #fff; color: var(--ink); }
.consent__no { background: transparent; color: #fff; }
@media print { .consent { display: none !important; } }

/* == Header == */
body.skin-wall .site-header__in { min-height: 88px; }
body.skin-wall .site-header { background: linear-gradient(90deg, #17181c, var(--ink) 60%); }
body.skin-wall .brand__emblem { width: 60px; height: 70px; }
body.skin-wall .brand__name { font-size: 36px; letter-spacing: -.5px; }
body.skin-wall .brand__sub { font-size: 14px; letter-spacing: 3px; }
body.skin-wall .site-search--header { width: min(300px, 30vw); background: rgb(255 255 255 / .07); border-color: rgb(255 255 255 / .16); }
body.skin-wall .site-search--header input { color: #fff; padding-block: 8px; font-size: 14.5px; }
body.skin-wall .site-search--header input::placeholder { color: #a9a8ad; }
body.skin-wall .site-search--header:focus-within { background: rgb(255 255 255 / .12); border-color: #fff; box-shadow: none; }
body.skin-wall .site-search--header button { width: 32px; height: 32px; }
body.skin-wall .nav { background: var(--card); border-bottom: 0; box-shadow: 0 3px 0 var(--red), 0 8px 18px rgb(0 0 0 / .08); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.skin-wall .nav__link { padding-block: 15px; font-weight: 800; font-size: 15.5px; white-space: nowrap; }
body.skin-wall .nav__link:hover { color: var(--red); }
body.skin-wall .nav__ink { display: none; }
body.skin-wall .nav__link.is-active { background: var(--ink); color: #fff; }
.nav__link--pulse, body.skin-wall .nav__link--pulse { color: var(--red); }
.nav__link--inv, body.skin-wall .nav__link--inv { color: var(--ink); font-weight: 900; box-shadow: inset 0 -3px 0 var(--gold); }
html[data-theme="dark"] .nav__link--inv { color: #fff; }
body.skin-wall .nav__arrow { background: var(--card); border: 1px solid var(--line); box-shadow: 0 2px 8px rgb(0 0 0 / .14); color: var(--text); }
/* == Footer == */
.footer { margin-top: clamp(50px, 7vw, 90px); padding-bottom: 0; }
.footer__invest { background: var(--red); color: #fff; }
.footer__invest .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 20px; }
.footer__invest p { margin: 0; font-size: 17px; }
.footer__invest b { font: 900 clamp(19px, 2.2vw, 26px) var(--head); margin-inline-end: 8px; }
.footer a.footer__cta { flex: none; padding: 10px 22px; background: var(--ink); color: #fff; border-radius: 4px; font: 800 15px var(--head); }
.footer a.footer__cta:hover { padding-inline-start: 22px; background: #fff; color: var(--ink); }
.footer__in { grid-template-areas: none; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; padding-top: 46px; padding-bottom: 40px; }
.footer__brandcol { display: grid; gap: 26px; align-content: start; }
.footer__brand, .footer__cols, .footer__follow { grid-area: auto; }
.footer a.footer__brand:hover { padding-inline-start: 0; color: inherit; }
.footer__brand > span { display: grid; gap: 4px; }
.footer__name { font-size: clamp(24px, 2.6vw, 32px); }
.footer__tag { margin: 0; font-size: 15px; }
.footer__cols a { color: #cfcdc7; padding-block: 2px; }
.footer__h { font-size: 17px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 3px solid var(--red); width: max-content; }
.footer__bottom { display: block; margin: 0; padding: 14px 0; border: 0; background: #000; text-align: center; }
/* == Investigations == */
.block--invest { position: relative; isolation: isolate; padding-block: clamp(30px, 4vw, 50px); color: #fff; }
.block--invest::before { content: ""; position: absolute; inset: 0 -100vmax; z-index: -1; background: var(--ink); border-block: 5px solid var(--gold); }
.invest__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 16px; margin-bottom: 26px; }
.invest__kind { grid-column: 1 / -1; margin: 0; color: var(--gold); font: 800 14px var(--head); letter-spacing: 1px; }
.invest__head h2 { font-size: clamp(32px, 5vw, 60px); font-weight: 900; line-height: 1.2; color: #fff; }
.invest__head a { color: var(--gold); font: 800 15px var(--head); white-space: nowrap; }
.invest__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; }
.invest__grid .card--lead { grid-row: span 2; min-height: 400px; }
.invest__grid .card--row { color: #fff; border-color: rgb(255 255 255 / .14); }
.invest__grid .card--row .card__title a, .invest__grid .card--row .card__title { color: #fff; }
.invest__grid .card__meta { color: #a9a8ad; }
body.category-reports .listing__head { border-bottom: 5px solid var(--gold); }
/* == Contact form == */
.cform { display: grid; gap: 14px; max-width: 720px; padding: clamp(18px, 3vw, 28px); background: var(--card); border-top: 5px solid var(--red); border-radius: 4px; box-shadow: var(--shadow); font-size: 16px; }
.cform label { display: grid; gap: 5px; font: 700 14.5px var(--head); }
.cform small { font-weight: 400; color: var(--muted); }
.cform input, .cform textarea { width: 100%; padding: 11px 13px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 4px; font: 400 16px var(--body); }
.cform input:focus, .cform textarea:focus { outline: 0; border-color: var(--red); box-shadow: 0 0 0 3px rgb(215 20 26 / .14); }
.cform__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.cform__send { justify-self: start; padding: 12px 34px; border: 0; border-radius: 4px; background: var(--red); color: #fff; font: 800 16px var(--head); cursor: pointer; transition: background .2s; }
.cform__send:hover { background: var(--ink); }
.cform__hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform__note { max-width: 720px; padding: 11px 15px; border-radius: 4px; font-weight: 700; }
.cform__note--ok { background: #e3f4e8; color: #0f5c2f; }
.cform__note--bad { background: var(--red-soft); color: var(--red-d); }
@media (max-width: 1023px) { .invest__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .footer__in { grid-template-columns: minmax(0, 1fr); }
  body.skin-wall .brand__name { font-size: 28px; }
  body.skin-wall .site-header__in { min-height: 72px; }
  .invest__head { grid-template-columns: 1fr; }
}

/* == The investigation page: black, gold, a large title, a drop cap, its own contents == */
.invest__ribbon { display: inline-block; margin: 0 0 12px; padding: 4px 16px; background: var(--gold); color: var(--ink); font: 900 15px var(--head); letter-spacing: .5px; }
body.is-investigation .article__head { position: relative; isolation: isolate; padding-block: clamp(30px, 5vw, 60px) 26px; color: #fff; }
body.is-investigation .article__head::before { content: ""; position: absolute; inset: 0 -100vmax; z-index: -1; background: var(--ink); border-bottom: 6px solid var(--gold); }
body.is-investigation .article__title { font-size: clamp(32px, 5.4vw, 66px); font-weight: 900; line-height: 1.22; color: #fff; }
body.is-investigation .article__lead { font-size: clamp(18px, 2vw, 23px); color: #e6e3dc; }
body.is-investigation .article__meta, body.is-investigation .article__meta .by { color: #bdbbb5; }
body.is-investigation .crumbs { display: none; }
body.is-investigation .rtools__btn, body.is-investigation .rtools__size { background: rgb(255 255 255 / .08); color: #fff; border-color: rgb(255 255 255 / .2); }
body.is-investigation .article__body { max-width: 760px; margin-inline: auto; font-size: calc(20px * var(--fs-scale)); }
body.is-investigation .article__body > p:first-of-type::first-letter { float: right; margin-inline-end: 10px; font: 900 3.4em/1 var(--head); color: var(--red); }
body.is-investigation .article__body h2 { margin-top: 1.8em; padding: 0 0 8px; border: 0; border-bottom: 4px solid var(--ink); font-size: 1.5em; font-weight: 900; scroll-margin-top: 80px; }
body.is-investigation .article__body blockquote { margin: 1.5em 0; padding: 18px 22px; background: var(--ink); color: #fff; border-inline-start: 6px solid var(--gold); font: 800 1.1em/1.7 var(--head); }
.itoc { display: grid; gap: 4px; margin: 0 0 28px; padding: 16px 20px; background: var(--card); border-top: 4px solid var(--gold); box-shadow: var(--shadow); font: 700 15.5px var(--head); }
.itoc b { font-weight: 900; margin-bottom: 4px; }
.itoc a { color: var(--text); }
.itoc a:hover { color: var(--red); }

/* == The prestige pass (2026-11-05): quiet, sure of itself. Hairlines and gold instead of tape and tilt;
      the photo breathes, the headline does not shout over it, one red accent per view. == */
body.skin-wall { --bg: #f3f1ec; --surface: #ebe8e1; --card: #ffffff; --line: #e1ddd3; }
html[data-theme="dark"] body.skin-wall { --bg: #101114; --surface: #17181c; --card: #1a1b20; --line: #2b2c33; }
/* «آخر الأخبار» runs straight */
.tape, body.skin-wall .tape { transform: none; background: var(--ink); box-shadow: none; margin-top: 0; border-bottom: 1px solid rgb(255 255 255 / .08); }
body.skin-wall .tape__label, body.skin-wall .tape__label::after, .tape__label, .tape__label::after { background: var(--red); }
.tape__label { font-size: 14px; }
.tape__item { font-size: 14.5px; font-weight: 500; }
.tape__item::before { width: 4px; height: 4px; }

/* the lead story */
.home-top { margin-top: 22px; gap: 16px; }
.rotator, body.skin-wall .rotator { border-radius: 10px; box-shadow: 0 24px 50px -24px rgb(0 0 0 / .55); }
.rotator::before { content: ""; position: absolute; z-index: 4; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent); opacity: .85; pointer-events: none; }
.rotator::after { content: ""; position: absolute; z-index: 4; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07); pointer-events: none; }
.card--hero .card__media .img { object-position: center 22%; }
.card--hero .card__media::after { background: linear-gradient(to top, rgb(9 9 11 / .97) 0%, rgb(9 9 11 / .84) 26%, rgb(9 9 11 / .34) 54%, rgb(9 9 11 / .04) 78%, transparent 100%); }
.rotator__slide.is-active .card__media .img { animation: settle 12s ease-out both; }
@keyframes settle { from { transform: scale(1.055); } to { transform: scale(1); } }
.card--hero .card__body { padding: 0 32px 92px; text-shadow: none; }
.card--hero .card__kickers { margin-bottom: 12px; }
.card--hero .kicker, .card--hero .kicker:hover { display: inline-flex; align-items: center; gap: 10px; padding: 0; background: transparent; color: var(--gold); font-size: 13.5px; font-weight: 800; }
.card--hero .kicker::before { content: ""; width: 26px; height: 2px; background: var(--gold); }
.card--hero .card__title, body.skin-wall .card--hero .card__title { max-width: 24em; font-size: clamp(23px, 2.2vw, 33px); font-weight: 800; line-height: 1.42; text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card--hero .card__title a { background-image: linear-gradient(var(--gold), var(--gold)); background-size: 0 1px; }
.card--hero:hover .card__title a { background-size: 100% 1px; }
.card--hero .card__lead { margin-top: 10px; max-width: 58ch; font-size: 15.5px; line-height: 1.8; color: rgb(255 255 255 / .74); }
.card--hero .card__meta { margin-top: 10px; font-size: 12.5px; color: rgb(255 255 255 / .55); }
.rotator__tabs { counter-reset: tab; gap: 0; padding: 0; background: rgb(9 9 11 / .62); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); border-top: 1px solid rgb(255 255 255 / .09); }
.rotator__tab { position: relative; counter-increment: tab; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; padding: 12px 16px; font-size: 12.5px; font-weight: 600; line-height: 1.55; color: rgb(255 255 255 / .55); }
.rotator__tab + .rotator__tab { border-inline-start: 1px solid rgb(255 255 255 / .07); }
.rotator__tab::before { content: counter(tab, decimal-leading-zero); font-size: 12px; font-weight: 800; color: rgb(255 255 255 / .35); font-variant-numeric: tabular-nums; transition: color .3s; }
.rotator__tab.is-active::before { color: var(--gold); }
.rotator__bar { position: absolute; inset: -1px 0 auto; height: 2px; border-radius: 0; background: transparent; }
.rotator__bar span { background: var(--gold); }
.rotator__tab.is-done .rotator__bar span { transform: scaleX(0); }
/* a photo too small to fill the slot: whole, over its own blur */
.rotator__slide[style] .card--lowres .card__media::before { content: ""; position: absolute; inset: -40px; z-index: -1; background: var(--photo) center / cover; filter: blur(34px) brightness(.5) saturate(1.1); animation: none; }
.card--lowres .card__media .img { object-fit: contain; object-position: center 12%; animation: none !important; transform: none !important; }
.card--lowres .card__media::after { background: linear-gradient(to top, rgb(9 9 11 / .97) 0%, rgb(9 9 11 / .86) 34%, rgb(9 9 11 / .12) 66%, transparent 100%); }

.card--side, body.skin-wall .card--side { border-radius: 10px; }
.card--side .card__media { border-radius: 10px; }
.card--side .kicker, .card--tile .kicker, .card--lead .kicker { background: rgb(9 9 11 / .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); }
.card--side .card__title { font-size: 16px; font-weight: 700; line-height: 1.55; }
.card--overlay .card__media::after { background: linear-gradient(to top, rgb(9 9 11 / .94) 0%, rgb(9 9 11 / .58) 36%, rgb(9 9 11 / .06) 68%, transparent 100%); }
.card--overlay:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -22px rgb(0 0 0 / .55); }
.card:hover .card__media .img { transform: scale(1.035); }

/* section titles */
body.skin-wall .sec-head { align-items: baseline; margin-bottom: 22px; padding-bottom: 12px; }
body.skin-wall .sec-head::after { height: 1px; background: var(--line); opacity: 1; animation: none; }
html[data-theme="dark"] body.skin-wall .sec-head::after { background: var(--line); opacity: 1; }
body.skin-wall .sec-head__title { font-size: clamp(22px, 2.3vw, 30px); font-weight: 800; line-height: 1.35; }
body.skin-wall .sec-head__title::after { bottom: -12px; height: 2px; width: 48px; background: var(--red); }
.sec-head__more { font-size: 13px; padding: 2px 0; color: var(--muted); }
.sec-head__more:hover { background: none; border-color: transparent; color: var(--red); }

/* posters: paper and ink without the sticky tape */
.card--poster, .card--poster:nth-child(n) { --tilt: 0deg; border-radius: 10px; padding: 10px 10px 14px; box-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 14px 30px -18px rgb(0 0 0 / .35); }
.card--poster:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 26px 44px -22px rgb(0 0 0 / .45); }
.card--poster[data-tape]::before { display: none; }
.card--poster .card__media { border-radius: 6px; }
.poster--paper { background: var(--card); color: var(--text); box-shadow: inset 0 0 0 1px var(--line), 0 14px 30px -18px rgb(0 0 0 / .3); }
.poster--ink { background: #131318; }
.poster--red { background: linear-gradient(160deg, #c8141a, #8f0e12); }
.poster--green { background: linear-gradient(160deg, #0f6a37, #0a4726); }
.card--block { padding: 0; }
body.skin-wall .card--block .card__title { font-size: clamp(22px, 2.3vw, 32px); line-height: 1.42; font-weight: 800; }
body.skin-wall .card--poster .card__title { font-size: clamp(16.5px, 1.4vw, 19px); font-weight: 700; line-height: 1.6; }
.card--textposter { background-image: none; }
body.skin-wall .card--textposter .card__title { font-size: clamp(19px, 1.7vw, 23px); }
body.skin-wall .card--block.card--textposter .card__title { font-size: clamp(24px, 2.8vw, 38px); }
.block--strip::before { border-top: 0; box-shadow: inset 0 1px 0 rgb(255 255 255 / .06); background: #0c0c0f; }
.most__n { font-size: 38px; font-weight: 800; -webkit-text-stroke: 1px var(--gold); }
.most__item:hover .most__n { color: var(--gold); transform: none; }

/* the pulse panel */
body.skin-wall .brief, body.skin-wall .brief.brief--pulse { border-radius: 10px; border-top: 0; }
body.skin-wall .brief.brief--pulse { background: #0f1013; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06), 0 24px 50px -24px rgb(0 0 0 / .55); }
.pulsehead { padding-bottom: 12px; border-bottom-color: rgb(255 255 255 / .1); }
.pulsehead__t { font-size: 18px; font-weight: 800; }
.pulsehead a { font-size: 12px; font-weight: 600; }
.pulselist { scrollbar-color: rgb(255 255 255 / .18) transparent; }
.pulselist a { grid-template-columns: 40px minmax(0, 1fr); gap: 8px; padding: 10px 0; font-size: 13.5px; font-weight: 600; line-height: 1.6; border-bottom-color: rgb(255 255 255 / .06); color: #dcdad5; }
.pulselist time { color: var(--gold); filter: none; font-size: 12.5px; font-weight: 700; }
.is-new { animation: pulse-in .7s var(--ease-out) both; }
@keyframes pulse-in { from { opacity: 0; transform: translateY(-10px); background: rgb(201 162 39 / .18); } to { opacity: 1; transform: none; background: transparent; } }

/* «عاجل»: an instrument, not a siren */
.breaking { --brk: var(--red); min-height: 52px; background: rgb(11 11 14 / .95); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 -18px 44px -18px rgb(0 0 0 / .6); }
.breaking::before { inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, var(--gold), var(--brk) 45%); background-size: auto; animation: none; }
.breaking__label { display: inline-flex; align-items: center; gap: 9px; margin: 11px 0; margin-inline-start: 14px; padding: 0 13px; border-radius: 5px; background: var(--brk); font-size: 14.5px; font-weight: 800; }
.breaking__label::after { display: none; }
.breaking__label::before { position: static; flex: none; width: 7px; height: 7px; margin: 0; background: #fff; animation: pulse-w 1.6s infinite; }
.breaking__body { gap: 14px; padding: 6px 16px; }
.breaking__time { padding: 0 14px 0 0; padding-inline: 0 14px; background: none; border-radius: 0; border-inline-end: 1px solid rgb(255 255 255 / .14); color: var(--gold); }
.breaking__text { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breaking__count { flex: none; font-size: 12px; color: rgb(255 255 255 / .45); font-variant-numeric: tabular-nums; }
.breaking__close { width: 46px; background: transparent; color: rgb(255 255 255 / .55); border-inline-start: 1px solid rgb(255 255 255 / .08); }
.breaking__close:hover { background: rgb(255 255 255 / .06); color: #fff; }
.breaking__close .icon { width: 16px; height: 16px; }
body.has-breaking { padding-bottom: 54px; }
body.has-breaking .totop { bottom: 68px; }
body.has-breaking .nextup { bottom: 68px; }
body.has-breaking .consent { bottom: 64px; }
.totop { width: 42px; height: 42px; background: rgb(11 11 14 / .9); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), 0 12px 26px -10px rgb(0 0 0 / .5); }
.totop:hover { background: var(--red); }
/* «الخبر التالي» */
.nextup { width: min(340px, calc(100vw - 96px)); padding-block: 8px; background: rgb(14 14 18 / .96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 10px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09), 0 22px 44px -18px rgb(0 0 0 / .6); }
.nextup__media { width: 60px; }
.nextup__txt { font-size: 13px; font-weight: 600; }
.nextup__txt b { font-size: 11.5px; font-weight: 800; }
.nextup__x { color: rgb(255 255 255 / .55); }
.nextup__x:hover { color: #fff; }

/* تحقيقات: files, in ink and gold */
.block--invest::before { background: radial-gradient(90rem 30rem at 85% -10%, rgb(201 162 39 / .1), transparent 60%), #0b0b0e; border: 0; box-shadow: inset 0 1px 0 rgb(201 162 39 / .4), inset 0 -1px 0 rgb(201 162 39 / .4); }
.invest__head { grid-template-columns: 1fr auto; margin-bottom: 28px; }
.invest__kind { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; letter-spacing: 0; }
.invest__kind::before { content: ""; width: 34px; height: 1px; background: var(--gold); }
.invest__head h2 { font-size: clamp(34px, 4.4vw, 56px); font-weight: 800; line-height: 1.25; }
.invest__tag { grid-column: 1; margin: 2px 0 0; color: #a8a6a0; font-size: 15.5px; }
.invest__head a { grid-column: 2; grid-row: 2 / span 2; align-self: end; font-size: 13.5px; font-weight: 700; }
.invest__grid { counter-reset: file 1; }
.invest__grid .card--lead { border-radius: 10px; box-shadow: inset 0 0 0 1px rgb(201 162 39 / .3); }
.card--file { counter-increment: file; position: relative; }
.invest__grid .card--file { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); border-color: rgb(255 255 255 / .1); }
.invest__grid .card--file .card__title { font-size: 16px; font-weight: 700; }
.invest__grid .card--file .card__kickers::before, .dossier__grid .card--file .card__kickers::before { content: "ملف " counter(file, decimal-leading-zero); font: 800 12px var(--head); color: var(--gold); margin-inline-end: 8px; }
.invest__grid .kicker { display: none; }
.dossier__head { position: relative; isolation: isolate; padding: clamp(46px, 7vw, 92px) 0 clamp(30px, 4vw, 48px); margin-bottom: 34px; background: radial-gradient(90rem 34rem at 80% -20%, rgb(201 162 39 / .13), transparent 60%), #0b0b0e; color: #fff; box-shadow: inset 0 -1px 0 rgb(201 162 39 / .45); }
.dossier__kind { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; color: var(--gold); font: 700 14px var(--head); }
.dossier__kind::before { content: ""; width: 38px; height: 1px; background: var(--gold); }
.dossier__head h1 { font-size: clamp(46px, 8vw, 96px); font-weight: 800; line-height: 1.15; }
.dossier__tag { max-width: 56ch; margin: 12px 0 0; color: #bcbab3; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.8; }
.dossier__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 26px; padding-top: 16px; border-top: 1px solid rgb(255 255 255 / .1); font: 600 14px var(--head); color: #a8a6a0; }
.dossier__row b { color: var(--gold); font-weight: 800; }
.dossier__row a { color: var(--gold); }
.dossier__grid { counter-reset: file 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.dossier__grid .card--stack { border-radius: 10px; box-shadow: none; border-color: var(--line); }
.dossier__grid .card--stack:hover { box-shadow: 0 24px 44px -24px rgb(0 0 0 / .4); border-color: var(--gold); }
.dossier__grid .card--stack::after { background: var(--gold); height: 2px; }
.dossier__grid .card--stack .card__title { font-size: 17px; font-weight: 800; }
.dossier__grid .kicker { display: none; }
.dossier__grid .card--wide { border-radius: 10px; box-shadow: inset 0 0 0 1px rgb(201 162 39 / .3); }

@media (max-width: 1023px) {
  :root { --hero-h: clamp(380px, 54vw, 500px); }
  .dossier__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  :root { --hero-h: clamp(360px, 100vw, 450px); }
  .card--hero .card__body { padding: 0 16px 56px; }
  .card--hero .card__title, body.skin-wall .card--hero .card__title { font-size: clamp(20px, 5.6vw, 24px); }
  .rotator__tab { display: block; padding: 0; height: 40px; }
  .rotator__tab::before { display: grid; place-items: center; height: 100%; }
  .breaking { min-height: 48px; }
  .breaking__label { margin: 9px 0; margin-inline-start: 10px; padding: 0 9px; font-size: 13px; }
  .breaking__body { padding: 4px 10px; gap: 8px; }
  .breaking__time, .breaking__count { display: none; }
  .breaking__text { font-size: 13.5px; }
  .breaking__close { width: 40px; }
  body.has-breaking .totop { bottom: 60px; }
  body.has-breaking .nextup { bottom: 60px; }
  body.has-breaking.has-float-share .nextup { bottom: 122px; }
  body.has-breaking .share--float { bottom: 58px; }
  body.has-breaking .consent { bottom: 56px; }
  .dossier__grid { grid-template-columns: minmax(0, 1fr); }
  .invest__head { grid-template-columns: 1fr; }
  .invest__head a { grid-column: 1; grid-row: auto; }
}

/* the kicker must stay readable over a face */
.card--hero .kicker { text-shadow: 0 1px 10px rgb(0 0 0 / .85); }
@media (max-width: 767px) {
  .card--hero .card__media::after { background: linear-gradient(to top, rgb(9 9 11 / .98) 0%, rgb(9 9 11 / .9) 34%, rgb(9 9 11 / .62) 54%, rgb(9 9 11 / .1) 74%, transparent 100%); }
}

/* «عاجل» in red: deep crimson, one thread of gold, a white seal */
.breaking { min-height: 56px; background: linear-gradient(100deg, #6e080d 0%, #a80f14 30%, #d7141a 62%, #8f0c11 100%); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 -16px 40px -14px rgb(120 8 12 / .7); isolation: isolate; }
.breaking::before { z-index: 2; height: 1px; background: linear-gradient(90deg, transparent, #e9c766 18%, #fff0bd 50%, #e9c766 82%, transparent); }
.breaking::after { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--net-light) 0 0 / 16px 16px; opacity: .05; pointer-events: none; }
.breaking__label { margin-block: 12px; margin-inline-start: 14px; padding: 0 14px; background: #fff; color: #b80f16; border-radius: 4px; font-weight: 900; box-shadow: 0 6px 16px -6px rgb(0 0 0 / .55); }
.breaking__label::before { background: #d7141a; animation: pulse 1.6s infinite; }
.breaking__time { color: #ffe29a; font-weight: 800; border-inline-end-color: rgb(255 255 255 / .28); }
.breaking__text, .breaking__text:hover { font-size: 16px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgb(60 0 3 / .5); text-decoration: none; }
.breaking__text:hover { color: #ffe29a; }
.breaking__count { color: rgb(255 255 255 / .7); }
.breaking__close { color: rgb(255 255 255 / .8); border-inline-start-color: rgb(255 255 255 / .18); }
.breaking__close:hover { background: rgb(0 0 0 / .22); color: #fff; }
/* how long this line stays: a thread of gold along the bottom */
.breaking__tick { position: absolute; inset: auto 0 0; height: 2px; background: #ffe29a; opacity: .75; transform: scaleX(0); transform-origin: right; pointer-events: none; }
.breaking__tick.is-run { animation: fill 6.5s linear forwards; }
.breaking:hover .breaking__tick { animation-play-state: paused; }
@media (max-width: 767px) {
  .breaking { min-height: 50px; }
  .breaking__label { margin-block: 10px; margin-inline-start: 10px; }
  .breaking__text, .breaking__text:hover { font-size: 13.5px; }
}
.breaking__count { direction: ltr; unicode-bidi: isolate; }

/* Full-width bands without sticking out. -100vmax made the page 1187 px wide on a 375 px phone: hidden from
   scrollWidth by overflow:clip, yet the screen could slide sideways and lose the right side of the page. */
.block--strip::before, .block--invest::before, body.is-investigation .article__head::before { inset-inline: calc(50% - 50vw); }

/* == Phones, tested as one (Android agent + touch), 2026-11-05 == */
html { -webkit-tap-highlight-color: transparent; }
.swipe, .top-side, .reels, .block--grid .block__grid, .block--posters .block__grid { overscroll-behavior-x: contain; }
/* A finger has no hover: a tapped card must not stay lifted and zoomed. */
@media (hover: none) {
  .card--overlay:hover, .card--stack:hover, .card--poster:hover, .pulse__body:hover, .alsoread a:hover { transform: none; }
  .card:hover .card__media .img { transform: none; }
}
/* The iPhone's home bar (viewport-fit=cover): nothing fixed may sit under it. */
.breaking { padding-bottom: env(safe-area-inset-bottom); }
.breaking__tick { bottom: env(safe-area-inset-bottom); }
/* A short phone on its side: the sticky menu would leave no room to read. */
@media (max-height: 500px) { .nav, body.skin-wall .nav { position: static; } }
@media (max-width: 767px) {
  /* The whole headline, on two lines: one line cut it after three words. */
  .breaking { align-items: center; }
  .breaking__body { min-width: 0; }
  .breaking__text, .breaking__text:hover { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; line-height: 1.5; }
  body.has-breaking { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  body.has-breaking .share--float { bottom: calc(68px + env(safe-area-inset-bottom)); }
  body.has-breaking .consent { bottom: calc(66px + env(safe-area-inset-bottom)); }
  body.has-breaking .totop { bottom: calc(76px + env(safe-area-inset-bottom)); }
  /* One thing floating over the story at a time: bar + share is already 110 px of a phone. */
  .nextup { display: none; }
  body.has-float-share .totop { display: none; }
  /* The pulse list scrolled inside itself and caught the thumb on its way down the page. */
  body.skin-wall .brief.brief--pulse { max-height: none; }
  .pulselist { overflow: visible; }
  .pulselist li:nth-child(n+7) { display: none; }
  /* Thumb-sized */
  .rtools__size .rtools__btn { min-width: 42px; justify-content: center; }
  .pulse__acts a { padding-block: 6px; }
  /* Below 16 px iOS zooms the page when a field is focused. */
  .site-search input, .cform input, .cform textarea { font-size: 16px; }
  .notfound .site-search { width: calc(100% - 2 * var(--gutter)); }
  /* The consent box covered half the screen. */
  .consent { inset-inline: 8px; bottom: 8px; padding: 10px 12px; gap: 8px 12px; }
  .consent__txt { flex-basis: 100%; }
  .consent__txt p { font-size: 12.5px; line-height: 1.6; }
  .consent__btns { flex: 1; }
  .consent__btns button { flex: 1; height: 38px; }
}
@media (max-width: 380px) {
  .soc--top li:nth-child(n+7) { display: none; }
  .tape__label { font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Colour: every section has its own, and the page takes it wherever that
   section's story appears. The four colours of the flag tie them together.
   ═══════════════════════════════════════════════════════════════════════ */
:root { --flag: linear-gradient(90deg, #0e0e10 0 25%, #fff 25% 50%, #0f9d58 50% 75%, #d7141a 75% 100%); --sc: var(--red); --sct: #fff; }
.sec-home { --sc: #0f9d58; }
.sec-palestine { --sc: #d7141a; }
.sec-gaza { --sc: #0f9d58; }
.sec-west-bank { --sc: #2e7d32; }
.sec-jerusalem { --sc: #d4a72c; --sct: #17121c; }
.sec-prisoners { --sc: #e8590c; }
.sec-settlements { --sc: #b3261e; }
.sec-israeli-affairs { --sc: #1565c0; }
.sec-arab-world { --sc: #00838f; }
.sec-politics { --sc: #5e35b1; }
.sec-economy { --sc: #00897b; }
.sec-sports { --sc: #2979ff; }
.sec-variety { --sc: #d81b60; }
.sec-culture { --sc: #8e24aa; }
.sec-health { --sc: #43a047; }
.sec-tech { --sc: #0277bd; }
.sec-reports { --sc: #c9a227; --sct: #17121c; }
.sec-opinion { --sc: #795548; }
.sec-general { --sc: #546e7a; }

/* kickers wear the section */
.kicker, .card--hero .kicker, .card--hero .kicker:hover, .card--side .kicker, .card--tile .kicker, .card--lead .kicker {
  display: inline-flex; align-items: center; gap: 0; padding: 2px 11px; border-radius: 999px; background: var(--sc); color: var(--sct); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.kicker:hover, .card--side .kicker:hover, .card--tile .kicker:hover, .card--lead .kicker:hover { background: color-mix(in srgb, var(--sc) 82%, #000); color: var(--sct); }
.card--hero .kicker::before { display: none; }
.kicker--breaking { background: #fff; color: #d7141a; }
.poster--red .kicker, .poster--sec .kicker { background: #0e0e10; color: #fff; }
.poster--sec { background: var(--sc); color: var(--sct); }
.poster--sec .card__meta, .poster--sec .card__lead { color: color-mix(in srgb, var(--sct) 82%, transparent); }
.poster--sec .card__title a:hover { color: var(--sct); }

/* the lead story */
.rotator::before { height: 4px; opacity: 1; background: var(--flag); }
.card--hero .card__media::after { background: linear-gradient(to top, color-mix(in srgb, var(--sc) 30%, #09090b) 0%, rgb(9 9 11 / .9) 24%, rgb(9 9 11 / .36) 54%, rgb(9 9 11 / .04) 78%, transparent 100%); }
.card--hero .card__title a { background-image: linear-gradient(var(--sc), var(--sc)); background-size: 0 3px; }
.card--hero:hover .card__title a { background-size: 100% 3px; }
.rotator__tab { --tc: #ff4d4f; transition: background .35s, color .3s; }
.rotator__tab:nth-child(4n+2) { --tc: #22c55e; }
.rotator__tab:nth-child(4n+3) { --tc: #f5c542; }
.rotator__tab:nth-child(4n) { --tc: #fff; }
.rotator__tab.is-active { background: color-mix(in srgb, var(--tc) 15%, transparent); }
.rotator__tab:hover { background: color-mix(in srgb, var(--tc) 9%, transparent); }
.rotator__tab::before, .rotator__tab.is-active::before { color: var(--tc); }
.rotator__bar { height: 3px; }
.rotator__bar span { background: var(--tc); }

/* the two stories beside it */
.card--side { box-shadow: inset 0 -4px 0 var(--sc), 0 14px 30px -18px rgb(0 0 0 / .55); transition: transform .35s var(--ease-out), box-shadow .35s; }
.card--side:hover { transform: translateY(-3px); box-shadow: inset 0 -4px 0 var(--sc), 0 22px 40px -18px color-mix(in srgb, var(--sc) 60%, #000); }
.card--side .card__media::after, .card--tile .card__media::after { background: linear-gradient(to top, color-mix(in srgb, var(--sc) 26%, #09090b) 0%, rgb(9 9 11 / .72) 38%, transparent 78%); }
.card--side .card__body { z-index: 2; }

/* the pulse: each line its own colour, so the eye can run down it */
.brief--pulse { position: relative; overflow: hidden; background: radial-gradient(60rem 18rem at 100% -10%, rgb(215 20 26 / .2), transparent 60%), radial-gradient(40rem 16rem at 0 110%, rgb(15 157 88 / .16), transparent 60%), #0e0e12; border-color: rgb(255 255 255 / .08); }
.brief--pulse::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--flag); }
.pulsehead { position: relative; }
.pulselist li { --pc: #ff4d4f; position: relative; }
.pulselist li:nth-child(5n+2) { --pc: #22c55e; }
.pulselist li:nth-child(5n+3) { --pc: #f5c542; }
.pulselist li:nth-child(5n+4) { --pc: #38bdf8; }
.pulselist li:nth-child(5n+5) { --pc: #f472b6; }
.pulselist a { position: relative; padding-inline-start: 9px; transition: background .25s, color .2s, padding .25s; border-radius: 6px; }
.pulselist a::before { content: ""; position: absolute; inset-inline-start: 0; top: 11px; bottom: 11px; width: 3px; border-radius: 3px; background: var(--pc); transition: top .25s, bottom .25s; }
.pulselist a:hover { color: #fff; background: color-mix(in srgb, var(--pc) 13%, transparent); padding-inline-start: 13px; }
.pulselist a:hover::before { top: 4px; bottom: 4px; }
.pulselist time { color: var(--pc); filter: none; }

/* section titles */
.block[class*="sec-"] .sec-head__title { color: var(--text); }
/* The strip's band is black in both themes: its title stays white. */
.block--strip[class*="sec-"] .sec-head__title { color: #fff; }
.block[class*="sec-"] .sec-head__title::before, .block[class*="sec-"] .sec-head__title::after { background: var(--sc); }
body.skin-wall .block[class*="sec-"] .sec-head__title { display: inline-flex; align-items: center; gap: 12px; padding-inline-start: 0; }
body.skin-wall .block[class*="sec-"] .sec-head__title::before { display: block; position: static; flex: none; width: 12px; height: .9em; border-radius: 4px; }
body.skin-wall .block[class*="sec-"] .sec-head::after, html[data-theme="dark"] body.skin-wall .block[class*="sec-"] .sec-head::after { background: linear-gradient(to left, var(--sc), color-mix(in srgb, var(--sc) 15%, transparent) 55%, transparent); height: 4px; opacity: 1; }
.block[class*="sec-"] .sec-head__more { color: color-mix(in srgb, var(--sc) 85%, var(--text)); }
.block[class*="sec-"] .sec-head__more:hover { border-color: var(--sc); background: color-mix(in srgb, var(--sc) 12%, transparent); }
.card--stack:hover .card__title a, .card--row:hover .card__title a { color: color-mix(in srgb, var(--sc) 88%, var(--text)); }
.card--stack, .card--row { --hover-c: var(--sc); }

/* ── the section bar: a coloured pill glides between the sections ───── */
.nav { border-bottom: 0; }
.nav::after { content: ""; display: block; height: 3px; background: var(--flag); }
html[data-theme="dark"] .nav { border-bottom: 0; }
.nav__links { padding-block: 6px; gap: 3px; scroll-behavior: smooth; }
.nav__link { z-index: 1; padding: 8px 15px; border-radius: 999px; transition: color .25s; }
.nav__link.is-active { color: var(--text); }
.nav__link--pulse, body.skin-wall .nav__link--pulse { color: #d7141a; }
.nav__link--inv, body.skin-wall .nav__link--inv { box-shadow: none; }
.nav__link.is-hot, .nav__link.is-hot.is-active, .nav__link--pulse.is-hot, body.skin-wall .nav__link--pulse.is-hot, .nav__link--inv.is-hot, body.skin-wall .nav__link--inv.is-hot, html[data-theme="dark"] .nav__link--inv.is-hot { color: var(--hot, #fff); }
.nav__link--pulse.is-hot .pulsedot { background: currentColor; }
.nav__ink { z-index: 0; top: 6px; bottom: 6px; height: auto; border-radius: 999px; box-shadow: 0 8px 18px -8px rgb(0 0 0 / .5); transition: transform .5s cubic-bezier(.3, 1.35, .45, 1), width .5s cubic-bezier(.3, 1.35, .45, 1), opacity .25s, background .35s; }
.nav__arrow { width: 36px; height: 36px; margin-top: -18px; border: 0; background: #d7141a; color: #fff; font-size: 20px; line-height: 1; box-shadow: 0 6px 16px -4px rgb(215 20 26 / .7); transition: transform .25s var(--ease-out), opacity .25s, background .25s; }
.nav__arrow--back { background: #0f9d58; box-shadow: 0 6px 16px -4px rgb(15 157 88 / .7); }
.nav__arrow:hover { color: #fff; transform: scale(1.12); }
.nav-sweep { position: fixed; z-index: 9999; inset: 0 0 auto; height: 4px; transform-origin: right; animation: sweep 1.1s cubic-bezier(.2, .8, .2, 1) forwards; pointer-events: none; }
@keyframes sweep { from { transform: scaleX(0); } to { transform: scaleX(.92); } }
.nav { view-transition-name: pnn-nav; }
@keyframes pnn-out { to { opacity: 0; transform: translateY(-10px) scale(.992); } }
@keyframes pnn-in { from { opacity: 0; transform: translateY(16px); } }
::view-transition-old(root) { animation: pnn-out .22s ease-in both; }
::view-transition-new(root) { animation: pnn-in .42s var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .nav__ink { transition: none; } .nav-sweep { display: none; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* ── search ─────────────────────────────────────────────────────────── */
.site-search { position: relative; }
.ss-drop { position: absolute; z-index: 80; inset-inline: 0; top: calc(100% + 6px); min-width: min(420px, 88vw); max-height: 70vh; overflow: auto; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 22px 50px -12px rgb(0 0 0 / .4); text-align: start; }
.site-search--header .ss-drop { inset-inline: auto; left: 0; right: auto; width: min(440px, 88vw); min-width: 0; }
.ss-item { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 8px; border-radius: 10px; color: var(--text); }
.ss-item:hover, .ss-item.is-pick, .ss-all.is-pick { background: color-mix(in srgb, var(--sc) 10%, transparent); }
.ss-item img, .ss-ph { width: 58px; height: 42px; object-fit: cover; border-radius: 7px; background: var(--sc); display: block; }
.ss-item b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--head); font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.ss-item small { font-size: 11.5px; color: var(--muted); }
.ss-item em { font-style: normal; font-weight: 700; color: color-mix(in srgb, var(--sc) 85%, var(--text)); }
.ss-all { display: block; padding: 9px; margin-top: 4px; border-top: 1px solid var(--line); font-family: var(--head); font-size: 13px; font-weight: 700; color: var(--red); text-align: center; }
.ss-none { margin: 0; padding: 12px; font-size: 13px; color: var(--muted); text-align: center; }
mark { padding: 0 2px; border-radius: 3px; background: rgb(245 197 66 / .45); color: inherit; }
.searchx { display: grid; gap: 12px; margin-top: 14px; }
.searchx__filters { display: flex; flex-wrap: wrap; gap: 10px; }
.searchx__filters label { display: inline-flex; align-items: center; gap: 7px; font-family: var(--head); font-size: 13px; font-weight: 700; }
.searchx__filters select { height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--text); font: inherit; font-weight: 400; }
.searchx__note { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.searchx__empty { padding: 40px 0; text-align: center; }
.searchx__empty a { color: var(--red); font-weight: 700; }

/* the share bar: one compact row, the story picture first, nothing hidden behind a menu */
.share { gap: 5px; }
.share .share__btn { height: 34px; min-width: 34px; width: 34px; padding: 0; }
.share .share__btn .icon { width: 16px; height: 16px; }
.share .share__btn:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgb(0 0 0 / .18); }
.share__btn--messenger { background: linear-gradient(135deg, #00b2ff, #a033ff); }
.share__btn--linkedin { background: #0a66c2; }
.share__btn--threads { background: #26272c; }
.share__btn--reddit { background: #ff4500; }
.share__btn--mail { background: #6b7280; }
.share__btn--print, .share__btn--native { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.share__btn--print:hover, .share__btn--native:hover { color: var(--text); }
.share .share__btn--story, .share .share__btn--story:hover { width: auto; gap: 5px; padding: 0 11px 0 12px; color: #fff; font-family: var(--head); font-weight: 700; font-size: 12.5px; white-space: nowrap; background: linear-gradient(115deg, #d7141a 0%, #a80f14 48%, #0f7a3d 100%); box-shadow: 0 6px 14px -7px rgb(215 20 26 / .8); }
.share .share__btn--story span { display: inline; }
.share .share__btn--post, .share .share__btn--post:hover { padding: 0 11px; }
.share--pulse.share .share__btn--post, .share--pulse.share .share__btn--post:hover { padding: 0 9px; }
.share .share__btn--story:hover { background: linear-gradient(115deg, #e8232a 0%, #b81218 48%, #0f9d58 100%); }
.share .share__label { font-size: 13px; margin-inline-end: 2px; }
.share--pulse { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); gap: 4px; }
.share--pulse .share__btn { height: 30px; min-width: 30px; width: 30px; }
.share--pulse .share__btn .icon { width: 14px; height: 14px; }
.share--pulse .share__btn--print, .share--pulse .share__btn--native { display: none; }
.share .share--pulse .share__btn--story { height: 30px; }
.share--pulse.share .share__btn--story, .share--pulse.share .share__btn--story:hover { width: auto; height: 30px; font-size: 12px; padding: 0 10px 0 11px; }
.share--float.share { flex-wrap: nowrap; justify-content: flex-start; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.share--float.share::-webkit-scrollbar { display: none; }
.share--float .share__btn, .share--float .share__btn--copy { flex: 0 0 34px; width: 34px; height: 34px; }
.share--float .share__btn--story { flex: 0 0 auto; }

/* Reading mode changes the style only: colours and type. Nothing moves, nothing is hidden beyond what it always hid.
   On body, or body.skin-wall overrides them. Never pure white on black or black on white. */
html.is-reading body.single, html.is-reading body.single.skin-wall { --bg: #f5efe3; --card: #fbf6ec; --surface: #eee6d5; --line: #ddd0b9; --text: #2e2820; --muted: #75695a; }
html.is-reading[data-theme="dark"] body.single, html.is-reading[data-theme="dark"] body.single.skin-wall { --bg: #171613; --card: #201e19; --surface: #27241e; --line: #39342a; --text: #d6cfc1; --muted: #979080; }
html.is-reading body.single { transition: background-color .4s, color .4s; }
html.is-reading body.single .article__body { font-weight: 400; color: var(--text); text-wrap: pretty; }
html.is-reading[data-theme="dark"] body.single .article__figure .img, html.is-reading[data-theme="dark"] body.single .article__body figure img { filter: brightness(.85); }

/* the lists in the section bar */
.sec-under-lens { --sc: #c9a227; --sct: #17121c; }
.sec-public-money { --sc: #00897b; --sct: #fff; }
.sec-nepotism { --sc: #8e24aa; --sct: #fff; }
.sec-lawlessness { --sc: #e8590c; --sct: #fff; }
.sec-violations-log { --sc: #b3261e; --sct: #fff; }
.sec-citizen-pocket { --sc: #2e7d32; --sct: #fff; }
.nav__group { position: relative; flex: none; display: flex; }
.nav__group > .nav__link { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; cursor: pointer; }
.nav__chev { width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .25s var(--ease-out), margin .25s; }
.nav__group.is-open .nav__chev { transform: rotate(-135deg); margin-top: 3px; }
.nav__drop { position: fixed; z-index: 90; display: grid; gap: 2px; min-width: 230px; padding: 11px 8px 8px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 50px -14px rgb(0 0 0 / .4); overflow: hidden; animation: drop-in .24s var(--ease-out) both; }
.nav__drop[hidden] { display: none; }
.nav__drop::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #0e0e10 0 25%, #fff 25% 50%, #0f9d58 50% 75%, #d7141a 75% 100%); }
@keyframes drop-in { from { opacity: 0; transform: translateY(-6px); } }
.nav__dropitem { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px; font-family: var(--head); font-weight: 700; font-size: 14.5px; color: var(--text); transition: background .18s, padding .2s var(--ease-out); }
.nav__dropitem i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--sc, var(--red)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc, var(--red)) 22%, transparent); }
.nav__dropitem:hover, .nav__dropitem.is-active { background: color-mix(in srgb, var(--sc, var(--red)) 13%, transparent); padding-inline-start: 15px; color: var(--text); }
.drawer__group { margin: 16px 0 4px; font-family: var(--head); font-size: 12.5px; font-weight: 700; color: var(--muted); }

/* بالأرقام */
.nums__in { padding-block: 22px 56px; }
.nums__note { margin: 0 0 18px; padding: 11px 15px; background: var(--surface); border-inline-start: 4px solid #c9a227; border-radius: 10px; font-size: 14.5px; color: var(--muted); }
.nums__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.nums__big, .nums__card { position: relative; display: grid; gap: 2px; padding: 18px; border-radius: 16px; overflow: hidden; }
.nums__big { background: #17121c; color: #fff; }
.nums__big b, .nums__card b { font-family: var(--head); font-weight: 900; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; }
.nums__big span { color: #c9c6d0; }
.nums__card { background: var(--card); border: 1px solid var(--line); }
.nums__card b { color: var(--sc); }
.nums__card span { font-family: var(--head); font-weight: 700; font-size: 14px; }
.nums__card i { position: absolute; inset: auto 0 0 auto; width: var(--w); height: 4px; background: var(--sc); }
.nums__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; }
.nums__panel { padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.nums__panel h2 { margin: 0 0 14px; font-size: 17px; }
.nums__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 190px; }
.nums__days > div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
.nums__days b { font-size: 13px; }
.nums__days i { width: 100%; max-width: 34px; height: var(--h); background: linear-gradient(180deg, #d7141a, #8f0d11); border-radius: 6px 6px 2px 2px; }
.nums__days span { font-size: 12px; color: var(--muted); }
.nums__bar { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 9px 2px 13px; font-family: var(--head); font-weight: 700; font-size: 14.5px; }
.nums__bar i { position: absolute; inset: auto 0 3px auto; width: var(--w); height: 6px; background: #0f9d58; border-radius: 4px; }

/* The phone's floating share bar holds what fits: 11 buttons in one row pushed the last ones off the screen. */
@media (max-width: 760px) {
  .share--float .share__btn { flex: 1 1 0; width: auto; min-width: 0; }
  .share--float .share__btn--copy, .share--float .share__btn--more { flex: 0 0 42px; width: 42px; }
  .share--float .share__btn--mail, .share--float .share__btn--reddit, .share--float .share__btn--threads, .share--float .share__btn--linkedin, .share--float .share__btn--messenger, .share--float .share__btn--print, .share--float .share__btn--link, .share--float .share__btn--short { display: none; }
}

/* The section's own colour under its own text. This skin hides the moving pill (.nav__ink), so the text colour meant
   for that pill had nothing under it: gold's dark text on a black tab made «تحقيقات» and «القدس» unreadable, and white
   text on a white bar hid whichever link had just been touched. */
body.skin-wall .nav__link.is-active, body.skin-wall .nav__link.is-hot,
body.skin-wall .nav__link--inv.is-hot, body.skin-wall .nav__link--pulse.is-hot, html[data-theme="dark"] body.skin-wall .nav__link--inv.is-hot { background: var(--sc, var(--ink)); color: var(--sct, #fff); }
body.skin-wall .nav__link.is-active .pulsedot, body.skin-wall .nav__link.is-hot .pulsedot { background: currentColor; }

/* «المزيد» on the black band: the section's colour mixed with dark text disappeared in the light theme. */
.block--strip[class*="sec-"] .sec-head__more, .block--strip[class*="sec-"] .sec-head__more:hover { color: #fff; }

@media (max-width: 760px) {
  /* The copyright sat under the floating arrow. */
  .footer__bottom { padding-inline: 62px; }
  /* Three floating layers in one corner: the arrow goes above the share bar. */
  body.has-breaking.has-float-share .totop { bottom: 128px; }
}

/* More slides than the row can title: numbers and bars only; the slide itself carries the title. */
.rotator--many .rotator__tab-title { display: none; }
.rotator--many .rotator__tab { grid-template-columns: minmax(0, 1fr); justify-items: center; }

/* A picture inside a story */
.article__body .pnn-inline { margin: 1.8em auto; }
.article__body .pnn-inline.is-center { max-width: 620px; }
.article__body .pnn-inline img { display: block; width: 100%; height: auto; border-radius: var(--r-s); box-shadow: 0 10px 28px -16px rgb(0 0 0 / .5); }
.article__body .pnn-inline figcaption { margin-top: 9px; padding-inline-start: 12px; border-inline-start: 3px solid var(--line); font-size: 14px; line-height: 1.7; color: var(--muted); }

/* ── «بالأرقام»: the observatory (2026-11-07) ─────────────────────────── */
.bn-head { position: relative; padding: clamp(32px, 5vw, 64px) 0 clamp(26px, 4vw, 44px); background: var(--ink); color: #fff; border-bottom: 6px solid var(--red); overflow: hidden; }
.bn-head::after { content: ""; position: absolute; inset: 0; background: var(--net-light) 0 0 / 22px 22px; opacity: .06; pointer-events: none; }
.bn-head .wrap { position: relative; z-index: 1; }
.bn-kicker { margin: 0 0 4px; color: var(--gold); font: 700 15px var(--head); }
.bn-head h1 { margin: 0; font-size: clamp(40px, 7vw, 82px); font-weight: 900; line-height: 1.1; }
.bn-lead { max-width: 820px; margin: 12px 0 0; color: #d6d3cc; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.8; }
.bn-period { display: inline-block; margin: 16px 0 0; padding: 7px 14px; border: 1px solid rgb(201 162 39 / .5); border-radius: 999px; color: #f1ede4; font-size: 14px; }
.bn-period b { color: #fff; }
.bn-files { display: flex; gap: 6px; overflow-x: auto; padding-block: 14px 4px; scrollbar-width: none; }
.bn-files::-webkit-scrollbar { display: none; }
.bn-files a { flex: none; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--text); font: 700 14px var(--head); text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.bn-files a:hover { border-color: var(--red); }
.bn-files a[aria-current] { background: var(--red); border-color: var(--red); color: #fff; }
.bn-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; padding-block: 12px; }
.bn-filter label { display: grid; gap: 4px; min-width: 0; }
.bn-filter label > span { color: var(--muted); font-size: 12px; }
.bn-filter select, .bn-filter input { height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); font: 15px var(--body); max-width: 100%; }
.bn-custom { display: flex; gap: 10px; }
.bn-reset { align-self: center; color: var(--muted); font-size: 13px; }
.bn-btn { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); font: 700 14px var(--head); text-decoration: none; cursor: pointer; transition: border-color .2s, background .2s, transform .2s var(--ease); }
.bn-btn:hover { border-color: var(--red); transform: translateY(-1px); }
.bn-btn svg { width: 18px; height: 18px; flex: none; }
.bn-btn--go { background: var(--red); border-color: var(--red); color: #fff; }
.bn-btn--data { border-style: dashed; }
.bn-btn[disabled] { opacity: .6; cursor: progress; }
.bn-body { display: grid; gap: 16px; padding-block: 6px 56px; }
.bn-empty { display: grid; gap: 4px; padding: 18px 20px; border: 1px dashed var(--line); border-radius: var(--r); color: var(--muted); }
.bn-empty b { color: var(--text); }
.bn-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.bn-tile { position: relative; display: grid; gap: 2px; align-content: start; padding: 16px 18px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
.bn-tile::before { content: ""; position: absolute; inset-block: 14px; inset-inline-start: 0; width: 5px; border-radius: 0 4px 4px 0; background: var(--c, var(--red)); }
.bn-tile b { font: 900 clamp(30px, 3.6vw, 44px)/1.1 var(--head); font-variant-numeric: tabular-nums; }
.bn-tile span { font: 700 15px var(--head); }
.bn-tile small { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.bn-tile em { margin-top: 4px; font-style: normal; font-size: 12.5px; font-weight: 700; }
.bn-tile em.up { color: #c81e2a; }
.bn-tile em.down { color: #0f7a3d; }
.bn-card { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--card); box-shadow: var(--shadow); min-width: 0; }
.bn-card h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 12px; font: 800 19px var(--head); }
.bn-card h2 small { color: var(--muted); font: 400 12.5px var(--body); }
.bn-card h3 { margin: 14px 0 6px; font: 800 15px var(--head); }
.bn-insights ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.bn-insights li { position: relative; padding-inline-start: 18px; line-height: 1.8; }
.bn-insights li::before { content: ""; position: absolute; inset-inline-start: 0; top: .75em; width: 8px; height: 8px; border-radius: 2px; background: var(--red); transform: rotate(45deg); }
.bn-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.bn-chart svg { display: block; width: 100%; height: auto; }
.bn-gl { stroke: var(--line); stroke-width: 1; }
.bn-ax { fill: var(--muted); font: 12px var(--body); }
.bn-bar .bn-hit { fill: transparent; }
.bn-bar:hover .bn-hit { fill: rgb(128 128 128 / .1); }
.bn-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 13px; }
.bn-legend a { display: inline-flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; padding: 3px 8px; border-radius: 8px; }
.bn-legend a[aria-current] { background: var(--surface); outline: 1px solid var(--line); }
.bn-legend i { width: 12px; height: 12px; border-radius: 3px; }
.bn-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.bn-grid { display: grid; grid-template-columns: minmax(0, 1fr) 14px repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(7, 54px); gap: 5px; direction: ltr; }
.bn-gov { display: grid; place-content: center; text-align: center; gap: 1px; border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, #d7141a calc(var(--a, 0) * 100%), var(--surface)); color: var(--text); text-decoration: none; direction: rtl; transition: transform .15s var(--ease), box-shadow .15s; }
.bn-gov span { font: 700 11.5px/1.25 var(--head); padding-inline: 2px; }
.bn-gov b { font: 900 16px var(--head); font-variant-numeric: tabular-nums; }
.bn-gov.is-dark { color: #fff; border-color: transparent; }
.bn-gov:hover { transform: scale(1.04); box-shadow: var(--shadow-h); z-index: 1; }
.bn-gov.is-on { outline: 3px solid var(--gold); outline-offset: 1px; }
.bn-grid__l { align-self: end; justify-self: center; color: var(--muted); font: 700 11px var(--head); direction: rtl; }
.bn-note { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.bn-places ol, .bn-bars { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.bn-places li, .bn-bars li { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; align-items: baseline; }
.bn-places li span, .bn-bars li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.bn-places li small { margin-inline-start: 6px; color: var(--muted); font-size: 12px; font-weight: 400; }
.bn-places li b, .bn-bars li b { font: 800 15px var(--head); font-variant-numeric: tabular-nums; }
.bn-places li i, .bn-bars li i { grid-column: 1 / -1; height: 6px; border-radius: 4px; background: var(--surface); position: relative; overflow: hidden; }
.bn-places li i::after, .bn-bars li i::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--w); border-radius: 4px; background: var(--c, var(--red)); }
.bn-bars a { color: inherit; }
.bn-reports ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.bn-reports li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--surface); }
.bn-reports li b { font: 900 22px var(--head); font-variant-numeric: tabular-nums; }
.bn-reports li em { font-style: normal; color: var(--muted); }
.bn-reports li a { color: var(--red); font-size: 13px; white-space: nowrap; }
.bn-table { display: grid; }
.bn-tr { display: grid; grid-template-columns: 64px 1.3fr 1.4fr 1.2fr 120px; gap: 10px; align-items: center; padding: 10px 4px; border-bottom: 1px dashed var(--line); font-size: 14px; }
.bn-th { color: var(--muted); font-size: 12.5px; border-bottom-style: solid; }
.bn-tr small { display: block; color: var(--muted); font-size: 12px; }
.bn-tr small.bn-pa { color: #24425e; font-weight: 700; }
html[data-theme="dark"] .bn-tr small.bn-pa { color: #8fb6dd; }
.bn-tr a { color: var(--red); margin-inline-end: 8px; white-space: nowrap; }
.bn-dot { display: inline-block; width: 9px; height: 9px; margin-inline-end: 7px; border-radius: 50%; vertical-align: middle; }
.bn-method__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px 28px; line-height: 1.85; }
.bn-method p { margin: 0 0 8px; }
.bn-method ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 4px; }
.bn-print-foot { display: none; }
@media (max-width: 720px) {
  .bn-filter label { flex: 1 1 140px; }
  .bn-filter select, .bn-filter input { width: 100%; }
  .bn-custom { flex: 1 1 100%; }
  .bn-custom label { flex: 1; }
  .bn-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .bn-tile { padding: 13px 14px 12px; }
  .bn-tools .bn-btn { flex: 1 1 calc(50% - 8px); justify-content: center; padding: 0 8px; }
  .bn-th { display: none; }
  .bn-tr { grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 12px 2px; }
  .bn-tr span[data-l]::before { content: attr(data-l); display: block; color: var(--muted); font-size: 11.5px; }
  .bn-grid { grid-template-rows: repeat(7, 48px); gap: 4px; }
  .bn-gov span { font-size: 10.5px; }
  .bn-reports li { grid-template-columns: auto 1fr; }
  .bn-reports li a { grid-column: 1 / -1; }
  .bn-cols { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .bn-files, .bn-filter, .bn-tools, .site-header, .nav, .breaking, .tape, .footer, .site-footer, .share, .consent, .totop { display: none !important; }
  .bn-head { background: none !important; color: #000 !important; border-bottom: 3px solid #000; padding: 0 0 12px; }
  .bn-head::after { display: none; }
  .bn-head h1, .bn-period, .bn-period b { color: #000 !important; }
  .bn-lead { color: #333 !important; }
  .bn-period { border-color: #999; }
  .bn-card, .bn-tile { box-shadow: none !important; break-inside: avoid; border-color: #bbb; background: #fff !important; color: #000 !important; }
  .bn-gov, .bn-chart svg rect, .bn-tile::before, .bn-dot, .bn-legend i, .bn-places li i::after, .bn-bars li i::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .bn-print-foot { display: block; margin-top: 14px; padding-top: 8px; border-top: 1px solid #999; font-size: 11px; color: #333; }
}

/* «بالأرقام»: the report switch and one day's kinds */
.bn-report { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-block: 4px 2px; }
.bn-report > span { color: var(--muted); font: 700 13px var(--head); margin-inline-end: 4px; }
.bn-report a { padding: 7px 14px; border-radius: 10px; background: var(--surface); color: var(--text); font: 700 13.5px var(--head); text-decoration: none; border: 1px solid transparent; transition: border-color .2s; }
.bn-report a:hover { border-color: var(--red); }
.bn-report a[aria-current] { background: var(--ink); color: #fff; }
html[data-theme="dark"] .bn-report a[aria-current] { background: #fff; color: var(--ink); }
.bn-bars--big li span { font-size: 16px; }
.bn-bars--big li i { height: 12px; border-radius: 6px; }
.bn-bars--big li i::after { border-radius: 6px; }

/* «بالأرقام» on the front page */
.numsbar { margin-block: clamp(14px, 2.4vw, 26px); }
.numsbar__in { position: relative; display: grid; grid-template-columns: minmax(220px, 1.1fr) minmax(0, 2.6fr) minmax(150px, .9fr); grid-template-areas: "head stats week" "go stats week"; gap: 14px 22px; align-items: center;
  padding: clamp(16px, 2.2vw, 26px) clamp(16px, 2.4vw, 30px); border-radius: var(--r-l); background: var(--ink); color: #fff; overflow: hidden; border-inline-start: 6px solid var(--red); }
.numsbar__in::before { content: ""; position: absolute; inset: 0; background: var(--net-light) 0 0 / 22px 22px; opacity: .05; pointer-events: none; }
.numsbar__in::after { content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -10%; width: 55%; height: 180%; background: radial-gradient(closest-side, rgb(215 20 26 / .28), transparent); pointer-events: none; }
.numsbar__in > * { position: relative; z-index: 1; min-width: 0; }
.numsbar__head { grid-area: head; }
.numsbar__kicker { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--gold); font: 700 13px var(--head); }
.numsbar__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgb(215 20 26 / .6); animation: numsbar-pulse 2s infinite; }
@keyframes numsbar-pulse { 70% { box-shadow: 0 0 0 9px rgb(215 20 26 / 0); } 100% { box-shadow: 0 0 0 0 rgb(215 20 26 / 0); } }
.numsbar h2 { margin: 4px 0 2px; font: 800 clamp(22px, 2.6vw, 32px)/1.25 var(--head); }
.numsbar h2 a { color: #fff; text-decoration: none; }
.numsbar h2 b { color: var(--red); }
.numsbar__sub { margin: 0; color: #c9c5bb; font-size: 13.5px; line-height: 1.6; }
.numsbar__stats { grid-area: stats; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.numsbar__stats a { display: grid; gap: 2px; height: 100%; padding: 12px 14px; border-radius: 14px; background: rgb(255 255 255 / .06); border: 1px solid rgb(201 162 39 / .25); color: #fff; text-decoration: none; transition: transform .2s var(--ease), background .2s; position: relative; overflow: hidden; }
.numsbar__stats a::before { content: ""; position: absolute; inset-block: 12px; inset-inline-start: 0; width: 4px; border-radius: 0 3px 3px 0; background: var(--c); }
.numsbar__stats a:hover { transform: translateY(-2px); background: rgb(255 255 255 / .1); }
.numsbar__stats b { font: 900 clamp(26px, 3vw, 38px)/1.1 var(--head); font-variant-numeric: tabular-nums; }
.numsbar__stats span { color: #dcd8ce; font: 700 12.5px/1.4 var(--head); }
.numsbar__week { grid-area: week; display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; align-items: end; height: 110px; }
.numsbar__week span { display: grid; grid-template-rows: 1fr auto; gap: 4px; height: 100%; text-align: center; }
.numsbar__week i { align-self: end; height: var(--h); min-height: 4px; border-radius: 5px 5px 2px 2px; background: linear-gradient(to top, rgb(215 20 26 / .55), var(--red)); }
.numsbar__week span:last-child i { background: var(--gold); }
.numsbar__week small { color: #a9a59b; font-size: 10.5px; }
.numsbar__go { grid-area: go; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.numsbar__go a { padding: 7px 12px; border-radius: 10px; color: #e9e5dc; font: 700 13px var(--head); text-decoration: none; border: 1px solid rgb(255 255 255 / .18); }
.numsbar__go a:hover { border-color: var(--gold); }
.numsbar__go .numsbar__cta { background: var(--red); border-color: var(--red); color: #fff; }
@media (max-width: 1100px) {
  .numsbar__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head week" "stats stats" "go go"; }
}
@media (max-width: 640px) {
  .numsbar__in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stats" "week" "go"; }
  .numsbar__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numsbar__stats li:nth-child(5) { grid-column: 1 / -1; }
  .numsbar__week { height: 84px; }
  .numsbar__go a { flex: 1 1 auto; text-align: center; }
  .bn-report a { flex: 1 1 auto; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .numsbar__dot { animation: none; } .numsbar__stats a { transition: none; } }
@media print { .numsbar { display: none !important; } }

/* «بالأرقام» in the menu: its own red, always (owner, 2026-11-07) */
.sec-nums { --sc: #d7141a; --sct: #fff; }
.nav__link--nums:not(.is-active) { color: #d7141a; }
html[data-theme="dark"] .nav__link--nums:not(.is-active) { color: #ff5a5f; }

/* «بالأرقام» map: the area labels are links; a picked area outlines its governorates (2026-11-08) */
a.bn-grid__l { text-decoration: none; padding: 2px 8px; border-radius: 8px; border: 1px dashed transparent; transition: border-color .2s, color .2s; }
a.bn-grid__l:hover { border-color: var(--gold); color: var(--text); }
a.bn-grid__l.is-on { border-color: var(--gold); color: var(--text); background: rgb(201 162 39 / .12); }
.bn-gov.is-area { outline: 2px dashed var(--gold); outline-offset: 1px; }

/* «بالأرقام»: ink, gold and a touch of wine; red only where a kind of event is red (owner, 2026-11-08) */
.bn { --bn-ink: #0d0c0b; --bn-ink-2: #17140f; --bn-gold: #c9a227; --bn-gold-2: #e8cf7a; --bn-gold-3: #8a6d17; --bn-wine: #6e1424; --bn-cream: #f6f1e6; }
.bn-head { background: radial-gradient(120% 140% at 85% 0%, #2a1d10 0%, var(--bn-ink) 55%) , var(--bn-ink); border-bottom: 1px solid var(--bn-gold); box-shadow: inset 0 -3px 0 rgb(201 162 39 / .18); }
.bn-head::after { background: var(--net-light) 0 0 / 26px 26px; opacity: .045; }
.bn-head::before { content: ""; position: absolute; inset-inline-end: -8%; top: -30%; width: 46%; height: 160%; background: radial-gradient(closest-side, rgb(201 162 39 / .16), transparent); pointer-events: none; }
.bn-kicker { color: var(--bn-gold-2); letter-spacing: .03em; display: inline-flex; align-items: center; gap: 8px; }
.bn-kicker::before { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, transparent, var(--bn-gold)); }
.bn-head h1 { background: linear-gradient(180deg, #fff 30%, var(--bn-gold-2) 140%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bn-lead { color: #d9d2c3; }
.bn-period { border-color: rgb(201 162 39 / .55); background: rgb(201 162 39 / .07); color: var(--bn-cream); }
.bn-period b { color: var(--bn-gold-2); }

.bn-files a { border-color: var(--line); }
.bn-files a:hover { border-color: var(--bn-gold); }
.bn-files a[aria-current] { background: var(--bn-ink); border-color: var(--bn-gold); color: var(--bn-gold-2); box-shadow: 0 0 0 1px rgb(201 162 39 / .25) inset; }
.bn-report a[aria-current] { background: var(--bn-ink); color: var(--bn-gold-2); box-shadow: inset 0 0 0 1px rgb(201 162 39 / .5); }
.bn-report a:hover { border-color: var(--bn-gold); }
html[data-theme="dark"] .bn-files a[aria-current], html[data-theme="dark"] .bn-report a[aria-current] { background: var(--bn-gold); color: var(--bn-ink); }
.bn-btn:hover { border-color: var(--bn-gold); }
.bn-btn--go { background: var(--bn-ink); border-color: var(--bn-gold); color: var(--bn-gold-2); }
.bn-btn--go:hover { background: #1d1912; }
html[data-theme="dark"] .bn-btn--go { background: var(--bn-gold); color: var(--bn-ink); }
.bn-btn--data { border-color: rgb(201 162 39 / .6); }
.bn-reset { color: var(--bn-gold-3); }

.bn-tile { background: linear-gradient(180deg, color-mix(in srgb, var(--bn-gold) 6%, var(--card)), var(--card)); border-color: color-mix(in srgb, var(--bn-gold) 30%, var(--line)); }
.bn-tile::after { content: ""; position: absolute; inset-inline: 18px; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--bn-gold), transparent); opacity: .55; }
.bn-tile b { letter-spacing: -.01em; }
.bn-tile em.up { color: #b3262f; }
.bn-tile em.down { color: #2f7d4a; }
html[data-theme="dark"] .bn-tile em.up { color: #ff8a8a; }
html[data-theme="dark"] .bn-tile em.down { color: #7fd8a0; }

.bn-card { border-color: color-mix(in srgb, var(--bn-gold) 22%, var(--line)); }
.bn-card h2::before { content: ""; width: 8px; height: 8px; margin-inline-end: 2px; background: var(--bn-gold); transform: rotate(45deg); border-radius: 1px; align-self: center; }
.bn-insights { background: radial-gradient(120% 160% at 100% 0%, #241a0e 0%, var(--bn-ink) 60%), var(--bn-ink); border-color: rgb(201 162 39 / .45); color: var(--bn-cream); }
.bn-insights h2 { color: #fff; }
.bn-insights li { color: #e6dfcf; }
.bn-insights li b { color: var(--bn-gold-2); }
.bn-insights li::before { background: var(--bn-gold); }

.bn-gov { background: color-mix(in srgb, #7a1a24 calc(var(--a, 0) * 100%), var(--surface)); border-color: color-mix(in srgb, var(--bn-gold) 18%, var(--line)); }
.bn-gov.is-dark { color: var(--bn-cream); }
.bn-gov.is-dark b { color: var(--bn-gold-2); }
.bn-gov.is-on { outline: 2px solid var(--bn-gold); }
.bn-places li i::after, .bn-bars li i::after { background: linear-gradient(90deg, var(--bn-gold-3), var(--bn-gold), var(--bn-gold-2)); }
.bn-bars--big li i::after { background: var(--c, var(--bn-gold)); }
.bn-bars li i::after { background: var(--c, linear-gradient(90deg, var(--bn-gold-3), var(--bn-gold), var(--bn-gold-2))); }
.bn-reports li { background: color-mix(in srgb, var(--bn-gold) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--bn-gold) 20%, transparent); }
.bn-reports li b { color: var(--bn-gold-3); }
html[data-theme="dark"] .bn-reports li b { color: var(--bn-gold-2); }
.bn-reports li a, .bn-tr a { color: var(--bn-gold-3); }
html[data-theme="dark"] .bn-reports li a, html[data-theme="dark"] .bn-tr a { color: var(--bn-gold-2); }
.bn-legend a[aria-current] { outline-color: var(--bn-gold); }
.bn-empty { border-color: rgb(201 162 39 / .45); }
@media print { .bn-head h1 { background: none; color: #000 !important; -webkit-background-clip: initial; } .bn-insights { background: #fff !important; color: #000 !important; } .bn-insights li { color: #000 !important; } }

/* «بالأرقام»: the map of Palestine (2026-11-08) */
.bn-cols > .pm { grid-column: 1 / -1; }
.pm { --pm-land: color-mix(in srgb, var(--bn-gold, #c9a227) 7%, var(--surface)); --pm-wine: #7a1a24; --pm-water: #cfe0ea; --pm-edge: var(--bn-gold, #c9a227); }
html[data-theme="dark"] .pm { --pm-land: #24221d; --pm-water: #1d2f3d; }
.pm-areas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.pm-areas a { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--bn-gold, #c9a227) 35%, var(--line)); background: var(--card); color: var(--text); text-decoration: none; font: 700 14px var(--head); transition: border-color .2s, transform .2s var(--ease); }
.pm-areas a:hover { border-color: var(--bn-gold, #c9a227); transform: translateY(-1px); }
.pm-areas a b { font: 900 16px var(--head); font-variant-numeric: tabular-nums; color: var(--bn-gold-3, #8a6d17); }
.pm-areas a[aria-current] { background: var(--bn-ink, #0d0c0b); border-color: var(--bn-gold, #c9a227); color: var(--bn-gold-2, #e8cf7a); }
.pm-areas a[aria-current] b { color: #fff; }
.pm-areas a:first-child { border-width: 1.5px; }
html[data-theme="dark"] .pm-areas a b { color: var(--bn-gold-2, #e8cf7a); }
html[data-theme="dark"] .pm-areas a[aria-current] { background: var(--bn-gold, #c9a227); color: var(--bn-ink, #0d0c0b); }
html[data-theme="dark"] .pm-areas a[aria-current] b { color: var(--bn-ink, #0d0c0b); }
.pm-maps { display: grid; grid-template-columns: minmax(150px, .75fr) minmax(240px, 1.35fr) minmax(170px, .9fr); gap: 18px; align-items: start; }
.pm-fig { margin: 0; min-width: 0; }
.pm-fig figcaption { margin: 0 0 6px; color: var(--muted); font: 700 13px var(--head); text-align: center; }
.pm-fig figcaption a { color: inherit; text-decoration: none; border-bottom: 1px dashed color-mix(in srgb, var(--bn-gold, #c9a227) 60%, transparent); }
.pm-fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.pm-fig--country svg { max-width: 230px; margin-inline: auto; }
.pm-fig--wb svg { max-width: 340px; margin-inline: auto; }
.pm-fig--gaza svg { max-width: 220px; margin-inline: auto; }
.pm-area path, .pm-gov path { fill: color-mix(in srgb, var(--pm-wine) var(--p, 0%), var(--pm-land)); stroke: color-mix(in srgb, var(--pm-edge) 70%, transparent); stroke-width: 1; transition: fill .2s, stroke-width .2s, filter .2s; cursor: pointer; }
.pm-area:hover path, .pm-gov:hover path { stroke: var(--pm-edge); stroke-width: 2.4; filter: brightness(1.08); }
.pm-area.is-on path, .pm-gov.is-on path { stroke: var(--pm-edge); stroke-width: 3; }
.pm-gov.is-area path { stroke: var(--pm-edge); stroke-width: 1.8; stroke-dasharray: 4 3; }
.pm-area:focus-visible path, .pm-gov:focus-visible path { stroke: var(--pm-edge); stroke-width: 3; outline: none; }
.pm-edge { fill: none; stroke: color-mix(in srgb, var(--text) 35%, transparent); stroke-width: 1; pointer-events: none; }
.pm-water { fill: var(--pm-water); stroke: color-mix(in srgb, var(--pm-water) 70%, #000); stroke-width: .5; pointer-events: none; }
.pm-name { font: 700 11px var(--head); fill: var(--text); text-anchor: middle; pointer-events: none; }
.pm-num { font: 900 13.5px var(--head); fill: var(--text); text-anchor: middle; pointer-events: none; font-variant-numeric: tabular-nums; }
.pm-gov.is-dark .pm-name { fill: #f6f1e6; }
.pm-gov.is-dark .pm-num { fill: var(--bn-gold-2, #e8cf7a); }
.pm-fig--gaza .pm-name { font-size: 9.5px; }
.pm-fig--gaza .pm-num { font-size: 11.5px; }
.pm-city circle { fill: var(--muted); }
.pm-city text { font: 400 8.6px var(--body); fill: var(--muted); text-anchor: end; pointer-events: none; }
.pm-wlabel { font: italic 400 8.4px var(--body); fill: #5f8199; text-anchor: middle; pointer-events: none; }
html[data-theme="dark"] .pm-wlabel { fill: #8fb3c9; }
.pm-alabel { font: 700 9px var(--head); fill: var(--text); text-anchor: middle; pointer-events: none; opacity: .75; }
.pm .bn-note { text-align: center; }
@media (max-width: 900px) {
  .pm-maps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pm-fig--wb { grid-column: 1 / -1; grid-row: 1; }
}
@media (max-width: 560px) {
  .pm-maps { grid-template-columns: minmax(0, 1fr); }
  .pm-fig--country svg { max-width: 200px; }
  .pm-fig--wb { order: 1; } .pm-fig--gaza { order: 2; } .pm-fig--country { order: 3; }
  .pm-areas a { flex: 1 1 calc(50% - 8px); justify-content: space-between; }
}
@media print { .pm-area path, .pm-gov path { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* the map shows what is picked: lit in gold, the rest dimmed, and said in words (2026-11-08) */
.pm-sel { margin: -4px 0 12px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--bn-gold, #c9a227) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--bn-gold, #c9a227) 30%, transparent); font-size: 13.5px; line-height: 1.7; }
.pm-sel span { color: var(--muted); }
.pm-sel b { color: var(--text); }
.pm-sel a { margin-inline-start: 8px; color: var(--bn-gold-3, #8a6d17); font-weight: 700; white-space: nowrap; }
html[data-theme="dark"] .pm-sel a { color: var(--bn-gold-2, #e8cf7a); }
.pm.has-pick .pm-gov:not(.is-on):not(.is-area) path, .pm.has-pick .pm-area:not(.is-on):not(.is-area) path { opacity: .38; }
.pm.has-pick .pm-gov:not(.is-on):not(.is-area) text { opacity: .7; fill: var(--text); }   /* a dimmed cell's cream text vanished on its faded fill */
.pm-gov.is-on path, .pm-area.is-on path { fill: color-mix(in srgb, var(--bn-gold, #c9a227) 55%, var(--pm-wine)); stroke: var(--bn-gold-2, #e8cf7a); stroke-width: 3; filter: drop-shadow(0 0 6px rgb(201 162 39 / .65)); }
.pm-gov.is-on .pm-name, .pm-gov.is-on .pm-num { fill: #fff; }
.pm-area.is-area path { stroke: var(--bn-gold, #c9a227); stroke-width: 2.4; }