/* ==========================================================================
   DAILYATLAS — stylesheet
   One file, no framework, no build step for CSS.

   RTL: written with CSS logical properties (margin-inline, border-inline-start,
   inset-inline) so the Arabic pages mirror automatically from this same file.
   Never introduce `left`/`right` here unless it is genuinely visual.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Light palette */
  --bg:        #FFFFFF;
  --surface:   #F7F8FA;
  --surface-2: #EEF1F5;
  --ink:       #0B0F19;
  --muted:     #5B6472;
  --rule:      #E4E7EC;
  --brand:     #1D4ED8;
  --brand-soft:#EFF4FF;
  --on-brand:  #FFFFFF;
  --shadow:    0 1px 2px rgba(11, 15, 25, .05), 0 8px 24px -12px rgba(11, 15, 25, .12);

  /* Type */
  --font-latin: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --sans: var(--font-latin);
  --mono: var(--font-mono);

  /* Rhythm */
  --measure: 70ch;
  --gutter: clamp(1rem, 4vw, 2.25rem);
  --radius: 10px;
  --radius-sm: 6px;
}

/* Arabic pages swap the family; everything else is shared. */
:root:lang(ar), [lang="ar"] { --sans: var(--font-arabic); }

/* Dark palette — follows the OS by default … */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0B0F14;
    --surface:   #131922;
    --surface-2: #1B222D;
    --ink:       #E8EBF0;
    --muted:     #9AA4B2;
    --rule:      #222A35;
    --brand:     #7AA2FF;
    --brand-soft:#16243F;
    --on-brand:  #0B0F14;
    --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  }
}

/* … and the toggle wins in both directions. */
:root[data-theme="dark"] {
  --bg:        #0B0F14;
  --surface:   #131922;
  --surface-2: #1B222D;
  --ink:       #E8EBF0;
  --muted:     #9AA4B2;
  --rule:      #222A35;
  --brand:     #7AA2FF;
  --brand-soft:#16243F;
  --on-brand:  #0B0F14;
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem; /* sticky header clearance for #anchors */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 3px;
}

.wrap { width: min(100% - (var(--gutter) * 2), 1200px); margin-inline: auto; }
.wrap--narrow { width: min(100% - (var(--gutter) * 2), 760px); margin-inline: auto; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; inset-inline-start: -9999px; top: 0;
  background: var(--ink); color: var(--bg);
  padding: .7rem 1.1rem; z-index: 200; border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { inset-inline-start: 0; }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
/* Arabic does not want negative tracking — it breaks joining. */
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) h4 { letter-spacing: 0; line-height: 1.4; }

h1 { font-size: clamp(1.95rem, 5vw, 3rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.3rem); }

.eyebrow {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .65rem;
  display: block;
}
:lang(ar) .eyebrow { font-family: var(--sans); letter-spacing: 0; font-weight: 600; }

.lede {
  font-size: clamp(1.1rem, 2vw, 1.28rem);
  line-height: 1.55;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--rule);
}

.masthead__inner {
  display: flex; align-items: center; gap: 1rem;
  padding-block: .7rem;
}

.logo {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 800; font-size: 1.2rem; letter-spacing: -0.03em;
  text-decoration: none; flex: none;
}
:lang(ar) .logo { letter-spacing: 0; }

.logo__mark {
  inline-size: 26px; block-size: 26px; flex: none;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 55%, #7C3AED));
  display: grid; place-items: center;
  color: #fff; font-size: .82rem; font-weight: 800;
}

.tools { display: flex; align-items: center; gap: .3rem; flex: none; margin-inline-start: auto; }

.iconbtn {
  inline-size: 36px; block-size: 36px;
  display: grid; place-items: center;
  background: none; border: 1px solid transparent;
  border-radius: var(--radius-sm); cursor: pointer; color: var(--muted);
}
.iconbtn:hover { background: var(--surface); color: var(--ink); }
.iconbtn svg { inline-size: 18px; block-size: 18px; }

/* Language switcher */
.langsw { position: relative; }
.langsw__btn {
  display: inline-flex; align-items: center; gap: .3rem;
  background: none; border: 1px solid var(--rule);
  border-radius: var(--radius-sm); cursor: pointer;
  padding: .38rem .55rem; font-size: .78rem; font-weight: 700;
  color: var(--muted); letter-spacing: .04em;
}
.langsw__btn:hover { color: var(--ink); border-color: var(--muted); }
.langsw__menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + .4rem);
  background: var(--bg); border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: .3rem; min-inline-size: 150px; display: none; z-index: 80;
}
.langsw__menu.is-open { display: block; }
.langsw__menu a {
  display: block; padding: .5rem .7rem; border-radius: var(--radius-sm);
  text-decoration: none; font-size: .9rem; color: var(--ink);
}
.langsw__menu a:hover { background: var(--surface); }
.langsw__menu a[aria-current="true"] { color: var(--brand); font-weight: 700; }

/* The hamburger only exists below the bar's breakpoint; above it the
   "All sections" button opens the same panel. */
.nav-toggle { display: none; }
@media (max-width: 900px) { .nav-toggle { display: grid; } }

/* --------------------------------------------------------------------------
   4b. Navigation

   A short bar of live sections plus one button that opens everything else.
   The bar never scrolls and never changes height, however many sections the
   taxonomy grows to — overflow moves into the panel instead.

   Nothing empty is rendered. A section with no articles is absent from the
   bar and named once, quietly, at the bottom of the panel.
   -------------------------------------------------------------------------- */

.topnav { border-top: 1px solid var(--rule); background: var(--bg); }

.topnav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-block-size: 44px;
}

.topnav__list {
  display: flex; align-items: center; gap: .15rem;
  list-style: none; margin: 0; padding: 0;
  min-inline-size: 0; flex-wrap: wrap;
}

.topnav__list a {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem .7rem;
  font-size: .875rem; font-weight: 650; white-space: nowrap;
  color: var(--muted); text-decoration: none;
  border-block-end: 2px solid transparent;
}
.topnav__list a:hover { color: var(--ink); }
.topnav__list a[aria-current="page"] { color: var(--ink); border-block-end-color: var(--brand); }

/* Accent dot instead of an emoji — same colour coding, no cartoon. */
.topnav__dot {
  inline-size: 6px; block-size: 6px; border-radius: 50%;
  flex: none; opacity: .85;
}

.topnav__all {
  display: inline-flex; align-items: center; gap: .35rem;
  flex: none; cursor: pointer;
  padding: .42rem .8rem;
  font-size: .8rem; font-weight: 650; white-space: nowrap;
  color: var(--muted);
  background: none; border: 1px solid var(--rule); border-radius: 999px;
}
.topnav__all:hover { color: var(--ink); border-color: var(--muted); }
.topnav__all svg { transition: transform .15s ease; }
.topnav__all[aria-expanded="true"] svg { transform: rotate(180deg); }

@media (max-width: 900px) {
  /* The bar collapses entirely; the hamburger opens the same panel. */
  .topnav { display: none; }
}

/* --- The full panel ------------------------------------------------------ */

.allmenu {
  position: fixed; inset: 0; z-index: 110;
  background: color-mix(in srgb, var(--ink) 40%, transparent);
  overflow-y: auto;
  padding-block-end: 3rem;
}
.allmenu[hidden] { display: none; }

.allmenu__panel {
  background: var(--bg);
  border-block-end: 1px solid var(--rule);
  box-shadow: var(--shadow);
  padding-block: 1.1rem 2.2rem;
  animation: allmenu-in .16s ease-out;
}
@keyframes allmenu-in { from { transform: translateY(-8px); opacity: .6 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .allmenu__panel { animation: none } }

.allmenu__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.4rem;
  padding-block-end: .9rem; border-block-end: 1px solid var(--rule);
}
.allmenu__head h2 { margin: 0; font-size: 1.05rem; }

.allmenu__grid {
  display: grid; gap: 1.6rem 2rem;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.allmenu__grid--meta {
  margin-top: 1.8rem; padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--rule);
}

.allmenu__sec {
  display: flex; align-items: center; gap: .5rem;
  font-size: .9rem; font-weight: 700; color: var(--ink);
  text-decoration: none; margin: 0 0 .5rem;
}
a.allmenu__sec:hover { color: var(--brand); }
.allmenu__sec--plain { color: var(--muted); font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
:lang(ar) .allmenu__sec--plain { letter-spacing: 0; font-size: .85rem; }

.allmenu__dot {
  inline-size: 7px; block-size: 7px; border-radius: 50%; flex: none;
}

.allmenu__col ul { list-style: none; margin: 0; padding: 0; }
.allmenu__col li { margin-bottom: .3rem; }
.allmenu__col li a { font-size: .85rem; color: var(--muted); text-decoration: none; }
.allmenu__col li a:hover { color: var(--brand); }

/* Sections still waiting for their first article — one quiet line, no grid of
   grey placeholders pretending to be navigation. */
.allmenu__soon {
  margin-top: 1.8rem; padding-block-start: 1.4rem;
  border-block-start: 1px solid var(--rule);
}
.allmenu__soon h3 {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin: 0 0 .6rem;
}
:lang(ar) .allmenu__soon h3 { letter-spacing: 0; font-size: .82rem; }
.allmenu__soonlist { display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.allmenu__soonlist span { font-size: .82rem; color: var(--muted); opacity: .6; }

/* --------------------------------------------------------------------------
   4c. Topics index — the whole taxonomy as a browsable page
   -------------------------------------------------------------------------- */

.topics-grid {
  display: grid; gap: 1.75rem 2rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin-top: 1.5rem;
}
.topics-block h2 {
  font-size: 1rem; margin: 0 0 .6rem;
  display: flex; align-items: center; gap: .45rem;
}
.topics-block h2 a { text-decoration: none; }
.topics-block h2 a:hover { color: var(--brand); }
.topics-list { list-style: none; margin: 0; padding: 0; }
.topics-list li { margin-bottom: .3rem; font-size: .88rem; }
.topics-list a { color: var(--muted); text-decoration: none; }
.topics-list a:hover { color: var(--brand); }
.muted { color: var(--muted); opacity: .55; font-size: .75rem; font-family: var(--mono); }

/* --------------------------------------------------------------------------
   5. Search overlay
   -------------------------------------------------------------------------- */

.searchbox {
  position: fixed; inset: 0; z-index: 120;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  display: none; padding: clamp(1rem, 8vh, 5rem) var(--gutter);
}
.searchbox.is-open { display: block; }
.searchbox__panel {
  background: var(--bg); border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: var(--shadow);
  max-inline-size: 640px; margin-inline: auto; overflow: hidden;
}
.searchbox input {
  inline-size: 100%; border: 0; background: none; color: var(--ink);
  padding: 1.05rem 1.2rem; font-size: 1.05rem; font-family: inherit;
  border-bottom: 1px solid var(--rule);
}
.searchbox input:focus { outline: none; }
.searchbox__results { max-block-size: 55vh; overflow-y: auto; padding: .4rem; }
.searchbox__results a {
  display: block; padding: .65rem .8rem; border-radius: var(--radius-sm);
  text-decoration: none;
}
.searchbox__results a:hover, .searchbox__results a.is-active { background: var(--surface); }
.searchbox__results b { display: block; font-size: .95rem; font-weight: 700; }
.searchbox__results span { font-size: .8rem; color: var(--muted); }
.searchbox__empty { padding: 1.2rem; color: var(--muted); font-size: .92rem; }

/* --------------------------------------------------------------------------
   6. Hero / homepage
   -------------------------------------------------------------------------- */

.hero { padding-block: clamp(1.5rem, 4vw, 2.75rem); }

.hero__grid {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.55fr 1fr; align-items: start; }
}

.hero__lead .card__thumb { aspect-ratio: 16 / 9; margin-bottom: 1.1rem; }
.hero__lead h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin-bottom: .55rem; }
.hero__lead .card__excerpt { font-size: 1.08rem; }

.hero__list { display: flex; flex-direction: column; gap: 1.25rem; }
.hero__list .card { padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule); }
.hero__list .card:last-child { border-bottom: 0; padding-bottom: 0; }
.hero__list .card__title { font-size: 1.08rem; }

/* --- Slider -----------------------------------------------------------------
   A scroll-snap row first, a carousel second. With JS disabled it still
   swipes and scrolls, so nothing is lost. Everything is written in logical
   properties, which is what makes it mirror correctly in Arabic without a
   single RTL override. */

.slider { position: relative; }

.slider__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: var(--radius);
  background: var(--surface-2);
  /* The scrollbar is redundant next to the dots, and it clips the overlay. */
  scrollbar-width: none;
}
.slider__track::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .slider__track { scroll-behavior: auto; }
}

.slide { scroll-snap-align: center; min-inline-size: 0; }

.slide__link {
  position: relative; display: block;
  color: #fff; text-decoration: none;
  aspect-ratio: 16 / 10;
  isolation: isolate;
}
@media (min-width: 700px) { .slide__link { aspect-ratio: 21 / 9; } }

.slide__media { position: absolute; inset: 0; display: block; background: var(--surface-2); }
.slide__media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

.slide__blank {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-size: .9rem;
}

/* The scrim is what makes the text legible over an arbitrary photo. Without
   it, a light image and white text fail contrast outright. */
.slide__link::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    rgba(0,0,0,.88) 0%, rgba(0,0,0,.72) 28%, rgba(0,0,0,.28) 58%, rgba(0,0,0,.05) 100%);
}

.slide__body {
  position: absolute; z-index: 2;
  inset-inline: 0; inset-block-end: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: .5rem;
  padding: clamp(1rem, 3vw, 2.25rem);
  padding-block-end: clamp(2.75rem, 5vw, 3.25rem);
}

.slide__cat {
  display: inline-block;
  font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: 999px;
  background: var(--cat, var(--brand)); color: #fff;
}

.slide__title {
  display: block;
  font-family: var(--font-display, inherit);
  font-size: clamp(1.25rem, 3.4vw, 2.35rem);
  font-weight: 800; line-height: 1.15;
  text-wrap: balance;
}
.slide__link:hover .slide__title { text-decoration: underline; text-underline-offset: 3px; }

.slide__excerpt {
  display: none;
  font-size: 1.02rem; line-height: 1.5; max-inline-size: 60ch;
  color: rgba(255,255,255,.9);
}
@media (min-width: 700px) { .slide__excerpt { display: block; } }

.slide__meta { font-size: .8rem; color: rgba(255,255,255,.78); }

/* Arrows sit outside the slide body's padding so they never cover the title. */
.slider__arrow {
  position: absolute; z-index: 3;
  inset-block-start: 50%; translate: 0 -50%;
  inline-size: 44px; block-size: 44px;
  display: grid; place-items: center;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(0,0,0,.45); color: #fff;
  backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .2s, background .2s;
}
.slider__arrow svg { inline-size: 20px; block-size: 20px; }
.slider__arrow--prev { inset-inline-start: .6rem; }
.slider__arrow--next { inset-inline-end: .6rem; }
.slider:hover .slider__arrow,
.slider:focus-within .slider__arrow { opacity: 1; }
.slider__arrow:hover { background: rgba(0,0,0,.72); }
.slider__arrow:disabled { opacity: 0 !important; pointer-events: none; }

/* The arrow glyphs point left/right physically, so they must flip in RTL —
   this is direction, not layout, and is the one place a transform is right. */
[dir="rtl"] .slider__arrow svg { scale: -1 1; }

.slider__bar {
  position: absolute; z-index: 3;
  inset-inline: 0; inset-block-end: clamp(.75rem, 2vw, 1.15rem);
  display: flex; align-items: center; justify-content: center;
  gap: .75rem;
  padding-inline: clamp(1rem, 3vw, 2.25rem);
  pointer-events: none;
}
.slider__dots { display: flex; align-items: center; gap: .4rem; pointer-events: auto; }

.slider__dot {
  inline-size: 8px; block-size: 8px; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.45);
  transition: inline-size .2s, background .2s;
}
.slider__dot[aria-current="true"] { inline-size: 26px; background: #fff; }

.slider__play {
  display: grid; place-items: center; pointer-events: auto;
  inline-size: 26px; block-size: 26px; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.2); color: #fff;
}
.slider__play svg { inline-size: 13px; block-size: 13px; }
.slider__play:hover { background: rgba(255,255,255,.38); }
.slider__play .slider__icon-play { display: none; }
.slider__play[aria-pressed="true"] .slider__icon-pause { display: none; }
.slider__play[aria-pressed="true"] .slider__icon-play { display: block; }

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */

.section { padding-block: clamp(1.75rem, 4vw, 3rem); }
.section + .section { border-top: 1px solid var(--rule); }

.section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.section__head h2 { margin: 0; font-size: 1.3rem; }
.section__more {
  font-size: .82rem; font-weight: 700; color: var(--brand);
  text-decoration: none; white-space: nowrap;
}
.section__more:hover { text-decoration: underline; }

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

.card { display: flex; flex-direction: column; min-inline-size: 0; }

.card__thumb {
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
  border-radius: var(--radius);
  overflow: hidden; margin-bottom: .85rem;
  position: relative;
}
.card__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* Placeholder used until a real image exists — keeps the exact same box so
   dropping the image in later shifts nothing. */
.card__thumb--empty {
  display: grid; place-items: center;
  background:
    linear-gradient(135deg, var(--surface-2), var(--surface));
  color: var(--muted); font-family: var(--mono); font-size: .65rem;
  letter-spacing: .1em; text-transform: uppercase;
}

.card__cat {
  display: inline-block; align-self: flex-start;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none;
  color: var(--brand); margin-bottom: .45rem;
}
:lang(ar) .card__cat { letter-spacing: 0; font-size: .75rem; }

.card__title {
  font-size: 1.15rem; font-weight: 800; line-height: 1.28;
  letter-spacing: -.015em; margin: 0 0 .45rem;
}
:lang(ar) .card__title { letter-spacing: 0; line-height: 1.5; }
.card__title a { text-decoration: none; }
.card__title a:hover { color: var(--brand); }

.card__excerpt {
  margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.55;
}

.card__meta {
  margin-top: .7rem; font-size: .75rem; color: var(--muted);
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
}
.card__meta .dot { opacity: .45; }

/* Topic browse strip */
.topics { display: flex; flex-wrap: wrap; gap: .6rem; }
.topic {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem .95rem; border: 1px solid var(--rule);
  border-radius: 999px; text-decoration: none;
  font-size: .9rem; font-weight: 600; color: var(--ink);
  background: var(--bg);
}
.topic:hover { border-color: var(--brand); color: var(--brand); }
.topic__dot { inline-size: 8px; block-size: 8px; border-radius: 50%; flex: none; }

/* --------------------------------------------------------------------------
   8. Ad slots
   Reserved height is the whole point: the box occupies its final size before
   AdSense loads, so Cumulative Layout Shift stays at zero. Removing
   min-block-size will cost you ranking. Do not do it.
   -------------------------------------------------------------------------- */

.ad {
  margin-block: 2rem; margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden; contain: layout;
}
.ad__label {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: .35rem; opacity: .7;
}
.ad__box {
  inline-size: 100%; display: grid; place-items: center;
  background: var(--surface); border: 1px dashed var(--rule);
  border-radius: var(--radius-sm);
  font-family: var(--mono); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}

.ad--leaderboard .ad__box { block-size: 100px; }
@media (min-width: 768px) { .ad--leaderboard .ad__box { block-size: 90px; } }

.ad--inarticle .ad__box { block-size: 280px; }

/* The sidebar unit is a tall skyscraper only where a sidebar exists. Below the
   two-column breakpoint the aside stacks under the article, so a 600px box
   would be a screen-and-a-half of dead space between the text and the related
   articles. Reserve a normal rectangle there instead — the height is still
   fixed, so CLS stays at zero either way. */
.ad--sidebar .ad__box { block-size: 280px; }
@media (min-width: 1080px) { .ad--sidebar .ad__box { block-size: 600px; } }

.ad ins.adsbygoogle { display: block; inline-size: 100%; }

/* --------------------------------------------------------------------------
   9. Article
   -------------------------------------------------------------------------- */

.crumbs {
  font-size: .78rem; color: var(--muted);
  padding-block: 1rem .25rem; display: flex; flex-wrap: wrap; gap: .4rem;
  align-items: center;
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--brand); }
.crumbs .sep { opacity: .4; }

.article { padding-block: clamp(1.25rem, 3vw, 2rem) 1rem; }

.article__layout { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 1080px) {
  .article__layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .article__aside { position: sticky; top: 5rem; }
}

.article__head { max-inline-size: var(--measure); }
.article__head h1 { margin-bottom: .6rem; }

.article__meta {
  display: flex; flex-wrap: wrap; gap: .4rem .9rem;
  align-items: center; font-size: .82rem; color: var(--muted);
  border-block: 1px solid var(--rule);
  padding-block: .8rem; margin-block: 1.4rem;
}
.article__meta .dot { opacity: .4; }
.article__author { display: inline-flex; align-items: center; gap: .5rem; }
.article__avatar {
  inline-size: 30px; block-size: 30px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--rule); flex: none;
}
.article__author b { color: var(--ink); font-weight: 700; }

.article__hero {
  margin-block: 1.5rem; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--surface-2);
}
.article__hero img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* A <figure> brings default margins that would break the reserved hero box. */
figure.article__hero { margin: 0; }

.article__credit {
  font-size: .72rem; color: var(--muted);
  margin-block-start: .45rem; opacity: .8;
}
.article__credit a { color: inherit; }

/* Mid-article photo. Same reserved 16:9 box as the hero so nothing shifts
   while it loads, with generous space above and below to read as a break in
   the text rather than an interruption of it. */
.article__figure {
  margin-block: clamp(1.75rem, 4vw, 2.5rem);
  margin-inline: 0;
}
.article__figure img {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--surface-2);
  display: block;
}

.article__body {
  max-inline-size: var(--measure);
  font-size: 1.09rem; line-height: 1.75;
}
:lang(ar) .article__body { font-size: 1.12rem; line-height: 1.95; }

.article__body > h2 { margin-top: 2.1em; }
.article__body > h3 { margin-top: 1.7em; }
.article__body p { margin: 0 0 1.25em; }
.article__body ul, .article__body ol { padding-inline-start: 1.35em; margin: 0 0 1.35em; }
.article__body li { margin-bottom: .5em; }
.article__body a { color: var(--brand); text-decoration-thickness: 1px; }

.article__body blockquote {
  margin: 1.8em 0; padding-inline-start: 1.2em;
  border-inline-start: 3px solid var(--brand);
  color: var(--muted); font-style: italic;
}
:lang(ar) .article__body blockquote { font-style: normal; }

.article__body code {
  font-family: var(--mono); font-size: .88em;
  background: var(--surface); padding: .15em .4em;
  border-radius: 4px; border: 1px solid var(--rule);
}
.article__body pre {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); padding: 1rem 1.1rem;
  overflow-x: auto; margin: 1.6em 0;
}
.article__body pre code { background: none; border: 0; padding: 0; font-size: .86rem; }

.article__body figure { margin: 2rem 0; }
.article__body figure img { border-radius: var(--radius); }
.article__body figcaption {
  font-size: .8rem; color: var(--muted); margin-top: .55rem; line-height: 1.5;
}

/* Tables scroll on their own so the page body never does. */
.table-scroll { overflow-x: auto; margin: 1.8em 0; border: 1px solid var(--rule); border-radius: var(--radius-sm); }
table { border-collapse: collapse; inline-size: 100%; font-size: .93rem; }
th, td { text-align: start; padding: .7rem .85rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { background: var(--surface); font-weight: 700; font-size: .8rem; }
tbody tr:last-child td { border-bottom: 0; }

/* Table of contents */
.toc {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1.1rem 1.25rem; margin-block: 1.8rem;
}
.toc__label {
  font-size: .7rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 .6rem;
}
:lang(ar) .toc__label { letter-spacing: 0; font-size: .8rem; }
.toc ol { margin: 0; padding-inline-start: 1.15em; font-size: .95rem; }
.toc li { margin-bottom: .35em; }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--brand); text-decoration: underline; }

/* Callouts */
.note {
  border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--brand);
  background: var(--surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1rem 1.15rem; margin-block: 1.7em; font-size: .98rem;
}
[dir="rtl"] .note { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.note--warn { border-inline-start-color: #D97706; }
.note__label {
  display: block; font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand); margin-bottom: .35rem;
}
:lang(ar) .note__label { letter-spacing: 0; font-size: .78rem; }
.note--warn .note__label { color: #D97706; }
.note p:last-child { margin-bottom: 0; }

/* Key-takeaway box — put one near the top of every article. It is what
   Google lifts for featured snippets. */
.keybox {
  background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  border-radius: var(--radius); padding: 1.1rem 1.25rem; margin-block: 1.8em;
}
.keybox__label {
  display: block; font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand); margin-bottom: .5rem;
}
:lang(ar) .keybox__label { letter-spacing: 0; font-size: .78rem; }
.keybox ul { margin: 0; padding-inline-start: 1.2em; }
.keybox p:last-child, .keybox ul:last-child { margin-bottom: 0; }

/* FAQ */
.faq details {
  border-bottom: 1px solid var(--rule); padding-block: .95rem;
}
.faq summary {
  cursor: pointer; font-weight: 700; font-size: 1.02rem;
  list-style: none; display: flex; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brand); font-weight: 700; flex: none; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin: .7rem 0 0; font-size: .98rem; color: var(--muted); }

/* Sources list — having one is a real ranking and trust signal. */
.sources { font-size: .9rem; }
.sources ol { padding-inline-start: 1.3em; }
.sources li { margin-bottom: .45em; color: var(--muted); }

/* Share row */
.share { display: flex; gap: .5rem; flex-wrap: wrap; margin-block: 1.8rem; }
.share a, .share button {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--rule); border-radius: 999px;
  padding: .45rem .9rem; font-size: .82rem; font-weight: 600;
  text-decoration: none; color: var(--muted); background: var(--bg); cursor: pointer;
}
.share a:hover, .share button:hover { color: var(--brand); border-color: var(--brand); }

/* Reading progress */
.progress {
  position: fixed; inset-block-start: 0; inset-inline-start: 0;
  block-size: 3px; inline-size: 0; background: var(--brand);
  z-index: 100; transition: inline-size .1s linear;
}

/* --------------------------------------------------------------------------
   10. Newsletter, footer, misc
   -------------------------------------------------------------------------- */

.signup {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: clamp(1.4rem, 4vw, 2.25rem);
  margin-block: 2.5rem;
}
.signup h2 { margin-top: 0; font-size: 1.28rem; }
.signup p { margin: 0 0 1.1rem; color: var(--muted); font-size: .98rem; }
.signup__row { display: flex; flex-wrap: wrap; gap: .55rem; }
.signup input {
  flex: 1 1 240px; min-inline-size: 0;
  padding: .72rem .9rem; font-family: inherit;
  /* 16px is a hard floor on any input: iOS Safari zooms the whole page in
     when a focused field is smaller, and it never zooms back out. */
  font-size: 16px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
}
.signup__msg { margin: .8rem 0 0; font-size: .85rem; color: var(--muted); }

.btn {
  display: inline-block; cursor: pointer; text-decoration: none;
  background: var(--brand); color: var(--on-brand);
  border: 1px solid var(--brand); border-radius: var(--radius-sm);
  padding: .72rem 1.35rem; font-size: .92rem; font-weight: 700;
}
.btn:hover { filter: brightness(1.08); }

.foot {
  border-top: 1px solid var(--rule); background: var(--surface);
  padding-block: 2.5rem 1.75rem; margin-top: 3.5rem; font-size: .93rem;
}
.foot__cols {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.foot h3 {
  font-size: .7rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 .85rem;
}
:lang(ar) .foot h3 { letter-spacing: 0; font-size: .8rem; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: .5rem; }
.foot a { text-decoration: none; color: var(--muted); font-size: .9rem; }
.foot a:hover { color: var(--brand); }
.foot__base {
  margin-top: 2.25rem; padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: .8rem; line-height: 1.7; color: var(--muted);
}

/* Legal / static pages */
.page { padding-block: clamp(1.5rem, 4vw, 2.5rem) 1rem; }
.page__body { max-inline-size: var(--measure); font-size: 1.05rem; line-height: 1.75; }
.page__body h2 { margin-top: 1.9em; font-size: 1.3rem; }
.page__body h3 { margin-top: 1.5em; font-size: 1.08rem; }
.page__body ul, .page__body ol { padding-inline-start: 1.35em; }
.page__body li { margin-bottom: .45em; }
.page__body a { color: var(--brand); }
.updated {
  font-size: .8rem; color: var(--muted);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1rem; margin-bottom: 1.8rem;
}

/* Pagination */
.pager { display: flex; gap: .5rem; justify-content: center; margin-block: 2.5rem; flex-wrap: wrap; }
.pager a, .pager span {
  min-inline-size: 40px; padding: .5rem .75rem; text-align: center;
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  text-decoration: none; font-size: .9rem; font-weight: 600; color: var(--muted);
}
.pager a:hover { border-color: var(--brand); color: var(--brand); }
.pager [aria-current="page"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

/* Empty state */
.empty {
  text-align: center; padding: 3rem 1rem; color: var(--muted);
  border: 1px dashed var(--rule); border-radius: var(--radius);
}

/* Print: strip chrome and ads so articles print clean. */
@media print {
  .masthead, .foot, .ad, .signup, .share, .progress, .searchbox, .toc { display: none !important; }
  body { font-size: 11pt; }
  .article__body a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ==========================================================================
   11. Device compatibility

   Everything above is fluid by default — grids use auto-fill/minmax, text
   uses clamp(), and the layout is built on logical properties. This section
   handles the things fluidity alone does not: physical notches, touch
   targets, browsers that zoom on small inputs, and content that is wider
   than any phone.
   ========================================================================== */

/* --- 11a. Never scroll sideways ------------------------------------------
   A single long URL, a wide table or an oversized embed can push the whole
   page wider than the screen, and the reader ends up dragging the article
   left and right to read it. Guard at the source rather than clipping the
   body, which would break the sticky header. */

html, body { max-inline-size: 100%; overflow-x: clip; }

body, .article__body, .page__body, .card__excerpt, .lede {
  overflow-wrap: break-word;   /* long words wrap instead of overflowing */
  word-break: normal;
}

/* URLs and code are the usual culprits — they contain no spaces to break at. */
.article__body a, .page__body a, code { overflow-wrap: anywhere; }

/* Anything embedded stays inside its column. */
img, video, iframe, embed, object, svg, table { max-inline-size: 100%; }
iframe, embed, object { block-size: auto; }

/* --- 11b. Notches, rounded corners and home indicators -------------------
   env() resolves to 0 on hardware without insets, so these are inert on a
   desktop and only pay out where the physical screen actually intrudes. */

.wrap, .wrap--narrow {
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}
.masthead { padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
.foot { padding-block-end: calc(2rem + env(safe-area-inset-bottom)); }
.allmenu__panel { padding-block-end: calc(2.2rem + env(safe-area-inset-bottom)); }
.searchbox { padding-block-end: calc(1rem + env(safe-area-inset-bottom)); }

/* --- 11c. Touch targets ---------------------------------------------------
   A 36px control is comfortable with a mouse and fiddly with a thumb. Grow
   every interactive element to 44px on pointers that are not precise, which
   catches phones and tablets without penalising desktop density. */

@media (pointer: coarse) {
  .iconbtn { inline-size: 44px; block-size: 44px; }
  .langsw__btn { padding: .6rem .7rem; }
  .langsw__menu a { padding: .7rem .8rem; }
  .topnav__list a { padding: .75rem .7rem; }
  .topnav__all { padding: .6rem .9rem; }
  .allmenu__col li a { display: inline-block; padding-block: .3rem; }
  .allmenu__sec { padding-block: .2rem; }
  .share a, .share button { padding: .6rem 1rem; }
  .pager a, .pager span { padding: .7rem .9rem; }
  .faq summary { padding-block: .3rem; }
  .btn { padding: .85rem 1.4rem; }
}

/* --- 11d. Small phones (≤ 480px) -----------------------------------------
   Below this width the default rhythm starts to feel cramped rather than
   generous, so tighten spacing and let headings run a little shorter. */

@media (max-width: 480px) {
  :root { --gutter: 1rem; }

  h1 { font-size: clamp(1.65rem, 7vw, 2rem); }
  h2 { font-size: clamp(1.25rem, 5.5vw, 1.5rem); }
  .lede { font-size: 1.05rem; }
  .article__body { font-size: 1.05rem; }
  :lang(ar) .article__body { font-size: 1.08rem; }

  /* One card per row reads better than two cramped ones. */
  .cards { grid-template-columns: 1fr; gap: 1.5rem; }
  .allmenu__grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .foot__cols { grid-template-columns: 1fr 1fr; gap: 1.5rem; }

  .article__meta { gap: .3rem .7rem; font-size: .78rem; }
  .signup { padding: 1.2rem; }
  .signup__row { flex-direction: column; }
  .signup input, .signup .btn { inline-size: 100%; }

  /* Full-bleed hero image on a narrow screen looks intentional; a boxed one
     with side gutters looks like a mistake. */
  .article__hero { margin-inline: calc(var(--gutter) * -1); border-radius: 0; }

  .toc { padding: .9rem 1rem; }
  .share { gap: .4rem; }
}

/* --- 11e. Short screens ---------------------------------------------------
   A phone held sideways has ~360px of height. A panel sized for a portrait
   screen becomes unusable, so let it scroll within the viewport instead. */

@media (max-height: 480px) {
  .allmenu { padding-block-end: 1rem; }
  .allmenu__panel { padding-block: .8rem 1.2rem; }
  .allmenu__head { margin-bottom: .9rem; padding-block-end: .6rem; }
  .searchbox { padding-block-start: 1rem; }
  .searchbox__results { max-block-size: 40vh; }
}

/* --- 11f. Tables on narrow screens ---------------------------------------
   .table-scroll already scrolls, but a reader has no way of knowing there is
   more to the right. A soft edge fade signals it. */

.table-scroll {
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--bg) 30%, transparent),
    linear-gradient(to left, var(--bg) 30%, transparent) right,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.10), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.10), transparent) right;
  background-repeat: no-repeat;
  background-size: 36px 100%, 36px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
@media (max-width: 480px) {
  th, td { padding: .55rem .6rem; font-size: .88rem; white-space: nowrap; }
  /* The first column is the row label — let it wrap so the table stays narrow. */
  td:first-child, th:first-child { white-space: normal; min-inline-size: 8rem; }
}

/* --- 11g. Larger text and zoom -------------------------------------------
   Users who raise the browser font size, or zoom to 200%, must not lose
   content. Fixed pixel heights are the usual failure, so the two places that
   set one get a floor in relative units instead. */

.masthead__inner { min-block-size: 3rem; }
.topnav__inner { min-block-size: 2.75rem; }

/* --- 11h. Devices without hover ------------------------------------------
   Hover styles that only appear on :hover are invisible on touch. Make the
   affordances permanent there. */

@media (hover: none) {
  .card__title a { text-decoration: underline; text-decoration-color: var(--rule); }
  .topnav__list a[aria-current="page"] { color: var(--brand); }
}