/* إذاعة حوران | مهد الثورة — official brand guide only: white (light) / black (dark), red ff0a00 for important headlines,
   blue 436de1 separators, real-glass wordmark, B&W photos, Al Jazeera font. */
/* brand font: Al Jazeera (Tarek Atrissi Design) — see public/fonts/al-jazeera/README.txt */
@font-face { font-family: 'Al Jazeera'; font-style: normal; font-weight: 300; font-display: swap; src: url('/_astro/AlJazeera-Light.c59bc974f3.woff2') format('woff2'), url('/_astro/AlJazeera-Light.a44091fa0c.woff') format('woff'); }
@font-face { font-family: 'Al Jazeera'; font-style: normal; font-weight: 400; font-display: swap; src: url('/_astro/AlJazeera-Regular.5031578f40.woff2') format('woff2'), url('/_astro/AlJazeera-Regular.33cf40d490.woff') format('woff'); }
@font-face { font-family: 'Al Jazeera'; font-style: normal; font-weight: 700; font-display: swap; src: url('/_astro/AlJazeera-Bold.72597bf17e.woff2') format('woff2'), url('/_astro/AlJazeera-Bold.589e4fd503.woff') format('woff'); }
@font-face { font-family: 'Al Jazeera'; font-style: normal; font-weight: 900; font-display: swap; src: url('/_astro/AlJazeera-Heavy.c4eb1c4a13.woff2') format('woff2'), url('/_astro/AlJazeera-Heavy.f5c0a8979e.woff') format('woff'); }
:root{
  --brand-c:#436de1;--brand-2:#7d9bef;--brand-ink:#2c4fb5;--brand-soft:#eef2fd;
  --red:#e0141e;--red-deep:#8e0a10;--blue:#436de1;
  --ink:#121417;--ink-2:#1d2126;--ink-3:#2a2f36;--fg:#1a1d21;--muted:#5d6670;--line:#e3e7ea;--line-strong:#cdd3d8;
  --paper:#f4f6f7;--paper-2:#eceff1;--card:#fff;--focus:#2c4fb5;
  --ui:'Al Jazeera','Tajawal',system-ui,sans-serif;--read:'Al Jazeera','Noto Naskh Arabic','Tajawal',serif;
  --r:18px;--r-sm:10px;--shadow:0 1px 2px rgba(18,20,23,.05),0 10px 30px -10px rgba(18,20,23,.18);
  --shadow-lg:0 30px 60px -20px rgba(18,20,23,.35);
  --brand-grad:linear-gradient(135deg,var(--brand-2),var(--brand-c));
  --stripes:repeating-linear-gradient(90deg,rgba(255,255,255,.0) 0 14px,rgba(255,255,255,.28) 14px 16px,rgba(255,255,255,.08) 16px 30px,rgba(0,0,0,.10) 30px 32px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--ui);font-size:17px;line-height:1.7;color:var(--fg);background:var(--paper);font-feature-settings:"lnum","tnum"}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--ui);line-height:1.25;margin:0;color:var(--ink);font-weight:900}
.num{font-variant-numeric:tabular-nums lining-nums}
.wrap{width:min(100% - 2.5rem,1280px);margin-inline:auto}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;inset-inline-start:1rem;top:-4rem;z-index:100;background:var(--ink);color:#fff;padding:.6rem 1rem;border-radius:var(--r-sm);font-weight:700}
.skip-link:focus{top:1rem}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
main:focus{outline:none}

/* logo (mask of the real wordmark) */
.logo{display:inline-block;width:120px;aspect-ratio:727/262;background:#fff;-webkit-mask:url(/images/brand/logo-horan-glass-light.v2.webp) center/contain no-repeat;mask:url(/images/brand/logo-horan-glass-light.v2.webp) center/contain no-repeat}
.logo--ink{background:var(--ink)}

/* real glass surface */
.glass{position:relative;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.7);border-radius:var(--r);box-shadow:var(--shadow-lg)}
.badge{position:absolute;top:0;inset-inline-start:2rem;transform:translateY(-50%);color:var(--brand-c);filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}

/* top bar */
.topbar{background:var(--ink);color:#c9d1d8;font-size:.82rem}
.topbar__in{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:1rem}
.topbar__date{display:flex;align-items:center;gap:.75rem}
.topbar__date b{color:#fff;font-weight:700}
.topbar__sep{width:1px;height:14px;background:#4a525b}
.topbar__note{color:var(--brand-2);font-weight:700}

/* masthead */
.masthead{position:relative;overflow:hidden;background:var(--brand-grad);color:#fff}
.masthead::before{content:"";position:absolute;inset-block:0;inset-inline-end:0;width:min(42%,520px);background:var(--stripes);
  -webkit-mask:linear-gradient(to left,#000 30%,transparent);mask:linear-gradient(to left,#000 30%,transparent);opacity:.9}
.masthead__in{position:relative;display:flex;align-items:center;justify-content:center;padding:1.6rem 0 1.4rem}
.wordmark{display:inline-flex;align-items:center;gap:1.1rem;color:#fff}
.wordmark .logo{width:clamp(150px,18vw,230px)}
.wordmark__text span{display:block;font-weight:900;font-size:clamp(.95rem,1.5vw,1.2rem);letter-spacing:.02em;padding-inline-start:1.1rem;border-inline-start:2px solid rgba(255,255,255,.55);line-height:1.2}
.wordmark__tile{display:inline-flex}

/* sticky nav bar (condenses + blurs once the masthead leaves) */
.navbar{position:sticky;top:0;z-index:40;background:rgba(18,20,23,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06);transition:background .3s}
.navbar__in{display:flex;align-items:center;gap:1.25rem;min-height:56px}
.navbar__mini{display:flex;align-items:center;max-width:0;opacity:0;overflow:hidden;transition:max-width .35s var(--ease),opacity .25s}
.navbar__mini .logo{width:72px}
.is-condensed .navbar__mini{max-width:90px;opacity:1}
.is-condensed .navbar{background:rgba(18,20,23,.78);box-shadow:0 10px 30px -15px rgba(0,0,0,.5)}
.navbar__list{display:flex;list-style:none;margin:0;padding:0;gap:.25rem}
.navbar__list a{position:relative;display:block;padding:.95rem 1rem;color:#e7ecef;font-weight:700;font-size:1.02rem;transition:color .2s}
.navbar__list a::after{content:"";position:absolute;inset-inline:1rem;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--brand-2);transform:scaleX(0);transition:transform .3s var(--ease)}
.navbar__list a:hover::after,.navbar__list a[aria-current=page]::after{transform:scaleX(1)}
.navbar__list a[aria-current=page]{color:#fff}
.navbar__rss{margin-inline-start:auto;font-size:.8rem;font-weight:900;letter-spacing:.06em;color:var(--brand-2);border:1px solid rgba(125,155,239,.45);border-radius:999px;padding:.25rem .8rem}
.navbar__rss:hover{background:var(--brand-c);color:#fff;border-color:var(--brand-c)}

/* latest strip */
.strip{background:#fff;border-bottom:1px solid var(--line)}
.strip__in{display:flex;align-items:center;gap:1rem;min-height:48px;overflow:hidden}
.strip__label{flex:none;display:inline-flex;align-items:center;gap:.5rem;background:var(--brand-grad);color:#fff;font-weight:900;font-size:.85rem;padding:.3rem .9rem;border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 12px -4px rgba(67,109,225,.6)}
.pulse{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.8);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.strip__track{overflow-x:auto;scrollbar-width:none;flex:1;-webkit-mask:linear-gradient(to left,transparent,#000 4%,#000 96%,transparent);mask:linear-gradient(to left,transparent,#000 4%,#000 96%,transparent)}
.strip__list{display:flex;gap:2.5rem;list-style:none;margin:0;padding:0;white-space:nowrap;width:max-content;padding-inline:.75rem}
.strip__list li{position:relative;font-weight:700;font-size:.95rem}
.strip__list li+li::before{content:"";position:absolute;inset-inline-start:-1.3rem;top:50%;width:6px;height:6px;margin-top:-3px;background:var(--brand-c);transform:rotate(45deg)}
.strip__list a:hover{color:var(--brand-ink)}
.strip:hover .strip__list{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(50%)}}
.kicker{display:inline-block;font-weight:900;font-size:.8rem;color:var(--brand-ink);letter-spacing:.02em}
.card[data-sec=world] .kicker,.kicker[href*=world]{color:var(--blue)}
.kicker--on-dark{color:var(--brand-2)}

/* media + branded fallback; photos always in full colour ([t225u] dead filters removed) */
.media{position:relative;overflow:hidden;background:var(--ink-2);border-radius:inherit}
.media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .6s}
.media--brand{background:radial-gradient(120% 90% at 85% 10%,var(--ink-3),var(--ink) 70%)}
.media__pattern{position:absolute;inset-block:0;inset-inline-start:0;width:38%;background:var(--stripes),linear-gradient(180deg,var(--sec),var(--sec-deep));
  -webkit-mask:linear-gradient(to right,#000 55%,transparent);mask:linear-gradient(to right,#000 55%,transparent)}
.media__pattern::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 35%,transparent 65%,rgba(255,255,255,.18))}
.media__mark{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;transition:transform .8s var(--ease)}
.media__mark .logo{width:min(38%,170px);opacity:.92}
.media__label{font-size:.75rem;font-weight:900;color:#fff;background:var(--sec);border-radius:999px;padding:.05rem .75rem;opacity:.95}
.card:hover .media img,.hero:hover .hero__bg img{transform:scale(1.05)}
.card:hover .media__mark{transform:scale(1.06)}

/* cards */
.card{position:relative;display:flex;flex-direction:column;background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);transition:transform .35s var(--ease),box-shadow .35s}
.card:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(18,20,23,.05),0 24px 44px -18px rgba(18,20,23,.35)}
.card__img{display:block;border-radius:var(--r) var(--r) 0 0;overflow:hidden}
.card__body{padding:1.1rem 1.25rem 1.25rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.card__title{font-size:1.2rem;font-weight:900;line-height:1.4}
.card__title a{background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .35s var(--ease)}
.card__title a:hover{background-size:100% 2px}
.card__dek{margin:0;color:var(--muted);font-size:.96rem;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .byline-mini{margin-top:auto}
.card--row{flex-direction:row;align-items:stretch;box-shadow:none;background:transparent;border-radius:0;border-bottom:1px solid var(--line);padding:.9rem 0;gap:1rem}
.card--row:hover{transform:none;box-shadow:none}
.card--row .card__img{flex:none;width:132px;border-radius:12px}
.card--row .card__body{padding:0;justify-content:center}
.card--row .card__title{font-size:1.05rem}
.card--over{min-height:100%;background:var(--ink);justify-content:flex-end}
.card--over .card__img{position:absolute;inset:0;border-radius:0}
.card--over .card__img .media{height:100%;aspect-ratio:auto}
.card--over .card__body{position:relative;flex:none;margin:6rem 1.1rem 1.1rem;padding:2rem 1.4rem 1.2rem}
.card--over.card--big .card__title{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:900}
.card--over .badge{inset-inline-start:1.4rem}
.card[data-sec=world] .badge{color:var(--blue)}
.byline-mini{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin:.25rem 0 0;font-size:.82rem;color:var(--muted);font-weight:400}
.avatar{display:inline-grid;place-items:center;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--brand-grad);color:#fff;font-weight:900;font-size:.85rem;flex:none}
.dot{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.5}

/* section header with accent rule */
.block{margin-block:3.25rem}
.shead{--accent:var(--brand-c);display:flex;align-items:baseline;flex-wrap:wrap;gap:.35rem 1rem;margin-bottom:1.5rem;padding-bottom:.85rem;border-bottom:1px solid var(--line);position:relative}
.shead::after{content:"";position:absolute;bottom:-2px;inset-inline-start:0;width:72px;height:4px;border-radius:4px;background:var(--accent)}
.shead h2{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:900;display:flex;align-items:center;gap:.6rem}
.shead h2::before{content:"";width:12px;height:12px;background:var(--accent);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.shead p{margin:0;color:var(--muted);font-size:.95rem}
.shead__more{margin-inline-start:auto;font-weight:900;font-size:.9rem;color:var(--accent)}
.shead__more:hover{text-decoration:underline;text-underline-offset:4px}
.shead--dark{border-color:rgba(255,255,255,.12)}.shead--dark h2,.shead--dark h2 a{color:#fff}.shead--dark p{color:#aab4bd}

/* hero */
.hero{position:relative;isolation:isolate;background:var(--ink);color:#fff;overflow:hidden;min-height:min(70vh,640px);display:flex;align-items:flex-end}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg .media{height:100%;border-radius:0}
.hero__bg .media--brand .media__pattern{display:none}
.hero__bg .media__mark{inset:auto;top:12%;inset-inline-end:6%;opacity:.07}
.hero__bg .media__mark .logo{width:clamp(260px,38vw,620px);max-width:none;opacity:1}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(18,20,23,.96) 0%,rgba(18,20,23,.55) 45%,rgba(18,20,23,.15) 100%),linear-gradient(270deg,transparent 40%,rgba(18,20,23,.6))}
.hero__stripes{position:absolute;inset-block:0;inset-inline-start:0;width:clamp(60px,16vw,240px);z-index:-1;background:var(--stripes),linear-gradient(180deg,var(--brand-2),var(--brand-c) 60%,#2c4fb5);opacity:.95;box-shadow:inset -1px 0 0 rgba(255,255,255,.35)}
.hero__grid{display:grid;gap:2rem;padding-block:7rem 3rem;align-items:end}
@media(min-width:1000px){.hero__grid{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:3rem}}
.hero__lead{padding:2.6rem 2rem 1.6rem;color:var(--fg)}
.hero__title{font-size:clamp(1.9rem,4.4vw,3.6rem);font-weight:900;line-height:1.22;margin:.4rem 0 .8rem;letter-spacing:-.005em}
.hero__title .hl{color:var(--brand-ink)}
.hero__dek{font-size:clamp(1rem,1.4vw,1.2rem);color:#3e464f;margin:0 0 .6rem;max-width:60ch}

/* rail */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem}
.rail>*{scroll-snap-align:start}

/* split: mosaic + latest */
.split{display:grid;gap:2.5rem}
@media(min-width:1000px){.split{grid-template-columns:minmax(0,2.1fr) minmax(0,1fr)}}
.mosaic{display:grid;gap:1.5rem}
@media(min-width:760px){.mosaic{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
.mosaic .card--over{min-height:520px}
.mosaic__list .card--row:first-child{padding-top:0}
.latest-col{align-self:start}
@media(min-width:1000px){.latest-col{position:sticky;top:80px}}
.numbered{list-style:none;margin:0;padding:0;counter-reset:n;background:#fff;border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.numbered li{counter-increment:n;display:flex;gap:1rem;padding:1rem 1.2rem;border-bottom:1px solid var(--line);transition:background .2s}
.numbered li:hover{background:var(--brand-soft)}
.numbered li::before{content:counter(n,arabic-indic);flex:none;width:2.2rem;font-size:1.9rem;font-weight:900;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--brand-c);text-align:center}
.numbered h3{font-size:1rem;font-weight:700;line-height:1.5}
.numbered h3 a:hover{color:var(--brand-ink)}
.meta{display:flex;gap:.6rem;align-items:center;margin:.3rem 0 0;font-size:.8rem;color:var(--muted)}
.meta__sec{font-weight:900;color:var(--brand-ink)}.meta__sec[data-sec=world]{color:var(--blue)}
.rss-card{display:grid;gap:.2rem;margin-top:1rem;padding:1.1rem 1.25rem;border-radius:var(--r);background:var(--stripes),var(--brand-grad);color:#fff;box-shadow:0 14px 30px -14px rgba(67,109,225,.7);transition:transform .3s var(--ease)}
.rss-card:hover{transform:translateY(-3px)}
.rss-card span{font-size:.88rem;opacity:.92}

/* dark band */
.band{position:relative;isolation:isolate;background:linear-gradient(180deg,var(--ink),#0c0e10);color:#fff;padding-block:3.5rem 4rem;margin-top:1rem;overflow:hidden}
.band__pattern{position:absolute;inset-block:0;inset-inline-end:0;width:clamp(60px,14vw,200px);z-index:-1;background:var(--stripes),linear-gradient(180deg,#5b8cf0,var(--blue) 50%,var(--blue-deep));opacity:.85}
.band__grid{display:grid;gap:1.75rem}
@media(min-width:900px){.band__grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.band .card--over{min-height:480px}
.band .card--row{border-color:rgba(255,255,255,.1)}
.band .card--row .card__title,.band .card--row .card__title a{color:#fff}
.band .card--row .byline-mini{color:#9aa5af}
.band .card--row .kicker{color:#8fb4ff}

/* grid */
.grid{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-weight:900;font-size:.95rem;padding:.7rem 1.4rem;border-radius:999px;background:var(--brand-grad);color:#fff;border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 20px -10px rgba(67,109,225,.8);transition:transform .25s var(--ease),box-shadow .25s;cursor:pointer;border:1px solid rgba(255,255,255,.18)}
.btn:hover{transform:translateY(-2px)}
.btn--ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn--light{background:#fff;color:var(--ink);box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
.btn--outline-light{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.pager{display:flex;justify-content:space-between;margin:2.5rem 0 3.5rem}

/* section banner (category / archive) */
.sec-banner{--sec:var(--brand-c);--sec-deep:#2c4fb5;position:relative;isolation:isolate;overflow:hidden;color:#fff;background:linear-gradient(120deg,var(--ink) 30%,var(--sec-deep))}
.sec-banner--ink{--sec:var(--brand-c)}
.sec-banner__pattern{position:absolute;inset-block:0;inset-inline-start:0;width:clamp(80px,24vw,360px);z-index:-1;background:var(--stripes),linear-gradient(180deg,var(--sec),var(--sec-deep));-webkit-mask:linear-gradient(to right,#000 60%,transparent);mask:linear-gradient(to right,#000 60%,transparent)}
.sec-banner__in{padding-block:4rem 3.5rem}
.sec-banner__eyebrow{display:inline-block;font-weight:900;font-size:.8rem;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:.1rem .8rem}
.sec-banner h1{color:#fff;font-size:clamp(2.6rem,7vw,5rem);font-weight:900;margin:.4rem 0 .2rem;line-height:1.1}
.sec-banner p{margin:0;font-size:1.15rem;color:#d3dbe1}
.sec-banner__count{display:inline-block;margin-top:1rem;font-weight:900;color:var(--sec);background:#fff;border-radius:999px;padding:.1rem .9rem;font-size:.9rem}
.cat-lead .card--over{min-height:clamp(380px,56vw,560px)}
.cat-lead .card--over .card__body{max-width:760px}

/* empty state + 404 */
.empty,.notfound{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(90% 120% at 80% 0%,#1f2a31,var(--ink) 60%);color:#fff;padding-block:5.5rem 4.5rem}
.empty__in,.notfound__in{text-align:center;max-width:760px;display:flex;flex-direction:column;align-items:center}
.empty__eyebrow{margin:0 0 .5rem;font-weight:900;color:var(--brand-2);letter-spacing:.04em}
.empty h1,.empty h2,.notfound h1{color:#fff;font-size:clamp(2rem,5vw,3.4rem);font-weight:900;line-height:1.2}
.empty__text,.notfound p{color:#c3ccd3;font-size:1.15rem;max-width:56ch;margin:1rem auto 1.75rem}
.empty__actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}
.empty--compact{padding-block:4rem 3.5rem}
.sec-card{position:relative;overflow:hidden;display:grid;gap:.25rem;padding:1.6rem 1.6rem 1.6rem 4rem;border-radius:var(--r);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .3s var(--ease),background .3s}
.sec-card::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:6px;background:var(--sec)}
.sec-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.1)}
.sec-card__name{font-size:1.6rem;font-weight:900}
.sec-card__blurb{color:#b7c1c9}
.sec-card__go{position:absolute;inset-inline-end:1.5rem;top:50%;transform:translateY(-50%);font-size:1.6rem;color:var(--sec)}
.notfound{min-height:70vh;display:flex;align-items:center}
.notfound p.notfound__code{max-width:none;font-size:clamp(7rem,22vw,15rem);font-weight:900;line-height:.9;margin:0;color:transparent;-webkit-text-stroke:2px rgba(125,155,239,.6);background:var(--stripes),var(--brand-grad);-webkit-background-clip:text;background-clip:text}

/* article */
.progress{position:fixed;top:0;inset-inline:0;height:4px;z-index:60;background:transparent}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--brand-2),var(--brand-c));transform:scaleX(0);transform-origin:right}
.article{background:#fff;padding-bottom:3rem}
.article__head{max-width:900px;padding-top:2.5rem}
.crumbs{display:flex;gap:.5rem;font-size:.85rem;font-weight:700;color:var(--muted);margin-bottom:1rem}
.crumbs a:last-child{color:var(--brand-ink)}
.article__head h1{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:900;line-height:1.25}
.dek{font-size:clamp(1.1rem,1.8vw,1.35rem);color:#454d55;margin:1rem 0 1.5rem;line-height:1.7;font-weight:400}
.byline{display:flex;align-items:center;gap:.9rem;padding-block:1.1rem;border-block:1px solid var(--line)}
.byline__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;color:var(--muted);font-size:.85rem}
.article__media{max-width:1100px;margin-block:2rem}
.article__media .media{border-radius:var(--r);box-shadow:var(--shadow)}
.article__media figcaption{font-size:.85rem;color:var(--muted);margin-top:.6rem}
.article__layout{display:grid;gap:2rem;max-width:1000px}
@media(min-width:900px){.article__layout{grid-template-columns:120px minmax(0,68ch);justify-content:center}.share{position:sticky;top:90px;align-self:start;flex-direction:column}}
.share{display:flex;flex-wrap:wrap;gap:.5rem}
.share__label{font-weight:900;font-size:.8rem;color:var(--muted)}
.share__btn{display:inline-flex;justify-content:center;font:inherit;font-size:.82rem;font-weight:900;padding:.45rem .8rem;border-radius:999px;background:var(--paper);border:1px solid var(--line);color:var(--ink);cursor:pointer;transition:all .2s}
.share__btn:hover{background:var(--brand-c);color:#fff;border-color:var(--brand-c)}
.article__body{font-family:var(--read);font-size:1.22rem;line-height:2.05;color:#22272c}
.article__body>p{margin:0 0 1.4rem}

.pull{margin:2.25rem 0;padding:1.6rem 2rem;border-radius:var(--r);background:var(--stripes),linear-gradient(135deg,var(--blue-deep),var(--blue));color:#fff;font-family:var(--ui);font-weight:900;font-size:1.45rem;line-height:1.6;box-shadow:0 20px 40px -20px rgba(79,91,213,.8)}
.pull p{margin:0}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:2rem 0 0;font-family:var(--ui)}
.tags li{font-size:.85rem;font-weight:700;background:var(--brand-soft);color:var(--brand-ink);padding:.2rem .85rem;border-radius:999px}

.related{background:var(--paper);padding-block:1rem 3rem}

/* footer */
.footer{position:relative;isolation:isolate;overflow:hidden;background:#0c0e10;color:#aeb7bf;margin-top:0}
.footer__grid{display:grid;gap:2.5rem;padding-block:4rem 3rem}
@media(min-width:900px){.footer__grid{grid-template-columns:1.6fr 1fr 1fr 1.3fr}}
.footer__about p{margin:1.2rem 0 0;max-width:40ch}
.footer .wordmark .logo{width:150px}
.footer h2{color:#fff;font-size:1rem;font-weight:900;margin-bottom:1rem;padding-bottom:.6rem;border-bottom:2px solid var(--brand-c);display:inline-block}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.footer a:hover{color:#fff}
.footer .handle{display:grid}.footer .handle span{color:#fff;font-weight:900;letter-spacing:.08em}
.footer small{color:#7d8790}
.footer__small{margin:0;font-size:.92rem}
.rss-link{color:var(--brand-2);font-weight:900}
.footer__base{border-top:1px solid rgba(255,255,255,.08)}
.footer__base-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;padding-block:1.1rem;font-size:.82rem}
.footer__base p{margin:0}

/* ============ admin (presentation only) ============ */
.is-admin{background:#f1f4f5}
.admin-main{min-height:100vh}
.admin-foot{text-align:center;font-size:.78rem;color:var(--muted);padding:1rem}
.admin-foot p{margin:0}
.fld{display:grid;gap:.4rem;font-weight:700;font-size:.9rem;color:var(--ink);margin-bottom:1.1rem}
.fld small{font-weight:400;color:var(--muted)}
.is-admin input:not([type=hidden]),.is-admin textarea,.is-admin select{width:100%;font:inherit;font-weight:400;color:var(--fg);background:#fbfcfc;border:1px solid var(--line-strong);border-radius:12px;padding:.7rem .9rem;transition:border-color .2s,box-shadow .2s,background .2s}
.is-admin input:hover,.is-admin textarea:hover,.is-admin select:hover{border-color:#b3bcc3}
.is-admin input:focus,.is-admin textarea:focus,.is-admin select:focus{background:#fff;border-color:var(--brand-c);box-shadow:0 0 0 4px rgba(67,109,225,.18);outline:none}
.is-admin textarea{resize:vertical;line-height:1.85}
.is-admin button{font:inherit;font-weight:900;cursor:pointer;border-radius:12px;padding:.6rem 1.2rem;border:1px solid var(--line-strong);background:#fff;color:var(--ink);transition:all .2s}
.is-admin button:hover{background:var(--paper);border-color:#b3bcc3}
.is-admin button[type=submit]{background:var(--brand-grad);border-color:transparent;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 20px -10px rgba(67,109,225,.9)}
.is-admin button[type=submit]:hover{filter:brightness(1.05);transform:translateY(-1px)}
#loginMsg{color:var(--red);font-weight:700;text-align:center;margin:.9rem 0 0;min-height:1.5em}
.app{display:grid;min-height:100vh}
@media(min-width:1000px){.app{grid-template-columns:250px minmax(0,1fr)}}
.ico{display:inline-grid;place-items:center;width:1.8rem;height:1.8rem;border-radius:8px;background:rgba(255,255,255,.06);color:var(--brand-2)}
.chip{display:inline-block;font-size:.72rem;font-weight:900;border-radius:999px;padding:.1rem .65rem}
#articleForm fieldset{border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.2rem .2rem;margin:0 0 1.25rem;background:#fcfdfd}
#articleForm legend{display:flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:900;color:var(--ink);padding:0 .5rem}
#articleForm legend span{display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:8px;background:var(--brand-grad);color:#fff;font-size:.8rem}
#slug{direction:ltr;text-align:left;font-family:ui-monospace,Menlo,Consolas,monospace}
#statusHint:not(:empty),#whenUtc:not(:empty){display:block;margin:-.6rem 0 1rem;font-size:.8rem}
#saveMsg{margin:0;font-weight:700;color:var(--brand-ink)}
#list{list-style:none;margin:0;padding:.4rem;max-height:70vh;overflow:auto}
#list:empty::before{content:"لا توجد مقالات بعد";display:block;padding:2rem;text-align:center;color:var(--muted)}
#list li{padding:.85rem 1rem;border-radius:12px;font-size:.92rem;font-weight:700;line-height:1.6;transition:background .2s}
#list li+li{border-top:1px solid var(--line)}
#list li:hover{background:var(--brand-soft)}
#list li button{margin-top:.45rem;margin-inline-end:.4rem;padding:.2rem .85rem;font-size:.8rem;border-radius:999px}
#list li button+button{color:var(--red);border-color:#f5c2c5}
#list li button+button:hover{background:#fdecec}
#more{margin:1rem 1.25rem}

/* motion + small screens */
@media(max-width:700px){
  body{font-size:16px}
  .masthead__in{padding:1.1rem 0}
  .wordmark__text span{font-size:.85rem}
  .navbar__list a{padding:.85rem .7rem}
  .topbar__note{display:none}
  .hero{min-height:auto}
  .hero__grid{padding-block:5rem 2rem}
  .hero__lead{padding:2.2rem 1.25rem 1.2rem}
  .hero__stripes{width:44px}
  .card--row .card__img{width:104px}
  .mosaic .card--over,.band .card--over{min-height:420px}
  .article__body{font-size:1.12rem}
  .rail{grid-auto-columns:80%}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.strip__list{flex-wrap:wrap;white-space:normal;width:auto}}
/* review pass 1: keep text clear of the stripe bands */
.footer__grid,.footer__base-in{padding-inline-end:clamp(56px,11vw,160px)}
.sec-card{background:rgba(18,20,23,.72)}

/* ===== eekad-inspired pass (2026-10-28): open hero, headline strip, section tiles, dark article top ===== */
.kicker--pill{display:inline-block;padding:.28rem .7rem;border-radius:6px;background:var(--brand-grad);color:#fff;font-size:.78rem;line-height:1.3;text-shadow:none}
.kicker--pill[data-sec="world"]{background:linear-gradient(135deg,#436de1,#2c4fb5)}
.btn--cta{border-radius:8px;padding:.8rem 1.8rem;font-size:1rem}
/* hero: headline set straight on the image, CTA, and a strip of headline cards on its bottom edge */
.hero{flex-direction:column;align-items:stretch;justify-content:flex-end;min-height:min(84vh,760px)}
.hero::after{background:linear-gradient(0deg,rgba(14,16,19,.98) 0%,rgba(14,16,19,.82) 30%,rgba(14,16,19,.35) 65%,rgba(14,16,19,.2) 100%)}
.hero__grid{display:block;padding-block:8rem 2rem}
.hero__lead{padding:0;color:#fff;max-width:920px;background:none;box-shadow:none}
.hero__title{color:#fff;font-size:clamp(2.2rem,5.2vw,4.4rem);line-height:1.15;margin:.9rem 0 1rem}
.hero__title a{color:inherit}
.hero__title .hl{color:var(--brand-2)}
.hero__dek{color:#cfd6dc;font-size:clamp(1.02rem,1.5vw,1.25rem);max-width:62ch}
.hero__lead .byline time,.hero__lead .byline span{color:#c3ccd3}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem 1.75rem;margin-top:1.4rem}
.hero__strip{list-style:none;margin:0;padding:0 0 2.2rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;border-top:1px solid rgba(255,255,255,.14);padding-top:1.4rem}
.hero__strip li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:1rem 1.1rem;transition:background .2s,border-color .2s}
.hero__strip li:hover{background:rgba(255,255,255,.12);border-color:rgba(125,155,239,.6)}
.hero__strip h3{color:#fff;font-size:1.08rem;font-weight:900;margin:.55rem 0 .35rem;line-height:1.4}
.hero__strip h3 a{color:inherit}
.hero__strip time{font-size:.8rem;color:#9aa5af}
/* bigger, quieter section headings */
.shead--xl h2{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:900}
/* section tiles: tall branded cards with title, dek and an outlined explore button */
.sections-row{padding-block:3.5rem 0}
.sec-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem}
.sec-tile{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;min-height:300px;border-radius:14px;color:#fff;text-decoration:none;background:linear-gradient(160deg,#23282e,#121417 70%)}
.sec-tile__stripes{position:absolute;inset-block:0;inset-inline-end:0;width:42%;z-index:-1;background:var(--stripes),linear-gradient(180deg,var(--accent),var(--deep));opacity:.9;transition:width .35s}
.sec-tile:hover .sec-tile__stripes{width:56%}
.sec-tile__body{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;padding:1.6rem;max-width:70%}
.sec-tile__body strong{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:900;line-height:1.1}
.sec-tile__body>span:not(.btn){color:#c3ccd3}
.sec-tile .btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);border-radius:6px;padding:.5rem 1.3rem;margin-top:.6rem}
.sec-tile:hover .btn--ghost{background:#fff;color:var(--ink)}
.sec-tile:focus-visible{outline:3px solid var(--brand-2);outline-offset:3px}
/* article: dark top band with the headline, figure overlapping its edge */
.article__top{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(90% 140% at 85% 0%,#1f2a31,#121417 65%);color:#fff;padding-bottom:7rem;margin-bottom:-5rem}
.article__top-stripes{position:absolute;inset-block:0;inset-inline-start:0;width:clamp(48px,12vw,180px);z-index:-1;background:var(--stripes),var(--brand-grad);opacity:.85}
.article__top .article__head{padding-top:2.5rem}
.article__top h1{color:#fff;margin-top:.8rem}
.article__top .dek{color:#cfd6dc}
.article__top .crumbs a,.article__top .crumbs span{color:#9fb0bb}
.article__top .byline{border-color:rgba(255,255,255,.14)}
.article__top .byline__meta{color:#c3ccd3}
.article__media{position:relative;z-index:5}
@media(max-width:760px){
  .hero{min-height:auto}.hero__grid{padding-block:5.5rem 1.5rem}
  .hero__strip{grid-template-columns:1fr;gap:.6rem}
  .sec-tile{min-height:220px}.sec-tile__body{max-width:85%}
  .article__top{padding-bottom:5rem;margin-bottom:-3.5rem}
}
.hero__lead .byline__meta,.hero__lead .byline time{color:#b8c2ca}
@media(max-width:760px){.sec-tile{min-height:250px}.sec-tile__body{padding-top:5rem}}
/* ===== official identity pass (t67u/t68u, 2026-10-28): Al Jazeera font, white/black themes, red #ff0a00 + blue #436de1 accents, glass wordmark ===== */
:root{
  color-scheme:light dark;
  --red:#ff0a00;--red-deep:#b30700;--blue:#436de1;--blue-deep:#2c4fb5;
  --brand-c:#436de1;--brand-2:#7d9bef;--brand-ink:#2c4fb5;--brand-soft:#eef2fd;--focus:#2c4fb5;
  --paper:#fff;--paper-2:#f5f5f5;--card:#fff;--fg:#111;--muted:#5c5c5c;--line:#e6e6e6;--line-strong:#cfcfcf;--ink:#000;--ink-2:#111;--ink-3:#1c1c1c;
  --brand-grad:linear-gradient(135deg,#5a80ea,#436de1);
  --band-grad:linear-gradient(180deg,#ff0a00,#b30700);
  --sep:linear-gradient(90deg,var(--red) 0 50%,var(--blue) 50% 100%);
  --logo-glass:url(/images/brand/logo-horan-glass-dark.png);
}
@media (prefers-color-scheme:dark){:root{
  --paper:#000;--paper-2:#0b0b0b;--card:#111;--fg:#f2f2f2;--muted:#a8a8a8;--line:#222;--line-strong:#333;--ink:#000;--ink-2:#0d0d0d;--ink-3:#1a1a1a;
  --brand-ink:#8aa6f2;--brand-soft:#121a2e;--focus:#8aa6f2;
  --logo-glass:url(/images/brand/logo-horan-glass-light.v2.webp);
}}
/* glass wordmark: the real gradient PNG instead of a flat mask */
.logo{aspect-ratio:706/254;-webkit-mask:none;mask:none;background:var(--logo-glass) center/contain no-repeat}
.logo--white,.navbar .logo,.footer .logo,.hero .logo,.band .logo,.media .logo,.empty .logo,.notfound .logo{background-image:url(/images/brand/logo-horan-glass-light.v2.webp)}
.logo--ink{background-color:transparent}
/* masthead: plain white / black slab, logo centred, red|blue separator underneath */
.masthead{background:var(--paper);color:var(--fg);border-bottom:0}
.masthead::after{content:"";position:absolute;inset-inline:0;bottom:0;height:4px;background:var(--sep)}
.masthead .wordmark span{color:var(--fg)}
.masthead [class*="stripes"]{background:var(--stripes),var(--band-grad)}
body{background:var(--paper);color:var(--fg)}
h1,h2,h3{color:var(--fg)}
/* stripe bands now in brand red; secondary bands blue */
.hero__stripes,.article__top-stripes,.band__pattern{background:var(--stripes),var(--band-grad)}
.sec-tile[href*="world"] .sec-tile__stripes,.band__pattern{background:var(--stripes),linear-gradient(180deg,#436de1,#2c4fb5)}
/* news separators */
.shead{border-bottom-color:var(--line)}
.shead::after,.shead h2::after{background:var(--sep)}
.strip{background:var(--paper);border-bottom:2px solid transparent;border-image:var(--sep) 1}
.strip__label{background:var(--red);color:#fff}
.hero__strip{border-top:2px solid;border-image:var(--sep) 1}
.mosaic__list>*+*,.numbered li+li{border-top-color:var(--line)}
/* surfaces in dark mode */
@media (prefers-color-scheme:dark){
  .glass{background:rgba(20,20,20,.82);color:var(--fg);border-color:rgba(255,255,255,.1)}
  .card,.adm-card,.numbered,.latest-col .numbered{background:var(--card);color:var(--fg)}
  .card h3 a,.card h2 a,.numbered h3 a{color:var(--fg)}
  .hero__dek,.card p,.dek{color:var(--muted)}
  .btn--ghost,.btn--light{background:var(--card);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line-strong)}
  .article__body{color:#e6e6e6}
  .share a,.share button{background:var(--card);color:var(--fg);border-color:var(--line-strong)}
  input,select,textarea{background:#0d0d0d;color:var(--fg);border-color:var(--line-strong)}
  .login-form-side,.login-split>*:first-child{background:var(--paper)}
}
.masthead .wordmark__text span{border-inline-start-color:var(--line-strong);color:var(--fg)}
.sec-banner{background:linear-gradient(120deg,#000 30%,var(--sec-deep))}
.masthead::before{background:var(--stripes),var(--band-grad);width:min(18%,220px);opacity:1}
.article{background:var(--paper)}
/* ===== stripe rules (t70u): RED = important headlines, BLUE = separator between regular headlines ===== */
.shead::after,.shead h2::after{background:var(--blue)}
.shead{--accent:var(--blue)}
.shead--important{--accent:var(--red)}
.shead--important::after,.shead--important h2::after{background:var(--red)}
.strip{border-image:none;border-bottom:3px solid var(--red)}
.hero__strip{border-image:none;border-top:3px solid var(--red)}
.hero__strip li{border-inline-start:3px solid var(--red)}
.card--featured{box-shadow:inset 0 3px 0 var(--red)}
.card--featured .kicker{color:var(--red)}
.numbered>li+li,.mosaic__list>.card+.card,.band__list>.card+.card{border-top:2px solid var(--blue)}
.grid>.card--regular{border-bottom:2px solid var(--blue)}
.kicker--pill,.kicker--pill[data-sec],.media__label{background:var(--blue);color:#fff}
.meta__sec,.meta__sec[data-sec],.card .kicker{color:var(--blue)}
.card--featured .kicker{color:var(--red)}
.sec-tile{--accent:var(--blue);--deep:#2c4fb5}
.masthead::after{background:var(--red)}
/* ===== real glassmorphism (t71u) ===== */
.glass,.hero__lead,.hero__strip li,.navbar{
  --g-bg:rgba(255,255,255,.62);--g-br:rgba(255,255,255,.7);--g-hi:rgba(255,255,255,.85);
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 40%),var(--g-bg);
  -webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);
  border:1px solid var(--g-br);
  box-shadow:inset 0 1px 0 var(--g-hi),inset 0 -1px 0 rgba(255,255,255,.12),0 12px 32px rgba(0,0,0,.22)}
/* glass on dark surfaces (hero, login side, navbar, world band, over-cards on images) */
.hero__lead,.hero__strip li,.navbar,.band .glass,.card--over .glass{
  --g-bg:rgba(255,255,255,.12);--g-br:rgba(255,255,255,.22);--g-hi:rgba(255,255,255,.35);color:#fff}
.hero__lead{border-radius:18px;padding:1.5rem 1.75rem}
.hero__strip li{border-radius:14px;padding:.9rem 1.1rem}
.hero__strip li{border-inline-start:3px solid var(--red)}
.navbar{border-inline:0;border-top:0;border-radius:0}
@media (prefers-color-scheme:dark){
  .glass{--g-bg:rgba(255,255,255,.1);--g-br:rgba(255,255,255,.2);--g-hi:rgba(255,255,255,.3)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{--g-bg:rgba(255,255,255,.94)}
  .hero__lead,.hero__strip li,.navbar,.band .glass,.card--over .glass{--g-bg:rgba(20,20,20,.9)}
  @media (prefers-color-scheme:dark){.glass{--g-bg:rgba(20,20,20,.92)}}
}
/* masthead visible name (t72u) */
.masthead .wordmark__text--title{display:flex;flex-direction:column;gap:.15rem;padding-inline-start:1.1rem;border-inline-start:2px solid var(--line-strong)}
.masthead .wordmark__text--title span{border:0;padding:0;font-size:clamp(.9rem,1.4vw,1.15rem);font-weight:700;color:var(--muted)}
.wordmark__name{font-weight:900;font-size:clamp(1.35rem,3vw,2.3rem);line-height:1.15;color:var(--fg);white-space:nowrap}
@media (max-width:520px){.masthead .wordmark__text--title{padding-inline-start:.7rem}.wordmark__name{font-size:1.25rem}.masthead .wordmark__text--title span{font-size:.8rem}}
.navbar{--g-bg:rgba(12,12,14,.62);--g-br:rgba(255,255,255,.14)}
/* ===== black glass navbar (t73u), both themes ===== */
.navbar,.is-condensed .navbar{--g-bg:rgba(0,0,0,.76)!important;--g-br:rgba(255,255,255,.12);--g-hi:rgba(255,255,255,.18);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 55%),rgba(0,0,0,.76)!important;
  -webkit-backdrop-filter:blur(20px) saturate(170%)!important;backdrop-filter:blur(20px) saturate(170%)!important;
  border:0!important;border-bottom:1px solid rgba(255,255,255,.12)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 30px -12px rgba(0,0,0,.55)!important;color:#fff}
.navbar a{color:#fff}
.navbar a:hover,.navbar a:focus-visible{color:#fff;background:rgba(255,255,255,.1)}
.navbar [aria-current="page"],.navbar .is-on{color:#fff}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.navbar,.is-condensed .navbar{background:rgba(0,0,0,.96)!important}}
/* =====================================================================
   PREMIUM ART-DIRECTION PASS (t74u) — restraint: hairlines, type, space
   ===================================================================== */
:root{--hair:rgba(0,0,0,.12);--hair-strong:rgba(0,0,0,.85);--muted2:#5c5c5c;--s1:8px;--s2:16px;--s3:24px;--s4:32px;--s6:48px;--s8:64px}
@media (prefers-color-scheme:dark){:root{--hair:rgba(255,255,255,.14);--hair-strong:rgba(255,255,255,.85);--muted2:#a3a3a3}}
body{font-feature-settings:"kern","liga";text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
.wrap{max-width:1280px}
/* --- section heads: newspaper rule above, small caps-like label --- */
.shead{border-bottom:0;border-top:1px solid var(--hair-strong);padding:var(--s1) 0 0;margin:0 0 var(--s3)}
.shead::after{top:-1px;bottom:auto;width:56px;height:3px;border-radius:0}
.shead h2{font-size:1.05rem;font-weight:900;letter-spacing:0;line-height:1.4}
.shead h2::before,.shead h2::after{display:none}
.shead p{font-size:.85rem;color:var(--muted2);margin:0}
.shead--xl h2{font-size:1.05rem}
.shead__more{font-size:.82rem;color:var(--fg)}
.shead__more:hover{color:var(--blue)}
.block{margin-block:var(--s6)}
/* --- cards: no boxes, no rounding, hairline rhythm --- */
.card,.card--card,.card--row,.card--text{background:transparent;border:0;border-radius:0;box-shadow:none}
.card .card__img,.card .media{border-radius:0}
.card__body{padding:var(--s2) 0 0}
.card--row .card__body{padding:0}
.card__title{font-weight:900;line-height:1.3;letter-spacing:0;text-wrap:balance}
.card__title a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s}
.card__title a:hover{background-size:100% 1px;color:inherit}
.card__dek{color:var(--muted2);line-height:1.7;font-size:.95rem;max-width:60ch}
.kicker{font-size:.78rem;font-weight:900;letter-spacing:0;color:var(--blue);background:none;padding:0}
.card--featured{box-shadow:none}
.card--featured .kicker{color:var(--red)}
.card .badge{display:none}
/* typographic (no-photo) cards */
.card--type{display:block;padding-top:var(--s2);border-top:3px solid var(--blue)}
.card--type.card--featured{border-top-color:var(--red)}
.card--type .card__body{padding:var(--s1) 0 0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border:0;color:var(--fg)}
.card--type .card__title{font-size:clamp(1.15rem,1.6vw,1.45rem);margin:.35rem 0 .5rem}
.card--type.card--big .card__title{font-size:clamp(1.8rem,3.2vw,2.8rem);line-height:1.2}
.card--type.card--big .card__dek{font-size:1.1rem}
.card--type-row .card__title{font-size:1.05rem;margin:.2rem 0 .3rem}
.card--type-row{border-top-width:1px;border-top-color:var(--blue);padding-top:var(--s2)}
/* --- hero --- */
.hero{background:#000;color:#fff}
.hero--type{padding:var(--s8) 0 var(--s4);background:#000}
.hero--type .hero__stripes{width:min(14%,180px);opacity:1}
.hero--type .hero__lead{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;box-shadow:none;padding:0;max-width:980px}
.hero--type .hero__lead::before{content:"";display:block;width:72px;height:4px;background:var(--red);margin-bottom:var(--s3)}
.hero__title{font-size:clamp(2.4rem,5.6vw,5rem);line-height:1.12;font-weight:900;letter-spacing:0;text-wrap:balance;margin:var(--s2) 0}
.hero__title .hl{color:#fff;box-shadow:inset 0 -.14em 0 var(--red)}
.hero__dek{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.75;color:rgba(255,255,255,.78);max-width:62ch}
.hero__actions{margin-top:var(--s3)}
.hero__strip{gap:0;margin-top:var(--s6);border-top:1px solid rgba(255,255,255,.25)}
.hero__strip li{border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border:0;border-inline-start:1px solid rgba(255,255,255,.18);padding:var(--s3) var(--s3) var(--s1);position:relative}
.hero__strip li:first-child{border-inline-start:0;padding-inline-start:0}
.hero__strip li::before{content:"";position:absolute;top:-1px;inset-inline-start:0;width:40px;height:3px;background:var(--red)}
.hero__strip li:not(:first-child)::before{inset-inline-start:var(--s3)}
.hero__strip h3{font-size:1.15rem;font-weight:900;line-height:1.35}
.hero__strip .kicker--pill{background:none;color:var(--red);padding:0;font-size:.78rem}
.hero__strip time{color:rgba(255,255,255,.55);font-size:.78rem}
/* glass stays for photo hero only */
.hero--photo .hero__lead{border-radius:0}
/* --- rail of important headlines --- */
.rail{gap:var(--s3)}
.rail>.card{padding-inline-start:0}
/* --- latest numbered column: blue hairlines --- */
.numbered{counter-reset:n;padding:0;margin:0}
.numbered>li{padding:var(--s2) 0;background:none;border-radius:0;box-shadow:none;border:0}
.numbered>li+li{border-top:1px solid var(--blue)}
.numbered h3{font-size:1rem;font-weight:900;line-height:1.45}
.numbered>li::before{color:var(--blue);font-weight:900}
.rss-card{border-radius:0;background:none;border:1px solid var(--hair-strong);color:var(--fg);box-shadow:none}
.mosaic__list>.card+.card,.band__list>.card+.card{border-top:1px solid var(--blue);padding-top:var(--s2)}
/* --- section tiles: editorial index instead of coloured slabs --- */
.sec-tiles{gap:0;border-top:1px solid var(--hair-strong)}
.sec-tile{background:none;color:var(--fg);border-radius:0;box-shadow:none;border:0;border-bottom:1px solid var(--hair);min-height:0;padding:var(--s3) 0}
.sec-tile+.sec-tile{border-inline-start:1px solid var(--hair);padding-inline-start:var(--s3)}
.sec-tile__stripes{display:none}
.sec-tile strong{font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:900}
.sec-tile__body>span:not(.btn){color:var(--muted2)}
.sec-tile .btn{background:none;border:0;padding:0;color:var(--blue);box-shadow:none}
/* --- world band --- */
.band{background:#000}
.band__pattern{opacity:.35}
.band .card__title,.band .card--type .card__body{color:#fff}
.band .card__dek{color:rgba(255,255,255,.7)}
/* --- category / page listings --- */
.grid{gap:var(--s4) var(--s3)}
.grid>.card--regular{border-bottom:0}
.cat-lead .card--type{border-top-color:var(--red)}
/* --- article: magazine reading --- */
.article__top{background:var(--paper);color:var(--fg)}
.article__top-stripes{display:none}
.article__head{max-width:900px;padding-block:var(--s6) var(--s4)}
.article__head h1{font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.18;font-weight:900;text-wrap:balance;margin:var(--s2) 0;color:var(--fg)}
.article__head .kicker--pill{background:none;color:var(--blue);padding:0;font-size:.85rem}
.article .dek{font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.75;color:var(--muted2);max-width:62ch}
.byline{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:var(--s2) 0;margin-top:var(--s3)}
.crumbs,.crumbs a{color:var(--muted2)}
.article__layout{max-width:900px}
.article__body{max-width:68ch;font-family:var(--read);font-size:1.18rem;line-height:1.95}
.article__body p{margin:0 0 var(--s3)}

.pull{border:0;border-top:3px solid var(--red);background:none;padding:var(--s2) 0 0;margin:var(--s4) 0;font-family:var(--ui);font-weight:900;font-size:1.5rem;line-height:1.5}
.share__btn{background:none;border:1px solid var(--hair);color:var(--fg);border-radius:999px}
.share__btn:hover{border-color:var(--fg)!important}
.tags li{background:none;border:1px solid var(--hair);border-radius:999px;color:var(--muted2)}
.related{background:var(--paper);border-top:1px solid var(--hair-strong);padding-block:var(--s6)}
/* --- empty state (0 articles: a designed edition zero) --- */
.empty{background:var(--paper);color:var(--fg);padding:0 0 var(--s8);min-height:0}
.empty__in{padding-top:clamp(56px,10vw,128px);padding-bottom:var(--s6);text-align:start;max-width:1280px;align-items:flex-start!important;border-bottom:1px solid var(--hair-strong)}
.empty__eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-weight:900;font-size:.9rem;color:var(--red)!important;margin:0 0 var(--s3)}
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(255,10,0,.6);animation:rh-pulse 2s infinite}
.empty__title{font-size:clamp(2.6rem,7vw,6rem)!important;line-height:1.08;font-weight:900;margin:0 0 var(--s3)!important;max-width:14ch;text-wrap:balance;color:var(--fg)!important}
.empty__text{font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.8;color:var(--muted2);max-width:56ch;margin:0 0 var(--s4)}
.empty__actions{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;justify-content:flex-start}
.empty__index{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.empty__index li+li{border-inline-start:1px solid var(--hair)}
.empty .sec-card{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:var(--s2);align-items:baseline;padding:var(--s4) var(--s3);background:none;border:0;border-radius:0;box-shadow:none;color:var(--fg);transition:background .25s}
.empty li:first-child .sec-card{padding-inline-start:0}
.empty .sec-card::before{display:none}
.empty .sec-card:hover{background:rgba(67,109,225,.06)!important}
.sec-card__num{grid-row:1/3;font-size:.85rem;font-weight:900;color:var(--blue)}
.empty .sec-card__name{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:900;line-height:1.2}
.empty .sec-card__blurb{grid-column:2;color:var(--muted2)}
.empty .sec-card__go{position:static;transform:none;grid-row:1/3;grid-column:3;color:var(--blue);font-size:1.6rem;transition:transform .25s}
.empty .sec-card:hover .sec-card__go{transform:translateX(-6px)!important}
/* --- 404 --- */
.notfound{background:var(--paper);color:var(--fg)}
.notfound h1{color:var(--fg);font-weight:900}
.notfound p:not(.notfound__code){color:var(--muted2)}
.notfound p.notfound__code{color:transparent;-webkit-text-stroke:2px var(--red);font-weight:900}
.notfound .btn--outline-light{color:var(--fg);border-color:var(--hair-strong)}
.notfound .btn--light{background:var(--fg);color:var(--paper)}
/* --- buttons --- */
.btn--cta,.btn{border-radius:var(--btn-radius,10px);box-shadow:none}
.btn--cta{background:var(--blue);color:#fff}
.btn--cta:hover{background:#2c4fb5!important}
/* --- footer --- */
.footer{background:#000;border-top:4px solid var(--red)}
.footer h2{font-size:.85rem;font-weight:900;color:rgba(255,255,255,.55);border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:.6rem}
.footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.footer__base{border-top:1px solid rgba(255,255,255,.14)}
/* --- focus + motion --- */
:focus-visible{outline:2px solid var(--blue)!important;outline-offset:3px!important;border-radius:2px}
@keyframes rh-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes rh-pulse{0%{box-shadow:0 0 0 0 rgba(255,10,0,.55)}70%{box-shadow:0 0 0 10px rgba(255,10,0,0)}100%{box-shadow:0 0 0 0 rgba(255,10,0,0)}}
.hero__lead,.empty__in>*,.article__head>*{animation:rh-rise .6s cubic-bezier(.2,.7,.2,1) both}
.empty__in>*:nth-child(2),.article__head>*:nth-child(3){animation-delay:.08s}
.empty__in>*:nth-child(3),.article__head>*:nth-child(4){animation-delay:.16s}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* --- mobile --- */
@media (max-width:720px){
  .hero--type{padding:var(--s6) 0 var(--s3)}
  .hero__strip{grid-template-columns:1fr}
  .hero__strip li{border-inline-start:0;padding-inline:0;border-top:1px solid rgba(255,255,255,.18)}
  .hero__strip li::before,.hero__strip li:not(:first-child)::before{inset-inline-start:0}
  .sec-tile+.sec-tile{border-inline-start:0;padding-inline-start:0}
  .empty__index li+li{border-inline-start:0;border-top:1px solid var(--hair)}
  .empty .sec-card{padding-inline:0}
  .article__body{font-size:1.08rem}
}

/* premium pass iteration 1 (t74u) */
.hero--type .hero__stripes{display:none}
.hero--type{padding-block:clamp(40px,6vw,88px) 0;min-height:0}
.hero--type .hero__grid{min-height:0;padding-block:0 32px}
.hero--type .hero__lead{max-width:62rem}
@media (max-width:720px){
 .rail,.rail ol,.rail ul{display:grid;grid-template-columns:1fr;overflow:visible}
 .rail .card{min-width:0;width:auto}
 .tiles .tile,.sec-tiles>*{min-height:0;padding-block:20px}
}

/* premium pass iteration 2 (t74u): article layout */
.article__layout{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:clamp(24px,4vw,64px);align-items:start;max-width:calc(68ch + 230px);margin-inline:auto}
.article__layout>.share{grid-column:2;grid-row:1;position:sticky;top:96px;display:flex;flex-direction:column;gap:0;border-top:3px solid #ff0a00;padding-top:10px}
.article__layout>.article__body{grid-column:1;grid-row:1;min-width:0;width:100%;max-width:68ch}
.share__btn{border-radius:var(--btn-radius,10px);border:0;border-bottom:1px solid var(--hair,rgba(127,127,127,.25));background:transparent;text-align:start;padding:10px 0;justify-content:flex-start}
.share__btn:hover{color:#436de1!important}
.article__head{max-width:calc(68ch + 230px);margin-inline:auto}
.byline,.byline *{opacity:1}
@media (max-width:820px){.article__layout{grid-template-columns:1fr}.article__layout>.share{grid-column:1;grid-row:2;position:static;flex-direction:row;flex-wrap:wrap;gap:16px}}
/* iteration 2b: header band must never overlay body */
.article__layout,.article__media{position:relative;z-index:2}
.article__top{z-index:auto;height:auto;min-height:0}

/* [t75u] light theme: clean dark-ink glass wordmark, no glow/filters on the logo */
:root{--logo-glass:url(/images/brand/logo-horan-glass-ink.png)}
@media (prefers-color-scheme:dark){:root{--logo-glass:url(/images/brand/logo-horan-glass-light.v2.webp)}}
.logo,.wordmark .logo{filter:none;box-shadow:none;text-shadow:none}
.logo::before,.logo::after{content:none}
/* [t75u] masthead sits on --paper (white in light): follow the scheme, not the forced light-glass tone */
.masthead .logo{background-image:var(--logo-glass)}

/* [t76u] approach A: masthead wordmark = the guide's own black-panel pixels (true glass, no keying) in BOTH themes */
.masthead .logo{background:#000 url(/images/brand/logo-horan-plate-black@3x.png) center/contain no-repeat;background-image:image-set(url(/images/brand/logo-horan-plate-black@3x.webp) type("image/webp"),url(/images/brand/logo-horan-plate-black@3x.png) type("image/png"));aspect-ratio:1108/410}
.masthead .wordmark__tile{background:#000;line-height:0;display:inline-block}
/* [t78u] hi-res true-alpha glass wordmark (from the high-res guide PDF) for dark surfaces */
:root{--logo-glass:url(/images/brand/logo-horan-glass-white@3x.png)}
.logo,.logo--white,.navbar .logo,.footer .logo,.hero .logo,.band .logo,.media .logo,.empty .logo,.notfound .logo{background-image:url(/images/brand/logo-horan-glass-white@3x.png);background-image:image-set(url(/images/brand/logo-horan-glass-white@3x.webp) type("image/webp"),url(/images/brand/logo-horan-glass-white@3x.png) type("image/png"))}

/* [t79u] masthead (date line + brand row) solid black in BOTH themes; transparent glass wordmark directly on it */
.topbar{background:#000;color:#bdbdbd;border-bottom:1px solid rgba(255,255,255,.08)}
.topbar__date b{color:#fff}.topbar__sep{background:rgba(255,255,255,.22)}
.topbar__note{color:#d0d0d0}
.masthead{background:#000;color:#fff}
.masthead .logo{background:url(/images/brand/logo-horan-glass-white@3x.png) center/contain no-repeat;background-image:image-set(url(/images/brand/logo-horan-glass-white@2x.webp) 2x type("image/webp"),url(/images/brand/logo-horan-glass-white@3x.webp) 3x type("image/webp"),url(/images/brand/logo-horan-glass-white@3x.png) type("image/png"));aspect-ratio:1108/410}
.masthead .wordmark__tile{background:transparent}
.masthead .wordmark__name,.masthead .wordmark__text--title strong{color:#fff}
.masthead .wordmark__text--title span,.masthead .wordmark span{color:#bdbdbd!important}
.masthead .wordmark__text--title{border-inline-start-color:rgba(255,255,255,.28)}
/* black-glass navbar continues the black masthead: same base black, more opaque glass, the red masthead rule is the intentional divider */
.navbar{--g-bg:rgba(0,0,0,.84);background:rgba(0,0,0,.84)!important;border-top:0!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 24px -18px rgba(0,0,0,.7)!important}
/* [t79u] at rest the navbar sits over the white page; keep it the same black as the masthead (glass sheen + blur still active when scrolled over content) */
.navbar,.is-condensed .navbar{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 60%),rgba(0,0,0,.93)!important;border-bottom:1px solid rgba(255,255,255,.1)!important}

/* ==== [glass v2] Liquid-glass system. Glass ONLY over rich backdrops (hero blooms + stripes, login stripes, scrolled navbar).
   Flat-surface glass removed: generic .glass on plain white/black becomes a solid hairline panel. ==== */
:root{--lg-ease:cubic-bezier(.2,.7,.2,1)}
/* 1. flat fallback for any .glass not over a rich backdrop */
.glass{background:var(--bg,#fff);-webkit-backdrop-filter:none;backdrop-filter:none!important;border:1px solid var(--line,rgba(0,0,0,.1));box-shadow:none!important}
/* 2. rich backdrops */
.hero--type{background:radial-gradient(60% 80% at 82% 18%,rgba(255,10,0,.55),transparent 62%),radial-gradient(55% 75% at 12% 85%,rgba(67,109,225,.6),transparent 60%),radial-gradient(40% 50% at 45% 40%,rgba(67,109,225,.18),transparent 70%),#030304!important;isolation:isolate}
.hero--type .hero__stripes{opacity:.9}
/* 3. the material */
.hero--type .hero__lead,.band .glass,.card--over .glass{
  position:relative;isolation:isolate;color:#fff!important;border:0!important;border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06));
  -webkit-backdrop-filter:blur(20px) saturate(200%) brightness(1.1);backdrop-filter:blur(20px) saturate(200%) brightness(1.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.25),0 1px 1px rgba(0,0,0,.12),0 8px 24px rgba(0,0,0,.18),0 24px 60px rgba(0,0,0,.22)!important;
  transition:box-shadow .25s var(--lg-ease),transform .25s var(--lg-ease)}
.hero--type .hero__lead{padding:clamp(1.4rem,3vw,2.4rem)!important}
.hero--type .hero__lead::before,.band .glass::before,.card--over .glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:1;
  background:linear-gradient(135deg,rgba(255,255,255,.85),rgba(255,255,255,.18) 28%,rgba(255,255,255,0) 50%,rgba(255,255,255,.12) 72%,rgba(255,255,255,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  transition:opacity .25s var(--lg-ease);opacity:.85}
.hero--type .hero__lead::after,.band .glass::after,.card--over .glass::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(120% 60% at 30% -10%,rgba(255,255,255,.28),rgba(255,255,255,.06) 45%,transparent 46%) no-repeat,url(/images/glass-grain.svg);
  background-size:100% 100%,160px 160px;opacity:1;mix-blend-mode:normal;
  transition:background-position .25s var(--lg-ease)}
.hero--type .hero__lead::after{background:radial-gradient(120% 55% at 30% -10%,rgba(255,255,255,.22),rgba(255,255,255,.05) 45%,transparent 46%) no-repeat,url(/images/glass-grain.svg);background-size:100% 100%,160px 160px}
/* grain at ~3.5% */
.hero--type .hero__lead::after,.band .glass::after,.card--over .glass::after{filter:opacity(.9)}
@media (hover:hover){
  .hero--type .hero__lead:hover::before,.band .glass:hover::before,.card--over .glass:hover::before{opacity:1}
  .hero--type .hero__lead:hover::after,.band .glass:hover::after,.card--over .glass:hover::after{background-position:30% 0,0 0}
  .hero--type .hero__lead:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.25),0 1px 1px rgba(0,0,0,.12),0 10px 28px rgba(0,0,0,.22),0 28px 70px rgba(0,0,0,.26)!important}}
.hero--type .hero__lead .hero__dek{color:rgba(255,255,255,.86)}
.hero--type .hero__lead a{color:#fff}
/* hero strip under the bloom: hairline, no glass (flat black area) */
.hero--type .hero__strip li{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-top:1px solid rgba(255,255,255,.16);box-shadow:none}
/* 4. navbar: solid black at rest (matches masthead); real glass once content scrolls beneath it */
.is-condensed .navbar{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.02) 55%),rgba(8,8,10,.55)!important;
  -webkit-backdrop-filter:blur(18px) saturate(210%) brightness(1.08)!important;backdrop-filter:blur(18px) saturate(210%) brightness(1.08)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.35),0 1px 1px rgba(0,0,0,.1),0 8px 24px rgba(0,0,0,.16)!important;border-bottom:1px solid rgba(255,255,255,.14)!important}
/* 5. refraction lens: Chromium only (Safari/Firefox keep the plain blur) */
@supports (backdrop-filter:url(#glass-lens) blur(1px)) and (not (-webkit-hyphens:none)) and (not (-moz-appearance:none)){
  .hero--type .hero__lead{backdrop-filter:url(#glass-lens) blur(16px) saturate(200%) brightness(1.1)}
  .is-condensed .navbar{backdrop-filter:url(#glass-lens) blur(16px) saturate(210%) brightness(1.08)!important}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hero--type .hero__lead,.band .glass,.card--over .glass{background:rgba(22,22,26,.92)}
  .is-condensed .navbar{background:rgba(0,0,0,.96)!important}}
@media (prefers-reduced-motion:reduce){.hero--type .hero__lead,.hero--type .hero__lead::before,.hero--type .hero__lead::after{transition:none!important}}
@media (prefers-color-scheme:dark){.glass{background:#0b0b0c;border-color:rgba(255,255,255,.1)}}
/* [glass v2 iter2] legible secondary text{position:relative;z-index:2;color:rgba(255,255,255,.9)}
.hero--type .hero__lead>*{position:relative;z-index:2}
.hero--type .hero__lead{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04))}
/* [glass v2 iter3] navbar over white read as grey fog: keep it a dark smoked glass so it stays brand-black */
.is-condensed .navbar{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 60%),rgba(0,0,0,.8)!important}

/* [t84u] reeded-glass block removed (see reports/before-glass-accents-*); rasters kept in public/images/glass/, unreferenced */
/* ==== [t81u] true translucent glass logo (difference-matted from the guide's black + red panels) ==== */
.logo,.logo--white,.masthead .logo,.navbar .logo,.footer .logo,.hero .logo,.band .logo,.media .logo,.empty .logo,.notfound .logo{
  background:url(/images/brand/logo-horan-glass.svg) center/contain no-repeat;
  background-size:contain;background-repeat:no-repeat;background-position:center}
/* let colour show through the glass fade: a soft red/blue bloom sits behind the lower half of the wordmark */
.masthead .wordmark__tile{position:relative;isolation:isolate}
.masthead .wordmark__tile::before{content:"";position:absolute;z-index:-1;inset:38% -14% -22% -10%;pointer-events:none;
  background:radial-gradient(48% 70% at 68% 60%,rgba(255,10,0,.75),rgba(255,10,0,0) 70%),radial-gradient(40% 60% at 22% 70%,rgba(67,109,225,.6),rgba(67,109,225,0) 70%);filter:blur(10px)}
.footer .logo{filter:drop-shadow(0 0 0 transparent)}
/* [mobile fix] the t74u mobile rail kept grid-auto-flow:column from the base .rail, so cards became extra 280px columns
   and the page grew to 932px at 390px. Stack them as rows and guard grid/flex children. */
@media (max-width:720px){
 .rail{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:minmax(0,1fr)}
 .rail>*{min-width:0}
}
html,body{max-width:100%}
/* [mobile fix] comfortable tap targets on touch screens */
@media (max-width:720px){
 .navbar__list a,.navbar__rss,.footer a,.share a,.share button,.breadcrumbs a,.crumbs a,.btn,.kicker{min-height:44px;display:inline-flex;align-items:center}
 .navbar__rss{min-width:44px;justify-content:center}
}

/* t82u typography audit */
html{font-synthesis:none;-webkit-font-smoothing:antialiased}
body{line-height:1.8;overflow-wrap:anywhere;text-align:start}
h1,h2,h3,h4{line-height:1.35;text-wrap:balance}
p,li,figcaption,blockquote{text-wrap:pretty}
p{text-align:start}
.wordmark__text span,.empty__eyebrow,.kicker,.hero__title{letter-spacing:0}
[dir=ltr],bdi,.num,time,.handle{unicode-bidi:isolate}
.btn,.kicker,.badge,.navbar__list a,.chip{white-space:nowrap;line-height:1.3;overflow:visible;text-overflow:clip}
.card__title{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* t82u contrast: article top meta was tuned for a dark header; now theme-aware (AA) */
.article__top .crumbs a,.article__top .crumbs span,.article__top .byline__meta,.article__top .byline__meta *{color:var(--muted)}
.article__top .byline{border-color:var(--hair)}
.byline__meta time{unicode-bidi:isolate}
@media (prefers-color-scheme:dark){.admin-foot{background:#000;color:#a8a8a8;border-top:1px solid #222}}
/* ==== [t83u] from-scratch vector glass logo with sheen (replaces the t81u raster; rasters kept on disk, unreferenced) ==== */
:root{--logo-glass:url(/images/brand/logo-horan-glass.svg)}
.logo,.logo--white,.masthead .logo,.navbar .logo,.footer .logo,.hero .logo,.band .logo,.media .logo,.empty .logo,.notfound .logo{
  background:url(/images/brand/logo-horan-glass.svg) center/contain no-repeat;aspect-ratio:1068/389}

/* ==== [t84u] reeded "curtains" removed site-wide; vector glass accents in the language of the SVG logo ====
   glass = white gloss at top fading to clear, bright top rim, faint diagonal sheen, brand colour glowing through.
   red = important headlines only; blue = separators/markers for everything else. Reeded rasters stay on disk, unreferenced. */
:root{
  --gl-gloss:linear-gradient(180deg,rgba(255,255,255,.92) 0,rgba(255,255,255,.38) 38%,rgba(255,255,255,0) 72%);
  --gl-sheen:linear-gradient(118deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.42) 48%,rgba(255,255,255,0) 58%);
  --gl-red:linear-gradient(180deg,#ff5a4f 0,#ff0a00 52%,#c20800 100%);
  --gl-blue:linear-gradient(180deg,#7d9bf0 0,#436de1 52%,#2a4fb8 100%);
  --gl-rim:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.18);
  --gl-glow-red:0 1px 4px rgba(255,10,0,.35);--gl-glow-blue:0 1px 4px rgba(67,109,225,.32);
  --stripes:none}
@media (prefers-color-scheme:dark){:root{--gl-glow-red:0 0 10px rgba(255,10,0,.6),0 0 2px rgba(255,10,0,.9);--gl-glow-blue:0 0 10px rgba(67,109,225,.55),0 0 2px rgba(67,109,225,.9)}}

/* 1. all curtain hosts gone (absolutely positioned, z-index:-1 → no layout gaps) */
.masthead::before,.masthead [class*="stripes"],.hero__stripes,.article__top-stripes,.media__pattern,.sec-banner__pattern,.sec-tile__stripes,.band__pattern{display:none;background:none}

/* 2. masthead: one slim glass rule on the bottom edge — blue, with a short red segment under the logo side */
.masthead{border-bottom:0}
.masthead::after{content:"";position:absolute;inset-inline:0;bottom:0;height:4px;pointer-events:none;
  background:var(--gl-gloss),var(--gl-blue);box-shadow:var(--gl-rim),var(--gl-glow-blue)}
.masthead::after{background:var(--gl-gloss),var(--gl-sheen),linear-gradient(270deg,#ff0a00 0 160px,#c20800 160px 162px,#436de1 162px);box-shadow:var(--gl-rim),0 0 8px rgba(67,109,225,.45)}

/* 3. important / lead headlines: red glass tab beside the kicker (hero lead, the «أبرز العناوين» rail, a breaking flag) */
.hero__lead .kicker,.shead--important~.rail .kicker,.is-breaking .kicker,.kicker--breaking{position:relative;padding-inline-start:1.05em}
.hero__lead .kicker::before,.shead--important~.rail .kicker::before,.is-breaking .kicker::before,.kicker--breaking::before{
  content:"";position:absolute;inset-inline-start:.3em;top:50%;width:6px;height:1.05em;transform:translateY(-50%);border-radius:2px;
  background:var(--gl-gloss),var(--gl-sheen),var(--gl-red);box-shadow:var(--gl-rim),var(--gl-glow-red)}
.hero__lead{position:relative}
.hero__lead::before{content:"";position:absolute;inset-inline-start:calc(-1 * clamp(14px,2vw,28px));top:.4rem;bottom:.4rem;width:3px;border-radius:3px;
  background:var(--gl-gloss),var(--gl-red);box-shadow:var(--gl-rim),var(--gl-glow-red)}
@media (max-width:720px){.hero__lead::before{inset-inline-start:-10px}}

/* 4. section headers: blue glass tab before the title + fine blue glass separator; red only for .shead--important */
.shead{border-bottom:0;padding-bottom:.9rem}
.shead h2::before{content:"";width:7px;height:1.1em;border-radius:2px;clip-path:none;flex:none;
  background:var(--gl-gloss),var(--gl-sheen),var(--gl-blue);box-shadow:var(--gl-rim),var(--gl-glow-blue)}
.shead::after{bottom:0;width:100%;height:2px;border-radius:2px;
  background:var(--gl-gloss),linear-gradient(270deg,#436de1 0,rgba(67,109,225,.55) 30%,rgba(67,109,225,.12) 100%);box-shadow:0 1px 0 rgba(255,255,255,.5),var(--gl-glow-blue)}
.shead--important h2::before{background:var(--gl-gloss),var(--gl-sheen),var(--gl-red);box-shadow:var(--gl-rim),var(--gl-glow-red)}
.shead--important::after{background:var(--gl-gloss),linear-gradient(270deg,#ff0a00 0 72px,#436de1 72px,rgba(67,109,225,.12) 100%)}
/* list separators: blue glass hairline */
.card--row+.card--row,.list>li+li,.hero__strip>li+li{border-top:0;position:relative}
.card--row+.card--row::before,.list>li+li::before{content:"";position:absolute;inset-inline:0;top:0;height:1px;
  background:linear-gradient(270deg,rgba(67,109,225,.55),rgba(67,109,225,.08));box-shadow:0 1px 0 rgba(255,255,255,.35)}

/* panels that carried curtains → clean glass panels */
.rss-card,.pull{background:var(--gl-gloss),var(--gl-sheen),var(--gl-blue);background-size:auto;box-shadow:var(--gl-rim),0 6px 20px rgba(67,109,225,.25);color:#fff}
.rss-card{background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 60%),var(--gl-sheen),var(--gl-blue)}
.pull{background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 60%),var(--gl-sheen),var(--gl-blue)}

/* 5. footer: a single thin glass rule at its top */
.footer{position:relative;border-top:0!important}
.footer::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:var(--gl-gloss),var(--gl-sheen),var(--gl-blue);box-shadow:var(--gl-rim),var(--gl-glow-blue);z-index:1}

/* 6. admin login: no accent beyond the existing blooms (curtain removed) */
/* 7. 404: a short glass rule under the outlined code, same language (blue; it is not a headline) */
.notfound__code{position:relative}
.notfound__in .notfound__code+*{position:relative}
.notfound__in .notfound__code::after{content:"";display:block;width:96px;height:4px;margin:1rem 0 0;border-radius:3px;
  background:var(--gl-gloss),var(--gl-sheen),var(--gl-blue);box-shadow:var(--gl-rim),var(--gl-glow-blue)}
/* [t84u iter2] kicker glass tab sits inline before the label (no overlap); drop the extra lead edge (title already carries the red rule) */
.hero__lead .kicker,.shead--important~.rail .kicker,.is-breaking .kicker,.kicker--breaking{padding-inline-start:revert-layer}
.hero__lead .kicker::before,.shead--important~.rail .kicker::before,.is-breaking .kicker::before,.kicker--breaking::before{position:static!important;transform:none!important;display:inline-block;vertical-align:-.15em;margin-inline-end:.45em;width:5px;height:1em}
.hero__lead::before{content:none!important}

/* ==== [t85u] contrast pass (WCAG AA, measured against rendered backgrounds) ====
   brand fills keep #ff0a00 / #436de1; TEXT in brand colours uses AA-safe tints of the same hues */
:root{--blue-text:#2f56c8;--red-text:#d10800;--blue-fill:#2f56c8;--red-fill:#d90800}
@media (prefers-color-scheme:dark){:root{--blue-text:#86a2f2;--red-text:#ff5b50}}
.kicker,a.kicker,.meta__sec,.card .kicker{color:var(--blue-text)!important}
.kicker[style*="ff0a00"],.shead--important~.rail .kicker,.kicker--breaking,.is-breaking .kicker{color:var(--red-text)!important}
.empty__eyebrow{color:var(--red-text)!important}
.btn:not(.btn--ghost):not(.btn--light),.btn--cta{background:var(--blue-fill)!important;color:#fff!important}
.strip__label{background:var(--red-fill)!important;color:#fff!important}
/* hero lead sits on a dark plate in both themes: light meta text */
.hero__lead .byline-mini,.hero__lead .byline-mini *,.hero__lead time,.hero__lead .byline,.hero__lead .byline *{color:#d4d4d4!important}
.hero__dek{color:#e6e6e6!important}
.hero__strip time,.hero__strip .byline-mini{color:#cfcfcf!important}
/* RSS card: deeper blue core, lighter gloss so white text reads */
.rss-card{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 55%),var(--gl-sheen),linear-gradient(180deg,#3558c9,#1f3d99)!important}
.rss-card,.rss-card *{color:#fff!important}
.pull{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 55%),linear-gradient(180deg,#3558c9,#1f3d99)!important}
.sec-tile__body>span:not(.btn){color:var(--muted)!important}
.band .card--row .byline-mini,.band .byline-mini{color:#bdbdbd!important}
.kicker--pill{color:#fff!important}
.hero__lead .kicker--pill{background:var(--red-fill)!important}
.hero__strip .kicker--pill{background:var(--blue-fill)!important}
.article__head .kicker--pill{color:var(--blue-text)!important;background:none!important}
a.kicker.kicker--pill,span.kicker.kicker--pill,.card .kicker.kicker--pill,.shead--important~.rail .kicker.kicker--pill{color:#fff!important}
.article__head a.kicker.kicker--pill,.article__head span.kicker.kicker--pill{color:var(--blue-text)!important}
.band a.kicker,.band .kicker,.band .card .kicker{color:#a9bdf7!important}
.band p,.band .card__dek{color:#d6d6d6!important}
.shead--dark .shead__more,.band .shead__more{color:#fff!important}
.hero__dek{color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.rss-card span{opacity:1!important;color:#fff!important}
.rss-card{background:linear-gradient(180deg,#2a4bb8,#16307f)!important}
/* qa-leftovers */
.hero__title .hl{box-shadow:none!important}
.hero__title::after{content:"";display:block;width:88px;height:4px;margin-top:.32em;border-radius:3px;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 60%),linear-gradient(90deg,#ff0a00,#d90800);box-shadow:0 0 0 .5px rgba(255,255,255,.25) inset,0 2px 10px rgba(255,10,0,.35)}
.hero__dek{margin-top:var(--s2,1rem)!important}
.kicker--pill::before{content:none!important;display:none!important}
::placeholder{color:#6b6b6b;opacity:1}
@media (prefers-color-scheme:dark){::placeholder{color:#a3a3a3}}
:focus-visible{outline-color:var(--blue-text,#2f56c8)!important}
@media print{
 *,*::before,*::after{box-shadow:none!important;text-shadow:none!important;animation:none!important}
 html,body{background:#fff!important;color:#000!important}
 .navbar,.masthead::after,.skip,.skip-link,.footer,.rss-card,.hero__strip,.strip,nav,button,video,audio{display:none!important}
 .hero__lead,.hero,.band{background:#fff!important;color:#000!important}
 .hero__lead *,.band *{color:#000!important}
 .hero__title::after{display:none}
 a{color:#000!important;text-decoration:underline}
 .article__body a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}
 img{max-width:100%!important;page-break-inside:avoid}
 h1,h2,h3{page-break-after:avoid}
 @page{margin:1.5cm}
}
.fld input,.fld select,.fld textarea,input[type=email],input[type=password],input[type=search],input[type=text]{border-color:#808080!important}
@media (prefers-color-scheme:dark){.fld input,.fld select,.fld textarea,input[type=email],input[type=password],input[type=search],input[type=text]{border-color:#6e6e6e!important}}
.hero__lead .kicker.kicker--pill{display:inline-block!important;padding:.3rem .75rem!important;line-height:1.3!important;border-radius:6px!important;font-size:.82rem!important}
.avatar{background:var(--blue-fill,#2f56c8)!important;color:#fff!important}
.avatar{background:#2346b0!important;background-image:none!important}
.navbar :focus-visible,.masthead :focus-visible,.hero__lead :focus-visible,.band :focus-visible,.footer :focus-visible{outline-color:#86a2f2!important}

/* [gaps] mobile pills: slim visual pill, invisible 44px hit area */
@media (max-width:720px){
 .kicker.kicker--pill{min-height:0!important;display:inline-block!important;line-height:1.3!important;padding:.22rem .6rem!important;position:relative;z-index:5}
 a.kicker.kicker--pill::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%);background:none}
}

/* [t87u] admin login: ONE continuous brand stage behind both columns (no panel seam).
   The official logo is white glass (dark surfaces only){
 --fg:#f2f2f2;--muted:#b4b4bc;--ink:#f2f2f2;--brand-ink:#9db4ff;color:#f2f2f2;color-scheme:dark;
 background:
  radial-gradient(55vmax 55vmax at 92% 8%,rgba(255,10,0,.50),transparent 62%),
  radial-gradient(60vmax 60vmax at 55% 105%,rgba(67,109,225,.50),transparent 62%),
  radial-gradient(45vmax 45vmax at 5% 30%,rgba(67,109,225,.16),transparent 65%),
  #050507;

}
#login :focus-visible{outline-color:#86a2f2!important}

/* [t88u] anonymous meta row: date only ([t105u] no reading time), balanced spacing, no orphan separators */
.byline-mini{gap:0}
.hero__actions{align-items:center;gap:1rem 1.25rem}
.byline--anon{display:flex;align-items:center;gap:.5rem;padding-block:.85rem}
.byline-mini .dot:first-child,.byline-mini .dot:last-child,.byline__meta .dot:first-child,.byline__meta .dot:last-child{display:none}
/* [t87u] login view: footer continues the dark stage (no light strip under it in light theme) */
body:has(#login:not([hidden])) .admin-foot{background:#050507!important;color:#b4b4bc!important;border-color:rgba(255,255,255,.08)!important}
body:has(#login:not([hidden])) .admin-foot *{color:#b4b4bc!important}
/* [t90u] countries: nav disclosure, «الدول» strip, chips, country banner marker */
.navdd{position:relative}
.navdd__btn{font:inherit;color:#e7ecef;font-size:1.02rem;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:0 .9rem;font-weight:700}
.navdd__caret{width:.45rem;height:.45rem;border-inline-start:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg) translateY(-2px);transition:transform .2s}
.navdd.is-open .navdd__caret{transform:rotate(135deg) translateY(-2px)}
.navdd__menu{position:absolute;inset-inline-start:0;top:100%;z-index:60;min-width:15rem;max-height:min(60vh,26rem);overflow:auto;margin:0;padding:.4rem;list-style:none;
  background:rgba(14,16,24,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.12);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.navdd__menu[hidden]{display:none}
.navdd__menu a{display:flex!important;justify-content:space-between;align-items:center;gap:1rem;min-height:44px;padding:0 .8rem!important;border-radius:10px;color:#f2f2f2!important;text-decoration:none}
.navdd__menu a:hover,.navdd__menu a:focus-visible{background:rgba(67,109,225,.28)}
.navdd__menu .num{font-size:.8rem;color:#b9c7ef;background:rgba(67,109,225,.22);border-radius:999px;padding:.05rem .55rem}
.cstrip{display:flex;align-items:center;gap:.9rem;margin:1.4rem 0 .4rem;min-width:0}
.cstrip__label{flex:none;margin:0;font-size:.95rem;font-weight:900;color:var(--fg);padding-inline-end:.9rem;border-inline-end:2px solid #436de1;line-height:1.2}
.cstrip__list{display:flex;gap:.55rem;list-style:none;margin:0;padding:.2rem .1rem;overflow-x:auto;scrollbar-width:thin;min-width:0;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.cstrip__list li{flex:none;scroll-snap-align:start}
.cchip{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 1rem;border-radius:999px;font-weight:700;font-size:.92rem;text-decoration:none;white-space:nowrap;
  color:#1f3f9e;background:rgba(67,109,225,.08);border:1px solid rgba(67,109,225,.35);transition:background .15s,border-color .15s}
.cchip:hover{background:rgba(67,109,225,.16);border-color:#436de1}
.cchip[aria-current=page]{background:linear-gradient(135deg,#2c4fb5,#1f3f9e);color:#fff;border-color:transparent}
.cchip__n{font-size:.78rem;min-width:1.5rem;text-align:center;border-radius:999px;padding:.05rem .45rem;background:rgba(67,109,225,.16);color:inherit}
.cchip[aria-current=page] .cchip__n{background:rgba(255,255,255,.16)}
.cstrip--dark .cstrip__label{color:#f2f2f2}
.cstrip--dark .cchip{color:#dfe6ff;background:rgba(255,255,255,.06);border-color:rgba(157,180,255,.35)}
.cstrip--dark .cchip:hover{background:rgba(67,109,225,.25)}
.card__kick,.article__kick{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .6rem}
.cchip-mini{position:relative;display:inline-block;font-size:.74rem;font-weight:700;line-height:1.3;padding:.12rem .55rem;border-radius:999px;text-decoration:none;
  color:#1f3f9e;background:rgba(67,109,225,.1);border:1px solid rgba(67,109,225,.32);z-index:5}
.cchip-mini::after{content:"";position:absolute;inset:50% auto auto 50%;width:max(100%,44px);height:44px;transform:translate(-50%,-50%)}
.cchip-mini--lg{font-size:.8rem;padding:.24rem .7rem}
.band .cchip-mini,.card--over .cchip-mini,.hero .cchip-mini{color:#dfe6ff;background:rgba(255,255,255,.08);border-color:rgba(157,180,255,.4)}
.sec-banner__eyebrow a{color:inherit}
.cmark{display:inline-grid;place-items:center;vertical-align:middle;margin-inline-end:.7rem;width:3.2rem;height:3.2rem;border-radius:16px;font-size:1.05rem;font-weight:900;letter-spacing:.06em;color:#fff;
  background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(67,109,225,.35));border:1px solid rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 24px rgba(20,40,120,.35);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.fld input[list]{width:100%}
@media (prefers-color-scheme:dark){
  .cchip{color:#c9d6ff;background:rgba(67,109,225,.14);border-color:rgba(157,180,255,.35)}
  .cchip-mini{color:#c9d6ff;background:rgba(67,109,225,.16);border-color:rgba(157,180,255,.35)}
}


@media (max-width:720px){.cstrip{flex-direction:column;align-items:stretch;gap:.5rem}.cstrip__label{border:0;padding:0}.cmark{width:2.6rem;height:2.6rem;font-size:.9rem}}
/* [t90u] narrow screens: the nav row scrolls inside itself (never the page); the countries menu is then fixed under the bar */
@media (max-width:600px){
  .navbar__in{min-width:0}
  .navbar nav{min-width:0;flex:1 1 auto;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .navbar nav::-webkit-scrollbar{display:none}
  .navbar__list a,.navdd__btn{padding-inline:.6rem}
  .navdd__menu{position:fixed;inset-inline:8px;top:var(--navdd-top,64px);min-width:0;max-height:60vh}
}
.navdd__link[hidden],.navdd__btn[hidden]{display:none!important}
.navbar__rss{flex:none;white-space:nowrap}
/* [t90u] admin editor cards stay light in the dark scheme: their fields must keep dark text (was #f2f2f2 on #fbfcfc) */
@media (prefers-color-scheme:dark){#panel .fld input,#panel .fld select,#panel .fld textarea{color:#111}#panel .fld input::placeholder,#panel .fld textarea::placeholder{color:#5f6368}}
.navdd,.navbar__list>li{flex:none}.navdd__btn{white-space:nowrap}
/* ===== [t91u 2026-10-28] «تواصل معنا» page + footer link ===== */
.footer__contact{margin:.8rem 0 0}.footer__contact a{font-weight:900;text-decoration:underline;text-underline-offset:3px}
.contact{padding-block:2.5rem 4rem}
.contact__grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:1.6rem;align-items:start}
.contact__card{position:relative;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:1.6rem 1.6rem 1.4rem;border-top:4px solid var(--blue)}
.contact__h{margin:0 0 .2rem;font-size:1.45rem;font-weight:900;color:var(--fg)}
.contact__note{margin:0 0 1.2rem;color:var(--muted);font-size:.92rem}
.req{color:#c4000a;font-weight:900}.opt{color:var(--muted);font-weight:400;font-size:.88rem}
.cfld{margin-bottom:1rem}
.cfld label{display:block;font-weight:900;margin-bottom:.35rem;color:var(--fg)}
.cfld input,.cfld textarea{width:100%;font:inherit;font-size:1rem;color:#111;background:#fff;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);padding:.7rem .85rem;transition:border-color .15s,box-shadow .15s}
.cfld textarea{resize:vertical;min-height:9rem;line-height:1.8}
.cfld input:focus-visible,.cfld textarea:focus-visible{outline:none;border-color:#2c4fb5;box-shadow:0 0 0 3px rgba(67,109,225,.3)}
.cfld [aria-invalid=true]{border-color:#c4000a;box-shadow:0 0 0 3px rgba(224,20,30,.14)}
.cfld__err{margin:.3rem 0 0;color:#b00009;font-weight:700;font-size:.9rem;min-height:0}
.cfld__err:empty{display:none}
.cfld__foot{display:flex;justify-content:space-between;gap:1rem;align-items:start}
.cfld__count{margin-inline-start:auto;color:var(--muted);font-size:.85rem;margin-top:.3rem}
.hp{position:absolute!important;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.contact__send{background:linear-gradient(135deg,#2c4fb5,#1f3f9e);font-size:1.05rem;padding:.8rem 2rem}
.contact__send:disabled{opacity:.75;cursor:progress;transform:none}
.contact__send[aria-busy=true]::before{content:"";width:1em;height:1em;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:cspin .8s linear infinite}
@keyframes cspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.contact__send[aria-busy=true]::before{animation:none}}
.contact__status{margin-top:1.1rem;border-radius:var(--r-sm);padding:.9rem 1.1rem;border:1px solid;border-inline-start-width:5px}
.contact__status:focus{outline:none}
.contact__status strong{display:block;font-size:1.05rem}.contact__status p{margin:.2rem 0 0}
.contact__aside{background:#000;color:#fff;border-radius:var(--r);padding:1.5rem;box-shadow:var(--shadow);border-top:4px solid var(--red)}
.contact__aside h2{color:#fff;margin:0 0 .8rem;font-size:1.2rem;font-weight:900}
.contact__aside ul{margin:0;padding-inline-start:1.1rem;display:grid;gap:.7rem;line-height:1.75;color:#e6e6e6}
.contact__aside strong{color:#fff}
.contact__privacy{margin:1rem 0 0;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.18);color:#d0d0d0;font-size:.9rem}
@media (max-width:820px){.contact__grid{grid-template-columns:1fr}.contact__card{padding:1.2rem}}
@media (prefers-color-scheme:dark){
  .contact__card{background:rgba(20,20,20,.88);border-color:#333}
  .contact__h,.cfld label{color:#f2f2f2}
  .contact__note,.opt,.cfld__count{color:#b8b8b8}
  .cfld input,.cfld textarea{background:#0d0d0d;color:#f2f2f2;border-color:#555}
  .cfld input::placeholder,.cfld textarea::placeholder{color:#9a9a9a}
  .req,.cfld__err{color:#ff6b66}
  .cfld [aria-invalid=true]{border-color:#ff6b66}
  .contact__aside{background:#141414;border:1px solid #2a2a2a}
}
/* ===== [t91u] admin «رسائل الزوار» ===== */
.inbox{margin-top:1.5rem}
#inboxNavItem[hidden],.inbox[hidden]{display:none!important}
.imsg{display:grid;gap:.15rem;width:100%;text-align:start;font:inherit;color:#111;background:#fff;border:1px solid var(--line);border-radius:10px;padding:.7rem .85rem;margin-bottom:.5rem;cursor:pointer;border:1px solid rgba(255,255,255,.18)}
.imsg:hover{border-color:#7d9bef}.imsg.is-open{border-color:#2c4fb5;box-shadow:0 0 0 2px rgba(67,109,225,.25)}
.imsg--new{border-inline-start:4px solid #c4000a;background:#fffafa}
.imsg__top{display:flex;justify-content:space-between;gap:.5rem;align-items:center}
.imsg__mail{color:#2c4fb5;font-size:.85rem;text-align:end;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imsg__sub{font-weight:900;font-size:.92rem}.imsg__ex{color:#4a4a4a;font-size:.88rem;line-height:1.6}.imsg__date{color:#5c5c5c;font-size:.8rem}
.istat{display:inline-block;border-radius:999px;padding:.05rem .6rem;font-size:.75rem;font-weight:900;background:#eee;color:#333}
.istat--new{background:#fde8e8;color:#9b0008}.istat--read{background:#eef2fd;color:#1f3f9e}.istat--replied{background:#e6f4ea;color:#1e5e2e}
.reply{border-top:1px solid var(--line);padding-top:1rem;margin-top:.4rem}
.reply h4{margin:0 0 .6rem;font-weight:900}
.reply label{display:block;font-weight:700;margin:.6rem 0 .3rem}
.reply select,.reply textarea{width:100%;font:inherit;color:#111;background:#fff;border:1.5px solid #cfcfcf;border-radius:10px;padding:.55rem .75rem}
.reply textarea{line-height:1.8;resize:vertical}
.itoasts{position:fixed;inset-block-end:1rem;inset-inline-start:1rem;z-index:1000;display:grid;gap:.5rem}
.itoast{background:#111;color:#fff;border-inline-start:4px solid #ff0a00;border-radius:10px;padding:.7rem 1rem;box-shadow:0 10px 30px -10px rgba(0,0,0,.5);font-weight:700;max-width:22rem}
@media (prefers-color-scheme:dark){
  #panel .reply select,#panel .reply textarea{color:#111;background:#fbfcfc}
}
/* [t92] mobile nav: no item clipped at rest (inline padding + scroll-padding), opaque «الدول» panel, both themes */
@media (max-width:600px){
  .navbar nav{scroll-padding-inline:.5rem;overscroll-behavior-x:contain}
  .navbar__list{padding-inline:.25rem}
}
.navdd__menu{background:linear-gradient(180deg,#16181f,#0b0c10);-webkit-backdrop-filter:none;backdrop-filter:none;border-color:rgba(255,255,255,.16);box-shadow:0 18px 40px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08)}
@media (prefers-color-scheme:dark){.navdd__menu{background:linear-gradient(180deg,#16181f,#0b0c10)}}
/* [t92] ≤600px: the four nav items fit without scrolling (no clipped item at 320–430px); RSS stays in the footer */
@media (max-width:600px){
  .navbar__rss{display:none}
  .navbar__list{gap:.1rem;justify-content:flex-start}
  .navbar__list a,.navdd__btn{padding-inline:.5rem}
}
@media (max-width:340px){.navbar__list a,.navdd__btn{padding-inline:.4rem;font-size:.95rem}}
/* [t92] small phones: the condensed bar's mini logo would push «الدول» out of view, so it stays hidden ≤400px (logo remains in the masthead) */
@media (max-width:400px){.is-condensed .navbar__mini{max-width:0;opacity:0}}
/* [t94u] «اشترك» page */
.subs{padding-block:2rem 3rem}
/* [t335u] push opt-in card on /subscribe/ (only rendered when the feature flag is on) */
.push [hidden]{display:none!important}
.push{display:flex;gap:.9rem;align-items:flex-start;padding:1rem 1.1rem;margin:0 0 1.4rem;border:1px solid var(--line);border-inline-start:4px solid var(--accent,#b3261e);border-radius:12px;background:var(--card,#fff)}
.push[hidden]{display:none}
.push__icon{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--accent,#b3261e);color:#fff}
.push__txt{min-width:0;flex:1}.push__h{margin:0 0 .2rem}.push__p{margin:.2rem 0 .7rem}
.push__row{display:flex;flex-wrap:wrap;gap:.5rem}.push__msg{margin:.5rem 0 0;min-height:1.2em}
@media (max-width:560px){.push{padding:.85rem .9rem;gap:.7rem}.push__icon{width:34px;height:34px}.push__btn{flex:1 1 auto}}
.subs__grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:1.6rem;align-items:start}
.subs__p{margin:.4rem 0 1rem;color:var(--muted)}
.subs__h2{margin-top:1.2rem}
.subs__steps{margin:.4rem 0 1.2rem;padding-inline-start:1.4rem}.subs__steps li{margin-block:.25rem}
.subs__label{display:block;font-weight:700;margin-bottom:.4rem;color:var(--ink)}
.subs__row{display:flex;gap:.6rem;flex-wrap:wrap}
.subs__url{flex:1 1 240px;min-width:0;font:inherit;font-size:.95rem;padding:.65rem .9rem;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:#fff;color:var(--fg)}
.subs__msg{min-height:1.5em;margin:.4rem 0 0;font-size:.9rem;color:var(--muted)}
.subs__more{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line)}
.subs__h3{font-size:1.05rem}
.subs__countries{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.subs__countries li{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.subs__cname{font-weight:700;min-width:6.5rem}
.subs__url--sm{flex:1 1 200px;padding:.45rem .7rem;font-size:.85rem}
.subs__copy--sm{padding:.45rem 1rem;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:transparent;color:var(--ink);font:inherit;font-weight:700;cursor:pointer;border:1px solid rgba(255,255,255,.18)}
.subs__latest{background:#0b0c10;color:#fff;border-radius:var(--r);padding:1.4rem;border-top:4px solid var(--red)}
.subs__lh{color:#fff;font-size:1.2rem;margin-bottom:.6rem}
.subs__list{list-style:none;margin:0;padding:0}
.subs__list li+li{border-top:1px solid rgba(255,255,255,.14)}
.subs__list a{display:block;padding:.7rem 0}
.subs__list a:hover strong,.subs__list a:focus-visible strong{color:#9db4f5}
.subs__list time{display:block;font-size:.82rem;color:#c4c9d0}
.subs__list strong{display:block;line-height:1.5}
.subs__empty{display:grid;gap:.3rem;padding:1rem;border:1px dashed rgba(255,255,255,.3);border-radius:var(--r-sm);color:#d0d4da}
.subs__empty strong{color:#fff}
.subs__home{display:inline-block;margin-top:1rem;font-weight:700;color:#9db4f5;text-decoration:underline}
@media (max-width:820px){.subs__grid{grid-template-columns:1fr}.subs__copy{flex:1 1 100%}}
@media (prefers-color-scheme:dark){
  .subs__label{color:#f2f2f2}.subs__p,.subs__msg{color:#b8b8b8}
  .subs__url{background:#0d0d0d;color:#f2f2f2;border-color:#555}
  .subs__copy--sm{color:#f2f2f2;border-color:#555}
  .subs__more{border-color:#333}
  .subs__steps{color:#e6e6e6}
}
/* ===== [t96 2026-10-28] audit fixes: spacing, alignment, focus rings ===== */
/* 1. focus/anchor jumps land below the sticky bar (≈57px + margin) */
html{scroll-padding-top:5rem}
/* 3. «الدول» matches the other nav links: same line-height, vertical padding and colour */
.navdd__btn{min-height:0;line-height:1.3;padding-block:.95rem;color:#e7ecef}
@media(max-width:700px){.navdd__btn{padding-block:.85rem}}
.navdd__btn:hover,.navdd__btn:focus-visible{color:#fff}
/* 4. card headlines are line-clamped (overflow:hidden): draw the ring on the heading box, never clipped */
.card__title a:focus-visible{outline:none!important}
.card__title:has(a:focus-visible){outline:2px solid var(--blue-text,#2f56c8);outline-offset:3px;border-radius:2px}
/* 5. the character counter never wraps */
.cfld__count{white-space:nowrap;flex:none}
/* 6. the mobile nav row scrolls (overflow-x): inset focus ring so it is fully visible */
@media(max-width:600px){.navbar nav a:focus-visible,.navbar .navdd__btn:focus-visible{outline-offset:-3px!important}}
/* 7. large headings: line-height ≥ 1.15 */
.sec-banner h1,.sec-tile__body strong{line-height:1.15}
.hero__title,.empty__title{line-height:1.15!important}
/* 8. «الدول» caret: down when closed, up when open */
.navdd__caret{border:0;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(-45deg);transition:transform .2s ease}
.navdd.is-open .navdd__caret{transform:translateY(2px) rotate(135deg)}
@media (prefers-reduced-motion:reduce){.navdd__caret{transition:none}}
/* ===== [t96 2026-10-28] admin audit fixes (local-emulator audit) ===== */
@media(max-width:999px){.app{grid-template-columns:minmax(0,1fr)}.app-side ul{flex-wrap:wrap}}
#inboxNotify{overflow-wrap:normal;word-break:normal;white-space:normal;text-wrap:balance}
/* ===== [t96s511 2026-10-28] admin «رسائل المتابعين»: dark surfaces, spacing, delete dialog ===== */
.imsg--new{border-inline-start:4px solid #436de1;background:#f5f8ff}
.reply{margin-top:1rem}
.imsg:focus-visible,.reply select:focus-visible,.reply textarea:focus-visible{outline:3px solid #436de1;outline-offset:2px}
@media (prefers-color-scheme:dark){
  #inbox .imsg{background:#161618;color:#f2f2f2;border-color:#34343a}
  #inbox .imsg:hover{border-color:#7d9bef}#inbox .imsg.is-open{border-color:#86a2f2;box-shadow:0 0 0 2px rgba(67,109,225,.35)}
  #inbox .imsg--new{background:#131a2e;border-inline-start:4px solid #436de1}
  #inbox .imsg__mail{color:#9db4ff}
  #inbox .imsg__ex{color:#c4c4c8}#inbox .imsg__date{color:#adadb3}
  #inbox .istat{background:#2a2a2e;color:#e6e6e6}#inbox .istat--new{background:#3a0d10;color:#ffb3ae}#inbox .istat--read{background:#16224a;color:#c9d6ff}#inbox .istat--replied{background:#11301b;color:#a8e6b8}
  #panel #inbox .reply select,#panel #inbox .reply textarea{background:#0d0d0f;color:#f2f2f2;border-color:#6e6e6e}
  .imsg:focus-visible,.reply select:focus-visible,.reply textarea:focus-visible{outline-color:#86a2f2}
}
/* [t96s511b] unbreakable date unit; one-line action labels on narrow screens */
#mdDate,.imsg__date{white-space:nowrap}

/* [t101u] article meta + share on narrow screens: date alone on its line, share as a clean wrapping row */
.byline__meta{column-gap:1rem;row-gap:.25rem}
@media (max-width:820px){.article__layout>.share{display:flex!important;flex-wrap:wrap;align-items:center;gap:6px 14px!important;max-width:100%;min-width:0}
 .article__layout>.share .share__label{flex-basis:100%}
 .article__layout>.share .share__btn{border-bottom:0!important;padding:8px 0!important;min-width:0;white-space:nowrap}}

/* [t107u] header search button, topbar links, /search/ page, 404 search, home section tiles without mobile gaps */
.navbar__search{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin-inline-start:auto;color:inherit;border-radius:999px}
.navbar__search+.navbar__rss{margin-inline-start:.5rem}
.navbar__search:hover,.navbar__search[aria-current=page]{color:var(--blue)}
.topbar__note a{color:inherit;text-decoration:none}.topbar__note a:hover{text-decoration:underline}
.searchpage{padding-block:var(--s4) var(--s8);max-width:860px}
.searchpage__h{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:900;margin:0 0 var(--s3)}
.searchbox{display:flex;gap:8px;max-width:640px}
.searchbox input{flex:1;min-width:0;min-height:48px;padding:0 16px;font:inherit;font-size:1.05rem;color:var(--fg);background:var(--paper);border:2px solid var(--hair-strong);border-radius:8px}
.searchbox input:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.searchbox .btn{min-height:48px;padding-inline:22px}
.searchbox--dark{margin:var(--s3) auto;justify-content:center}
.searchbox--dark input{background:#fff;color:#111;border-color:#fff}
.searchpage__status{color:var(--muted2);margin:var(--s3) 0 0;min-height:1.5em}
.sresults{list-style:none;margin:var(--s2) 0 0;padding:0}
.sresult{padding:var(--s3) 0;border-bottom:1px solid var(--hair)}
.sresult__meta{margin:0 0 6px;font-size:.88rem;color:var(--muted2)}
.sresult__title{margin:0;font-size:clamp(1.2rem,2.4vw,1.5rem);font-weight:900;line-height:1.35}
.sresult__title a{color:var(--fg);text-decoration:none}.sresult__title a:hover{text-decoration:underline}
.sresult__dek{margin:8px 0 0;color:var(--muted2);line-height:1.7}
.sresults mark{background:rgba(67,109,225,.18);color:inherit;border-radius:3px;padding:0 2px;box-shadow:inset 0 -2px 0 var(--blue)}
.sempty{padding:var(--s4) 0}.sempty__h{font-size:1.4rem;font-weight:900;margin:0 0 8px}
@media(max-width:760px){.sec-tiles>.sec-tile{padding-block:16px!important}.sec-tile__body{padding:0!important;max-width:none!important;gap:4px!important}.sec-tile .btn{min-height:44px}}
@media print{.navbar__search,.searchbox,.topbar{display:none!important}}

/* [t109u] uploaded images: never stretched. Cards crop with cover around the editor's focal point (object-position is
   inline per image); the article page uses the photo's own proportions (aspect-ratio = w / h) and contain, so a tall
   portrait is letter-boxed on the dark media background instead of being cut or squashed. */
.media--up img{display:block;width:100%;height:100%;object-fit:cover}
.media--native{max-height:min(82vh,900px);margin-inline:auto}
.media--native img{object-fit:contain}
/* [t119u] breaking-news bar: brand red, glass wordmark fixed on the RIGHT, items run LEFT → RIGHT, Al Jazeera */
.breaking{--bk:#ff0a00;position:relative;display:flex;align-items:stretch;background:var(--bk);color:#fff;font-family:var(--ui);min-height:46px;overflow:hidden;box-shadow:inset 0 -1px 0 rgba(0,0,0,.18)}
.breaking[hidden]{display:none}
.breaking__brand{flex:none;display:flex;align-items:center;gap:.6rem;padding-inline:1rem .9rem;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.22));position:relative;z-index:2;box-shadow:-14px 0 18px -6px var(--bk)}
.breaking__brand .logo{width:74px}
.breaking__tag{font-weight:900;font-size:.95rem;letter-spacing:.01em;padding:.1rem .55rem;border-radius:6px;background:#fff;color:var(--bk);line-height:1.5}
.breaking__track{flex:1;min-width:0;overflow:hidden;direction:ltr;display:flex;align-items:center;mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%)}
.breaking__list{list-style:none;margin:0;padding:0;display:flex;width:max-content;animation:breaking-ltr var(--breaking-dur,30s) linear infinite;will-change:transform}
.breaking__list li{direction:rtl;white-space:nowrap;font-size:1rem;font-weight:700;line-height:46px;padding-inline:1.6rem}
.breaking__list li::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.7);vertical-align:middle;margin-inline-start:3.2rem}
.breaking__list b{font-weight:900;margin-inline-end:.35rem}
@keyframes breaking-ltr{from{transform:translateX(-50%)}to{transform:translateX(0)}}
/* [t132u] hover pauses only while the pointer is over the moving track (never latched by the button's hover/focus); the button state is the only sticky pause */
.breaking.is-paused .breaking__list{animation-play-state:paused}
@media (hover:hover){.breaking__track:hover .breaking__list{animation-play-state:paused}}
.breaking__pause{flex:none;width:40px;border:0;background:rgba(0,0,0,.18);color:#fff;cursor:pointer;display:grid;place-items:center;position:relative;z-index:2}
.breaking__pause span{width:10px;height:12px;border-inline:3px solid currentColor}
.breaking.is-paused .breaking__pause span{width:0;height:0;border:0;border-block:6px solid transparent;border-left:10px solid currentColor}
.breaking__pause:focus-visible{outline:3px solid #fff;outline-offset:-5px}
@media (max-width:640px){.breaking{min-height:40px}.breaking__brand{padding-inline:.7rem .6rem;gap:.45rem}.breaking__brand .logo{width:54px}.breaking__tag{font-size:.82rem}.breaking__list li{line-height:40px;font-size:.92rem;padding-inline:1.1rem}}
/* reduced motion: no movement at all; the newest item is shown still, the rest reachable by horizontal scroll */
@media (prefers-reduced-motion:reduce){
  .breaking__list{animation:none;transform:none}
  .breaking__track{overflow-x:auto;direction:rtl;scrollbar-width:none;mask-image:none}
  .breaking__list li[aria-hidden="true"]{display:none}
  .breaking__pause{display:none}
}

/* [t124u 2026-10-28] Official social profiles (Facebook · Instagram · Telegram) — src/components/SocialLinks.astro */
.social{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.social__btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-width:36px;min-height:36px;border-radius:999px;text-decoration:none;font-weight:700;font-size:.88rem;transition:background-color .2s,color .2s,border-color .2s,transform .2s}
.social__btn:focus-visible{outline:2px solid #436de1;outline-offset:2px}
.social__btn svg{flex:none}
.social--top{gap:.25rem;margin-inline-start:auto}
.social--top .social__btn{min-width:30px;min-height:30px;color:#d0d0d0}
.social--top .social__btn:hover{color:#fff;background:rgba(255,255,255,.12)}
.social--footer{flex-direction:column;align-items:flex-start;margin-top:.6rem;gap:.35rem}
.social--footer .social__btn{color:inherit;padding:.15rem .1rem;min-height:32px}
.social--footer .social__btn svg{width:30px;height:30px;padding:6px;border-radius:50%;border:1px solid rgba(255,255,255,.25)}
.social--footer .social__btn:hover svg{background:#fff;color:#000}
/* [footer-social t261u] the unified button-icon size (18px, 0fa3490) beat the 30px ring; with its 6px padding the glyph shrank to 6px. Ring back to 30px. */
.social--footer .social__btn:not(#\#):not(#\#):not(#\#) svg{width:30px;height:30px}
.social--panel .social__btn{border:1px solid currentColor;padding:.4rem .85rem;color:inherit;min-height:40px}
.social--panel .social__btn:not(:has(.social__name)){padding:0;width:40px;height:40px}
.social--panel .social__btn:hover{background:#436de1;border-color:#436de1;color:#fff}
.contact__follow-h{margin-top:1.2rem}
.share__follow{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--hair,rgba(127,127,127,.25))}
@media (prefers-reduced-motion:reduce){.social__btn{transition:none}}
/* [t125u] writer byline — «مقالات» / «تقارير» only */
.writer{margin:.9rem 0 0;font-size:1rem;font-weight:700;color:var(--muted,#6b6b6b)}
.writer__name{color:var(--fg,#111);font-weight:900}
.article__top .writer{color:inherit;opacity:.85}.article__top .writer__name{color:inherit}

/* [t136u] top-bar weather: slot always laid out (no shift), revealed only once filled; own SVG icon set */
.wx{display:inline-flex;align-items:center;gap:.35rem;min-width:4.4em;visibility:hidden;white-space:nowrap}
.wx.is-on{visibility:visible}
.wx .topbar__sep{margin-inline:.15rem .2rem}
.wx__i{display:none;flex:none;color:#fff;opacity:.92}
.wx[data-k=sun] .wx__i--sun{display:block;color:#ffc94d}
.wx[data-k=moon] .wx__i--moon,.wx[data-k=partly] .wx__i--partly,.wx[data-k=partly-night] .wx__i--partly-night,.wx[data-k=cloud] .wx__i--cloud,.wx[data-k=fog] .wx__i--fog,.wx[data-k=rain] .wx__i--rain,.wx[data-k=snow] .wx__i--snow,.wx[data-k=storm] .wx__i--storm{display:block}
.wx__t{color:#fff;font-weight:700;direction:ltr;unicode-bidi:isolate}
.topbar__date{display:inline-flex;align-items:center;flex-wrap:nowrap;white-space:nowrap}
@media(max-width:420px){.topbar__date{font-size:.78rem}.wx{min-width:3.6em;gap:.25rem}}

/* [t136u] «فيديو»: cards, home band, /videos/ and the player (posters always 16:9, cropped to fit, never stretched) */
.vcard{display:flex;flex-direction:column;gap:.7rem;min-width:0}
.vcard__img{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:#111}
.vcard__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.vcard:hover .vcard__img img{transform:scale(1.03)}
.vcard__play{position:absolute;inset-inline-start:.75rem;bottom:.75rem;display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:#ff0a00;color:#fff;box-shadow:0 6px 18px -6px rgba(0,0,0,.6)}

.vcard--big .vcard__play{width:3.6rem;height:3.6rem;inset-inline-start:1.1rem;bottom:1.1rem}
.vcard__body{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.vcard__title{margin:0;font-size:1.02rem;line-height:1.55;font-weight:800;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vcard--big .vcard__title{font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.4;-webkit-line-clamp:4}
.vcard__title a{color:inherit;text-decoration:none}.vcard__title a:hover{text-decoration:underline;text-underline-offset:.2em}
.vcard__dek{margin:0;color:var(--muted);line-height:1.8;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vcard time{font-size:.8rem;color:var(--muted)}
.vhome{background:#000;color:#fff;padding:3rem 0 3.2rem;margin-block:2.5rem}
.vhome .vcard__title,.vhome .vcard__title a{color:#fff}.vhome .vcard time,.vhome .vcard__dek{color:#bdbdbd}
.vhome .kicker{color:#8fa8ff}
.vhome__grid{display:grid;gap:1.6rem}
.vhome__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
@media(min-width:960px){.vhome__grid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}.vhome__list{align-content:start}}
@media(max-width:560px){.vhome__list{grid-template-columns:1fr}.vhome__list .vcard{display:grid;grid-template-columns:42% minmax(0,1fr);gap:.8rem;align-items:start}.vhome__list .vcard__play{width:2rem;height:2rem;inset-inline-start:.45rem;bottom:.45rem}.vhome__list .vcard__title{font-size:.95rem}}
.vpage{padding-block:2rem 3rem}
.vpage__empty{padding:3rem 0;color:var(--muted);text-align:center}
.vfeature{margin-bottom:2rem}
@media(min-width:900px){.vfeature .vcard{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:1.8rem;align-items:center}}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.6rem 1.3rem}
.vdetail__stage{background:#000;padding:1.2rem 0 1.6rem}
.crumbs--dark a,.crumbs--dark span{color:#bdbdbd}
.vplayer{position:relative;aspect-ratio:16/9;max-width:1100px;margin:.8rem auto 0;background:#000;border-radius:14px;overflow:hidden}
.vplayer__go{all:unset;position:absolute;inset:0;cursor:pointer;display:block}
.vplayer__go img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vplayer__go:focus-visible{outline:3px solid #436de1;outline-offset:-3px}
.vplayer__btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:4.6rem;height:4.6rem;border-radius:50%;background:#ff0a00;color:#fff;box-shadow:0 10px 30px -8px rgba(0,0,0,.7);transition:transform .2s}
.vplayer__go:hover .vplayer__btn{transform:translate(-50%,-50%) scale(1.07)}
.vplayer video,.vplayer__frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.vdetail__head{max-width:860px;padding-block:1.6rem 2rem}
.vdetail__head h1{font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1.4;margin:.7rem 0 .4rem;overflow-wrap:anywhere}
.vdetail__meta{color:var(--muted);font-size:.88rem;margin:0 0 1rem}
.vdetail__desc{line-height:1.95;font-size:1.06rem;margin:0 0 1rem}
/* [t136u stress fix] the video band sits directly on the dark world band: one continuous dark area, no white strip */
.vhome:has(+ .band){margin-bottom:0}
.vhome + .band{margin-top:0;border-top:1px solid #1f1f1f}

/* [t137] vertical video: 9:16 player, «ريلز» strip, /videos/ tabs */
.vdetail__stage--portrait{background:radial-gradient(120% 90% at 50% 40%,#1b1f2a 0,#000 70%)}
.vplayer--portrait{aspect-ratio:9/16;width:min(100%,420px,calc((100svh - 9rem) * 9 / 16));max-width:none;box-shadow:0 30px 80px -30px rgba(67,109,225,.45),0 0 0 1px rgba(255,255,255,.06)}
@media(max-width:560px){.vplayer--portrait{width:min(100%,calc((100svh - 7rem) * 9 / 16))}}
.vtabs{display:flex;gap:.5rem;margin:-.5rem 0 1.6rem}
.vtabs a{padding:.45rem 1.1rem;border-radius:999px;border:1px solid var(--line,#ddd);font-weight:700;text-decoration:none;color:inherit}
.vtabs a:hover,.vtabs a:focus-visible{border-color:#436de1;color:#436de1}
.vpage--rest{padding-top:0}
.reels{padding:2.4rem 0 2.8rem}
.reels--dark{background:#000;color:#fff;border-top:1px solid #1f1f1f}
.vhome + .reels--dark{margin-top:0}
.vhome:has(+ .reels){margin-bottom:0}
.reels--dark:has(+ .band){margin-bottom:0}
.reels + .band{margin-top:0}
.reels__head{display:flex;align-items:center;gap:1rem}
.reels__nav{margin-inline-start:auto;display:flex;gap:.5rem}
.reels__nav[hidden]{display:none}
.reels__btn{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;opacity:.85}
.reels__btn:hover:not(:disabled){background:#ff0a00;border-color:#ff0a00;color:#fff;opacity:1}
.reels__btn:disabled{opacity:.3;cursor:default}
.reels__btn:focus-visible{outline:3px solid #436de1;outline-offset:2px}
.reels__row{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(150px,42vw,210px);gap:.9rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:1rem;padding-block:.3rem 1rem;scrollbar-width:thin}
@media(min-width:960px){.reels__row{grid-auto-columns:calc((100% - 4 * .9rem) / 5.4)}}
.reels__item{scroll-snap-align:start;min-width:0}
.reel__link{position:relative;display:block;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#111;color:#fff;text-decoration:none;isolation:isolate}
.reel__link img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s;z-index:-2}
.reel__link::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.85))}
.reel__link:hover img{transform:scale(1.04)}
.reel__link:focus-visible{outline:3px solid #436de1;outline-offset:3px}
.reel__play{position:absolute;top:.6rem;inset-inline-end:.6rem;display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;background:#ff0a00}
.reel__body{position:absolute;inset-inline:0;bottom:0;padding:.8rem;display:flex;flex-direction:column;gap:.25rem}
.reel__kicker{font-size:.72rem;font-weight:700;color:#bcd0ff}
.reels:not(.reels--dark) .reel__link{box-shadow:0 10px 30px -18px rgba(0,0,0,.6)}
.reel__title{margin:0;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);font-size:.92rem;line-height:1.5;font-weight:800;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* [t142u] top bar = one compact row at every width: social icons are one inline cluster (never wrapped/stacked), the date drops
   weekday then year on phones; the weather slot keeps its reserved width. Nav: the collapsed mini logo no longer leaves a flex gap,
   so «الرئيسية» sits flush at the start gutter */
.topbar__in{flex-wrap:nowrap;min-width:0}
.topbar__date{min-width:0;white-space:nowrap}
.social--top{flex-wrap:nowrap;flex:none}
.navbar__mini{margin-inline-end:-1.25rem;transition:max-width .35s var(--ease),opacity .25s,margin .35s var(--ease)}
.is-condensed .navbar__mini{margin-inline-end:0}
@media (max-width:600px){
  .topbar__in{gap:.5rem;min-height:36px}
  .topbar__date{gap:.5rem}
  .tb-wd{display:none}
  .social--top{gap:0}
  .social--top .social__btn{min-width:28px;min-height:28px}
  .navbar__list{padding-inline-start:0}
  .navbar__list>li:first-child>a{padding-inline-start:0}
  .navbar__list>li:first-child>a::after{inset-inline-start:0}
}
@media (max-width:400px){
  .tb-yr{display:none}
  .topbar__date{font-size:.76rem;gap:.4rem}
  .topbar__in{gap:.35rem}
}
@media (max-width:400px){.is-condensed .navbar__mini{margin-inline-end:-1.25rem}}

/* ==== [t160u] masthead glow options — switch with <header class="masthead" data-glow="g1|g2|g3">; no attribute = current glow.
   All static (no animation), pre-softened radial gradients, no filter on large areas. ==== */
/* G1: soft symmetric halo centred behind the wordmark, red (logo side) melting into blue, large radius, low opacity */
.masthead[data-glow="g1"] .wordmark__tile::before{inset:-60% -55% -60% -55%;filter:none;
  background:radial-gradient(closest-side at 62% 50%,rgba(255,10,0,.30),rgba(255,10,0,.12) 45%,rgba(255,10,0,0) 100%),
             radial-gradient(closest-side at 30% 52%,rgba(67,109,225,.38),rgba(67,109,225,.15) 45%,rgba(67,109,225,0) 100%)}
.masthead[data-glow="g1"]::after{box-shadow:var(--gl-rim)!important}
/* G2: studio light-bleed rising from the bottom rule (red under the logo side, blue across) */
.masthead[data-glow="g2"] .wordmark__tile::before{display:none}
.masthead[data-glow="g2"]{background-image:
  radial-gradient(60% 120% at calc(100% - 80px) 100%,rgba(255,10,0,.26),rgba(255,10,0,0) 70%),
  linear-gradient(0deg,rgba(67,109,225,.20),rgba(67,109,225,.06) 35%,rgba(67,109,225,0) 70%)!important}
.masthead[data-glow="g2"]::after{box-shadow:var(--gl-rim),0 -2px 10px rgba(67,109,225,.5)!important}
/* G3: tight rim/backlight hugging the wordmark (drop-shadow on the small logo only) + clean bar */
.masthead[data-glow="g3"] .wordmark__tile::before{display:none}
.masthead[data-glow="g3"] .wordmark__tile .logo{filter:drop-shadow(3px 1px 8px rgba(255,10,0,.7)) drop-shadow(-3px 1px 8px rgba(67,109,225,.7)) drop-shadow(0 0 1px rgba(255,255,255,.4))!important}
.masthead[data-glow="g3"]::after{box-shadow:var(--gl-rim)!important}

/* ==== [t160u] breaking bar wordmark: fully opaque solid white (the glass SVG fades to clear on red), larger, on a dark backing ==== */
.breaking__brand{background:none!important;box-shadow:none!important}
.breaking{background:linear-gradient(270deg,#a80600 0,#c80700 120px,#ff0a00 230px)}
@media (max-width:640px){.breaking{background:linear-gradient(270deg,#a80600 0,#c80700 90px,#ff0a00 175px)}}
.breaking__brand .logo{width:84px;opacity:1!important;background-image:url(/images/brand/logo-horan-solid-white.svg)!important;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))!important}
@media (max-width:640px){.breaking__brand .logo{width:62px}}

/* ==== [t166u] glass sheen utility — the hero's top-edge reflection as one reusable layer.
   Pseudo-element gradient only (no backdrop-filter), above content but faint and confined to the top arc, so text stays AA.
   Off for prefers-reduced-transparency and forced-colors. Hosts must not already use ::after. ==== */
:root{--sheen-a:.30;--sheen-b:.07;--sheen-rim:.55;--sheen-h:170px}
@media (prefers-color-scheme:dark){:root{--sheen-a:.16;--sheen-b:.035;--sheen-rim:.22}}
.card,.sec-card,.vcard,.reel,.rss-card,.contact__card,.contact__aside{isolation:isolate}
.vcard,.reel,.rss-card,.contact__aside{position:relative}
/* [t352u] the glass sheen ::after inherits border-radius: give the wrappers the same radius as their rounded link/media so its rim never shows square corners */
.reel{border-radius:18px}.vcard{border-radius:14px}
.card::after,.sec-card::after,.vcard::after,.reel::after,.rss-card::after,.contact__card::after,.contact__aside::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:radial-gradient(120% 100% at 30% -22%,rgba(255,255,255,var(--sheen-a)),rgba(255,255,255,var(--sheen-b)) 45%,rgba(255,255,255,0) 46%) top/100% var(--sheen-h) no-repeat;
  box-shadow:inset 0 1px 0 rgba(255,255,255,var(--sheen-rim))}
@media (prefers-reduced-transparency:reduce),(forced-colors:active){.card::after,.sec-card::after,.vcard::after,.reel::after,.rss-card::after,.contact__card::after,.contact__aside::after{display:none}}

/* ==== [t175u] premium masthead glow options P1/P2/P3 — <header class="masthead" data-glow="p1|p2|p3">; no attribute = current glow.
   Eased multi-stop radial falloff (near-gaussian, no banding) + a faint self-hosted grain layer for dithering. No filter:blur on large areas.
   Masthead stays black in light and dark mode, so one treatment serves both. Motion: P1 only, 12s, off under prefers-reduced-motion. ==== */
.masthead[data-glow^="p"]{background-color:#000!important}
.masthead[data-glow^="p"] .wordmark__tile::before{filter:none}
/* P1 «Key light»: a wide, very low-opacity studio key light behind the wordmark — warm red core at the logo, cool blue outer falloff — slow breathing; hairline rule */
.masthead[data-glow="p1"]{background-image:url(/images/brand/grain.svg)!important;background-size:160px!important;background-blend-mode:normal}
.masthead[data-glow="p1"]::before{display:none!important}
.masthead[data-glow="p1"] .wordmark__tile::before{inset:-140% -90% -140% -90%;
  background:
   radial-gradient(closest-side at 55% 52%,rgba(255,10,0,.34),rgba(255,10,0,.31) 12%,rgba(255,10,0,.25) 25%,rgba(255,10,0,.17) 38%,rgba(255,10,0,.10) 52%,rgba(255,10,0,.045) 66%,rgba(255,10,0,.015) 82%,rgba(255,10,0,0)),
   radial-gradient(farthest-side at 42% 55%,rgba(67,109,225,.30),rgba(67,109,225,.27) 14%,rgba(67,109,225,.21) 28%,rgba(67,109,225,.14) 42%,rgba(67,109,225,.08) 56%,rgba(67,109,225,.035) 72%,rgba(67,109,225,.01) 88%,rgba(67,109,225,0))}
.masthead[data-glow="p1"] .wordmark__tile::before{opacity:1;animation:p1breathe 12s ease-in-out infinite}
@keyframes p1breathe{0%,100%{opacity:.82}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.masthead[data-glow="p1"] .wordmark__tile::before{animation:none;opacity:.9}}
.masthead[data-glow="p1"]::after{height:2px!important;box-shadow:0 0 6px rgba(67,109,225,.22)!important}

/* P2 «Horizon»: no bloom on the logo; light lives in a precise 1px horizon line on the bottom edge (fades in from both ends, white-hot under the logo, red→blue)
   with a whisper of upward light spill — the restraint of a broadcaster ident */
.masthead[data-glow="p2"] .wordmark__tile::before{display:none}
.masthead[data-glow="p2"]{background-image:
   radial-gradient(55% 90% at calc(100% - 140px) 100%,rgba(255,10,0,.16),rgba(255,10,0,.12) 18%,rgba(255,10,0,.07) 40%,rgba(255,10,0,.03) 62%,rgba(255,10,0,0) 85%),
   radial-gradient(90% 70% at 45% 100%,rgba(67,109,225,.13),rgba(67,109,225,.09) 22%,rgba(67,109,225,.05) 45%,rgba(67,109,225,.02) 68%,rgba(67,109,225,0) 90%),
   url(/images/brand/grain.svg)!important;background-size:auto,auto,160px!important}
.masthead[data-glow="p2"]::after{height:1px!important;
  background:linear-gradient(270deg,rgba(255,10,0,0) 0,#ff0a00 6%,#ffd9d6 calc(140px - 30px),#fff 140px,#dfe6ff calc(140px + 40px),#436de1 30%,rgba(67,109,225,.6) 75%,rgba(67,109,225,0))!important;
  box-shadow:0 0 4px rgba(255,255,255,.25),0 -1px 10px rgba(67,109,225,.18)!important}

/* P3 «Spotlight»: a soft neutral top-down light cone over the wordmark (like a studio spot), with thin red/blue gel edges at the very edges of the cone;
   bottom rule kept as the approved red/blue bar but without neon glow */
.masthead[data-glow="p3"]{background-image:url(/images/brand/grain.svg)!important;background-size:160px!important}
.masthead[data-glow="p3"] .wordmark__tile::before{inset:-120% -70% -60% -70%;
  background:
   radial-gradient(50% 75% at 50% 0%,rgba(255,255,255,.10),rgba(255,255,255,.085) 15%,rgba(255,255,255,.06) 32%,rgba(255,255,255,.035) 50%,rgba(255,255,255,.015) 68%,rgba(255,255,255,0) 88%),
   radial-gradient(30% 60% at 72% 30%,rgba(255,10,0,.14),rgba(255,10,0,.08) 35%,rgba(255,10,0,.03) 65%,rgba(255,10,0,0) 90%),
   radial-gradient(30% 60% at 28% 30%,rgba(67,109,225,.16),rgba(67,109,225,.09) 35%,rgba(67,109,225,.035) 65%,rgba(67,109,225,0) 90%)}
.masthead[data-glow="p3"]::after{box-shadow:var(--gl-rim)!important}

/* [t160u] live layer: just-published article on the 404 route (skeleton until the media Worker answers), new-items pill */
.live-article{display:none}
.is-live-article .live-article{display:block}
.is-live-article .notfound{display:none}
.live-article .sk{display:block;border-radius:6px;background:linear-gradient(90deg,rgba(127,127,127,.14),rgba(127,127,127,.26),rgba(127,127,127,.14));background-size:200% 100%;animation:sk 1.4s ease-in-out infinite}
.live-article .sk--title{height:2.4em;width:88%}
.live-article .sk--line{height:1em;width:100%}
.live-article .sk--short{height:1em;width:55%}
.live-article.is-ready .sk{display:none}
.live-article .media--native img{display:block;width:100%;height:auto}
@keyframes sk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.live-article .sk{animation:none}}
.live-pill{position:fixed;z-index:60;inset-inline:0;margin-inline:auto;bottom:max(1rem,env(safe-area-inset-bottom));width:max-content;max-width:calc(100% - 2rem);display:inline-flex;align-items:center;gap:.55rem;padding:.6rem 1.1rem;border-radius:999px;background:var(--ink);color:#fff;font:inherit;font-size:.95rem;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.25);cursor:pointer;border:1px solid rgba(255,255,255,.18)}
.live-pill[hidden]{display:none}
.live-pill:focus-visible{outline:3px solid #7d9bef;outline-offset:3px}
.live-pill__dot{width:.55rem;height:.55rem;border-radius:50%;background:#ff0a00;box-shadow:0 0 0 3px rgba(255,10,0,.25)}

/* [t161] bk-hint.js: reserve the bar (brand + red band) before items arrive -> no layout shift for returning readers */
.bk-hint .breaking[hidden]{display:flex}
/* [t161] live article without layout shift: while loading, the real fields stay hidden (empty, so nothing visible can
   move) and one absolutely positioned skeleton stands in; the box is at least a screen tall so the footer starts below
   the fold whether the article or the normal 404 ends up showing. Filled content appears instead of pushing anything. */
.is-live-article .live-article{min-height:100vh}
.live-article .article__head{position:relative}
.live-article:not(.is-ready) .article__head>:not(.crumbs):not(.live-sk),.live-article:not(.is-ready) .article__layout,.live-article:not(.is-ready) .article__media{visibility:hidden}
.live-sk{position:absolute;inset-inline:1.25rem;top:3.2rem;display:grid;gap:.9rem}
.live-sk .sk--title{height:2.4em}
.live-article.is-ready .live-sk{display:none}

/* ==== [rounded-buttons] global rule: every control that acts as a button is rounded — no sharp corners anywhere.
   Tokens: --btn-radius (rounded rect, matches --r-sm), --btn-pill (pill). Appended last so it wins over older flat
   (radius 0) rules. Any future button using these selectors is rounded automatically. Guarded by tests/rounded-buttons.test.ts. ==== */
:root{--btn-radius:10px;--btn-pill:999px;--focus-radius:12px}
button,input[type=submit],input[type=button],input[type=reset],input[type=file],select,
.btn,[class*="btn"],a[role=button],[role=button],[role=tab],[role=switch],
.chip,[class*="chip"],.tag,.tags li,.tags a,.pill,[class*="pill"],
.pagination a,.pagination span,.pager a,.share__btn,[class*="share"] a,[class*="share"] button,
.tabs a,.tabs button,[class*="tab"] button,dialog button,dialog menu button{border-radius:var(--btn-radius)!important}
input::file-selector-button{border-radius:var(--btn-radius)!important}
/* pill where the pill style already fits: chips/tags, search/RSS/icon buttons, toggles, pagination numbers */
.chip,[class*="chip"],.pill,[class*="pill"],.tags li,.tags a,[role=switch],.pagination a,.pagination span,.pager a,
.btn--icon,[class*="icon-btn"],[class*="search"] button,a[href$="rss.xml"],a[href*="/rss"]{border-radius:var(--btn-pill)!important}
/* focus rings follow the shape */
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,[role=button]:focus-visible,[role=tab]:focus-visible{border-radius:var(--focus-radius)}
.chip:focus-visible,.pill:focus-visible,[role=switch]:focus-visible,.tags a:focus-visible{border-radius:var(--btn-pill)}

/* ==== [ticker-fix] «آخر الأخبار» strip: always one fixed-height row that scrolls horizontally (incl. prefers-reduced-motion,
   which previously wrapped it into a ~220px vertical list), label pill pinned at the start (RTL), dark band continuing the
   black masthead in both colour schemes (no white slab in light mode). Height is fixed, so no layout shift. ==== */
.strip{background:#000!important;color:#f2f2f2;border-bottom:3px solid var(--red)}
.strip__in{flex-wrap:nowrap!important;height:48px;min-height:48px;max-height:48px}
.strip__label{flex:none!important;order:-1}
.strip__track{min-width:0;flex:1 1 auto;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.strip__track::-webkit-scrollbar{display:none}
.strip__list,
.strip .strip__list{flex-wrap:nowrap!important;white-space:nowrap!important;width:max-content!important;align-items:center}
.strip__list a{color:#f2f2f2}
.strip__list a:hover,.strip__list a:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.strip__list{flex-wrap:nowrap!important;white-space:nowrap!important;width:max-content!important}}
@media (max-width:720px){.strip__in{gap:.6rem;height:44px;min-height:44px;max-height:44px}.strip__label{font-size:.78rem;padding:.25rem .7rem}.strip__list{gap:2rem}.strip__list li{font-size:.88rem}}

/* ==== [contrast-fix] text on glass over images: always legible (WCAG AA) whatever the image brightness, both schemes.
   Dark tinted glass = near-black/navy translucent fill (alpha >= .72) + blur, so white text is read against a dark
   surface even over a white image. The approved sheen (::after highlight + ::before rim) and rounded corners stay.
   Layout: RTL start alignment, consistent padding, label+pill row / title / 2-line summary with ellipsis / date,
   min-width:0 and overflow-wrap so nothing overflows or is clipped at any width. ==== */
:root{--glass-dark:rgba(10,12,22,.74);--glass-dark-strong:rgba(10,12,22,.82);--on-glass:#fff;--on-glass-2:rgba(255,255,255,.88);--on-glass-3:rgba(255,255,255,.78)}
.card--over .glass,.card--over .card__body,.band .glass,.hero--type .hero__lead,.hero--photo .hero__lead{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 45%),var(--glass-dark)!important;
  -webkit-backdrop-filter:blur(18px) saturate(140%)!important;backdrop-filter:blur(18px) saturate(140%)!important;
  color:var(--on-glass)!important;border-radius:22px!important}
@supports (backdrop-filter:url(#glass-lens) blur(1px)) and (not (-webkit-hyphens:none)) and (not (-moz-appearance:none)){
  .hero--type .hero__lead{backdrop-filter:blur(18px) saturate(140%)!important}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card--over .glass,.card--over .card__body,.band .glass,.hero--type .hero__lead,.hero--photo .hero__lead{background:var(--glass-dark-strong)!important}}
/* layout */
.card--over .card__body{box-sizing:border-box;min-width:0;max-width:min(760px,calc(100% - 2.2rem));margin-inline:1.1rem!important;
  padding:clamp(1rem,2.4vw,1.5rem) clamp(1rem,2.6vw,1.6rem)!important;text-align:start;display:flex;flex-direction:column;gap:.55rem;overflow:hidden}
.card--over .card__body>*{min-width:0;max-width:100%;margin:0}
.card--over .card__kick{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;line-height:1.3}
.card--over .card__title,.hero--photo .hero__title,.hero--type .hero__title{overflow-wrap:anywhere;text-wrap:balance}
.card--over .card__dek{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal!important;overflow-wrap:anywhere;text-overflow:ellipsis;max-width:100%}
/* text colours + subtle shadow */
.card--over .card__title,.card--over .card__title a,.band .glass .card__title a,.hero__lead .hero__title,.hero__lead .hero__title a{color:var(--on-glass)!important;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.card--over .card__dek,.band .glass .card__dek,.hero__lead .hero__dek{color:var(--on-glass-2)!important}
.card--over time,.card--over .byline-mini,.card--over .byline-mini *,.band .glass time,.hero__lead time,.hero__lead .byline-mini{color:var(--on-glass-3)!important}
/* label + pills: solid, readable */
.card--over .kicker,.band .glass .kicker{color:#fff!important;background:none!important;font-weight:900}
.card--over .kicker::before,.band .glass .kicker::before{background:#ff0a00}
.card--over .cchip-mini,.band .cchip-mini,.hero .cchip-mini{background:#436de1!important;color:#fff!important;border:1px solid rgba(255,255,255,.22)!important;font-weight:800}
.card--over .kicker--pill,.hero__lead .kicker--pill{background:#d60800!important;color:#fff!important}
/* reels: stronger bottom scrim so titles survive light frames */
.reel__link::after{background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.55) 58%,rgba(0,0,0,.9))!important}
.reel__link{text-shadow:0 1px 2px rgba(0,0,0,.5)}

/* [images-adaptive 2026-10-29] photos in full colour, shown by their own proportions.
   Never grayscale/desaturate — at most a subtle brightness lift on hover. Wide/standard fill the frame (focal-point crop,
   centre-top by default); square/portrait/unknown-size are shown WHOLE (contain) over a blurred copy of themselves, and the
   text panel moves beside (desktop) / below (mobile) instead of covering them. Boxes keep a reserved aspect-ratio (no CLS). */
.media img,.hero__bg img,.reel img,.reel__link img,.vcard img{filter:none!important}
.card:hover .media img:not(.media__bd),.hero:hover .hero__bg img:not(.media__bd){filter:brightness(1.04)!important}
.media .media__img{display:block;object-position:50% 25%}
.media--whole .media__img{position:relative}
.reel img,.vcard img{object-position:50% 20%}
.media--whole .media__bd{position:absolute;inset:-6%;width:112%!important;height:112%!important;max-width:none;object-fit:cover;
  filter:blur(26px) brightness(.62)!important;transform:none!important;pointer-events:none}
.media--whole .media__img{object-fit:contain!important;object-position:50% 50%!important}
.card:hover .media--whole .media__img{transform:none}
/* card that would have put glass over a square/portrait photo: side by side on desktop, stacked on mobile */
.card--over.card--side{display:grid!important;grid-template-columns:minmax(0,1fr);align-content:start;justify-content:stretch}
.card--over.card--side .card__img{position:relative;inset:auto;border-radius:inherit}
.card--over.card--side .card__img .media{height:auto;aspect-ratio:4 / 5!important;max-height:72vh}
.card--over.card--side .card__body{margin:0!important;max-width:none!important;border-radius:0 0 22px 22px!important}
@media (min-width:900px){
  .card--over.card--side.card--big{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:stretch}
  .card--over.card--side.card--big .card__img .media{height:100%;max-height:none;min-height:420px}
  .card--over.card--side.card--big .card__body{align-self:center;margin:1.1rem!important;border-radius:22px!important}
}
/* hero with a square/portrait lead photo: photo whole on the inline-end half, text on the start side; stacked on mobile */
.hero--whole .hero__bg .media__img{width:50%;margin-inline-start:auto}
@media (max-width:899px){
  .hero--whole .hero__bg{position:relative;inset:auto;z-index:0}
  .hero--whole .hero__bg .media{height:auto;aspect-ratio:4 / 5!important;max-height:70vh}
  .hero--whole .hero__bg .media__img{width:100%}
}

/* ===== [home-sections-proto] «الخبر الحيّ» homepage (default homepage). Self-contained block, placed before the glass-buttons block (which must stay last)
    so it merges cleanly with the contrast/adaptive-image work. Text always sits on DARK tinted glass (white text, AA). */
.hs{--hs-r:22px;--hs-r-sm:14px;--hs-glass:rgba(12,14,22,.80);--hs-glass-2:rgba(12,14,22,.64);--hs-edge:rgba(255,255,255,.16);
  --hs-sheen:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 46%);--hs-gap:18px;
  --hs-page:var(--paper);--hs-fg:var(--fg);padding-bottom:40px;font-family:var(--ui)}
.hs a{color:inherit}
.hs-glass{background:var(--hs-sheen),var(--hs-glass);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid var(--hs-edge);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 34px -18px rgba(0,0,0,.6)}
.hs-title{margin:0;font-weight:700;font-size:1.05rem;line-height:1.5;text-align:start;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;padding-block:.06em;overflow-wrap:anywhere}
.hs-title a{text-decoration:none}.hs-title a:hover,.hs-title a:focus-visible{text-decoration:underline;text-underline-offset:.25em}
.hs-dek{margin:.5rem 0 0;color:rgba(255,255,255,.86);line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hs-dek--sm{font-size:.92rem}
.hs-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px;font-size:.8rem}
.hs-kick{display:inline-flex;align-items:center;padding:.22em .9em;border-radius:999px;background:linear-gradient(180deg,#5d82ea,#436de1 55%,#2f56c4);
  color:#fff!important;text-decoration:none;font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.hs-time{color:rgba(255,255,255,.78)}
.hs-chip{display:inline-flex;align-items:center;gap:6px;padding:.22em .8em;border-radius:999px;background:rgba(255,10,0,.16);border:1px solid rgba(255,90,80,.55);color:#fff;font-weight:700}
.hs-chip__dot{width:8px;height:8px;border-radius:50%;background:#ff0a00;box-shadow:0 0 0 0 rgba(255,10,0,.6);animation:hsPulse 1.8s ease-out infinite}
@keyframes hsPulse{to{box-shadow:0 0 0 8px rgba(255,10,0,0)}}
.hs-by{display:flex;align-items:center;gap:6px;margin:.45rem 0 0;font-size:.85rem;color:#c9d6ff;font-weight:700}

/* pictures: reserved ratio, natural colour, never a bad crop */
.hs-pic{position:relative;overflow:hidden;border-radius:inherit;background:#0b0d12;isolation:isolate}
.hs-pic img{position:absolute;inset:0;width:100%;height:100%;filter:none!important}
.hs-pic--cover .hs-pic__img{object-fit:cover}
.hs-pic--contain .hs-pic__img{object-fit:contain}
.hs-pic img.hs-pic__blur{object-fit:cover;filter:blur(24px) saturate(1.2) brightness(.7)!important;transform:scale(1.15);z-index:-1}

/* «ملخّص اللحظة» */
.hs-moment{display:flex;align-items:center;gap:12px;margin-block:18px 16px;padding:8px;border-radius:999px;background:var(--hs-sheen),var(--hs-glass);border:1px solid var(--hs-edge);color:#fff;min-height:52px}
.hs-moment__label{flex:none;display:inline-flex;align-items:center;gap:8px;padding:.5em 1.1em;border-radius:999px;background:linear-gradient(180deg,#ff4a40,#ff0a00 55%,#c20800);font-weight:700;font-size:.9rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.hs-moment__dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:hsPulse 1.8s ease-out infinite}
.hs-moment__list{list-style:none;margin:0;padding:0;display:grid;flex:1;min-width:0}
.hs-moment__list li{grid-area:1/1;min-width:0;opacity:0;transform:translateY(6px);transition:opacity .6s var(--ease),transform .6s var(--ease);visibility:hidden}
.hs-moment__list li.is-on{opacity:1;transform:none;visibility:visible}
.hs-moment__list a{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;font-weight:700;padding-inline:4px 12px;line-height:1.6}
.hs-moment__list time{color:#ffb3ae;margin-inline-end:10px;font-weight:400}

/* lead */
.hs-lead{position:relative;border-radius:calc(var(--hs-r) + 6px);overflow:hidden;box-shadow:0 30px 60px -28px rgba(0,0,0,.55)}
.hs-lead__pic{display:block;border-radius:inherit}
.hs-lead__body{position:absolute;inset-inline-start:22px;inset-block-end:22px;max-width:min(640px,calc(100% - 44px));padding:22px 24px;border-radius:var(--hs-r)}
.hs-lead__title{margin:0;font-size:clamp(1.4rem,2.6vw,2.2rem);line-height:1.4;font-weight:700;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding-block:.06em}
.hs-lead__title a{text-decoration:none}

/* cards */
.hs-card{position:relative;display:flex;flex-direction:column;border-radius:var(--hs-r);overflow:hidden;background:#0b0d12;box-shadow:0 18px 40px -26px rgba(0,0,0,.6);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.hs-card:hover{transform:translateY(-3px);box-shadow:0 26px 50px -24px rgba(0,0,0,.65)}
.hs-card__pic{display:block}
.hs-card__body{position:relative;margin-top:-34px;margin-inline:10px;margin-bottom:10px;padding:14px 16px;border-radius:var(--hs-r-sm);flex:1}

/* bento: importance x recency weighted, aspect-aware */
.hs-bento{list-style:none;margin:var(--hs-gap) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row dense;gap:var(--hs-gap)}
.hs-card--xl{grid-column:span 2;grid-row:span 2}
.hs-card--xl .hs-title{font-size:1.4rem;-webkit-line-clamp:3}
.hs-card--wide{grid-column:span 2}
.hs-card--tall{grid-row:span 2}

/* section blocks */
.hs-sec{margin-top:54px}
.hs-head{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;padding:12px 14px 12px 12px;padding-inline-start:26px;border-radius:999px;margin-bottom:var(--hs-gap);
  background:var(--hs-sheen),var(--hs-glass);border:1px solid var(--hs-edge);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.hs-head__line{position:absolute;inset-inline-start:12px;top:50%;width:5px;height:26px;transform:translateY(-50%);border-radius:999px;background:linear-gradient(180deg,#ff0a00 0 50%,#436de1 50%)}
.hs-head h2{margin:0;font-size:1.35rem;font-weight:700}
.hs-head h2 a{text-decoration:none}
.hs-head p{margin:0;color:rgba(255,255,255,.75);font-size:.9rem;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-more{margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px;padding:.45em 1.2em;border-radius:999px;text-decoration:none;font-weight:700;font-size:.9rem;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);transition:background .2s}
.hs-more::after{content:'←'}
.hs-more:hover,.hs-more:focus-visible{background:#436de1}

.hs-cards{list-style:none;margin:0;padding:0;display:grid;gap:var(--hs-gap)}
.hs-cards--feature{grid-template-columns:1.7fr 1fr;grid-template-rows:repeat(3,auto)}
.hs-cards--feature .hs-card--big{grid-row:1/4}
.hs-cards--feature .hs-card:not(.hs-card--big){flex-direction:row;align-items:stretch}
.hs-cards--feature .hs-card:not(.hs-card--big) .hs-card__pic{flex:0 0 42%}
.hs-cards--feature .hs-card:not(.hs-card--big) .hs-pic{height:100%}
.hs-cards--feature .hs-card:not(.hs-card--big) .hs-card__body{margin:8px;margin-inline-start:-26px;display:flex;flex-direction:column;justify-content:center}
.hs-cards--feature .hs-card--big .hs-title{font-size:1.45rem}
.hs-cards--dossier{grid-template-columns:1.5fr 1fr 1fr}
.hs-cards--rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:2px;padding-bottom:10px;overscroll-behavior-x:contain;scrollbar-width:thin}
.hs-cards--rail>.hs-card{flex:1 0 calc((100% - 3*var(--hs-gap))/3.3);scroll-snap-align:start}

.hs-bulletin{list-style:none;margin:0;padding:16px;border-radius:var(--hs-r);display:grid;grid-template-columns:1fr;gap:2px;align-content:start;
  background:var(--hs-sheen),var(--hs-glass);border:1px solid var(--hs-edge);color:#fff}
.hs-bulletin li{position:relative;padding:10px 0;padding-inline-start:26px;border-bottom:1px solid rgba(255,255,255,.1)}
.hs-bulletin li::before{content:'';position:absolute;inset-inline-start:6px;top:18px;width:10px;height:10px;border-radius:50%;background:#436de1;box-shadow:0 0 0 4px rgba(67,109,225,.25)}
.hs-bulletin li.is-first{padding:0 0 12px;border:0}
.hs-bulletin li.is-first::before{display:none}
.hs-bulletin__pic{display:block;border-radius:var(--hs-r-sm);overflow:hidden;margin-bottom:10px}
.hs-bulletin time{display:block;color:#ffb3ae;font-size:.82rem;margin-bottom:2px}

.hs-writers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--hs-gap)}
.hs-writer{display:flex;gap:16px;align-items:flex-start;padding:18px;border-radius:var(--hs-r);background:var(--hs-sheen),var(--hs-glass);border:1px solid var(--hs-edge);color:#fff}
.hs-writer__pic{flex:0 0 84px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px #436de1,0 0 0 6px rgba(67,109,225,.25)}
.hs-writer .hs-title{font-size:1.1rem}

.hs-sec--video{padding-block:34px 40px;background:radial-gradient(120% 80% at 80% 0,#16244f 0,#05070d 60%);color:#fff;border-radius:calc(var(--hs-r) + 10px);margin-inline:max(8px,calc((100vw - 1320px)/2))}
.hs-vids{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:auto auto;gap:var(--hs-gap)}
.hs-vid--big{grid-row:1/3}
.hs-vid__link{position:relative;display:block;border-radius:var(--hs-r);overflow:hidden;text-decoration:none}
.hs-vid__cap{position:absolute;inset-inline:10px;bottom:10px;padding:10px 14px;border-radius:var(--hs-r-sm)}
.hs-play{position:absolute;top:14px;inset-inline-end:14px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(180deg,#ff4a40,#ff0a00 55%,#c20800);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 20px -6px rgba(255,10,0,.6)}
.hs-play--sm{width:34px;height:34px;top:10px;inset-inline-end:10px}
.hs-reels{list-style:none;margin:var(--hs-gap) 0 0;padding:0 0 8px;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory}
.hs-reels li{flex:0 0 170px;scroll-snap-align:start}
.hs-reel{position:relative;display:block;border-radius:var(--hs-r);overflow:hidden;text-decoration:none;box-shadow:0 0 0 2px rgba(255,10,0,.6)}
.hs-reel__t{position:absolute;inset-inline:0;bottom:0;padding:30px 12px 12px;background:linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,0));font-weight:700;font-size:.88rem;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.hs a:focus-visible{outline:3px solid #8aa6f2;outline-offset:3px;border-radius:12px}

@media (max-width:1000px){
  .hs-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hs-cards--dossier,.hs-writers{grid-template-columns:1fr 1fr}
  .hs-cards--rail>.hs-card{flex-basis:calc((100% - var(--hs-gap))/2.2)}
}
@media (max-width:700px){
  .hs{--hs-gap:14px;--hs-r:18px}
  .hs-moment{border-radius:var(--hs-r)}
  .hs-moment__label{padding:.45em .8em;font-size:.8rem}
  .hs-lead{border-radius:var(--hs-r)}
  .hs-lead__body{position:relative;inset:auto;max-width:none;margin:-48px 10px 10px;padding:16px}
  .hs-lead{background:#0b0d12}
  .hs-bento{grid-template-columns:1fr}
  .hs-card--xl,.hs-card--wide{grid-column:auto;grid-row:auto}
  .hs-card--tall{grid-row:auto}
  .hs-card--xl .hs-title{font-size:1.2rem}
  .hs-cards--feature{grid-template-columns:1fr;grid-template-rows:none}
  .hs-cards--feature .hs-card--big{grid-row:auto}
  .hs-cards--feature .hs-card:not(.hs-card--big) .hs-card__pic{flex-basis:34%}
  .hs-cards--feature .hs-card:not(.hs-card--big) .hs-card__body{flex:1 1 0;min-width:0}
  .hs-chip{white-space:nowrap;font-size:.72rem}
  .hs-cards--feature .hs-card:not(.hs-card--big) .hs-card__pic{min-width:0;overflow:hidden}
  .hs-cards--feature .hs-card:not(.hs-card--big) .hs-pic{aspect-ratio:auto!important;min-height:118px}
  .hs-cards--dossier,.hs-writers{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
  .hs-cards--dossier>li,.hs-writers>li{flex:0 0 82%;scroll-snap-align:start}
  .hs-cards--rail>.hs-card{flex-basis:82%}
  .hs-bulletin{grid-template-columns:1fr;grid-template-rows:none}
  .hs-bulletin li.is-first{grid-row:auto}
  .hs-vids{grid-template-columns:1fr;grid-template-rows:none}
  .hs-vid--big{grid-row:auto}
  .hs-vids:has(li+li){display:flex;overflow-x:auto;scroll-snap-type:x mandatory}
  .hs-vids>li{flex:0 0 88%;scroll-snap-align:start}
  .hs-reels li{flex-basis:140px}
  .hs-head{border-radius:var(--hs-r)}
  .hs-head p{flex-basis:100%;order:3}
  .hs-sec--video{margin-inline:0;border-radius:var(--hs-r)}
}
@media (prefers-reduced-motion:reduce){
  .hs-card,.hs-moment__list li{transition:none}.hs-card:hover{transform:none}
  .hs-chip__dot,.hs-moment__dot{animation:none}
}
/* text on the dark glass stays white in both themes (AA on rgba(12,14,22,.8)) */
html body .hs :is(.hs-glass,.hs-moment,.hs-head,.hs-bulletin,.hs-writer) :is(h2,h3,h4,h2 a,h3 a,h4 a,.hs-head__title){color:#fff}
html body .hs :is(.hs-glass,.hs-bulletin,.hs-writer) p{color:rgba(255,255,255,.86)}
.hs-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--hs-gap,18px);align-items:start}
.hs-pair>.hs-sec{min-width:0}
@media (max-width:900px){.hs-pair{grid-template-columns:1fr}}
/* [home-sections x gb-recipe] section-block controls use the shared inflated-glass recipe (--gb-* tokens above):
   «المزيد» + category pills = blue glass, «ملخّص اللحظة» label / play / «متواصل» chip = red glass. Rounded only, AA ink. */
.hs :is(.hs-more,.hs-kick){--gb-top:var(--gb-blue-top);--gb-mid:var(--gb-blue-mid);--gb-bot:var(--gb-blue-bot);--gb-ink:var(--gb-blue-ink);--gb-glass:var(--gb-blue-glass);--gb-dim:var(--gb-blue-dim)}
.hs :is(.hs-moment__label,.hs-play,.hs-chip){--gb-top:var(--gb-red-top);--gb-mid:var(--gb-red-mid);--gb-bot:var(--gb-red-bot);--gb-ink:var(--gb-red-ink);--gb-glass:var(--gb-red-glass);--gb-dim:var(--gb-red-dim)}
.hs :is(.hs-more,.hs-kick,.hs-moment__label,.hs-play,.hs-chip){
  background:var(--gb-sheen),linear-gradient(180deg,var(--gb-top) 0%,var(--gb-mid) 55%,var(--gb-bot) 100%)!important;
  color:var(--gb-ink)!important;border:0!important;box-shadow:var(--gb-shadow)!important;text-shadow:0 1px 1px rgba(0,0,0,.18);
  transition:box-shadow .18s ease,transform .18s ease,filter .18s ease}
.hs :is(.hs-more,.hs-kick,.hs-moment__label,.hs-chip){border-radius:var(--btn-pill,999px)!important}
.hs .hs-play{border-radius:50%!important}
.hs :is(.hs-more,.hs-kick):hover{box-shadow:var(--gb-shadow-hover)!important;filter:brightness(1.06);transform:translateY(-1px)}
.hs :is(.hs-more,.hs-kick):active{box-shadow:var(--gb-shadow-press)!important;filter:brightness(.97);transform:translateY(1px)}
.hs :is(.hs-more,.hs-kick):focus-visible{outline:none!important;box-shadow:var(--gb-ring),var(--gb-shadow)!important}
.hs-chip__dot{background:#fff}
/* dedupe can leave a section with a single story: let it take the full row instead of leaving an empty column */
.hs-cards--feature:has(>li:only-child),.hs-cards--dossier:has(>li:only-child){grid-template-columns:1fr}
.hs-cards--dossier:has(>li:nth-child(2):last-child){grid-template-columns:1.5fr 1fr}
@media (prefers-reduced-motion:reduce){.hs :is(.hs-more,.hs-kick){transition:none!important;transform:none!important}}
/* ===== /[home-sections-proto] */
/* ==== [masthead-logo-search 2026-10-29] logo at the RTL start, ~12% smaller, fully opaque glass (no bottom fade),
   P3 «Spotlight» kept behind it; glass search field from the logo to the content edge. ==== */
.masthead .masthead__in{justify-content:flex-start;gap:clamp(16px,2.4vw,32px)}
.masthead .wordmark{flex:none}
.masthead .wordmark .logo{width:clamp(132px,15.8vw,202px)!important;
  background:url(/images/brand/logo-horan-glass-solid.svg) center/contain no-repeat!important;aspect-ratio:1068/389!important;
  -webkit-mask:none!important;mask:none!important;opacity:1!important;
  filter:drop-shadow(0 -1px 0 rgba(255,255,255,.55)) drop-shadow(0 2px 1px rgba(0,0,0,.55)) drop-shadow(0 10px 18px rgba(0,0,0,.6))!important}
.masthead:not([data-glow^="p"]) .wordmark__tile::before{display:none}
.mhsearch{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:6px;height:52px;padding:5px;padding-inline-start:20px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 46%,rgba(255,255,255,.02) 54%,rgba(255,255,255,.06) 100%),rgba(18,20,30,.72);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.16),inset 0 -6px 12px -6px rgba(0,0,0,.6),0 10px 26px -14px rgba(0,0,0,.8);
  transition:box-shadow .2s ease}
.mhsearch:focus-within{box-shadow:inset 0 1.5px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(255,255,255,.28),0 0 0 3px rgba(255,255,255,.9),0 0 0 6px #436de1}
.mhsearch__input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:#fff;font:inherit;font-family:var(--ui);font-size:1rem;outline:none;border-radius:999px}
.mhsearch__input::placeholder{color:rgba(255,255,255,.72)}
.mhsearch__input::-webkit-search-cancel-button{-webkit-appearance:none}
.mhsearch__btn{flex:none;width:42px;height:42px;display:grid;place-items:center;border:0;cursor:pointer;border-radius:50%;color:var(--gb-red-ink);
  background:var(--gb-sheen),linear-gradient(180deg,var(--gb-red-top) 0%,var(--gb-red-mid) 55%,var(--gb-red-bot) 100%);box-shadow:var(--gb-shadow)}
.mhsearch__btn:hover{box-shadow:var(--gb-shadow-hover);filter:brightness(1.06)}
.mhsearch__btn:active{box-shadow:var(--gb-shadow-press)}
.mhsearch__btn:focus-visible{outline:none;box-shadow:var(--gb-ring),var(--gb-shadow)}
@media (max-width:640px){
  .masthead .masthead__in{flex-wrap:wrap;row-gap:12px}
  .masthead .wordmark .logo{width:132px!important}
  .mhsearch{flex:1 1 100%;height:46px}
  .mhsearch__btn{width:36px;height:36px}
}
@media print{.mhsearch{display:none}}
/* ==== [t193u masthead-inline] smaller glass logo, visible wordmark text removed (kept visually-hidden for a11y/SEO),
   then a slim divider and the glass search filling the rest: ONE row at every width, vertically centred. ==== */
.masthead .masthead__in{flex-wrap:nowrap!important;align-items:center;gap:clamp(10px,1.8vw,22px)}
.masthead .wordmark{gap:0}
.masthead .wordmark .logo{width:clamp(96px,10.5vw,144px)!important}
.mhdiv{flex:none;width:1px;height:32px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.38) 50%,rgba(255,255,255,0))}
.mhsearch{flex:1 1 auto;min-width:0;height:48px}
@media (max-width:640px){
  .masthead .wordmark .logo{width:84px!important}
  .mhdiv{height:26px}
  .mhsearch{flex:1 1 auto;height:42px;padding:4px;padding-inline-start:14px}
  .mhsearch__btn{width:34px;height:34px}
  .mhsearch__input{font-size:.95rem}
}
@media print{.mhdiv{display:none}}
/* ==== [t193u breaking-glass] breaking bar without the wordmark: soft red glass (thin bright top rim, gentle inner sheen,
   soft depth), rounded and slightly inset; no backdrop blur. Fill kept dark enough for white text >= AA. ==== */
.breaking{margin:8px clamp(8px,1.6vw,20px) 0;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.06) 46%,rgba(255,255,255,0) 54%),
    linear-gradient(270deg,#a80600 0,#c40700 45%,#b60716 80%,#8f0b2a 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.12),inset 0 -6px 12px -6px rgba(0,0,0,.35),0 8px 20px -12px rgba(120,0,0,.6)}
.breaking__brand{padding-inline:.8rem .6rem}
.breaking__tag{border-radius:999px;padding:.12rem .8rem;color:#b30700;
  background:linear-gradient(180deg,#fff 0%,#fff 45%,#f1f2f7 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 4px rgba(0,0,0,.12),0 2px 6px -2px rgba(0,0,0,.35)}
.breaking__pause{border-radius:999px;width:32px;height:32px;align-self:center;margin-inline:6px;background:rgba(0,0,0,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
@media (max-width:640px){.breaking{margin:6px 8px 0;border-radius:14px}.breaking__brand{padding-inline:.6rem .45rem}.breaking__pause{width:28px;height:28px}}

/* [t280u] correction notice at the end of the article body (wording = /corrections/) */
.article__body .correction{margin:2rem 0 1rem;padding:.75rem 1rem;border-inline-start:3px solid #436de1;border-radius:8px;background:#f2f5fd;color:#2a2f36;font-size:.92rem;line-height:1.7}
.article__body .correction p{display:flex;gap:.5rem;align-items:flex-start;margin:0}
.article__body .correction svg{flex:none;width:18px;height:18px;margin-top:.25rem;fill:none;stroke:#436de1;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.article__body .correction a{color:#2c52c0}
@media (prefers-color-scheme:dark){.article__body .correction{background:#151b2b;color:#dfe3ea}.article__body .correction a{color:#9db4ff}}
/* ==== [glass-buttons 2026-10-29] premium "inflated glass" buttons (reference: red circle + pill, t186u).
   Fill = surface hue a touch lighter, thin crisp white rim strongest on top, soft inner top specular sheen,
   inner bottom shadow for depth, soft outer drop shadow, slightly translucent pinkish-white label.
   CSS only: layered gradients + inset/outer box-shadows (no backdrop-filter → cheap on mobile, no pseudo-elements so
   existing icons/::before stay intact). Rounded only. Variants: red (#ff0a00 family), blue (#436de1), neutral glass.
   Label colours are AA (>= 4.5:1) against each variant's mid fill — guarded by tests/glass-buttons.test.ts. ==== */
:root{
  --gb-red-top:#f0261c;--gb-red-mid:#c80700;--gb-red-bot:#a00500;--gb-red-ink:rgba(255,238,240,.96);
  --gb-blue-top:#6189f2;--gb-blue-mid:#3558c8;--gb-blue-bot:#26429f;--gb-blue-ink:rgba(240,245,255,.97);
  --gb-n-top:#ffffff;--gb-n-mid:#eef0f5;--gb-n-bot:#dde1ea;--gb-n-ink:#151826;--gb-n-rim:rgba(20,24,40,.16);
  --gb-sheen:linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.10) 42%,rgba(255,255,255,0) 52%);
  --gb-shadow:inset 0 1.5px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(255,255,255,.30),inset 0 -7px 12px -4px rgba(0,0,0,.30),
    inset 0 10px 16px -10px rgba(255,255,255,.45),0 8px 18px -8px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.25);
  --gb-shadow-hover:inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.40),inset 0 -7px 12px -4px rgba(0,0,0,.26),
    inset 0 10px 16px -10px rgba(255,255,255,.55),0 12px 24px -8px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.25);
  --gb-shadow-press:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.22),inset 0 -2px 6px rgba(0,0,0,.18),
    inset 0 6px 14px rgba(0,0,0,.38),0 3px 8px -4px rgba(0,0,0,.5);
  --gb-ring:0 0 0 3px rgba(255,255,255,.95),0 0 0 6px #436de1;
}
@media (prefers-color-scheme:dark){:root{--gb-n-top:#3a3f52;--gb-n-mid:#23273a;--gb-n-bot:#171a28;--gb-n-ink:rgba(242,244,255,.95);--gb-n-rim:rgba(255,255,255,.18)}}
/* red: primary actions */
.btn,.btn--cta,.btn--red,.btn--danger,.kicker--pill,.live-pill,.navbar .btn,.hero__actions .btn{
  --gb-top:var(--gb-red-top);--gb-mid:var(--gb-red-mid);--gb-bot:var(--gb-red-bot);--gb-ink:var(--gb-red-ink);--gb-glass:var(--gb-red-glass);--gb-dim:var(--gb-red-dim)}
/* blue: secondary/save, country chips, active tabs */
.btn--blue,.up__pick,.cchip,.cchip-mini,.tab.on,.tab[aria-selected=true],.vtabs a[aria-current],.cchip[aria-current],.rss-link{
  --gb-top:var(--gb-blue-top);--gb-mid:var(--gb-blue-mid);--gb-bot:var(--gb-blue-bot);--gb-ink:var(--gb-blue-ink);--gb-glass:var(--gb-blue-glass);--gb-dim:var(--gb-blue-dim)}
/* neutral glass: ghost/outline/light, search, share, tags, tabs, more, icon buttons, admin tab bar */
.btn--ghost,.btn--outline,.btn--light,.btn--outline-light,.navbar__search,.share__btn,.share a,.tags a,.tab,.vtabs a,.tabbar a,.tabbar button,
.icon-btn,.shead__more,.chips>*,#more{
  --gb-top:var(--gb-n-top);--gb-mid:var(--gb-n-mid);--gb-bot:var(--gb-n-bot);--gb-ink:var(--gb-n-ink);--gb-glass:var(--gb-n-glass);--gb-dim:var(--gb-n-dim)}
.tab.on,.tab[aria-selected=true]{--gb-top:var(--gb-blue-top);--gb-mid:var(--gb-blue-mid);--gb-bot:var(--gb-blue-bot);--gb-ink:var(--gb-blue-ink);--gb-glass:var(--gb-blue-glass);--gb-dim:var(--gb-blue-dim)}
#saveBtn,#publishBtn,[id^=publish].btn{--gb-top:var(--gb-blue-top);--gb-mid:var(--gb-blue-mid);--gb-bot:var(--gb-blue-bot);--gb-ink:var(--gb-blue-ink);--gb-glass:var(--gb-blue-glass);--gb-dim:var(--gb-blue-dim)}
.btn--red,[id^=publish].btn--red{--gb-top:var(--gb-red-top);--gb-mid:var(--gb-red-mid);--gb-bot:var(--gb-red-bot);--gb-ink:var(--gb-red-ink);--gb-glass:var(--gb-red-glass);--gb-dim:var(--gb-red-dim)}
:is(.btn,.btn--cta,.btn--red,.btn--blue,.btn--danger,.btn--ghost,.btn--outline,.btn--light,.btn--outline-light,.up__pick,
.kicker--pill,.live-pill,.cchip,.cchip-mini,.rss-link,.navbar__search,.share__btn,.share a,.tags a,.tab,.vtabs a,.tabbar a,.tabbar button,
.icon-btn,.shead__more,.chips>*):not(#\#){
  background:var(--gb-sheen),linear-gradient(180deg,var(--gb-top) 0%,var(--gb-mid) 55%,var(--gb-bot) 100%)!important;
  color:var(--gb-ink)!important;border:0!important;border-color:transparent!important;
  box-shadow:var(--gb-shadow)!important;text-shadow:0 1px 1px rgba(0,0,0,.18);
  transition:box-shadow .18s ease,transform .18s ease,filter .18s ease;-webkit-tap-highlight-color:transparent}
/* neutral rim: on a light fill the white rim needs a faint dark hairline to read */
:is(.btn--ghost,.btn--outline,.btn--light,.btn--outline-light,.navbar__search,.share__btn,.share a,.tags a,.tab:not(.on):not([aria-selected=true]),
.vtabs a:not([aria-current]),.tabbar a,.tabbar button,.icon-btn,.shead__more,.chips>*):not(#\#){
  box-shadow:0 0 0 1px var(--gb-n-rim),var(--gb-shadow)!important;text-shadow:none}
:is(.btn:hover,.btn--cta:hover,.btn--blue:hover,.btn--ghost:hover,.cchip:hover,.cchip-mini:hover,.rss-link:hover,.navbar__search:hover,.share__btn:hover,
.share a:hover,.tags a:hover,.tab:hover,.vtabs a:hover,.tabbar a:hover,.icon-btn:hover,.shead__more:hover,.chips>*:hover):not(#\#){
  box-shadow:var(--gb-shadow-hover)!important;filter:brightness(1.06);transform:translateY(-1px)}
:is(.btn:active,.btn--cta:active,.btn--blue:active,.btn--ghost:active,.cchip:active,.cchip-mini:active,.rss-link:active,.navbar__search:active,.share__btn:active,
.share a:active,.tags a:active,.tab:active,.vtabs a:active,.tabbar a:active,.icon-btn:active,.shead__more:active,.chips>*:active):not(#\#){
  box-shadow:var(--gb-shadow-press)!important;filter:brightness(.97);transform:translateY(1px)}
:is(.btn:focus-visible,.btn--cta:focus-visible,.cchip:focus-visible,.cchip-mini:focus-visible,.rss-link:focus-visible,.navbar__search:focus-visible,
.share__btn:focus-visible,.share a:focus-visible,.tags a:focus-visible,.tab:focus-visible,.vtabs a:focus-visible,.tabbar a:focus-visible,
.icon-btn:focus-visible,.shead__more:focus-visible,.chips>*:focus-visible):not(#\#){outline:none!important;box-shadow:var(--gb-ring),var(--gb-shadow)!important}
/* shapes: pills for actions/chips/tabs, circles for icon-only buttons (rounded-only rule) */
:is(.btn,.btn--cta,.rss-link,.share__btn,.share a,.tab,.vtabs a,.shead__more,.kicker--pill,.live-pill,.cchip,.cchip-mini,.tags a,.chips>*):not(#\#){border-radius:var(--btn-pill,999px)!important}
:is(.navbar__search,.icon-btn):not(#\#){border-radius:50%!important;display:inline-grid;place-items:center;aspect-ratio:1}
.share__btn{padding:.55rem 1.1rem!important;justify-content:center!important;border-bottom:0!important}
.tab,.vtabs a,.rss-link,.shead__more{padding:.45rem 1rem;text-decoration:none}
.tab{margin:0 0 .35rem!important;border-bottom:0!important}
@media (prefers-reduced-motion:reduce){.btn,.tab,.cchip,.share__btn,.navbar__search{transition:none!important;transform:none!important}}
/* [glass-buttons translucent t194u] real glass: semi-transparent tinted fill (35-60% alpha) over a light, small-area
   backdrop blur + saturate; the backdrop is dimmed (brightness = --gb-dim) so the label stays AA over ANY backdrop —
   worst cases (pure white / pure black behind the glass) are computed in tests/glass-buttons.test.ts.
   Only buttons/pills get the blur (never large areas); @supports not / reduced-transparency keep the solid fill. */
:root{--gb-red-glass:rgba(160,5,0,.58);--gb-red-dim:.66;--gb-blue-glass:rgba(30,58,150,.60);--gb-blue-dim:.66;
  --gb-n-glass:rgba(255,255,255,.55);--gb-n-dim:1;--gb-blur:10px}
@media (prefers-color-scheme:dark){:root{--gb-n-glass:rgba(35,39,58,.55);--gb-n-dim:.66}}
@media (max-width:640px){:root{--gb-blur:8px}}
.mhsearch__btn{--gb-glass:var(--gb-red-glass);--gb-dim:var(--gb-red-dim)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  @media not (prefers-reduced-transparency:reduce){
    :is(.btn,.btn--cta,.btn--red,.btn--blue,.btn--danger,.btn--ghost,.btn--outline,.btn--light,.btn--outline-light,.up__pick,
.kicker--pill,.live-pill,.cchip,.cchip-mini,.rss-link,.navbar__search,.share__btn,.share a,.tags a,.tab,.vtabs a,.tabbar a,.tabbar button,
.icon-btn,.shead__more,.chips>*,.hs .hs-more,.hs .hs-kick,.hs .hs-moment__label,.hs .hs-play,.hs .hs-chip,.mhsearch__btn):not(#\#){
      background:var(--gb-sheen),linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 55%,rgba(0,0,0,.10) 100%),var(--gb-glass)!important;
      -webkit-backdrop-filter:blur(var(--gb-blur)) saturate(1.4) brightness(var(--gb-dim));backdrop-filter:blur(var(--gb-blur)) saturate(1.4) brightness(var(--gb-dim))}
  }
}
@media (forced-colors:active){:is(.btn,.btn--cta,.btn--red,.btn--blue,.btn--danger,.btn--ghost,.btn--outline,.btn--light,.btn--outline-light,.up__pick,
.kicker--pill,.live-pill,.cchip,.cchip-mini,.rss-link,.navbar__search,.share__btn,.share a,.tags a,.tab,.vtabs a,.tabbar a,.tabbar button,
.icon-btn,.shead__more,.chips>*,.hs .hs-more,.hs .hs-kick,.hs .hs-moment__label,.hs .hs-play,.hs .hs-chip,.mhsearch__btn){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
/* [t197u reel-card] one consistent reel card everywhere (home «فيديو» + /videos/ «ريلز»): fixed 9:16 media frame with
   width/height fallback (no aspect-ratio dependence), play button inside the frame as a glass circle, chip + title in a
   clean glass area BELOW the frame (never over burned-in poster captions), line clamp on an inner span (no padding on the
   clamped box, so no half line leaks), plain max-height fallback. Row: RTL start, no overflow, empty blocks not rendered. */
.reels__row{direction:rtl;justify-content:start;grid-auto-columns:clamp(148px,40vw,200px);scroll-padding-inline:0;min-width:0;max-width:100%}
.reels__item{min-width:0;width:100%}
.reel{min-width:0}
.reel__link:not(#\#){position:relative;display:flex;flex-direction:column;aspect-ratio:auto;height:auto;overflow:hidden;border-radius:18px;text-decoration:none;color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),rgba(18,22,34,.72);border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 28px -16px rgba(0,0,0,.7);text-shadow:none}
.reel__link:not(#\#)::after{display:none}
.reel__media{position:relative;display:block;width:100%;height:0;padding-top:177.78%;overflow:hidden;border-radius:16px 16px 12px 12px;background:#0b0d12;isolation:isolate}
@supports (aspect-ratio:9/16){.reel__media{height:auto;padding-top:0;aspect-ratio:9/16}}
.reel__media img{position:absolute;inset:0;top:0;left:0;width:100%;height:100%;filter:none!important;transform:none}
.reel__img{object-fit:cover;object-position:50% 30%;z-index:1}
.reel__media--contain .reel__img{object-fit:contain;object-position:50% 50%}
.reel__media img.reel__blur{object-fit:cover;z-index:0;filter:blur(18px) saturate(1.25) brightness(.85)!important;transform:scale(1.2)}
.reel__play:not(#\#){position:absolute;z-index:2;inset:auto;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 55%),rgba(160,5,0,.62);border:1px solid rgba(255,255,255,.5);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.6),inset 0 -6px 12px rgba(0,0,0,.2),0 8px 22px -8px rgba(0,0,0,.7)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.reel__play:not(#\#){-webkit-backdrop-filter:blur(8px) saturate(1.3);backdrop-filter:blur(8px) saturate(1.3)}}
.reel__play svg{margin-inline-start:3px}
[dir=rtl] .reel__play svg,.reel__play svg{transform:none}
.reel__body:not(#\#){position:static;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:10px 12px 12px;text-align:start;background:none}
.reel__kicker:not(#\#){display:inline-block;align-self:flex-start;font-size:.72rem;font-weight:800;line-height:1.6;padding:1px 10px;border-radius:999px;color:#fff;
  background:rgba(30,58,150,.75);border:1px solid rgba(255,255,255,.25)}
.reel__title:not(#\#){margin:0;font-size:.9rem;line-height:1.55;font-weight:800;color:#fff;display:block;overflow:visible;-webkit-line-clamp:unset;text-shadow:none}
.reel__clamp{display:block;max-height:calc(1.55em * 3);overflow:hidden;overflow-wrap:anywhere}
@supports (-webkit-line-clamp:3){.reel__clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;max-height:none}}
.reels:not(.reels--dark):not(.hs-reelrow) .reel__link:not(#\#){background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.5)),rgba(240,242,248,.8);color:#0b0d12;border-color:rgba(0,0,0,.08)}
.reels:not(.reels--dark):not(.hs-reelrow) .reel__title:not(#\#){color:#0b0d12}
.hs-reelrow{padding:0;margin-top:var(--hs-gap,16px);background:none;border:0}
.hs-reelrow .reel__link:not(#\#),.hs-reelrow .reel__title:not(#\#){color:#fff}
.hs-reelrow .reel__link:not(#\#){background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),rgba(18,22,34,.72)}
.vpage--nowide{padding-bottom:0}
.vpage--nowide + .vpage__reels .reels{padding-top:.4rem}
@media (prefers-reduced-transparency:reduce){.reel__play:not(#\#){-webkit-backdrop-filter:none;backdrop-filter:none;background:#a00500}}
/* [t199u smooth] performance pass, look unchanged:
   - motion only on transform/opacity (the pulse dots animated box-shadow = repaint every frame)
   - unseen motion paused (offscreen via IntersectionObserver .is-off, hidden tab .is-hidden-tab)
   - NO content-visibility on home sections (t202u: it re-rendered sections on fast scroll = visible pops)
   - scrolling glass captions (all widths, t202u) use a static pre-tinted gradient instead of a live backdrop blur
     (blur stays on small fixed controls: navbar, buttons); fewer blurred layers composited per frame
   - cross-document view transitions (progressive, CSS-only, CSP-safe), smooth anchors unless reduced motion */
@keyframes rhPulseC{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
.pulse,.live-dot,.hs-chip__dot,.hs-moment__dot{animation-name:rhPulseC!important;box-shadow:none!important}
:is(.breaking,.hs-moment,.hs-chip).is-off :is(.breaking__list,.pulse,.live-dot,.hs-chip__dot,.hs-moment__dot),
.is-off:is(.hs-chip) .hs-chip__dot,.is-hidden-tab :is(.breaking__list,.pulse,.live-dot,.hs-chip__dot,.hs-moment__dot){animation-play-state:paused!important}
.is-hidden-tab .wordmark__tile::before{animation-play-state:paused!important}
@media all{
  .hs-glass{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    background:var(--hs-sheen),linear-gradient(180deg,rgba(12,14,22,.84),rgba(12,14,22,.9))!important}
}
html{-webkit-tap-highlight-color:transparent;text-size-adjust:100%;-webkit-text-size-adjust:100%}
a,button,[role=button],label,summary{touch-action:manipulation}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}@view-transition{navigation:auto}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
/* [t200u] masthead uses the owner's new logo file (logo-main-v4, white on transparent) as-is: same box as the old wordmark
   (width rules copied, height = old 144x52.44 ratio, contain so nothing shifts), no glass filter/mask on it */
.masthead .wordmark .logo-v4{display:block;width:clamp(96px,10.5vw,144px);height:auto;aspect-ratio:144/52.44;object-fit:contain;object-position:center;filter:none;-webkit-mask:none;mask:none}
@media (max-width:640px){.masthead .wordmark .logo-v4{width:84px}}
/* ==== [buttons-v3 t205u] moulded tone-on-tone buttons (reference: redomedia red circle + pill).
   Replaces the old "aqua" look (thick white rim, hard gloss split, saturated navy fill):
   - fill = nearly the surface hue, a touch deeper, with a soft radial inner glow (no gloss line)
   - ~1px specular hairline brightest on the top and bottom edges, fading on the sides (layered 1px insets)
   - deep rounded volume from large blurred insets + soft outer ambient shadow (raised, pillowy)
   - label = soft light tint of the hue, AA (guarded in tests/buttons-v3.test.ts)
   - NO backdrop-filter (static gradients/shadows only → nothing repaints the backdrop while scrolling)
   Variants: graphite (default, dark surfaces), red (primary/CTA, things on red), blue (sparing: save/publish). ==== */
:root{
  --b3-g-hi:#262b3a;--b3-g-lo:#161a25;--b3-g-ink:#e4e7f2;
  --b3-r-hi:#b80d08;--b3-r-lo:#a90a06;--b3-r-ink:#ffe1de;
  --b3-b-hi:#3354bd;--b3-b-lo:#253f96;--b3-b-ink:#e6ecff;
  --b3-rim:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(255,255,255,.20),inset 1px 0 0 rgba(255,255,255,.05),inset -1px 0 0 rgba(255,255,255,.05);
  --b3-vol:inset 0 -12px 20px -10px rgba(0,0,0,.45),inset 0 12px 22px -14px rgba(255,255,255,.16);
  --b3-out:0 10px 22px -12px rgba(0,0,0,.65),0 2px 5px -1px rgba(0,0,0,.30);
  --b3-out-hi:0 16px 28px -12px rgba(0,0,0,.65),0 3px 8px -2px rgba(0,0,0,.30),0 0 18px -6px var(--b3-glow,rgba(255,255,255,.18));
  --b3-press:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.12),inset 0 8px 16px -4px rgba(0,0,0,.50),0 2px 4px -2px rgba(0,0,0,.4);
  --b3-ring:0 0 0 2px rgba(10,12,20,.9),0 0 0 4px rgba(255,255,255,.85)}
:where(.btn,.btn--cta,.btn--red,.btn--blue,.btn--danger,.btn--ghost,.btn--outline,.btn--light,.btn--outline-light,.up__pick,
.kicker--pill,.live-pill,.cchip,.cchip-mini,.rss-link,.navbar__search,.share__btn,.share a,.tags a,.tab,.vtabs a,.tabbar a,.tabbar button,
.icon-btn,.shead__more,.chips>*,#more,.hs .hs-more,.hs .hs-kick,.hs .hs-moment__label,.hs .hs-play,.hs .hs-chip,.mhsearch__btn):not(#\#):not(#\#){
  --b3-hi:var(--b3-g-hi);--b3-lo:var(--b3-g-lo);--b3-ink:var(--b3-g-ink);--b3-glow:rgba(160,175,230,.20);
  background:radial-gradient(120% 85% at 50% 18%,rgba(255,255,255,.10),rgba(255,255,255,0) 62%),linear-gradient(180deg,var(--b3-hi),var(--b3-lo))!important;
  color:var(--b3-ink)!important;border:0!important;text-shadow:none!important;font-weight:600;
  box-shadow:var(--b3-rim),var(--b3-vol),var(--b3-out)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;filter:none;
  transition:box-shadow .2s ease,transform .2s ease}
/* red: primary/CTA + anything sitting on red (breaking bar, live) */
:where(.btn,.btn--cta,.btn--red,.btn--danger,.kicker--pill,.live-pill,.navbar .btn,.hero__actions .btn,.mhsearch__btn,.breaking .btn,.breaking button,.hs .hs-chip,.hs .hs-moment__label,.hs .hs-play):not(#\#):not(#\#){
  --b3-hi:var(--b3-r-hi);--b3-lo:var(--b3-r-lo);--b3-ink:var(--b3-r-ink);--b3-glow:rgba(255,80,60,.35)}
/* graphite: neutral actions, chips («محلي»), tabs, more, share, admin tab bar */
:where(.btn--ghost,.btn--outline,.btn--light,.btn--outline-light,.navbar__search,.share__btn,.share a,.tags a,.tab,.vtabs a,.tabbar a,.tabbar button,
.icon-btn,.shead__more,.chips>*,#more,.hs .hs-more,.hs .hs-kick,.cchip,.cchip-mini,.rss-link,.up__pick):not(#\#):not(#\#){
  --b3-hi:var(--b3-g-hi);--b3-lo:var(--b3-g-lo);--b3-ink:var(--b3-g-ink);--b3-glow:rgba(160,175,230,.20)}
/* blue, sparingly: save/publish, the active tab/chip */
:where(.btn--blue,#saveBtn,#publishBtn,.tab.on,.tab[aria-selected=true],.vtabs a[aria-current],.cchip[aria-current]):not(#\#):not(#\#){
  --b3-hi:var(--b3-b-hi);--b3-lo:var(--b3-b-lo);--b3-ink:var(--b3-b-ink);--b3-glow:rgba(110,150,255,.35)}
.btn--red:not(#\#):not(#\#){--b3-hi:var(--b3-r-hi);--b3-lo:var(--b3-r-lo);--b3-ink:var(--b3-r-ink)}
/* circles: gentle dome highlight */
:where(.navbar__search,.icon-btn,.mhsearch__btn,.hs .hs-play):not(#\#):not(#\#){
  background:radial-gradient(70% 60% at 50% 22%,rgba(255,255,255,.20),rgba(255,255,255,0) 70%),linear-gradient(180deg,var(--b3-hi),var(--b3-lo))!important}
:where(.btn,.btn--cta,.btn--blue,.btn--ghost,.cchip,.cchip-mini,.rss-link,.navbar__search,.share__btn,.share a,.tags a,.tab,.vtabs a,.tabbar a,.tabbar button,.icon-btn,.shead__more,.chips>*,#more,.hs .hs-more,.hs .hs-play,.mhsearch__btn):hover:not(#\#):not(#\#){
  box-shadow:var(--b3-rim),var(--b3-vol),var(--b3-out-hi)!important;transform:translateY(-1px);filter:none}
:where(.btn,.btn--cta,.btn--blue,.btn--ghost,.cchip,.cchip-mini,.rss-link,.navbar__search,.share__btn,.share a,.tags a,.tab,.vtabs a,.tabbar a,.tabbar button,.icon-btn,.shead__more,.chips>*,#more,.hs .hs-more,.hs .hs-play,.mhsearch__btn):active:not(#\#):not(#\#){
  box-shadow:var(--b3-press)!important;transform:translateY(1px);filter:none}
:where(.btn,.btn--cta,.btn--blue,.btn--ghost,.cchip,.cchip-mini,.rss-link,.navbar__search,.share__btn,.share a,.tags a,.tab,.vtabs a,.tabbar a,.tabbar button,.icon-btn,.shead__more,.chips>*,#more,.hs .hs-more,.hs .hs-play,.mhsearch__btn):focus-visible:not(#\#):not(#\#){
  outline:none!important;box-shadow:var(--b3-ring),var(--b3-rim),var(--b3-vol)!important}
input[type=file]::file-selector-button{--b3-hi:#262b3a;--b3-lo:#161a25;background:radial-gradient(120% 85% at 50% 18%,rgba(255,255,255,.10),rgba(255,255,255,0) 62%),linear-gradient(180deg,#262b3a,#161a25)!important;color:#e4e7f2!important;border:0!important;border-radius:999px!important;box-shadow:var(--b3-rim),var(--b3-vol),var(--b3-out)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
@media (prefers-reduced-motion:reduce){:where(.btn,.tab,.cchip,.share__btn,.navbar__search,.icon-btn,.mhsearch__btn,.hs .hs-more,#more):not(#\#):not(#\#){transition:none!important;transform:none!important}}
@media (forced-colors:active){:where(.btn,.tab,.cchip,.icon-btn,.mhsearch__btn,.share__btn):not(#\#):not(#\#){border:1px solid ButtonText!important;box-shadow:none!important}}
/* ==== [buttons-v4 t206u] jelly/soft-glass pills matched to the redomedia red reference (overrides v3 above).
   Same hue as the surface, rich + convex: gradient-border specular rim (bright top, fading at the sides),
   wide inner top glow, darker inner bottom, faint bottom rim reflection, deep same-hue drop shadow,
   large medium-weight tinted label with a faint text shadow. No backdrop-filter. AA guarded in tests/buttons-v4.test.ts.
   Variants: graphite (default/dark surfaces), red (things on red, CTA), blue #436de1 family (primary/active). ==== */
:root{
  --b4-g-hi:#3a3f4c;--b4-g-lo:#1b1e26;--b4-g-ink:#ffffff;--b4-g-sh:rgba(0,0,0,.6);
  --b4-r-hi:#b5111a;--b4-r-lo:#a50e15;--b4-r-ink:#ffffff;--b4-r-sh:rgba(90,0,4,.7);
  --b4-b-hi:#3254c2;--b4-b-lo:#22399a;--b4-b-ink:#ffffff;--b4-b-sh:rgba(10,25,90,.7);--b4-b-top:#436de1;
  --b4-rimg:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.28) 30%,rgba(255,255,255,.06) 55%,rgba(255,255,255,.30));
  --b4-in:inset 0 1px 0 rgba(255,255,255,.62),inset 0 9px 12px -7px rgba(0,0,0,.22),inset 0 -12px 16px -8px rgba(255,255,255,.14),inset 0 -2px 2px -1px rgba(255,255,255,.30),0 0 0 1px rgba(40,0,4,.22);
  --b4-press:inset 0 1px 0 rgba(255,255,255,.3),inset 0 10px 18px -6px rgba(0,0,0,.45),inset 0 -2px 2px -1px rgba(255,255,255,.15)}
:where(.btn,.btn--cta,.btn--red,.btn--blue,.btn--danger,.btn--ghost,.btn--outline,.btn--light,.btn--outline-light,.up__pick,
.kicker--pill,.live-pill,.cchip,.cchip-mini,.rss-link,.navbar__search,.share__btn,.share a,.tags a,.tab,.vtabs a,.tabbar a,.tabbar button,
.icon-btn,.shead__more,.chips>*,#more,.hs .hs-more,.hs .hs-kick,.hs .hs-moment__label,.hs .hs-play,.hs .hs-chip,.mhsearch__btn):not(#\#):not(#\#){
  --b4-hi:var(--b4-g-hi);--b4-lo:var(--b4-g-lo);--b4-ink:var(--b4-g-ink);--b4-sh:var(--b4-g-sh);--b4-top:var(--b4-g-hi)}
:where(.btn,.btn--cta,.btn--red,.btn--danger,.kicker--pill,.live-pill,.navbar .btn,.hero__actions .btn,.mhsearch__btn,.breaking .btn,.breaking button,.hs .hs-chip,.hs .hs-moment__label,.hs .hs-play):not(#\#):not(#\#){
  --b4-hi:var(--b4-r-hi);--b4-lo:var(--b4-r-lo);--b4-ink:var(--b4-r-ink);--b4-sh:var(--b4-r-sh);--b4-top:#e0262c}
:where(.btn--ghost,.btn--outline,.btn--light,.btn--outline-light,.navbar__search,.share__btn,.share a,.tags a,.tab,.vtabs a,.tabbar a,.tabbar button,
.icon-btn,.shead__more,.chips>*,#more,.hs .hs-more,.hs .hs-kick,.cchip,.cchip-mini,.rss-link,.up__pick):not(#\#):not(#\#){
  --b4-hi:var(--b4-g-hi);--b4-lo:var(--b4-g-lo);--b4-ink:var(--b4-g-ink);--b4-sh:var(--b4-g-sh);--b4-top:#4c5262}
:where(.btn--blue,#saveBtn,#publishBtn,.tab.on,.tab[aria-selected=true],.vtabs a[aria-current],.cchip[aria-current]):not(#\#):not(#\#){
  --b4-hi:var(--b4-b-hi);--b4-lo:var(--b4-b-lo);--b4-ink:var(--b4-b-ink);--b4-sh:var(--b4-b-sh);--b4-top:var(--b4-b-top)}
.btn--red:not(#\#):not(#\#){--b4-hi:var(--b4-r-hi);--b4-lo:var(--b4-r-lo);--b4-ink:var(--b4-r-ink);--b4-sh:var(--b4-r-sh);--b4-top:#e0262c}
:where(.btn,.btn--cta,.btn--red,.btn--blue,.btn--danger,.btn--ghost,.btn--outline,.btn--light,.btn--outline-light,.up__pick,
.kicker--pill,.live-pill,.cchip,.cchip-mini,.rss-link,.navbar__search,.share__btn,.share a,.tags a,.tab,.vtabs a,.tabbar a,.tabbar button,
.icon-btn,.shead__more,.chips>*,#more,.hs .hs-more,.hs .hs-kick,.hs .hs-moment__label,.hs .hs-play,.hs .hs-chip,.mhsearch__btn):not(#\#):not(#\#){
  border:1px solid transparent!important;border-radius:999px!important;
  background:
    radial-gradient(80% 50% at 50% 8%,rgba(255,255,255,.10),transparent 75%) padding-box,
    radial-gradient(75% 55% at 50% 110%,color-mix(in srgb,var(--b4-top) 70%,#fff 12%),transparent 72%) padding-box,
    linear-gradient(180deg,var(--b4-lo) 0%,var(--b4-hi) 45%,var(--b4-hi) 100%) padding-box,
    var(--b4-rimg) border-box,linear-gradient(180deg,var(--b4-hi),var(--b4-lo)) border-box!important;
  color:var(--b4-ink)!important;font-weight:500;text-shadow:0 1px 1px rgba(0,0,0,.22)!important;
  box-shadow:var(--b4-in),0 14px 22px -10px var(--b4-sh),0 4px 8px -3px rgba(0,0,0,.35)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;filter:none;transition:box-shadow .2s ease,transform .2s ease}
/* generous sizes: main 46px, chips 38px, mini 34px, circles 44px */
:where(.btn,.btn--cta,.btn--red,.btn--blue,.btn--danger,.btn--ghost,.btn--outline,.btn--light,.btn--outline-light,#more,.hs .hs-more,.up__pick):not(#\#):not(#\#){min-height:46px;padding-inline:24px;font-size:16px}
:where(.cchip,.tab,.vtabs a,.tags a,.chips>*,.shead__more,.rss-link,.share__btn,.share a,.tabbar a,.tabbar button):not(#\#):not(#\#){min-height:38px;padding-inline:16px;font-size:15px}
:where(.cchip-mini):not(#\#):not(#\#){min-height:34px;padding-inline:14px}
:where(.navbar__search,.icon-btn,.mhsearch__btn,.hs .hs-play):not(#\#):not(#\#){min-width:44px;min-height:44px}
:where(.btn,.btn--cta,.btn--blue,.btn--ghost,.cchip,.cchip-mini,.rss-link,.navbar__search,.share__btn,.share a,.tags a,.tab,.vtabs a,.tabbar a,.tabbar button,.icon-btn,.shead__more,.chips>*,#more,.hs .hs-more,.hs .hs-play,.mhsearch__btn):hover:not(#\#):not(#\#){
  box-shadow:var(--b4-in),0 18px 28px -10px var(--b4-sh),0 5px 10px -3px rgba(0,0,0,.35)!important;transform:translateY(-1px)}
:where(.btn,.btn--cta,.btn--blue,.btn--ghost,.cchip,.cchip-mini,.rss-link,.navbar__search,.share__btn,.share a,.tags a,.tab,.vtabs a,.tabbar a,.tabbar button,.icon-btn,.shead__more,.chips>*,#more,.hs .hs-more,.hs .hs-play,.mhsearch__btn):active:not(#\#):not(#\#){
  box-shadow:var(--b4-press),0 4px 8px -4px var(--b4-sh)!important;transform:translateY(1px)}
:where(.btn,.btn--cta,.btn--blue,.btn--ghost,.cchip,.cchip-mini,.rss-link,.navbar__search,.share__btn,.share a,.tags a,.tab,.vtabs a,.tabbar a,.tabbar button,.icon-btn,.shead__more,.chips>*,#more,.hs .hs-more,.hs .hs-play,.mhsearch__btn):focus-visible:not(#\#):not(#\#){
  outline:none!important;box-shadow:var(--b3-ring),var(--b4-in)!important}
input[type=file]::file-selector-button{min-height:40px;padding-inline:16px;border:1px solid transparent!important;background:radial-gradient(85% 75% at 50% 0%,#6a7080,transparent 72%) padding-box,linear-gradient(180deg,#4c5262,#3a3f4c 38%,#1b1e26) padding-box,var(--b4-rimg) border-box,linear-gradient(180deg,#3a3f4c,#1b1e26) border-box!important;color:#fff!important;box-shadow:var(--b4-in),0 10px 18px -10px rgba(0,0,0,.6)!important}
@media (prefers-reduced-motion:reduce){:where(.btn,.tab,.cchip,.share__btn,.navbar__search,.icon-btn,.mhsearch__btn,.hs .hs-more,#more):not(#\#):not(#\#){transition:none!important;transform:none!important}}
@media (forced-colors:active){:where(.btn,.tab,.cchip,.icon-btn,.mhsearch__btn,.share__btn):not(#\#):not(#\#){border:1px solid ButtonText!important;box-shadow:none!important;background:ButtonFace!important}}

/* ==== [buttons-v7 t210u] literal redomedia match (pixels sampled from the full-size reference, redomedia-ref-full.jpg).
   Pill: deep same-hue frosted body (#af1515-ish over the red surface) held flat through the label zone 18-64%,
   lifting to a lighter glow at the bottom; thin crisp white specular rim (inset shadows, so the translucent body never shows a rim layer behind it) (brightest top and bottom, faint at the sides);
   a darker groove hugging the outline + soft halo (no heavy drop shadow); inner dark shadow under the top rim; inner bottom glow.
   Circle: lens body ~ surface red with a pink glow pooling in the lower half. Label + icons: white #fff (t211u).
   Body = hue at --b4-glass-a (72%) alpha + backdrop blur/saturate (frosted, translucent). No backdrop-filter -> solid v4 above.
   Contrast (all labels, every size class, AA 4.5:1) is measured in the label zone over real surfaces in tests/buttons-v4.test.ts. ==== */
:root{--b4-glass-a:72%;--b4-blur:blur(16px) saturate(170%)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
:root{
  --b4-r-lo:#9a1512;--b4-r-hi:#e93848;--b4-r-ink:#ffffff;--b4-r-sh:rgba(70,0,6,.30);
  --b4-g-lo:#22252e;--b4-g-hi:#4a5060;--b4-g-sh:rgba(0,0,0,.30);
  --b4-b-lo:#2a46b0;--b4-b-hi:#4f78e8;--b4-b-sh:rgba(10,25,90,.30);
  --b4-rimg:linear-gradient(180deg,rgba(255,242,246,.95),rgba(255,255,255,.42) 22%,rgba(255,255,255,.14) 50%,rgba(255,255,255,.42) 78%,rgba(255,250,244,1));
  --b4-in:inset 0 1px 0 rgba(255,242,246,.95),inset 0 -1px 0 #fffaf4,inset 0 0 0 1px rgba(255,255,255,.12),inset 0 7px 7px -5px rgba(30,0,4,.55),inset 0 -7px 10px -6px rgba(255,110,130,.32),0 0 0 1px rgba(70,0,6,.38),0 2px 4px 0 rgba(50,0,4,.3),0 -1px 3px 0 rgba(50,0,4,.18);
  --b4-press:inset 0 0 0 1px rgba(255,255,255,.35),inset 0 8px 12px -6px rgba(20,0,2,.6),inset 0 -4px 8px -6px rgba(255,190,200,.25),0 0 0 1px rgba(60,0,6,.5)}
:where(.btn,.btn--cta,.btn--red,.btn--blue,.btn--danger,.btn--ghost,.btn--outline,.btn--light,.btn--outline-light,.up__pick,
.kicker--pill,.live-pill,.cchip,.cchip-mini,.rss-link,.navbar__search,.share__btn,.share a,.tags a,.tab,.vtabs a,
.icon-btn,.shead__more,.chips>*,#more,.hs .hs-more,.hs .hs-kick,.hs .hs-moment__label,.hs .hs-play,.hs .hs-chip,.mhsearch__btn):not(#\#):not(#\#){
  background:
    radial-gradient(70% 45% at 50% 104%,color-mix(in srgb,var(--b4-hi) 55%,transparent),transparent 75%) border-box,
    linear-gradient(180deg,color-mix(in srgb,color-mix(in srgb,var(--b4-lo) 78%,var(--b4-hi)) var(--b4-glass-a),transparent) 0%,color-mix(in srgb,var(--b4-lo) var(--b4-glass-a),transparent) 18%,color-mix(in srgb,var(--b4-lo) var(--b4-glass-a),transparent) 64%,color-mix(in srgb,color-mix(in srgb,var(--b4-lo) 45%,var(--b4-hi)) var(--b4-glass-a),transparent) 84%,color-mix(in srgb,var(--b4-hi) var(--b4-glass-a),transparent) 100%) border-box!important;
  font-weight:500;text-shadow:0 1px 1px color-mix(in srgb,var(--b4-lo) 60%,#000)!important;
  box-shadow:var(--b4-in)!important;
  -webkit-backdrop-filter:var(--b4-blur)!important;backdrop-filter:var(--b4-blur)!important}
/* circles: convex lens, body ~ the surface, pink glow pooling in the lower half */
:where(.navbar__search,.icon-btn,.mhsearch__btn,.hs .hs-play):not(#\#):not(#\#){
  background:
    radial-gradient(80% 62% at 50% 100%,color-mix(in srgb,var(--b4-hi) 45%,rgba(255,200,215,.85)),transparent 78%) border-box,
    linear-gradient(180deg,color-mix(in srgb,color-mix(in srgb,var(--b4-lo) 40%,var(--b4-hi)) var(--b4-glass-a),transparent) 0%,color-mix(in srgb,color-mix(in srgb,var(--b4-lo) 30%,var(--b4-hi)) var(--b4-glass-a),transparent) 55%,color-mix(in srgb,var(--b4-hi) var(--b4-glass-a),transparent) 100%) border-box!important}
input[type=file]::file-selector-button{background:linear-gradient(180deg,rgba(34,37,46,.72) 18%,rgba(34,37,46,.72) 64%,rgba(74,80,96,.72)) border-box!important;box-shadow:var(--b4-in)!important;-webkit-backdrop-filter:var(--b4-blur);backdrop-filter:var(--b4-blur)}
}
@media (forced-colors:active){:where(.btn,.tab,.cchip,.icon-btn,.mhsearch__btn,.share__btn):not(#\#):not(#\#){background:ButtonFace!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
/* ==== [buttons-v8 t235u] «جيلي فاخر» (direction B, t233-t235): solid translucent-looking jelly, NO backdrop-filter.
   Body: radial core (c1 -> c2 -> c3) + soft light pooling inside the bottom edge; clean soft glass sheen = one diffuse radial
   highlight over the upper part fading smoothly (no hard split, no bubble); fine 1px specular hairline on the top edge fading at the ends;
   thin inner refraction ring; white crisp labels (#fff, light shadow). Shadows short (list-friendly). Overrides v4/v7 above, which stay
   for reference. Bottom tab bars and nav bars are never listed.
   Blue family = brand blue #436de1 jelly (mockup btn-b-final-t235; core lifted from #5a82f2 to #436de1 for AA white labels).
   [t241u] only the separate blue gradient-scale proposal was cancelled; brand-blue buttons stay blue. ==== */
:root{
  --b8-r-c1:#ec2219;--b8-r-c2:#b80903;--b8-r-c3:#700200;--b8-r-pool:255,95,80;--b8-r-rim:255,200,190;--b8-r-sh:200,10,0;--b8-r-ink:#ffffff;
  --b8-b-c1:#436de1;--b8-b-c2:#3a62d4;--b8-b-c3:#1f3d99;--b8-b-pool:150,185,255;--b8-b-rim:210,225,255;--b8-b-sh:40,80,210;--b8-b-ink:#ffffff;
  --b8-g-c1:#3a3d45;--b8-g-c2:#25282e;--b8-g-c3:#121317;--b8-g-pool:150,150,165;--b8-g-rim:255,255,255;--b8-g-sh:0,0,0;--b8-g-ink:#ffffff;
  --b8-sheen:radial-gradient(120% 70% at 50% -10%,rgba(255,255,255,.26) 0,rgba(255,255,255,.10) 40%,rgba(255,255,255,0) 72%);
  --b8-hair:linear-gradient(90deg,rgba(255,255,255,0) 16%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 84%)}
:where(.btn,.btn--cta,.btn--red,.btn--blue,.btn--danger,.btn--ghost,.btn--outline,.btn--light,.btn--outline-light,.up__pick,
.kicker--pill,.live-pill,.cchip,.cchip-mini,.rss-link,.navbar__search,.share__btn,.share a,.tags a,.tab,.vtabs a,
.icon-btn,.shead__more,.chips>*,#more,.hs .hs-more,.hs .hs-kick,.hs .hs-moment__label,.hs .hs-play,.hs .hs-chip,.mhsearch__btn):not(#\#):not(#\#){
  --c1:var(--b8-g-c1);--c2:var(--b8-g-c2);--c3:var(--b8-g-c3);--pool:var(--b8-g-pool);--rim:var(--b8-g-rim);--sh:var(--b8-g-sh);--ink:var(--b8-g-ink)}
:where(.btn,.btn--cta,.btn--red,.btn--danger,.kicker--pill,.live-pill,.navbar .btn,.hero__actions .btn,.mhsearch__btn,.breaking .btn,.breaking button,.hs .hs-chip,.hs .hs-moment__label,.hs .hs-play):not(#\#):not(#\#){
  --c1:var(--b8-r-c1);--c2:var(--b8-r-c2);--c3:var(--b8-r-c3);--pool:var(--b8-r-pool);--rim:var(--b8-r-rim);--sh:var(--b8-r-sh);--ink:var(--b8-r-ink)}
:where(.btn--ghost,.btn--outline,.btn--light,.btn--outline-light,.navbar__search,.share__btn,.share a,.tags a,.tab,.vtabs a,
.icon-btn,.shead__more,.chips>*,#more,.hs .hs-more,.hs .hs-kick,.cchip,.cchip-mini,.rss-link,.up__pick):not(#\#):not(#\#){
  --c1:var(--b8-g-c1);--c2:var(--b8-g-c2);--c3:var(--b8-g-c3);--pool:var(--b8-g-pool);--rim:var(--b8-g-rim);--sh:var(--b8-g-sh);--ink:var(--b8-g-ink)}
:where(.btn--blue,#saveBtn,#publishBtn,.tab.on,.tab[aria-selected=true],.vtabs a[aria-current],.cchip[aria-current],.contact__send):not(#\#):not(#\#){
  --c1:var(--b8-b-c1);--c2:var(--b8-b-c2);--c3:var(--b8-b-c3);--pool:var(--b8-b-pool);--rim:var(--b8-b-rim);--sh:var(--b8-b-sh);--ink:var(--b8-b-ink)}
.btn--red:not(#\#):not(#\#){--c1:var(--b8-r-c1);--c2:var(--b8-r-c2);--c3:var(--b8-r-c3);--pool:var(--b8-r-pool);--rim:var(--b8-r-rim);--sh:var(--b8-r-sh);--ink:var(--b8-r-ink)}
:where(.btn,.btn--cta,.btn--red,.btn--blue,.btn--danger,.btn--ghost,.btn--outline,.btn--light,.btn--outline-light,.up__pick,
.kicker--pill,.live-pill,.cchip,.cchip-mini,.rss-link,.navbar__search,.share__btn,.share a,.tags a,.tab,.vtabs a,
.icon-btn,.shead__more,.chips>*,#more,.hs .hs-more,.hs .hs-kick,.hs .hs-moment__label,.hs .hs-play,.hs .hs-chip,.mhsearch__btn):not(#\#):not(#\#){
  border:0!important;
  background:
    var(--b8-hair) 50% 0/100% 1px no-repeat border-box,
    var(--b8-sheen) border-box,
    radial-gradient(70% 55% at 50% 100%,rgba(var(--pool),.8) 0,rgba(var(--pool),0) 70%) border-box,
    radial-gradient(80% 90% at 50% 30%,var(--c1) 0,var(--c2) 55%,var(--c3) 100%) border-box!important;
  color:var(--ink)!important;-webkit-text-fill-color:var(--ink);text-shadow:0 1px 1.5px rgba(0,0,0,.35)!important;
  --b8-in:inset 0 1px 0 rgba(255,255,255,.8),inset 0 0 0 1px rgba(var(--rim),.32),inset 0 0 0 3px rgba(0,0,0,.12),inset 0 -1.5px 0 rgba(var(--rim),.55);
  box-shadow:var(--b8-in),0 1px 2px rgba(0,0,0,.2),0 8px 14px -8px rgba(var(--sh),.55)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;transition:box-shadow .2s ease,transform .2s ease}
:where(.btn,.btn--cta,.btn--blue,.btn--ghost,.cchip,.cchip-mini,.rss-link,.navbar__search,.share__btn,.share a,.tags a,.tab,.vtabs a,.icon-btn,.shead__more,.chips>*,#more,.hs .hs-more,.hs .hs-play,.mhsearch__btn):hover:not(#\#):not(#\#){
  box-shadow:var(--b8-in),0 1px 2px rgba(0,0,0,.2),0 10px 18px -8px rgba(var(--sh),.6)!important;transform:translateY(-1px)}
:where(.btn,.btn--cta,.btn--blue,.btn--ghost,.cchip,.cchip-mini,.rss-link,.navbar__search,.share__btn,.share a,.tags a,.tab,.vtabs a,.icon-btn,.shead__more,.chips>*,#more,.hs .hs-more,.hs .hs-play,.mhsearch__btn):active:not(#\#):not(#\#){
  box-shadow:var(--b8-in),inset 0 6px 10px -6px rgba(0,0,0,.45),0 2px 4px -2px rgba(var(--sh),.5)!important;transform:translateY(1px)}
:where(.btn,.btn--cta,.btn--blue,.btn--ghost,.cchip,.cchip-mini,.rss-link,.navbar__search,.share__btn,.share a,.tags a,.tab,.vtabs a,.icon-btn,.shead__more,.chips>*,#more,.hs .hs-more,.hs .hs-play,.mhsearch__btn):focus-visible:not(#\#):not(#\#){
  outline:none!important;box-shadow:var(--b3-ring),var(--b8-in)!important}
:where(.btn,.btn--red,.btn--blue,.icon-btn):is(:disabled,[aria-disabled=true]):not(#\#):not(#\#){opacity:.55;transform:none!important;cursor:not-allowed}
input[type=file]::file-selector-button{border:0!important;background:var(--b8-hair) 50% 0/100% 1px no-repeat,var(--b8-sheen),radial-gradient(80% 90% at 50% 30%,#3a3d45 0,#25282e 55%,#121317 100%)!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 0 0 1px rgba(255,255,255,.3),0 6px 12px -8px rgba(0,0,0,.5)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
@media (prefers-reduced-motion:reduce){:where(.btn,.tab,.cchip,.share__btn,.navbar__search,.icon-btn,.mhsearch__btn,.hs .hs-more,#more):not(#\#):not(#\#){transition:none!important;transform:none!important}}
@media (forced-colors:active){:where(.btn,.tab,.cchip,.icon-btn,.mhsearch__btn,.share__btn):not(#\#):not(#\#){border:1px solid ButtonText!important;box-shadow:none!important;background:ButtonFace!important;color:ButtonText!important;-webkit-text-fill-color:ButtonText}}
/* ==== [/buttons-v8 t235u] ==== */
/* ==== [btn-scale t238u] one size scale for every button / button-like control (site + admin). Tab bars and nav bars are not listed.
   sm 32px / 13px / pad 14px / icon 16px   (chips, tags, compact admin row actions .btn--sm)
   md 40px / 15px / pad 18px / icon 18px   (default .btn, load-more, share, RSS, social, secondary actions)
   lg 48px / 17px / pad 24px / icon 20px   (primary form actions: send, login, subscribe-copy, block / CTA)
   icon-only round: 44px (>=40 touch target), icon 20px. Labels: one line (nowrap), line-height 1.2, never clipped. ==== */
:root{--bs-sm-h:32px;--bs-sm-fs:13px;--bs-sm-px:14px;--bs-sm-ic:16px;
  --bs-md-h:40px;--bs-md-fs:15px;--bs-md-px:18px;--bs-md-ic:18px;
  --bs-lg-h:48px;--bs-lg-fs:17px;--bs-lg-px:24px;--bs-lg-ic:20px;--bs-icon:44px}
:where(.btn,.btn--red,.btn--blue,.btn--ghost,.btn--outline,.btn--light,.btn--outline-light,.btn--danger,#more,.hs .hs-more,.up__pick,.rss-link,.shead__more,.share__btn,.share a,.social__btn,.subs__copy--sm,.btn.tgsw):not(#\#):not(#\#){
  --bs-h:var(--bs-md-h);--bs-fs:var(--bs-md-fs);--bs-px:var(--bs-md-px);--bs-ic:var(--bs-md-ic)}
:where(.btn--cta,.btn--block,.contact__send,.subs__copy:not(.subs__copy--sm),.hero__actions .btn,button.btn[type=submit]:not(.btn--sm)):not(#\#):not(#\#){
  --bs-h:var(--bs-lg-h);--bs-fs:var(--bs-lg-fs);--bs-px:var(--bs-lg-px);--bs-ic:var(--bs-lg-ic)}
:where(.btn--sm,.cchip,.cchip-mini,.tags a,.chips>*):not(#\#):not(#\#){
  --bs-h:var(--bs-sm-h);--bs-fs:var(--bs-sm-fs);--bs-px:var(--bs-sm-px);--bs-ic:var(--bs-sm-ic)}
:where(.btn,.btn--cta,.btn--red,.btn--blue,.btn--ghost,.btn--outline,.btn--light,.btn--outline-light,.btn--danger,.btn--sm,.btn--block,.contact__send,.subs__copy,#more,.hs .hs-more,.up__pick,
.rss-link,.shead__more,.share__btn,.share a,.social__btn,.cchip,.cchip-mini,.tags a,.chips>*):not(#\#):not(#\#){
  box-sizing:border-box;min-height:var(--bs-h)!important;height:auto;padding-block:0!important;padding-inline:var(--bs-px)!important;
  font-size:var(--bs-fs)!important;line-height:1.2!important;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:.45em;min-width:var(--bs-h)}
:where(.btn,.btn--cta,.btn--sm,.btn--block,.contact__send,.subs__copy,#more,.hs .hs-more,.up__pick,.rss-link,.shead__more,.share__btn,.share a,.social__btn,.cchip,.cchip-mini,.tags a,.chips>*):not(#\#):not(#\#) svg{width:var(--bs-ic);height:var(--bs-ic);flex:none}
:where(.btn--block):not(#\#):not(#\#){display:flex;width:100%}
/* icon-only social links (footer): round 40px target instead of 28-30px */
:where(.social__btn):not(:has(.social__name)):not(#\#):not(#\#){width:var(--bs-md-h);padding-inline:0!important}
:where(.navbar__search,.icon-btn,.mhsearch__btn,.hs .hs-play):not(#\#):not(#\#){width:var(--bs-icon);height:var(--bs-icon);min-width:var(--bs-icon);min-height:var(--bs-icon);padding:0!important}
:where(.navbar__search,.icon-btn,.mhsearch__btn):not(#\#):not(#\#) svg{width:20px;height:20px}
/* ==== [/btn-scale t238u] ==== */
/* ==== [btn-overlay t241u] controls that sit ON TOP OF images: translucent «جيلي فاخر» (style B) - same soft sheen, hairline and rim,
   body semi-transparent so the photo shows through. Readability: inner shade under the label + white text shadow. No backdrop-filter
   (these live in scrolling lists). Selectors limited to overlay controls; card image sizing is not touched (cherry-pick friendly). ==== */
:root{--bo-r:184,9,3;--bo-r2:120,2,0;--bo-a:.66}
/* labelled overlays (kicker / moment chip) carry text: denser body so white text keeps AA 4.5:1 even over a white photo */
:is(.vcard--cine .vcard__kicker,.hs-moment__label):not(#\#):not(#\#):not(#\#){--bo-a:.8}
:is(.vcard__play,.vcard--cine .vcard__kicker,.reel__play,.vplayer__btn,.hs-vid .hs-play,.hs-play,.hs-moment__label):not(#\#):not(#\#):not(#\#){
  --bo-c:var(--bo-r);--bo-c2:var(--bo-r2);
  background:
    linear-gradient(90deg,rgba(255,255,255,0) 16%,rgba(255,255,255,.9) 50%,rgba(255,255,255,0) 84%) 50% 0/100% 1px no-repeat border-box,
    radial-gradient(120% 70% at 50% -10%,rgba(255,255,255,.28) 0,rgba(255,255,255,.08) 45%,rgba(255,255,255,0) 72%) border-box,
    radial-gradient(70% 55% at 50% 100%,rgba(255,170,160,.35) 0,rgba(255,170,160,0) 70%) border-box,
    radial-gradient(80% 90% at 50% 35%,rgba(var(--bo-c),var(--bo-a)) 0,rgba(var(--bo-c2),var(--bo-a)) 70%,rgba(var(--bo-c2),calc(var(--bo-a) + .08)) 100%) border-box!important;
  border:0!important;color:#fff!important;-webkit-text-fill-color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 0 0 1px rgba(255,255,255,.35),inset 0 -1.5px 0 rgba(255,210,200,.45),inset 0 0 12px rgba(0,0,0,.18),0 4px 12px -4px rgba(0,0,0,.45)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
:is(.vcard__play,.reel__play,.vplayer__btn,.hs-play):not(#\#):not(#\#):not(#\#){border-radius:50%!important}
:is(.vcard__play,.reel__play,.vplayer__btn,.hs-play):not(#\#):not(#\#):not(#\#) svg{filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.5))}
@media (forced-colors:active){:is(.vcard__play,.vcard--cine .vcard__kicker,.reel__play,.vplayer__btn,.hs-play,.hs-moment__label):not(#\#){background:ButtonFace!important;color:ButtonText!important;box-shadow:none!important}}
/* ==== [/btn-overlay t241u] ==== */
/* ==== [btn-b-match t244u] faithful to the approved option-B mockup (/tmp/btn-dir-t233/b.html .j, btn-b-final-t235.png).
   v8 drifted from the mockup: full pill radius (mockup = rounded rectangle ~0.3 x height), label weight 500 (mockup 700),
   pool .8 / dark ring black .12 / no inner top glow (mockup: pool .85, tinted ring rgba(120,0,0,.25) 3px, rim .35/.6, 1.5px top
   specular, inner top glow), neutral text shadow (mockup: tinted). This block restores the mockup values exactly; colours/families,
   size scale, overlay translucency and tab/nav-bar exclusions are unchanged. Round icon controls stay round. ==== */
:root{--b9-r-sm:10px;--b9-r-md:13px;--b9-r-lg:15px;--b9-ring:120,0,0}
:where(.btn,.btn--cta,.btn--red,.btn--blue,.btn--danger,.btn--ghost,.btn--outline,.btn--light,.btn--outline-light,.up__pick,
.kicker--pill,.live-pill,.cchip,.cchip-mini,.rss-link,.share__btn,.share a,.tags a,.tab,.vtabs a,
.shead__more,.chips>*,#more,.hs .hs-more,.hs .hs-kick,.hs .hs-moment__label,.hs .hs-chip,.subs__copy,.contact__send):not(#\#):not(#\#){
  --b9-r:var(--b9-r-md);border-radius:var(--b9-r)!important;font-weight:700!important;
  background:
    var(--b8-hair) 50% 0/100% 1px no-repeat border-box,
    var(--b8-sheen) border-box,
    radial-gradient(70% 55% at 50% 100%,rgba(var(--pool),.85) 0,rgba(var(--pool),0) 70%) border-box,
    radial-gradient(80% 90% at 50% 30%,var(--c1) 0,var(--c2) 55%,var(--c3) 100%) border-box!important;
  --b8-in:inset 0 1.5px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(var(--rim),.35),inset 0 0 0 3px rgba(var(--b9-ring),.25),inset 0 -2px 0 rgba(var(--rim),.6),inset 0 6px 10px -8px rgba(255,255,255,.2);
  box-shadow:var(--b8-in),0 1px 2px rgba(0,0,0,.2),0 10px 18px -8px rgba(var(--sh),.6)!important;
  text-shadow:0 1px 1.5px rgba(70,0,0,.4)!important}
:where(.btn--sm,.cchip,.cchip-mini,.tags a,.chips>*,.kicker--pill,.live-pill,.hs .hs-kick,.hs .hs-chip,.hs .hs-moment__label):not(#\#):not(#\#){--b9-r:var(--b9-r-sm)}
:where(.btn--cta,.btn--block,.contact__send,.subs__copy:not(.subs__copy--sm),.hero__actions .btn,button.btn[type=submit]:not(.btn--sm)):not(#\#):not(#\#){--b9-r:var(--b9-r-lg)}
@media (forced-colors:active){:where(.btn,.tab,.cchip,.share__btn,.contact__send):not(#\#):not(#\#){background:ButtonFace!important;box-shadow:none!important}}
/* ==== [/btn-b-match t244u] ==== */
/* ==== [btn-all-jelly t245u] remaining clickable ACTION buttons -> approved style B jelly (same stack as [btn-b-match t244u]).
   t247u: jelly is for real action buttons only. Status/info badges and labels (admin status pills, inbox states, section kickers,
   photo labels, strip/breaking tags, article tags, country-banner labels) are NOT listed here and keep their pre-t245 look.
   Also excluded: footer/top social buttons (user t245u), tab bars and nav bars, form selects, focal-point marker, on/off switches.
   Families: red = search submit; graphite = neutral. ==== */
:where(.pager a,.pagination a,.pagination span,.reels__btn,.breaking__pause,.icon-btn,.navbar__search,.mhsearch__btn,.tags a):not(#\#):not(#\#){
  --c1:var(--b8-g-c1);--c2:var(--b8-g-c2);--c3:var(--b8-g-c3);--pool:var(--b8-g-pool);--rim:var(--b8-g-rim);--sh:var(--b8-g-sh);--ink:#fff}
:where(.mhsearch__btn):not(#\#):not(#\#){
  --c1:var(--b8-r-c1);--c2:var(--b8-r-c2);--c3:var(--b8-r-c3);--pool:var(--b8-r-pool);--rim:var(--b8-r-rim);--sh:var(--b8-r-sh)}
:where(.pager a,.pagination a,.pagination span,.reels__btn,.breaking__pause,.icon-btn,.navbar__search,.mhsearch__btn,.tags a):not(#\#):not(#\#){
  border:0!important;color:#fff!important;-webkit-text-fill-color:#fff;font-weight:700!important;opacity:1!important;
  background:
    var(--b8-hair) 50% 0/100% 1px no-repeat border-box,
    var(--b8-sheen) border-box,
    radial-gradient(70% 55% at 50% 100%,rgba(var(--pool),.85) 0,rgba(var(--pool),0) 70%) border-box,
    radial-gradient(80% 90% at 50% 30%,var(--c1) 0,var(--c2) 55%,var(--c3) 100%) border-box!important;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(var(--rim),.35),inset 0 0 0 3px rgba(var(--b9-ring),.25),inset 0 -2px 0 rgba(var(--rim),.6),inset 0 6px 10px -8px rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.2),0 10px 18px -8px rgba(var(--sh),.6)!important;
  text-shadow:0 1px 1.5px rgba(70,0,0,.4)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* pagination/tag links: sm scale (32 / 13px), md for pager links; rounded rectangle like B */
:where(.pagination a,.pagination span,.tags a):not(#\#):not(#\#){
  box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:var(--bs-sm-h)!important;height:auto!important;
  padding-block:0!important;padding-inline:var(--bs-sm-px)!important;font-size:var(--bs-sm-fs)!important;line-height:1.2!important;white-space:nowrap;
  letter-spacing:0;border-radius:var(--b9-r-sm)!important;max-width:100%}
:where(.pager a):not(#\#):not(#\#){box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:var(--bs-md-h)!important;
  padding-block:0!important;padding-inline:var(--bs-md-px)!important;font-size:var(--bs-md-fs)!important;line-height:1.2!important;white-space:nowrap;border-radius:var(--b9-r-md)!important}
/* round icon controls keep their circle, get the B stack */
:where(.reels__btn,.breaking__pause,.icon-btn,.navbar__search,.mhsearch__btn):not(#\#):not(#\#){border-radius:50%!important;width:var(--bs-icon);height:var(--bs-icon);min-width:var(--bs-icon);min-height:var(--bs-icon);padding:0!important}
:where(.reels__btn:disabled):not(#\#):not(#\#){opacity:.45!important}
@media (forced-colors:active){:where(.pager a,.pagination a,.reels__btn,.breaking__pause,.icon-btn):not(#\#):not(#\#){background:ButtonFace!important;color:ButtonText!important;-webkit-text-fill-color:ButtonText;box-shadow:none!important;border:1px solid ButtonText!important}}
/* ==== [/btn-all-jelly t245u] ==== */
/* ==== [t230u] video card «سينمائي» (option 1): overrides the t136u .vcard block above, which stays for reference ==== */
.vcard--cine{position:relative;display:block;aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:#111;box-shadow:0 14px 30px -14px rgba(0,0,0,.5);contain:layout paint}
.vcard--cine .vcard__img{position:absolute;inset:0;aspect-ratio:auto;border-radius:inherit;z-index:0}
.vcard--cine .vcard__img img{object-position:50% 25%;filter:none!important}
.vcard--cine:hover .vcard__img img{transform:scale(1.04)}
.vcard__scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.94) 0,rgba(0,0,0,.78) 24%,rgba(0,0,0,.4) 46%,rgba(0,0,0,0) 68%)}
.vcard--cine .vcard__play{inset-inline-start:auto;bottom:auto;top:14px;inset-inline-end:14px;width:46px;height:46px;background:rgba(0,0,0,.38);border:1.5px solid rgba(255,255,255,.7);box-shadow:none;color:#fff}
.vcard--cine.vcard--big .vcard__play{width:58px;height:58px;top:18px;inset-inline-end:18px}
.vcard--cine .vcard__body{position:absolute;inset:auto 0 0;z-index:1;padding:18px;gap:.45rem;color:#fff;pointer-events:none}
.vcard--cine .vcard__body a{pointer-events:auto}
.vcard--cine .vcard__kicker{align-self:flex-start;color:#fff!important;background:#ff0a00!important;padding:.12rem .7rem!important;border-radius:999px;font-size:.78rem;line-height:1.5}
.vcard--cine .vcard__title{color:#fff;font-weight:900;font-size:1.15rem;line-height:1.45;-webkit-line-clamp:3;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.vcard--cine .vcard__title a{color:#fff!important;font:inherit}
.vcard--cine.vcard--big .vcard__title{font-size:clamp(1.3rem,2.4vw,1.9rem);-webkit-line-clamp:3}
.vcard--cine .vcard__dek{color:rgba(255,255,255,.86)!important;-webkit-line-clamp:2}
.vcard--cine .vcard__time{color:rgba(255,255,255,.9)!important}
/* layouts: keep structure, size the tall cards */
.vhome__list .vcard--cine{display:block}
@media(min-width:960px){.vhome__grid{align-items:start}.vhome__list{grid-template-columns:repeat(2,minmax(0,1fr))}.vhome__grid>.vcard--big{aspect-ratio:4/5}}
@media(max-width:560px){.vhome__list{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding-bottom:.4rem;scrollbar-width:none}
  .vhome__list .vcard--cine{display:block;scroll-snap-align:start}.vhome__list .vcard--cine .vcard__title{font-size:1rem}
  .vhome__list .vcard--cine .vcard__play{width:38px;height:38px;inset-inline-start:auto;bottom:auto}}
@media(min-width:900px){.vfeature .vcard--cine{display:block;aspect-ratio:16/9;max-height:620px}}
.vgrid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
@media(min-width:1200px){.vgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ==== [t231u] news date · time stamp: one refined meta line next to the headline, everywhere.
   Near-black on light surfaces, white on dark surfaces / over images. Thin CSS clock glyph (no image, no font). ==== */
.stamp{display:inline-flex;align-items:center;gap:.4em;font-size:.78rem;font-weight:700;line-height:1.4;letter-spacing:0;color:#1a1a1c!important;opacity:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.stamp::before{content:"";flex:none;width:.95em;height:.95em;border-radius:50%;border:1.5px solid currentColor;box-sizing:border-box;
  background:linear-gradient(currentColor,currentColor) 50% 22%/1.5px 34% no-repeat,linear-gradient(currentColor,currentColor) 66% 52%/32% 1.5px no-repeat;opacity:.85}
.hs-glass .stamp,.hs-writer .stamp,.hs-bulletin .stamp,.hs .hs-card .stamp,.vhome .stamp,.vcard--cine .stamp,.band .stamp,.card--over .stamp,.hero .stamp{color:#fff!important}
@media (forced-colors:active){.stamp{color:CanvasText!important}.stamp::before{border-color:CanvasText}}

/* [t240u] adaptive cards: every frame takes its photo's own ratio (inline aspect-ratio from the stored w/h, clamped 4:5..2:1).
   [t243u] wherever the frame is bigger than the photo (grid rows, capped lead, clamped ratios) it is filled edge to edge by a
   tiny PRE-BLURRED copy of the same photo (40px data: URI made at build time, darkened/saturated there): upscaling it IS the
   blur, so nothing heavy runs while scrolling. The sharp photo sits whole on top (contain). Colour photos only. */
.hs-pic--fit{background:#0b0d12}
.hs-pic--fit .hs-pic__img,.media--fit .media__img,.media--whole .media__img{object-fit:contain!important;object-position:50% 50%!important}
.hs-pic img.hs-pic__bd,.media img.media__fill,.vcard--cine img.vcard__bd{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none;object-fit:cover!important;object-position:50% 50%!important;z-index:0;transform:none!important;transition:none;pointer-events:none}
.hs-pic img.hs-pic__bd:not(.is-tiny),.media img.media__fill:not(.is-tiny),.vcard--cine img.vcard__bd:not(.is-tiny){opacity:.45}
.hs-pic .hs-pic__img,.media .media__img{z-index:1}
.media .media__img{position:relative}
.media--fit{background:#0b0d12;height:auto!important}
.media .media__bd,.hs-pic .hs-pic__blur{display:none!important}
.card:hover .media--fit .media__img,.hero:hover .media--fit .media__img{transform:none}
/* grid rows stretch to one line; the picture zone grows to take the extra height (fill behind, photo whole and centred) */
.hs-card>.hs-card__pic{flex:1 0 auto;display:flex;flex-direction:column}
.hs-card>.hs-card__pic>.hs-pic--fit{flex:1 0 auto}
.hs-card>.hs-card__body{flex:0 0 auto}
.hs-cards--feature .hs-card:not(.hs-card--big) .hs-pic--fit{height:auto}
.card--over .card__img .media--fit,.card--over.card--side .card__img .media--fit,.hero--whole .hero__bg .media--fit{height:auto!important;max-height:none;aspect-ratio:var(--fit-ar,auto)!important}
@media(min-width:900px){.hs-lead .hs-pic--fit{max-height:min(78vh,720px);width:100%}
  .hs-lead .hs-pic--fit .hs-pic__img{object-position:0% 50%!important}} /* capped tall lead: photo to the inline-end, glass caption over the blurred fill */
@media(max-width:899px){.hs-cards--feature .hs-card:not(.hs-card--big) .hs-pic--fit{aspect-ratio:auto!important;height:auto;min-height:0}
  .hs-cards--feature .hs-card:not(.hs-card--big) .hs-pic--fit .hs-pic__img{position:relative;height:auto}}
/* the cinematic video card adapts too: --ar is the poster's own (clamped) ratio; landscape posters carry the caption below */
.vcard--cine{aspect-ratio:var(--ar,4 / 5)!important;max-height:none}
.vcard--cine .vcard__img img.vcard__poster{object-fit:contain!important;object-position:50% 50%!important;z-index:1}
.vcard--cine .vcard__scrim,.vcard--cine .vcard__play{z-index:2}
.vcard--cine.vcard--land{aspect-ratio:auto!important;display:flex!important;flex-direction:column}
.vcard--cine.vcard--land .vcard__img{position:relative;inset:auto;display:block;aspect-ratio:var(--ar)}
.vcard--cine.vcard--land .vcard__scrim{display:none}
.vcard--cine.vcard--land .vcard__body{position:relative;inset:auto;background:#111;padding:14px 16px 16px}

/* [t246u] glass sheen on news cards (jelly style B spirit): one static overlay per card. Thin top highlight line, a soft
   diagonal light sweep over the top part, a faint inner rim and soft depth; photos stay vivid (peak white alpha ~.14, fades out
   before the middle). Static gradients + inset shadows only, nothing moves while scrolling. */
.hs-lead::after,.hs-card::after,.vcard.vcard--cine::after{content:"";display:block;position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;opacity:.9;transition:opacity .25s ease;
  background:linear-gradient(122deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.06) 16%,rgba(255,255,255,0) 34%),
    radial-gradient(130% 55% at 50% -18%,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 62%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 0 0 1px rgba(255,255,255,.1),inset 0 -24px 36px -30px rgba(0,0,0,.55)}
@media (prefers-color-scheme:light){.hs-lead,.hs-card,.vcard.vcard--cine{outline:1px solid rgba(10,14,22,.06);outline-offset:-1px}}
@media (hover:hover) and (min-width:900px){.hs-lead:hover::after,.hs-card:hover::after,.vcard.vcard--cine:hover::after{opacity:1}}

/* [home-articles t265u] «مقالات» block: one piece = a wide feature card (photo | text), two = two columns, three+ = three columns.
   Photos whole (HsPic adaptive + blurred fill), glass sheen, rounded corners, blue/red brand accents; phone: stacked for 1, rail for 2+. */
.hs-writers:not(#\#):not(#\#){display:grid;gap:var(--hs-gap);grid-template-columns:repeat(3,minmax(0,1fr))}
.hs-writers--n2:not(#\#):not(#\#){grid-template-columns:repeat(2,minmax(0,1fr))}
.hs-writers--n1:not(#\#):not(#\#){grid-template-columns:minmax(0,1fr)}
.hs-writer:not(#\#):not(#\#){display:flex;flex-direction:column;align-items:stretch;gap:0;padding:10px;overflow:hidden;border-radius:var(--hs-r);position:relative;border-inline-start:3px solid #436de1}
.hs-writer__pic:not(#\#):not(#\#){flex:none;display:block;border-radius:var(--hs-r-sm);box-shadow:none;overflow:hidden}
.hs-writer .hs-pic:not(#\#):not(#\#){aspect-ratio:16 / 10!important;width:100%}
.hs-writers--n1 .hs-pic:not(#\#):not(#\#){height:100%;min-height:260px}
.hs-writer__body{display:flex;flex-direction:column;gap:8px;padding:12px 8px 8px;min-width:0}
.hs-writer .hs-title:not(#\#){font-size:1.15rem;line-height:1.5;margin:0}
.hs-by--pen{margin:0;font-size:.9rem;font-weight:700;color:#ffb3ae!important}
.hs-by--pen .hs-by__name{color:#fff}
.hs-writer .hs-dek{margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hs-writers--n1 .hs-writer:not(#\#):not(#\#){display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:stretch}
.hs-writers--n1 .hs-writer__pic:not(#\#):not(#\#){height:100%}
.hs-writers--n1 .hs-writer__body{justify-content:center;padding:18px 26px;gap:12px}
.hs-writers--n1 .hs-title:not(#\#){font-size:clamp(1.3rem,2.2vw,1.75rem)}
.hs-writers--n1 .hs-dek{-webkit-line-clamp:4;font-size:1rem}
@media (max-width:720px){
  .hs-writers:not(.hs-writers--n1):not(#\#):not(#\#){display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
  .hs-writers--n1 .hs-writer:not(#\#):not(#\#){display:flex}
  .hs-writers--n1 .hs-writer__body{padding:12px 8px 8px}
  .hs-writers--n1:not(#\#):not(#\#){display:grid;overflow:visible}
  .hs-writers--n1>li:not(#\#){flex:none}
  .hs-writers--n1 .hs-pic:not(#\#):not(#\#){height:auto;min-height:0}
  .hs-writers--n1 .hs-writer__pic:not(#\#):not(#\#){height:auto}
}
/* [section-colors t268u] one colour per section (white text >= 4.5:1 on --sec). Drives: category banner gradient + count pill,
   active/hover nav underline, homepage section-header bar marker, section tag on cards (kicker text, hs-kick button tint). Red = «عاجل» only. */
[data-sec="local"]{--sec:#436de1;--sec-deep:#2c4fb5;--sec-top:#6a8cea}
[data-sec="world"]{--sec:#0b7f8a;--sec-deep:#07565d;--sec-top:#1aa3b0}
[data-sec="brief"]{--sec:#5b6b82;--sec-deep:#3d4858;--sec-top:#7d8ca3}
[data-sec="opinion"]{--sec:#7b4fd6;--sec-deep:#533591;--sec-top:#9a76e6}
[data-sec="reports"]{--sec:#a86500;--sec-deep:#724400;--sec-top:#d08a1c}
[data-sec="economy"]{--sec:#1d7a4c;--sec-deep:#135234;--sec-top:#2f9e68}
[data-sec="videos"]{--sec:#d6336c;--sec-deep:#912249;--sec-top:#e86593}
.navbar__list a[data-sec]::after{background:var(--sec)}
.sec-banner__count:not(#\#){color:var(--sec-deep);border:2px solid var(--sec)}
.hs-head[data-sec] .hs-head__line:not(#\#){background:linear-gradient(180deg,var(--sec-top),var(--sec) 55%,var(--sec-deep))}
.kicker[data-sec]:not(.kicker--pill):not(.kicker--on-dark){color:var(--sec-deep)}
.kicker--pill[data-sec]:not(#\#){background:linear-gradient(135deg,var(--sec),var(--sec-deep))}
.hs .hs-kick[data-sec]:not(#\#){--gb-top:var(--sec-top);--gb-mid:var(--sec);--gb-bot:var(--sec-deep)}
/* [search-a t270u] masthead search, option A: slim frosted field, magnifier inside; glass via layered translucent fill (no live blur). 3-id bump beats the 2-id button-system rules for .mhsearch* only. */
.mhsearch:not(#\#):not(#\#):not(#\#){height:44px!important;padding:0 6px 0 4px!important;padding-inline-start:16px!important;border-radius:14px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.06))!important;border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)!important;transition:background .2s,border-color .2s,box-shadow .2s}
.mhsearch:not(#\#):not(#\#):not(#\#):hover{background:rgba(255,255,255,.12)!important}
.mhsearch:not(#\#):not(#\#):not(#\#):focus-within{background:rgba(255,255,255,.14)!important;border-color:#7d9bef!important;box-shadow:0 0 0 3px rgba(67,109,225,.55),inset 0 1px 0 rgba(255,255,255,.14)!important}
.mhsearch__input:not(#\#):not(#\#):not(#\#),.mhsearch__input:not(#\#):not(#\#):not(#\#):focus{font-size:.98rem!important;color:#fff!important;outline:none!important;box-shadow:none!important;background:transparent!important;border:0!important}
.mhsearch__input::placeholder{color:rgba(255,255,255,.58)!important}
.mhsearch__btn:not(#\#):not(#\#):not(#\#){width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;margin-block:-1px!important;border-radius:12px!important;
  background:transparent!important;background-image:none!important;box-shadow:none!important;border:0!important;color:rgba(255,255,255,.78)!important;transform:none!important}
.mhsearch__btn:not(#\#):not(#\#):not(#\#)::before,.mhsearch__btn:not(#\#):not(#\#):not(#\#)::after{content:none!important;display:none!important}
.mhsearch__btn:not(#\#):not(#\#):not(#\#):hover{color:#fff!important;background:rgba(255,255,255,.08)!important}
.mhsearch:focus-within .mhsearch__btn:not(#\#):not(#\#):not(#\#){color:#7d9bef!important}
.mhsearch__btn:not(#\#):not(#\#):not(#\#):focus-visible{outline:none!important;box-shadow:0 0 0 2px #fff,0 0 0 4px #436de1!important}
@media (min-width:721px){.mhsearch:not(#\#):not(#\#):not(#\#){flex:0 1 440px!important;max-width:440px!important;margin-inline-start:auto!important}
  .mhsearch:not(#\#):not(#\#):not(#\#):focus-within{flex-basis:560px!important;max-width:560px!important}
  .mhdiv:not(#\#){display:none!important}}
@media (forced-colors:active){.mhsearch:not(#\#):not(#\#):not(#\#):focus-within{outline:2px solid Highlight!important}.mhsearch__btn:not(#\#):not(#\#):not(#\#):focus-visible{outline:2px solid Highlight!important}}
/* [/search-a t270u] */

/* [t300u] footer option C (owner «الخيار ج»): two bands, matches /workspace/t299 mockup C. Text ≥ 4.5:1 on black; red/blue only as accents. */
.footer:not(#\#):not(#\#):not(#\#){background:#000!important;font-family:'Al Jazeera',system-ui,sans-serif}
.footer:not(#\#):not(#\#):not(#\#)::before{height:3px;background:linear-gradient(90deg,#ff0a00 0 50%,#436de1 50% 100%);box-shadow:none}
.footer .footer__top{background:#0b0c0e;border-bottom:1px solid rgba(255,255,255,.1)}
.footer :is(.footer__top-in,.footer__base-in):not(#\#):not(#\#){display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding-inline-end:0}
.footer .footer__top-in{gap:20px;padding-block:28px}
.footer .footer__brand:not(#\#):not(#\#):not(#\#){margin:0;font-size:20px;font-weight:700;color:#fff}
.footer .footer__secs ul:not(#\#):not(#\#){display:flex;flex-wrap:wrap;gap:4px 18px}
.footer .footer__secs a:not(#\#):not(#\#){display:inline-flex;min-height:44px;align-items:center;font-size:15px;font-weight:700;position:relative;text-decoration:none}
.footer .footer__secs a::after{content:"";position:absolute;inset-inline:0;bottom:8px;height:2px;border-radius:2px;background:#ff0a00;transform:scaleX(0);transition:transform .2s}
.footer .footer__secs a:hover::after,.footer .footer__secs a:focus-visible::after{transform:none}
.footer .footer__top .social--footer:not(#\#):not(#\#):not(#\#){display:flex;flex-direction:row;align-items:center;gap:8px;margin:0;padding:6px;border-radius:999px;background:#16181c;border:1px solid rgba(255,255,255,.12)}
.footer .footer__top .social--footer :is(.social__btn,.rss-link):not(#\#):not(#\#):not(#\#){all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:999px;color:rgba(255,255,255,.9);cursor:pointer}
.footer .footer__top .social--footer .rss-link:not(#\#):not(#\#):not(#\#){background:none!important;border:0!important;box-shadow:none!important;padding:0!important;min-height:44px!important;height:44px;width:44px;border-radius:999px!important;transform:none!important}
.footer .footer__top .social--footer .rss-link:not(#\#):not(#\#):not(#\#):is(:hover,:active){background:#436de1!important;box-shadow:none!important;transform:none!important}
.footer .footer__top .social--footer .rss-link:not(#\#):not(#\#):not(#\#):focus-visible{box-shadow:none!important;outline:2px solid #86a2f2!important;outline-offset:3px}
.footer .footer__top .social--footer :is(.social__btn,.rss-link):not(#\#):not(#\#):not(#\#)::before,.footer .footer__top .social--footer :is(.social__btn,.rss-link):not(#\#):not(#\#):not(#\#)::after{content:none}
.footer .footer__top .social--footer :is(.social__btn,.rss-link):not(#\#):not(#\#):not(#\#) svg{all:unset;width:18px;height:18px;padding:0;border:0;background:none;color:currentColor}
.footer .footer__top .social--footer :is(.social__btn,.rss-link):not(#\#):not(#\#):not(#\#):hover{background:#436de1;color:#fff}
.footer .footer__top .social--footer :is(.social__btn,.rss-link):not(#\#):not(#\#):not(#\#):focus-visible{outline:2px solid #86a2f2;outline-offset:3px}
.footer .footer__base-in{gap:10px 24px;padding-block:18px 22px;font-size:13.5px}
.footer .footer__brand:not(#\#):not(#\#):not(#\#){display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.footer .footer__brand .footer__tagline:not(#\#):not(#\#):not(#\#){font-size:15px;font-weight:400;color:rgba(255,255,255,.72);padding-inline-start:10px;border-inline-start:1px solid rgba(255,255,255,.14);line-height:1.2;white-space:nowrap}
/* [t301u] trust separators never start a line: every item carries a 22px leading slot (dot or blank); the list is pulled 22px past its inline-start edge and clipped, so whichever item begins a line has its dot cut off */
.footer .footer__trust:not(#\#){overflow:hidden;padding-block:2px}
.footer .footer__trust ul:not(#\#):not(#\#){display:flex;flex-wrap:wrap;gap:0;margin:0;margin-inline-start:-22px}
.footer .footer__trust li{display:flex;align-items:center}
.footer .footer__trust li:first-child{padding-inline-start:22px}
.footer .footer__trust li+li::before{content:"•";color:rgba(255,255,255,.5);display:inline-block;width:22px;text-align:center;flex:none}
.footer .footer__trust a:not(#\#):not(#\#){display:inline-flex;min-height:40px;align-items:center}
.footer .footer__copy:not(#\#):not(#\#):not(#\#){margin:0;color:rgba(255,255,255,.72)}
@media(max-width:700px){.footer :is(.footer__top-in,.footer__base-in):not(#\#):not(#\#){flex-direction:column;align-items:flex-start}.footer .footer__secs{width:100%}.footer .footer__secs ul:not(#\#):not(#\#){display:grid;grid-template-columns:repeat(3,1fr)}}
/* [footer-about t272u] footer text: white @ 90% (links, headings, copyright, small print). Social buttons keep their own colours. */
.footer :is(h2,p,li,small,a:not(.social__btn),.footer__brand,.footer__small):not(#\#):not(#\#),.footer__base :is(p,small,a,span):not(.social__btn):not(#\#):not(#\#){color:rgba(255,255,255,.9)}
.footer a:not(.social__btn):hover:not(#\#):not(#\#){color:#fff}
.footer__brand{margin:0;font-size:1.05rem;line-height:1.7}.footer__brand strong{font-weight:900}
.footer__trust ul{margin-top:.9rem}
/* [t303u] Arabic justified body text: every line of a paragraph runs edge to edge, the last line ends where its words end (start = right in RTL).
   Body paragraphs of articles (أخبار/مقالات/تقارير share .article__body) and trust pages only; never headlines, cards, captions, lists, admin. */
:is(.article__body,.trust__col)>p:not(.trust__ph,.trust__updated,.trust__cta,.correction){text-align:justify;text-align-last:start;text-justify:inter-word;hyphens:none;word-break:normal;overflow-wrap:normal}
:is(.article__body,.trust__col)>p a[href^="http"]{overflow-wrap:anywhere}
/* [trust-pages t276u] /about/ /privacy/ /terms/ /corrections/: 70ch column, optional TOC, «آخر تحديث» */
.sec-banner--trust{--sec-deep:#2c4fb5}
.trust{display:grid;gap:2rem;padding-block:2.5rem 4rem;justify-content:center;grid-template-columns:minmax(0,70ch)}
.trust__col{max-width:70ch;font-size:1.06rem;line-height:1.95}
.trust__col h2{font-size:1.3rem;font-weight:900;margin:2.2rem 0 .6rem;scroll-margin-top:90px}
.trust__col p,.trust__col li{margin:0 0 1rem}
.trust__col ul{padding-inline-start:1.3rem}
.trust__col a{color:var(--brand-c);text-decoration:underline;text-underline-offset:3px}
.trust__updated{font-size:.92rem;color:var(--muted,#5d6670);margin:0 0 1.5rem}
.trust__ph{border:1px dashed currentColor;border-radius:14px;padding:.8rem 1rem;opacity:.85}
.trust__toc{border-radius:18px;padding:1rem 1.2rem;background:rgba(67,109,225,.07);border:1px solid rgba(67,109,225,.18)}
.trust__toc h2{font-size:1rem;margin:0 0 .5rem;font-weight:900}
.trust__toc ol{margin:0;padding-inline-start:1.3rem;display:grid;gap:.3rem}
.trust__toc a{color:inherit;text-decoration:none}.trust__toc a:hover{color:var(--brand-c)}
@media (min-width:1100px){.trust{grid-template-columns:minmax(0,70ch) 260px;align-items:start}.trust__toc{position:sticky;top:90px;order:2}}
.about__video{margin:0 0 2rem;border-radius:22px;overflow:hidden;background:#0b0d12;aspect-ratio:16 / 9;position:relative}
.about__video video,.about__video img{display:block;width:100%;height:100%;object-fit:contain;background:#0b0d12}
.about__pending{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.35rem;text-align:center;color:#fff;background:rgba(5,8,14,.55)}
.about__play{display:grid;place-items:center;width:64px;height:64px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.5)}
.about__video figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* [t215u] PWA launch splash (see public/js/splash.js). Hidden unless html.splash-on; transform/opacity only. */
.app-splash{display:none}
.splash-on .app-splash{display:flex;position:fixed;inset:0;z-index:2147483000;flex-direction:column;align-items:center;justify-content:center;background:#1a1a1c;contain:strict;will-change:opacity}
/* [t218u] frame 0 = Android OS splash (flat manifest background_color #1a1a1c + logo at full size), then the depth gradient fades in */
.app-splash::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 50%,#1a1a1c 0%,#0b0b0c 55%,#000 100%);opacity:0;animation:spl-fade .7s ease .15s forwards}
/* [t223u] Android draws the maskable icon (preferred for the WebAPK splash) at ~251dp; logo = 74% of it */
.app-splash__logo{position:relative;z-index:1;width:186px;aspect-ratio:437/150}
.app-splash__logo img{display:block;width:100%;height:100%;object-fit:contain}
.app-splash__shine{position:absolute;inset:0;overflow:hidden;-webkit-mask:url(/images/brand/logo-main-v4@3x.png) center/contain no-repeat;mask:url(/images/brand/logo-main-v4@3x.png) center/contain no-repeat}
.app-splash__shine::before{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:55%;background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.18) 28%,rgba(255,255,255,.75) 46%,#fff 50%,rgba(255,255,255,.75) 54%,rgba(255,255,255,.18) 72%,rgba(255,255,255,0) 100%);transform:translateX(-120%) skewX(-12deg);animation:spl-shine .9s cubic-bezier(.45,.05,.25,1) .35s forwards}
.app-splash__glow{position:absolute;inset:-30% -15%;background:radial-gradient(closest-side,rgba(255,255,255,.14),transparent 70%);opacity:0;animation:spl-glow 1s ease-out .45s forwards}
.splash-out .app-splash{opacity:0;transform:scale(1.04);transition:opacity .45s ease,transform .45s ease}
.splash-rm .app-splash__logo,.splash-rm .splash-rm .app-splash__shine,.splash-rm .app-splash__glow,.splash-rm .app-splash::before{display:none}
.splash-rm.splash-out .app-splash{transform:none;transition:opacity .25s ease}
@keyframes spl-shine{to{transform:translateX(300%) skewX(-12deg)}}
@keyframes spl-glow{40%{opacity:1}to{opacity:0}}
@keyframes spl-fade{to{opacity:1}}

/* ==== [t323u] audit follow-ups ==== */
/* nav scroll hint: site.js sets .has-more while items are hidden past the (left, RTL) edge */
.navbar nav.has-more{-webkit-mask-image:linear-gradient(to right,transparent,#000 2.5rem);mask-image:linear-gradient(to right,transparent,#000 2.5rem)}
/* breadcrumb «/» aligned with the 44px tap-target links */
.crumbs{align-items:center}
/* mobile article: no ~90px blank between the date line and the photo */
@media(max-width:600px){
  .article__head{padding-bottom:.5rem}
  .article__top+.article__media,.article__media{margin-top:0}
  /* shorter mobile home: top 3 headlines, 2 cards per section, 3 bulletin lines, the rest stays on the section pages */
  .hs-bento>:nth-child(n+4),.hs-cards:not([data-rail])>:nth-child(n+3),.hs-bulletin>:nth-child(n+4){display:none}
}
/* live coverage page */
.livecov{padding-block:2rem 3rem}
.livecov__head{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:1.25rem}
.livecov__head h1{margin:0}
.livecov__badge{display:inline-flex;align-items:center;gap:.4rem;background:var(--red);color:#fff;font-weight:800;font-size:.8rem;padding:.25rem .65rem;border-radius:999px}
.livecov__dot{width:.5rem;height:.5rem;border-radius:999px;background:currentColor;animation:livecov-pulse 1.6s ease-in-out infinite}
@keyframes livecov-pulse{50%{opacity:.3}}
.livecov__dek{color:var(--muted);margin:0 0 1.5rem}
.livecov__breaking{border-inline-start:4px solid var(--red);padding:.75rem 1rem;margin-bottom:1.5rem;background:transparent}
.livecov__list{list-style:none;margin:0;padding:0;border-inline-start:2px solid var(--sep)}
.livecov__item{position:relative;padding:0 1.25rem 1.25rem}
.livecov__item::before{content:"";position:absolute;inset-inline-start:-7px;top:.35rem;width:12px;height:12px;border-radius:999px;background:var(--red)}
.livecov__time{display:block;font-size:.85rem;font-weight:700;color:var(--muted)}
.livecov__body a{font-weight:800;color:inherit}
.livecov__empty{color:var(--muted);padding:2rem 0}

/* ==== [t351u] «أقسام الفيديو» menu (native details/summary; rounded, brand red/blue, RTL) ==== */
.vpage__head{align-items:center;justify-content:space-between}
.vsec{position:relative;z-index:30;flex:none}
.vsec__btn{list-style:none;display:inline-flex;align-items:center;gap:8px;padding:.5em 1.1em;border-radius:999px;cursor:pointer;font:inherit;font-weight:700;font-size:.95rem;
  background:#436de1;color:#fff;border:2px solid transparent;user-select:none;min-height:40px}
.vsec__btn::-webkit-details-marker{display:none}
.vsec__btn::marker{content:''}
.vsec__btn:hover{background:#2c4fb5}
.vsec__btn:focus-visible{outline:3px solid #ff0a00;outline-offset:2px}
.vsec[open] .vsec__btn{background:#ff0a00}
.vsec__chev{transition:transform .2s}
.vsec[open] .vsec__chev{transform:rotate(180deg)}
.vsec__menu{position:absolute;inset-inline-end:0;top:calc(100% + 8px);margin:0;padding:8px;list-style:none;min-width:220px;max-width:min(320px,86vw);max-height:60vh;overflow:auto;
  background:#fff;color:#111;border-radius:18px;box-shadow:0 14px 40px rgba(10,20,50,.22);border:1px solid rgba(67,109,225,.18)}
.vsec__menu a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:.6em .9em;border-radius:12px;text-decoration:none;color:inherit;font-weight:700}
.vsec__menu a:hover,.vsec__menu a:focus-visible{background:#eef2fd;color:#2c4fb5;outline:none}
.vsec__menu a[aria-current="page"]{background:#436de1;color:#fff}
.vsec__n{font-size:.78rem;min-width:1.8em;text-align:center;padding:.1em .5em;border-radius:999px;background:rgba(67,109,225,.12)}
.vsec__menu a[aria-current="page"] .vsec__n{background:rgba(255,255,255,.25)}
.vsec--compact .vsec__btn{min-height:34px;padding:.4em 1em;font-size:.88rem}
.hs-head .vsec{margin-inline-start:auto}
.hs-head .vsec + .hs-more{margin-inline-start:0}
@media (prefers-reduced-motion:reduce){.vsec__chev{transition:none}}

/* [t379u] list cards match homepage .hs-card radius (22px desktop / 18px <=700px); images clip via overflow */
body.is-public{--card-r:22px}
@media (max-width:700px){body.is-public{--card-r:18px}}
body.is-public .card:not(.card--row){border-radius:var(--card-r)!important;overflow:hidden!important}
body.is-public .card--over.card--side .card__body{border-radius:0 0 var(--card-r) var(--card-r)!important}
@media (min-width:900px){body.is-public .card--over.card--side.card--big .card__body{border-radius:var(--card-r)!important}}
body.is-public .card--row > .card__img{border-radius:12px;overflow:hidden}
/* [t381 2026-10-31] section card text panel = homepage hs-card body: inset, all corners rounded, overlapping the photo, dark glass */
body.is-public{--cb-r:14px;--cb-glass:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 46%),rgba(12,14,22,.80)}
body.is-public .card:is(.card--card,.card--over.card--side):not(.card--type){display:flex!important;flex-direction:column;background:#0b0d12!important;box-shadow:0 18px 40px -26px rgba(0,0,0,.6)!important}
body.is-public .card:is(.card--card,.card--over.card--side):not(.card--type)>.card__img{display:block;flex:none}
body.is-public .card:is(.card--card,.card--over.card--side):not(.card--type)>.card__body{position:relative;z-index:1;box-sizing:border-box;margin:-34px 10px 10px!important;max-width:none!important;padding:14px 16px!important;border-radius:var(--cb-r)!important;background:var(--cb-glass)!important;border:1px solid rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 34px -18px rgba(0,0,0,.6)}
body.is-public .card--card:not(.card--type) .card__body :is(.card__title,.card__title a){color:#fff!important}
body.is-public .card--card:not(.card--type) .card__body .card__dek{color:rgba(255,255,255,.86)!important}
body.is-public .card--card:not(.card--type) .card__body :is(time,.byline-mini,.byline-mini *,.stamp){color:rgba(255,255,255,.72)!important}
@media (min-width:900px){
  body.is-public .card--over.card--side.card--big:not(.card--type){display:grid!important}
  body.is-public .card--over.card--side.card--big:not(.card--type)>.card__body{align-self:center;margin:10px!important;margin-inline-start:-26px!important}
}
/* [t382 2026-10-31] article section chip = same size/shape/alignment as the country chip beside it (all widths, all sections), red brand fill */
body.is-public .article__kick{align-items:center}
body.is-public .article__kick .kicker.kicker--pill:not(#\#):not(#\#){display:inline-flex!important;align-items:center;justify-content:center;box-sizing:border-box;min-height:32px;height:32px;padding:0 14px!important;border-radius:10px!important;font-size:13px!important;line-height:1!important;background:linear-gradient(135deg,#ff0a00,#d60800)!important;color:#fff!important;border:1px solid rgba(255,255,255,.22)}
body.is-public .article__kick .cchip-mini--lg:not(#\#):not(#\#){box-sizing:border-box;min-height:32px;height:32px;display:inline-flex;align-items:center}
/* [t383 2026-10-31] headline breathing room: comfortable line-height + gaps chips→title→dek */
body.is-public .article__head h1{line-height:1.42!important;margin-top:24px!important;margin-bottom:0!important;padding-block:.04em}
body.is-public .article__head h1+.dek{margin-top:22px!important}
body.is-public .card__title{line-height:1.45!important}