/* =========================================================================
   عرب بلجيكا — design system
   Mobile-first, RTL-native. Written with logical properties throughout.
   Sections: 1 fonts · 2 tokens · 3 base · 4 layout · 5 chrome · 6 cards
             7 home · 8 article · 9 lists · 10 pages · 11 footer · 12 utils
   ========================================================================= */

/* ── 1. Fonts (self-hosted, subset-split) ───────────────────────────────── */

@font-face {
  font-family: 'Readex Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/readex-600-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Readex Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/readex-700-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plexar-400-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plexar-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plexar-500-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plexar-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/plexar-700-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/plexar-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── 2. Tokens ──────────────────────────────────────────────────────────── */

:root {
  /* Brand ramp — editorial red, the newsroom accent. Carries links, active
     state and section kickers; never used to mean anything editorially. */
  --brand-50:  #fef2f3;
  --brand-100: #fde0e3;
  --brand-200: #f9c3ca;
  --brand-300: #f2929e;
  --brand-400: #e85c6f;
  --brand-500: #d92b43;
  --brand-600: #c8102e;
  --brand-700: #a30b24;
  --brand-800: #7d0a1c;
  --brand-900: #5a0815;

  /* Identity accents — the Belgian bands. Logo and brand rules only. */
  --be-black: #1a1920;
  --be-gold:  #f5b015;
  --be-red:   #e11d2e;

  /* Semantics — reserved for editorial confidence, never for decoration. */
  --ok:        #0e7a50;
  --ok-tint:   #e3f4ec;
  --warn:      #8f5b06;
  --warn-tint: #fbf1de;
  --live:      var(--brand-600);

  /* Surfaces & ink — neutral greys so the red stays the only colour. */
  --canvas:    #f5f5f6;
  --surface:   #ffffff;
  --surface-2: #efeff1;
  --surface-3: #e5e5e8;
  --line:      #e2e2e6;
  --line-soft: #ececef;
  --ink:       #15151a;
  --ink-2:     #4b4b53;
  --ink-3:     #75757e;
  --on-brand:  #ffffff;

  /* Admin chrome. Held dark in both themes so its white text stays legible;
     the height is a layout contract with the sticky site header below it. */
  --admin-bar-bg: #15151a;
  --admin-bar-h:  2.5rem;

  --accent:      var(--brand-600);
  --accent-hover:var(--brand-700);
  --accent-tint: var(--brand-50);
  --accent-line: var(--brand-200);
  --highlight: #fbeccb;

  --scrim: rgba(21, 21, 26, .55);
  --shadow-1: 0 1px 2px rgba(21, 21, 26, .05), 0 1px 3px rgba(21, 21, 26, .04);
  --shadow-2: 0 6px 16px -6px rgba(21, 21, 26, .12), 0 2px 6px -3px rgba(21, 21, 26, .06);
  --shadow-3: 0 24px 48px -20px rgba(21, 21, 26, .26), 0 6px 16px -10px rgba(21, 21, 26, .14);
  --header-bg: rgba(255, 255, 255, .84);

  /* Type */
  --font-body: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Readex Pro', 'IBM Plex Sans Arabic', system-ui, sans-serif;

  /* Space */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-7: 2rem;    --sp-8: 2.5rem;
  --sp-9: 3rem;    --sp-10: 4rem;

  /* Radii */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px;

  /* Frame */
  --gutter: 1rem;
  --wrap: 1200px;
  --wrap-narrow: 44rem;
  --header-h: 3.5rem;
  --safe-b: env(safe-area-inset-bottom, 0px);

  --ease: cubic-bezier(.22, .61, .36, 1);
  color-scheme: light;
}

html[data-text-scale='small'] { font-size: 90%; }
html[data-text-scale='large'] { font-size: 112.5%; }

[data-theme='dark'] {
  --canvas:    #0b0b0e;
  --surface:   #131317;
  --surface-2: #1b1b20;
  --surface-3: #232329;
  --line:      #27272d;
  --line-soft: #1f1f25;
  --ink:       #f4f4f6;
  --ink-2:     #b5b5bd;
  --ink-3:     #84848e;

  /* Lifted off the dark canvas so the bar still reads as a separate strip. */
  --admin-bar-bg: #2a2a33;

  --be-black:  #3b3a44;

  --ok:        #34d399;
  --ok-tint:   #0f2820;
  --warn:      #f0b45b;
  --warn-tint: #2a1f0e;

  --accent:      var(--brand-400);
  --accent-hover:var(--brand-300);
  --accent-tint: #2a1015;
  --accent-line: #4c1c25;
  --highlight:   #3a2e10;
  --live:        var(--brand-400);
  --on-brand:  #ffffff;

  --scrim: rgba(0, 0, 0, .68);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 8px 20px -8px rgba(0, 0, 0, .7);
  --shadow-3: 0 28px 56px -24px rgba(0, 0, 0, .85);
  --header-bg: rgba(11, 11, 14, .82);
  color-scheme: dark;
}

@media (min-width: 40em) { :root { --gutter: 1.5rem; } }
@media (min-width: 64em) { :root { --gutter: 2rem; --header-h: 4rem; } }

/* ── 3. Base ────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

/* Keep the floating audio player from covering the end of the page. */
body:has(.audio) { padding-block-end: calc(3.5rem + var(--safe-b)); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.38;
  margin: 0;
  letter-spacing: -.01em;
  text-wrap: balance;
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

hr { border: 0; border-block-start: 1px solid var(--line); margin: var(--sp-6) 0; }

::selection { background: var(--brand-100); color: var(--brand-900); }
[data-theme='dark'] ::selection { background: var(--brand-800); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.skip-link {
  position: fixed;
  inset-block-start: -100%;
  inset-inline-start: 1rem;
  z-index: 200;
  background: var(--accent);
  color: var(--on-brand);
  padding: .7rem 1.1rem;
  border-radius: var(--r-sm);
  font-weight: 600;
}
.skip-link:focus { inset-block-start: 1rem; }

/* ── 4. Layout ──────────────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: calc(var(--wrap-narrow) + var(--gutter) * 2); }

main { display: block; }

.section { padding-block: var(--sp-7); }
.section + .section { padding-block-start: 0; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-block-end: var(--sp-5);
}

.section-head h2 {
  font-size: 1.1875rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}

.section-head h2::before {
  content: '';
  inline-size: .3rem;
  block-size: 1.1em;
  border-radius: var(--r-full);
  background: var(--accent);
  flex: none;
}

.section-head__note {
  font-size: .8125rem;
  color: var(--ink-3);
}

.section-head__link {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
.section-head__link svg { inline-size: 1em; block-size: 1em; }

@media (min-width: 40em) {
  .section { padding-block: var(--sp-8); }
  .section-head h2 { font-size: 1.375rem; }
}

/* ── 5. Chrome: header, rails, sheets, tab bar, footer ──────────────────── */

/* The bar is deliberately dark chrome with white text, so it must NOT use
   --ink: that token inverts to near-white in dark mode, which left white text
   on a white bar. These two values are fixed against the theme on purpose. */
.admin-bar {
  background: var(--admin-bar-bg);
  color: #fff;
  font-size: .78rem;
  position: sticky;
  inset-block-start: 0;
  z-index: 60;
  /* A shadow, not a border: the header's sticky offset is --admin-bar-h, and a
     border would make the bar 1px taller than that and misalign the two. */
  box-shadow: 0 1px 0 rgba(255, 255, 255, .1);
}
.admin-bar__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: .75rem;
  /* Fixed height rather than wrapping: the site header sticks directly below
     this bar, so its offset has to be a value the layout can rely on. The
     actions scroll sideways on narrow screens instead of adding a second row. */
  block-size: var(--admin-bar-h);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-bar__inner::-webkit-scrollbar { display: none; }
.admin-bar__badge {
  background: var(--brand-500);
  padding: .1rem .5rem;
  border-radius: var(--r-full);
  font-weight: 700;
  letter-spacing: .04em;
  flex: none;
}
.admin-bar a, .admin-bar button { color: #fff; opacity: .85; }
.admin-bar a:hover, .admin-bar button:hover { opacity: 1; }
.admin-bar a { flex: none; }
.admin-bar__actions { display: flex; gap: .5rem; margin-inline-start: auto; flex: none; }
.admin-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r-full);
  padding: .15rem .6rem;
  background: transparent;
  white-space: nowrap;
  cursor: pointer;
  font: inherit;
  line-height: 1.6;
}
.admin-bar__btn:hover { background: rgba(255, 255, 255, .1); }
/* Scoped through .admin-bar so it outweighs the `.admin-bar button` colour
   rule above, which otherwise forced Delete to plain white in both themes. */
.admin-bar .admin-bar__btn--danger { border-color: rgba(255, 120, 130, .5); color: #ff9aa4; opacity: 1; }
.admin-bar .admin-bar__btn--danger:hover { background: rgba(255, 120, 130, .16); color: #ffb3bb; }

/* The header sticks directly beneath the admin bar rather than under it. */
body.has-admin-bar .site-header { inset-block-start: var(--admin-bar-h); }

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-block-end: 1px solid var(--line);
  transition: transform .28s var(--ease);
}

/* Reading gets the whole screen: the header steps out of the way going down
   and comes back on the first flick up, so nav is never more than a flick. */
.site-header.is-tucked { transform: translateY(-100%); }
@media (min-width: 54em) { .site-header.is-tucked { transform: none; } }

.topbar {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  block-size: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.brand {
  display: flex;
  align-items: center;
  gap: .625rem;
  min-inline-size: 0;
}
/* The mark is drawn on transparency now, not a filled tile, so the rounded
   corners and drop shadow that framed the old letter-in-a-box would render as
   a shadow under three floating bars. Colour comes from `color`: the neutral
   bar is currentColor, which is how one inline SVG serves both themes. */
.brand__mark {
  inline-size: 2rem;
  block-size: 2rem;
  flex: none;
  color: var(--ink);
}
/* The mark is inline SVG now and its neutral bar is `currentColor`, so the
   theme is followed by inheritance. The two-file swap this replaced is what
   left the header on the new mark while other pages kept the old one. */
.brand__text { display: flex; flex-direction: column; min-inline-size: 0; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.2;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.brand__tag {
  display: none;
  font-size: .6875rem;
  color: var(--ink-3);
  line-height: 1.3;
  white-space: nowrap;
}

.topbar__actions {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: .25rem;
}

.icon-btn {
  inline-size: 2.375rem;
  block-size: 2.375rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  color: var(--ink-2);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn svg { inline-size: 1.25rem; block-size: 1.25rem; }
.text-size-decrease, .text-size-increase { font-size: .72rem; font-family: var(--font-sans); font-weight: 700; }

.theme-toggle .icon-sun { display: none; }
[data-theme='dark'] .theme-toggle .icon-sun { display: block; }
[data-theme='dark'] .theme-toggle .icon-moon { display: none; }

.topbar__search { display: none; }

/* Desk rail — horizontally scrollable section chips */
.rail {
  border-block-start: 1px solid var(--line-soft);
  background: var(--surface);
}
.rail__track {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: .5rem var(--gutter);
  display: flex;
  gap: .375rem;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.rail__track::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  scroll-snap-align: start;
  padding: .375rem .875rem;
  border-radius: var(--r-full);
  font-size: .8438rem;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.chip:hover { background: var(--surface-3); color: var(--ink); }
.chip.is-active {
  background: var(--brand-600);
  color: #fff;
  font-weight: 600;
}
.chip.is-active:hover { background: var(--brand-700); color: #fff; }

@media (min-width: 54em) {
  .brand__mark { inline-size: 2.25rem; block-size: 2.25rem; }
  .brand__name { font-size: 1.1875rem; }
  .brand__tag { display: block; }
  .topbar__search {
    display: block;
    margin-inline-start: auto;
    position: relative;
    inline-size: min(18rem, 30vw);
  }
  .topbar__search input {
    inline-size: 100%;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-full);
    padding: .5rem 2.25rem .5rem .875rem;
    font-size: .875rem;
    transition: border-color .18s var(--ease), background .18s var(--ease);
  }
  .topbar__search input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
  }
  .topbar__search svg {
    position: absolute;
    inset-inline-start: .75rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    inline-size: 1rem;
    block-size: 1rem;
    color: var(--ink-3);
    pointer-events: none;
  }
  .topbar__actions { margin-inline-start: 0; }
  .search-open-btn { display: none; }
}

/* Sheets (search) */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  align-items: end;
}
.sheet[hidden] { display: none; }
.sheet__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  animation: fade .2s var(--ease);
}
.sheet__panel {
  position: relative;
  background: var(--surface);
  border-start-start-radius: var(--r-xl);
  border-start-end-radius: var(--r-xl);
  padding: var(--sp-4) var(--gutter) calc(var(--sp-6) + var(--safe-b));
  box-shadow: var(--shadow-3);
  animation: sheet-in .28s var(--ease);
  max-block-size: 86vh;
  overflow-y: auto;
}
.sheet__grip {
  inline-size: 2.5rem;
  block-size: .25rem;
  border-radius: var(--r-full);
  background: var(--surface-3);
  margin: 0 auto var(--sp-4);
}
.sheet__sub {
  margin-block-start: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  font-size: .8125rem;
  color: var(--ink-2);
}

@media (min-width: 40em) {
  .sheet { align-items: start; justify-items: center; padding-block-start: 8vh; }
  .sheet__panel {
    inline-size: min(38rem, 92vw);
    border-radius: var(--r-lg);
    animation: pop-in .24s var(--ease);
  }
  .sheet__grip { display: none; }
}

/* Search field inside the sheet */
.searchbox { position: relative; display: flex; gap: .5rem; }
.searchbox input {
  flex: 1;
  min-inline-size: 0;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: .8125rem 2.5rem .8125rem 1rem;
  font-size: 1rem;
}
.searchbox input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.searchbox__icon {
  position: absolute;
  inset-inline-start: .875rem;
  inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: 1.125rem;
  block-size: 1.125rem;
  color: var(--ink-3);
  pointer-events: none;
}
.btn-primary {
  background: var(--brand-600);
  color: #fff;
  border-radius: var(--r-md);
  padding: .8125rem 1.25rem;
  font-weight: 600;
  font-size: .9375rem;
  white-space: nowrap;
  transition: background .18s var(--ease), transform .12s var(--ease);
}
.btn-primary:hover { background: var(--brand-700); }
.btn-primary:active { transform: scale(.98); }

@keyframes fade { from { opacity: 0; } }
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes pop-in { from { transform: translateY(-8px) scale(.98); opacity: 0; } }

/* Banner shown when the database is unreachable */
.notice {
  background: var(--warn-tint);
  color: var(--warn);
  font-size: .875rem;
  font-weight: 500;
  border-block-end: 1px solid var(--line);
}
.notice .wrap { padding-block: .625rem; }

/* Reading progress + back to top */
.progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  block-size: 3px;
  inline-size: 0;
  background: linear-gradient(to left, var(--brand-600), var(--brand-400));
  z-index: 70;
  transition: inline-size .1s linear;
}

.to-top {
  position: fixed;
  inset-inline-end: var(--gutter);
  inset-block-end: calc(var(--safe-b) + 1rem);
  z-index: 45;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
  box-shadow: var(--shadow-2);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(.5rem);
  transition: all .22s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top svg { inline-size: 1.125rem; block-size: 1.125rem; }
@media (min-width: 54em) { .to-top { inset-block-end: 1.5rem; } }

/* ── 6. Cards ───────────────────────────────────────────────────────────── */

.tagrow {
  display: flex;
  align-items: center;
  gap: .375rem;
  flex-wrap: wrap;
  margin-block-end: .5rem;
}

.tag {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.tag::before {
  content: '';
  inline-size: .3125rem;
  block-size: .3125rem;
  border-radius: var(--r-full);
  background: currentColor;
}
.tag--muted { color: var(--ink-3); }

.pill {
  font-size: .6875rem;
  font-weight: 600;
  padding: .1875rem .5rem;
  border-radius: var(--r-full);
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  background: var(--surface-2);
  color: var(--ink-2);
}
.pill svg { inline-size: .75rem; block-size: .75rem; }
.pill--ok { background: var(--ok-tint); color: var(--ok); }
.pill--warn { background: var(--warn-tint); color: var(--warn); }

.meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  font-size: .75rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.meta > * + *::before {
  content: '·';
  margin-inline-end: .5rem;
  color: var(--line);
}
[data-theme='dark'] .meta > * + *::before { color: var(--surface-3); }

/* Story card: row on phones, stacked on wider screens */
.story {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-block-end: 1px solid var(--line-soft);
}
.story:last-child { border-block-end: 0; }

.story__media {
  flex: none;
  align-self: flex-start;
  inline-size: 6.75rem;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-2);
  order: 2;
}
.story__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform .4s var(--ease);
}
.story:hover .story__media img { transform: scale(1.045); }

.story__body { min-inline-size: 0; flex: 1; }

.story__title {
  font-size: 1rem;
  line-height: 1.5;
  margin-block-end: .375rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.story:hover .story__title { color: var(--accent); }

.story__excerpt {
  display: none;
  color: var(--ink-2);
  font-size: .875rem;
  line-height: 1.7;
  margin-block-end: .5rem;
}

.story__link { position: absolute; inset: 0; z-index: 1; }
.story__body > *, .story__media { position: relative; }

.sourcing {
  display: flex;
  align-items: center;
  gap: .375rem;
  flex-wrap: wrap;
  margin-block-start: .5rem;
}

/* Grid variant used by the feed and archives */
.grid {
  display: grid;
  gap: 0;
}

@media (min-width: 40em) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6) var(--sp-6);
  }
  .story {
    flex-direction: column;
    gap: var(--sp-3);
    padding-block: 0;
    border-block-end: 0;
  }
  .story__media {
    inline-size: 100%;
    aspect-ratio: 1;
    border-radius: var(--r-md);
    order: 0;
  }
  .story__title { font-size: 1.0625rem; -webkit-line-clamp: 3; }
  .story__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (min-width: 64em) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-7) var(--sp-6); }
  .story__title { font-size: 1.125rem; }
}

/* ── 7. Home ────────────────────────────────────────────────────────────── */

.masthead {
  padding-block: var(--sp-5) var(--sp-4);
}
.masthead__kicker {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--live);
  letter-spacing: .02em;
  margin-block-end: .625rem;
}
.masthead__kicker .dot {
  inline-size: .4375rem;
  block-size: .4375rem;
  border-radius: var(--r-full);
  background: currentColor;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(.82); }
}
.masthead h1 {
  font-size: clamp(1.5rem, 6vw, 2.125rem);
  line-height: 1.3;
  letter-spacing: -.025em;
}
.masthead p {
  display: none;
  color: var(--ink-2);
  font-size: .9375rem;
  margin-block-start: .5rem;
  max-inline-size: 34rem;
}
@media (min-width: 40em) {
  .masthead { padding-block: var(--sp-7) var(--sp-5); }
  .masthead p { display: block; }
}

.lead {
  position: relative;
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.lead:hover { box-shadow: var(--shadow-2); }
.lead__media {
  aspect-ratio: 1;
  background: var(--surface-2);
  overflow: hidden;
}
.lead__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.lead:hover .lead__media img { transform: scale(1.03); }
.lead__body { padding: var(--sp-5); }
.lead__title {
  font-size: clamp(1.25rem, 5.2vw, 1.75rem);
  line-height: 1.38;
  letter-spacing: -.02em;
}
.lead__excerpt {
  color: var(--ink-2);
  font-size: .9375rem;
  line-height: 1.75;
  margin-block-start: .625rem;
}
.lead__foot {
  margin-block-start: var(--sp-4);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.hero { display: grid; gap: var(--sp-5); }

.hero__side {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-2) var(--sp-5);
}

@media (min-width: 64em) {
  .hero {
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: start;
  }
  .lead__media { aspect-ratio: 1; }
  .lead__body { padding: var(--sp-6); }
  .lead__title { font-size: 2rem; }
  .lead__excerpt { font-size: 1rem; }
  .hero__side .story { flex-direction: row; padding-block: var(--sp-4); border-block-end: 1px solid var(--line-soft); gap: var(--sp-3); }
  .hero__side .story:last-child { border-block-end: 0; }
  .hero__side .story__media { inline-size: 5.5rem; aspect-ratio: 1; border-radius: var(--r-sm); order: 2; }
  .hero__side .story__title { font-size: .9375rem; }
  .hero__side .story__excerpt { display: none; }
}

/* Trust strip */
.trust-strip {
  display: grid;
  gap: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.trust-strip__item { display: flex; gap: .75rem; align-items: flex-start; }
.trust-strip__icon {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex: none;
}
.trust-strip__icon svg { inline-size: 1.125rem; block-size: 1.125rem; }
.trust-strip h3 { font-size: .9375rem; margin-block-end: .1875rem; }
.trust-strip p { font-size: .8125rem; color: var(--ink-2); line-height: 1.65; }
@media (min-width: 48em) {
  .trust-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); padding: var(--sp-6); }
}

/* ── 8. Article ─────────────────────────────────────────────────────────── */

.backlink {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ink-3);
  padding-block: var(--sp-4);
}
.backlink:hover { color: var(--accent); }
.backlink svg { inline-size: 1rem; block-size: 1rem; }

.article { display: grid; gap: var(--sp-7); align-items: start; }

.article__head { margin-block-end: var(--sp-5); }
.article__title {
  font-size: clamp(1.5rem, 5.6vw, 2.375rem);
  line-height: 1.34;
  letter-spacing: -.025em;
}
.article__standfirst {
  color: var(--ink-2);
  font-size: 1.0625rem;
  line-height: 1.8;
  margin-block-start: var(--sp-3);
}
.article__meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-block-start: var(--sp-4);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--line-soft);
  font-size: .8125rem;
  color: var(--ink-3);
}
.article__meta > * + *::before {
  content: '·';
  margin-inline-end: .5rem;
  color: var(--line);
}
.article__meta > .pill::before { content: none; }
[data-theme='dark'] .article__meta > * + *::before { color: var(--surface-3); }
.article__byline { font-weight: 600; color: var(--ink-2); }

.article__hero {
  margin: 0 calc(var(--gutter) * -1) var(--sp-5);
  background: var(--surface-2);
  aspect-ratio: 1;
}
.article__hero img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.article__hero figcaption {
  font-size: .75rem;
  color: var(--ink-3);
  padding: .5rem var(--gutter) 0;
}
@media (min-width: 40em) {
  .article__hero { margin-inline: 0; border-radius: var(--r-lg); overflow: hidden; }
  .article__hero figcaption { padding-inline: var(--sp-4); padding-block-end: .75rem; }
}

.correction {
  background: var(--warn-tint);
  color: var(--warn);
  border-inline-start: 3px solid currentColor;
  border-radius: var(--r-sm);
  padding: .875rem 1rem;
  font-size: .875rem;
  line-height: 1.7;
  margin-block-end: var(--sp-5);
}

/* Neutral field with a red rule — a red-tinted panel would read as an alert. */
.why {
  background: var(--surface-2);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--r-sm);
  padding: var(--sp-5);
  margin-block-end: var(--sp-6);
}
.why__label {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8125rem;
  color: var(--accent);
  margin-block-end: .5rem;
}
.why__label svg { inline-size: 1rem; block-size: 1rem; }
.why p { font-size: .9375rem; line-height: 1.85; color: var(--ink); }

.prose {
  font-size: 1.0625rem;
  line-height: 2.05;
  color: var(--ink);
  max-inline-size: 40rem;
}
.prose p { margin-block-end: 1.35em; }
.prose > p:first-of-type { font-size: 1.125rem; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: .25em; }
.prose h2 {
  font-size: 1.25rem;
  margin-block: 1.6em .7em;
}
.prose ul { margin-block-end: 1.35em; }
.prose li {
  position: relative;
  padding-inline-start: 1.25rem;
  margin-block-end: .5em;
}
.prose li::before {
  content: '';
  position: absolute;
  inset-inline-start: .25rem;
  inset-block-start: .85em;
  inline-size: .375rem;
  block-size: .375rem;
  border-radius: var(--r-full);
  background: var(--accent);
}
.prose strong { font-weight: 700; }

.sentence { transition: background .3s var(--ease); border-radius: 3px; }
.sentence.is-active { background: var(--highlight); box-shadow: 0 0 0 .2em var(--highlight); }

@media (min-width: 40em) { .prose { font-size: 1.125rem; } }

.share {
  margin-block-start: var(--sp-7);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.share__label { font-size: .8125rem; font-weight: 600; color: var(--ink-3); }
.share__row { display: flex; gap: .5rem; flex-wrap: wrap; }
.share__btn {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--ink-2);
  display: grid;
  place-items: center;
  position: relative;
  transition: transform .16s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.share__btn svg { inline-size: 1.0625rem; block-size: 1.0625rem; }
.share__btn:hover { transform: translateY(-2px); background: var(--ink); color: var(--canvas); }
.share__btn--whatsapp:hover { background: #25d366; color: #fff; }
.share__btn--telegram:hover { background: #29a9eb; color: #fff; }
.share__btn--facebook:hover { background: #1877f2; color: #fff; }
.share__btn.is-copied::after {
  content: 'تم النسخ';
  position: absolute;
  inset-block-end: calc(100% + .4rem);
  inset-inline-start: 50%;
  transform: translateX(50%);
  background: var(--ink);
  color: var(--canvas);
  font-size: .6875rem;
  padding: .2rem .5rem;
  border-radius: var(--r-xs);
  white-space: nowrap;
}

/* Trust panel */
.trust { display: grid; gap: .625rem; }
.trust__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.trust__toggle {
  inline-size: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .875rem var(--sp-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .875rem;
  cursor: pointer;
  list-style: none;
}
.trust__toggle::-webkit-details-marker { display: none; }
.trust__toggle::after {
  content: '';
  inline-size: .5rem;
  block-size: .5rem;
  /* Physical borders on purpose: the caret must point down in both directions. */
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s var(--ease);
  flex: none;
}
.trust__card[open] .trust__toggle::after { transform: translateY(2px) rotate(-135deg); }
.trust__count {
  margin-inline-start: auto;
  font-size: .6875rem;
  font-weight: 600;
  color: var(--ink-3);
  background: var(--surface-2);
  padding: .1rem .45rem;
  border-radius: var(--r-full);
}
.trust__body { padding: 0 var(--sp-4) var(--sp-4); }

.sourcelist { display: grid; gap: .625rem; }
.sourcelist a { display: block; }
.sourcelist__name {
  font-size: .75rem;
  font-weight: 700;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: .3rem;
}
.sourcelist__name svg { inline-size: .75rem; block-size: .75rem; opacity: .6; }
.sourcelist__title {
  font-size: .8125rem;
  color: var(--ink-2);
  line-height: 1.6;
  display: block;
}
.sourcelist a:hover .sourcelist__title { color: var(--ink); }

.claims li {
  position: relative;
  padding-inline-start: 1.375rem;
  font-size: .8438rem;
  line-height: 1.7;
  color: var(--ink-2);
  margin-block-end: .625rem;
}
.claims li:last-child { margin-block-end: 0; }
.claims li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .55em;
  inline-size: .5rem;
  block-size: .5rem;
  border-radius: var(--r-full);
  background: var(--ok);
}
.claims--warn li::before { background: var(--warn); }
.claims--open li::before { background: var(--ink-3); }
.claims__attr { display: block; color: var(--ink-3); font-size: .75rem; margin-block-start: .1rem; }

.trust__note {
  font-size: .75rem;
  color: var(--ink-3);
  line-height: 1.7;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  padding: .75rem;
}
.trust__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .875rem var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: .875rem;
  color: var(--accent);
}
.trust__link:hover { background: var(--accent-tint); }

@media (min-width: 64em) {
  .article {
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--sp-8);
  }
  .article__aside { position: sticky; inset-block-start: calc(var(--header-h) + 1.25rem); }

  /* With every trust panel switched off there is no aside to sit beside, so
     the two-column grid would reserve 20rem of nothing and leave the text
     hanging off-centre. Centre a single readable measure instead. */
  .article--solo {
    grid-template-columns: minmax(0, var(--wrap-narrow));
    justify-content: center;
  }
}

/* Audio bar */
.audio {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 48;
  background: var(--header-bg);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-block-start: 1px solid var(--line);
}
.audio__track { block-size: 3px; background: var(--surface-3); cursor: pointer; }
.audio__fill { block-size: 100%; inline-size: 0; background: var(--accent); }
.audio__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: .625rem var(--gutter);
  display: flex;
  align-items: center;
  gap: .75rem;
}
.audio__label {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  font-weight: 600;
}
.audio__label svg { inline-size: 1rem; block-size: 1rem; color: var(--accent); }
.audio__time {
  font-size: .75rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  margin-inline-start: auto;
}
.audio__btn {
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  color: var(--ink-2);
  background: var(--surface-2);
}
.audio__btn svg { inline-size: .9375rem; block-size: .9375rem; }
.audio__play {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  background: var(--brand-600);
  color: #fff;
}
.audio__play svg { inline-size: 1rem; block-size: 1rem; }
.audio__play .ico-pause, .audio.is-playing .audio__play .ico-play { display: none; }
.audio.is-playing .audio__play .ico-pause { display: block; }

/* ── 9. Lists: archive, digest, search, related ─────────────────────────── */

.page-head {
  padding-block: var(--sp-6) var(--sp-5);
  border-block-end: 1px solid var(--line);
  margin-block-end: var(--sp-6);
}
.page-head h1 {
  font-size: clamp(1.5rem, 6vw, 2.125rem);
  letter-spacing: -.025em;
}
.page-head__note {
  color: var(--ink-2);
  font-size: .875rem;
  margin-block-start: .5rem;
}

.stats { display: flex; gap: .5rem; flex-wrap: wrap; margin-block-start: var(--sp-4); }
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: .5rem .75rem;
  font-size: .75rem;
  color: var(--ink-3);
}
.stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--ink);
  line-height: 1.2;
}

.digest-group { margin-block-end: var(--sp-8); }
.digest-list { display: grid; gap: 0; }
.digest-item {
  position: relative;
  padding-block: var(--sp-4);
  border-block-end: 1px solid var(--line-soft);
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}
.digest-item:last-child { border-block-end: 0; }
.digest-item__time {
  font-size: .75rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  padding-block-start: .2rem;
  inline-size: 2.75rem;
  flex: none;
}
.digest-item h3 { font-size: .9688rem; line-height: 1.55; }
.digest-item p {
  font-size: .8438rem;
  color: var(--ink-2);
  line-height: 1.7;
  margin-block-start: .25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.digest-item:hover h3 { color: var(--accent); }

.related-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 72vw;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block-end: .5rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.related-rail::-webkit-scrollbar { display: none; }
.related-rail > * { scroll-snap-align: start; }
.related-rail .story { flex-direction: column; border-block-end: 0; padding-block: 0; gap: var(--sp-3); }
.related-rail .story__media { inline-size: 100%; aspect-ratio: 1; border-radius: var(--r-md); order: 0; }

@media (min-width: 40em) {
  .related-rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
}

.pagination {
  display: flex;
  gap: .375rem;
  justify-content: center;
  flex-wrap: wrap;
  padding-block: var(--sp-6);
}
.pagination a, .pagination span {
  min-inline-size: 2.25rem;
  padding: .4rem .6rem;
  text-align: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  font-size: .875rem;
}
.pagination .current { background: var(--accent); color: var(--on-brand); border-color: transparent; }

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding-block: var(--sp-6);
  color: var(--ink-3);
  font-size: .8125rem;
}
.spinner {
  inline-size: 1rem;
  block-size: 1rem;
  border: 2px solid var(--surface-3);
  border-block-start-color: var(--accent);
  border-radius: var(--r-full);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty {
  text-align: center;
  padding: var(--sp-10) var(--gutter);
  color: var(--ink-2);
}
.empty img { inline-size: 3.5rem; block-size: 3.5rem; margin: 0 auto var(--sp-4); border-radius: var(--r-md); opacity: .9; }
.empty h2 { font-size: 1.125rem; margin-block-end: .5rem; }
.empty p { font-size: .875rem; color: var(--ink-3); }

/* ── 10. Static pages & compare ─────────────────────────────────────────── */

.doc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5);
  margin-block-end: var(--sp-8);
}
.doc h1 {
  font-size: clamp(1.5rem, 5.5vw, 2rem);
  letter-spacing: -.025em;
  margin-block-end: var(--sp-5);
}
.doc h2 {
  font-size: 1.0625rem;
  margin-block: var(--sp-6) var(--sp-3);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--line-soft);
}
.doc h2:first-of-type { border-block-start: 0; padding-block-start: 0; margin-block-start: 0; }
.doc p { margin-block-end: var(--sp-4); color: var(--ink-2); line-height: 1.9; font-size: .9375rem; }
.doc ul { margin-block-end: var(--sp-4); }
.doc li {
  position: relative;
  padding-inline-start: 1.25rem;
  margin-block-end: .625rem;
  color: var(--ink-2);
  font-size: .9375rem;
  line-height: 1.8;
}
.doc li::before {
  content: '';
  position: absolute;
  inset-inline-start: .25rem;
  inset-block-start: .78em;
  inline-size: .375rem;
  block-size: .375rem;
  border-radius: var(--r-full);
  background: var(--accent);
}
.doc strong { color: var(--ink); font-weight: 600; }
.doc a { color: var(--accent); text-decoration: underline; text-underline-offset: .25em; }
@media (min-width: 40em) { .doc { padding: var(--sp-8); } }

.contact-cards { display: grid; gap: .75rem; margin-block: var(--sp-5); }
.contact-card {
  display: flex;
  gap: .875rem;
  align-items: center;
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}
.contact-card__icon {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex: none;
}
.contact-card__icon svg { inline-size: 1.125rem; block-size: 1.125rem; }
.contact-card strong { display: block; font-size: .8125rem; color: var(--ink-3); font-weight: 600; }
.contact-card a { color: var(--accent); font-weight: 600; font-size: .9375rem; }
@media (min-width: 40em) { .contact-cards { grid-template-columns: repeat(2, 1fr); } }

.compare { display: grid; gap: var(--sp-5); margin-block-end: var(--sp-8); }
.compare__col {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}
.compare__label {
  font-size: .6875rem;
  font-weight: 700;
  color: var(--ink-3);
  letter-spacing: .04em;
  display: block;
  margin-block-end: .5rem;
}
.compare__col h2 { font-size: 1.0625rem; margin-block-end: var(--sp-3); }
.compare__text {
  white-space: pre-wrap;
  font-size: .875rem;
  line-height: 1.85;
  color: var(--ink-2);
}
@media (min-width: 64em) { .compare { grid-template-columns: 1fr 1fr; } }

/* Search page */
.search-hero { padding-block: var(--sp-6) var(--sp-5); }
.search-hero h1 { font-size: 1.5rem; margin-block-end: var(--sp-4); }
.search-count { font-size: .875rem; color: var(--ink-3); margin-block: var(--sp-4); }

/* Ads */
.ad {
  margin-block: var(--sp-6);
  padding: var(--sp-3);
  background: var(--surface-2);
  border-radius: var(--r-md);
  min-block-size: 6.25rem;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.ad::before {
  content: 'إعلان';
  font-size: .625rem;
  color: var(--ink-3);
  letter-spacing: .08em;
  margin-block-end: .35rem;
}
.grid > .ad { grid-column: 1 / -1; }

/* ── 11. Footer ─────────────────────────────────────────────────────────── */

/* The footer opens on the Belgian bands — the one place in the interface,
   besides the logo, where the tricolour appears. */
.site-footer {
  margin-block-start: var(--sp-9);
  background-color: var(--surface);
  background-image: linear-gradient(
    to right,
    var(--be-black) 0 33.33%,
    var(--be-gold) 33.33% 66.66%,
    var(--be-red) 66.66% 100%
  );
  background-size: 100% 3px;
  background-repeat: no-repeat;
  background-position: top center;
}
.footer-main {
  display: grid;
  gap: var(--sp-7);
  padding-block: var(--sp-8);
}
.footer-brand { display: flex; flex-direction: column; gap: .875rem; align-items: flex-start; }
.footer-brand .brand__name { font-size: 1.25rem; }
.footer-brand p { font-size: .875rem; color: var(--ink-2); line-height: 1.8; max-inline-size: 30rem; }
.footer-edition {
  font-size: .75rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-tint);
  border-radius: var(--r-full);
  padding: .25rem .75rem;
}
.footer-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
.footer-nav h3 {
  font-size: .75rem;
  color: var(--ink-3);
  letter-spacing: .06em;
  margin-block-end: .875rem;
}
.footer-nav a {
  display: block;
  font-size: .875rem;
  color: var(--ink-2);
  padding-block: .3125rem;
}
.footer-nav a:hover { color: var(--accent); }
.footer-bottom {
  border-block-start: 1px solid var(--line-soft);
  padding-block: var(--sp-5);
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  font-size: .75rem;
  color: var(--ink-3);
}
.footer-social { display: flex; gap: .5rem; }
.footer-social a {
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--r-full);
  background: var(--surface-2);
  display: grid;
  place-items: center;
  color: var(--ink-2);
}
.footer-social a:hover { background: var(--accent); color: var(--on-brand); }
.footer-social svg { inline-size: .9375rem; block-size: .9375rem; }
.footer-install { border: 1px solid var(--line); border-radius: var(--r-full); padding: .35rem .65rem; color: var(--ink-2); font: inherit; font-size: .75rem; }
.footer-install:hover { background: var(--surface-2); color: var(--ink); }

@media (min-width: 48em) {
  .footer-main { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr); gap: var(--sp-9); }
  .footer-nav { grid-template-columns: repeat(3, 1fr); }
}

/* Cookie consent */
.consent {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  align-items: end;
}
.consent[hidden] { display: none; }
.consent__scrim { position: absolute; inset: 0; background: var(--scrim); }
.consent__panel {
  position: relative;
  background: var(--surface);
  border-start-start-radius: var(--r-xl);
  border-start-end-radius: var(--r-xl);
  padding: var(--sp-6) var(--gutter) calc(var(--sp-6) + var(--safe-b));
  box-shadow: var(--shadow-3);
  animation: sheet-in .3s var(--ease);
}
.consent__panel h2 { font-size: 1.0625rem; margin-block-end: .5rem; }
.consent__panel p { font-size: .875rem; color: var(--ink-2); line-height: 1.75; margin-block-end: var(--sp-5); }
.consent__panel a { color: var(--accent); text-decoration: underline; }
.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; }
.btn-ghost {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: .8125rem 1rem;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--ink-2);
}
.btn-ghost:hover { background: var(--surface-2); }
@media (min-width: 40em) {
  .consent { align-items: end; justify-items: end; padding: var(--sp-6); }
  .consent__panel { inline-size: min(26rem, 100%); border-radius: var(--r-lg); }
}

/* ── 12. Utilities & motion ─────────────────────────────────────────────── */

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.reveal { opacity: 0; transform: translateY(12px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .to-top, .share, .audio, .site-footer, .ad, .article__aside { display: none !important; }
  body { padding: 0; background: #fff; }
  .prose { max-inline-size: none; }
}

/* ── 12. Text-only presentation ─────────────────────────────────────────────
   With images off, the front page loses the thing that carried its hierarchy.
   The lead, the side stories and the latest list are the same component at the
   same size; the photograph is what told them apart. Left alone the page reads
   as one uniform wall of text.

   So the hierarchy is rebuilt from type and rules instead — three clearly
   different sizes, in the way a newspaper front page separates a splash from
   its seconds from the digest. Card chrome is dropped throughout: a border
   exists to frame a picture, and with nothing to frame it just boxes text. */

/* The masthead is a standing element, not a headline. With no image between it
   and the splash, two large type blocks would otherwise collide. */
[data-images='off'] .masthead { padding-block: var(--sp-4) var(--sp-2); }
[data-images='off'] .masthead h1 { font-size: clamp(1.125rem, 3.4vw, 1.375rem); }
[data-images='off'] .masthead p { font-size: .875rem; color: var(--ink-3); }

/* ---- Tier 1: the splash ---- */
[data-images='off'] .lead {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  border-block-end: 2px solid var(--ink);
}
[data-images='off'] .lead:hover { box-shadow: none; }
[data-images='off'] .lead::before {
  content: '';
  display: block;
  block-size: 6px;
  margin-block-end: var(--sp-5);
  background: linear-gradient(90deg,
    var(--be-black) 0 33.33%, var(--be-gold) 33.33% 66.66%, var(--be-red) 66.66%);
}
[data-images='off'] .lead__body { padding: 0 0 var(--sp-5); }
[data-images='off'] .lead__title {
  font-size: clamp(1.75rem, 7.4vw, 3rem);
  line-height: 1.24;
  letter-spacing: -.03em;
}
[data-images='off'] .lead__excerpt {
  font-size: 1.0625rem;
  color: var(--ink-2);
  max-inline-size: 46ch;
}

/* ---- Tier 2: the seconds ---- */
[data-images='off'] .hero__side {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
[data-images='off'] .hero__side .story {
  padding-block: var(--sp-4);
  border-block-end: 1px solid var(--line);
}
[data-images='off'] .hero__side .story:last-child { border-block-end: 0; }
[data-images='off'] .hero__side .story__title {
  font-size: 1.1875rem;
  line-height: 1.42;
  -webkit-line-clamp: 4;
}
/* Seconds stay headline-only: their job is to be scanned, and an excerpt here
   would flatten them back into the digest below. */
[data-images='off'] .hero__side .story__excerpt { display: none; }

/* ---- Tier 3: the digest ---- */
[data-images='off'] .story { padding-block: var(--sp-5); }
[data-images='off'] .story__title { font-size: 1.0625rem; line-height: 1.5; }
[data-images='off'] .story__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 64em) {
  /* The splash needs the wider measure once the side column exists, but the
     text itself must not run to a full-width line. */
  [data-images='off'] .lead__title { font-size: clamp(2.25rem, 3.6vw, 3.25rem); max-inline-size: 18ch; }
  /* A rule between the splash and the seconds, since neither has a border. */
  [data-images='off'] .hero__side {
    border-inline-end: 1px solid var(--line);
    padding-inline-end: var(--sp-6);
  }
}

/* ── 13. Universal square-card mode ─────────────────────────────────────────
   A 1:1 asset is the sole visual across article, listing, metadata, and
   Facebook surfaces. Containers therefore stay square instead of cropping or
   letterboxing a second ratio. */

[data-image-mode='card'] .lead__media { aspect-ratio: 1; background: transparent; }
[data-image-mode='card'] .lead__media img { object-fit: contain; }
[data-image-mode='card'] .article__hero img { aspect-ratio: 1; object-fit: contain; }
[data-image-mode='card'] .lead:hover .lead__media img { transform: none; }

/* Compact rows keep the card at a square thumbnail and retain enough text to
   make the repeated headline useful rather than decorative. */
[data-image-mode='card'] .story__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Digest: day-by-day navigation ───────────────────────────────────────── */

.daynav {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-block-start: var(--sp-4);
}
.daynav__step,
.daynav__today {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8125rem;
  font-weight: 600;
  padding: .4rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  color: var(--ink-2);
  background: var(--surface);
}
.daynav__step svg { inline-size: 1em; block-size: 1em; }
.daynav__step:hover,
.daynav__today:hover { border-color: var(--accent-line); color: var(--accent); }
.daynav__today { color: var(--accent); border-color: var(--accent-line); }



/* The period control: how far back to look, not which date to open. */
.periodnav {
  display: inline-flex;
  gap: .25rem;
  padding: .25rem;
  margin-block-start: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface-2);
}
.periodnav__opt {
  padding: .35rem .85rem;
  border-radius: var(--r-full);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.periodnav__opt:hover { color: var(--accent); }
.periodnav__opt.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px -1px rgba(21, 21, 26, .18);
}
[data-theme='dark'] .periodnav__opt.is-active { box-shadow: none; background: var(--surface-3); }

/* Wide enough for 'اليوم 18:30' and 'الأربعاء', which a clock time never needed. */
.digest-item__time { min-inline-size: 5.5rem; }

.page-head__note--sub { font-size: .8125rem; color: var(--ink-3); margin-block-start: .15rem; }

/* Desk jump links. Replaces the old statistics row: counts here are a signal
   of where the substance is, not a report on how much we published. */
.deskjump {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-block-start: var(--sp-4);
}
.deskjump__item {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ink-2);
}
.deskjump__item:hover { border-color: var(--accent-line); color: var(--accent); }
.deskjump__count {
  font-size: .6875rem;
  font-weight: 700;
  min-inline-size: 1.15rem;
  padding-inline: .3rem;
  text-align: center;
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--ink-3);
}
.deskjump__item:hover .deskjump__count { background: var(--accent-tint); color: var(--accent); }

/* The header is sticky, so an anchor jump would land the heading underneath
   it without this. */
.digest-group { scroll-margin-block-start: 5.5rem; }