/* ═══ الهيكل: الترويسةُ والقوائمُ والشبكاتُ والتذييل ═══════ */

/* ───────────────── الترويسة ───────────────── */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.masthead__bar {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 1.4vw, 1.2rem);
  min-height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-shrink: 0;
  color: var(--brand);
}
.brand__mark {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
  flex-shrink: 0;
  transition: transform var(--t-base);
}
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.05); }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__text strong {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--ink);
}
.brand__text small {
  font-size: .63rem;
  color: var(--muted);
  letter-spacing: .04em;
  font-weight: 500;
}

.masthead__nav { margin-inline-start: auto; overflow: hidden; }
.masthead__nav ul { display: flex; align-items: center; gap: .15rem; }
.masthead__nav a {
  display: block;
  position: relative;
  padding: .5rem .68rem;
  font-size: .93rem;
  font-weight: 600;
  color: var(--ink-2);
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.masthead__nav a::after {
  content: "";
  position: absolute;
  inset-block-end: .18rem;
  inset-inline: .68rem;
  height: 2px;
  background: var(--accent, var(--brand));
  transform: scaleX(0);
  transform-origin: inline-end;
  transition: transform var(--t-base);
}
.masthead__nav a:hover { color: var(--ink); }
.masthead__nav a:hover::after,
.masthead__nav a[aria-current]::after { transform: scaleX(1); }
.masthead__nav a[aria-current] { color: var(--ink); }
.masthead__nav a.is-highlight {
  color: var(--brand);
  background: var(--brand-soft);
}

.masthead__tools { display: flex; align-items: center; gap: .15rem; margin-inline-start: auto; }
.masthead__nav + .masthead__tools { margin-inline-start: .5rem; }
.masthead__menu { display: none; }

.icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-full);
  color: var(--ink-2);
  transition: background var(--t-fast), color var(--t-fast);
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }

.badge {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--r-full);
  background: var(--spark);
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
}

[data-theme="dark"] .ico-sun, :root[data-theme="auto"] .ico-sun { display: none; }
[data-theme="dark"] .ico-moon { display: block; }
.ico-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .ico-moon { display: block; }
}
[data-theme="light"] .ico-sun { display: block; }
[data-theme="light"] .ico-moon { display: none; }

/* ───────────────── شريطُ العناوين ───────────────── */
.ticker {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}
.ticker__inner { display: flex; align-items: center; gap: .9rem; height: 40px; }
.ticker__tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--spark);
  text-transform: uppercase;
}
.ticker__pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--spark);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.75); }
}
.ticker__track {
  display: flex;
  gap: 2.4rem;
  overflow-x: auto;
  scrollbar-width: none;
  mask-image: linear-gradient(to left, transparent, #000 24px, #000 92%, transparent);
}
.ticker__track::-webkit-scrollbar { display: none; }
.ticker__track a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
  font-size: .86rem;
  color: var(--ink-2);
  padding: .2rem 0;
}
.ticker__track a b {
  font-size: .68rem;
  font-weight: 700;
  color: var(--brand);
  background: var(--brand-soft);
  padding: .12rem .45rem;
  border-radius: var(--r-full);
}
.ticker__track a:hover { color: var(--brand); }

/* ───────────────── القائمةُ الجانبيّة ───────────────── */
.drawer { position: fixed; inset: 0; z-index: 80; }
.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgb(10 8 16 / .5);
  backdrop-filter: blur(3px);
  animation: fade var(--t-base);
}
.drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(86vw, 340px);
  background: var(--paper);
  border-inline-start: 1px solid var(--line);
  padding: 1.1rem 1.3rem 2rem;
  overflow-y: auto;
  z-index: 1;
  animation: slide-in var(--t-base);
}
@keyframes fade { from { opacity: 0; } }
@keyframes slide-in { from { transform: translateX(-100%); opacity: .4; } }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1rem;
}
.drawer__brand { display: flex; align-items: center; gap: .55rem; }
.drawer__brand img { border-radius: 50%; background: #fff; }
.drawer__head strong { font-family: var(--font-display); font-size: 1.3rem; font-weight: 900; }
.drawer__label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--muted);
  margin: 1.2rem 0 .5rem;
}
.drawer__list li a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .62rem .5rem;
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: .96rem;
}
.drawer__list li a:hover { background: var(--surface-2); }
.drawer__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent, var(--brand));
}

.swatches { display: flex; gap: .5rem; flex-wrap: wrap; }
.swatch {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--sw);
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px var(--line);
  transition: transform var(--t-fast);
}
.swatch:hover { transform: scale(1.14); }

/* ───────────────── نافذةُ البحث ───────────────── */
.finder { position: fixed; inset: 0; z-index: 90; }
.finder__scrim {
  position: absolute;
  inset: 0;
  background: rgb(8 6 14 / .55);
  backdrop-filter: blur(4px);
  animation: fade var(--t-base);
}
.finder__panel {
  position: relative;
  z-index: 1;
  width: min(94vw, 720px);
  margin: min(12vh, 90px) auto 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: pop var(--t-base);
}
@keyframes pop { from { transform: translateY(-14px) scale(.985); opacity: 0; } }

.finder__field {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.finder__field input {
  flex: 1;
  border: 0;
  background: none;
  font-size: 1.06rem;
  font-weight: 500;
  color: var(--ink);
  outline: none;
}
.finder__filters {
  display: flex;
  gap: .4rem;
  padding: .7rem 1.2rem;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line-soft);
}
.finder__filters::-webkit-scrollbar { display: none; }
.finder__results { max-height: min(52vh, 460px); overflow-y: auto; }
.finder__foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .6rem 1.2rem;
  border-top: 1px solid var(--line);
  font-size: .74rem;
  color: var(--muted);
  background: var(--surface-2);
}
.finder__foot a { margin-inline-start: auto; color: var(--brand); font-weight: 600; }

/* ───────────────── الشبكات ───────────────── */
.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--gap { row-gap: calc(var(--gap) * 1.6); }
.grid--stack { grid-template-columns: minmax(0, 1fr); align-content: start; }
.grid--feature {
  grid-template-columns: 1.35fr 1fr;
  padding-bottom: var(--gap-lg);
  margin-bottom: var(--gap-lg);
  border-bottom: 1px solid var(--line);
}

/* ───────────────── الرئيسيّة: الصدر ───────────────── */
.lead-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: var(--gap-lg);
  padding-block: clamp(1.6rem, 3vw, 3rem);
  align-items: start;
}
.lead { display: flex; flex-direction: column; gap: 1.1rem; }
.lead__media { display: block; border-radius: var(--r-lg); overflow: hidden; }
.lead__kicker { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.lead__title { font-size: var(--step-5); font-weight: 900; letter-spacing: -.03em; }
.lead__title a { background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0 2px; background-position: 100% 100%; background-repeat: no-repeat;
  transition: background-size var(--t-base); }
.lead__title a:hover { background-size: 100% 2px; }
.lead__dek {
  font-size: var(--step-1);
  color: var(--ink-2);
  line-height: 1.75;
  max-width: 62ch;
}
.lead__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.tagline-pill {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  padding: .18rem .6rem;
}

.top-list { border-inline-start: 1px solid var(--line); padding-inline-start: var(--gap); }
.top-list__head {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--muted);
  padding-bottom: .9rem;
  margin-bottom: .3rem;
  border-bottom: 2px solid var(--ink);
}
.top-list ol > li { padding-block: 1.05rem; border-bottom: 1px solid var(--line-soft); }
.top-list ol > li:last-child { border-bottom: 0; }

/* ───────────────── النهر والجانب ───────────────── */
.river {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--gap-lg);
  padding-block: var(--gap-lg);
  border-top: 1px solid var(--line);
  align-items: start;
}
.river__main .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: calc(var(--gap) * 1.5); }
.river__side { display: grid; gap: var(--gap); position: sticky; top: calc(var(--header-h) + 1rem); }

/* ───────────────── الأشرطةُ والألواح ───────────────── */
.strip { padding-block: var(--gap-lg); border-top: 1px solid var(--line); }
.strip--tint { background: var(--surface-2); border-radius: var(--r-lg); padding-inline: var(--gap); }

.strip__head {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  flex-wrap: wrap;
  margin-bottom: calc(var(--gap) * 1.2);
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--ink);
  position: relative;
}
.strip__head::before {
  content: "";
  position: absolute;
  inset-block-end: -2px;
  inset-inline-start: 0;
  width: 84px;
  height: 2px;
  background: var(--accent, var(--brand));
}
.strip__title { font-size: var(--step-2); font-weight: 900; letter-spacing: -.02em; }
.strip__sub { font-size: .86rem; color: var(--muted); max-width: 52ch; }
.strip__more {
  margin-inline-start: auto;
  font-size: .84rem;
  font-weight: 700;
  color: var(--brand);
  display: inline-flex;
  gap: .35rem;
}
.strip__more:hover { gap: .6rem; }

.band { padding-block: var(--gap-lg); margin-block: var(--gap-lg); }
.band--video {
  background: #0C0C13;
  color: #F2F0EC;
  --ink: #F2F0EC;
  --ink-2: #C9C6D4;
  --muted: #8F8C9C;
  --line: #262632;
  --surface: #16161F;
  --surface-2: #1C1C27;
}
.band--video .strip__head { border-bottom-color: #3A3A48; }
.band--manifesto {
  background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 55%, var(--spark)));
  color: #fff;
  margin-bottom: 0;
}
.manifesto { max-width: 900px; text-align: center; display: grid; gap: 1.1rem; justify-items: center; }
.manifesto__eyebrow { font-size: .74rem; font-weight: 800; letter-spacing: .14em; opacity: .8; }
.manifesto__text { font-size: var(--step-2); line-height: 1.8; font-family: var(--font-display); font-weight: 500; }

/* ───────────────── رؤوسُ الصفحات ───────────────── */
.pagehead {
  padding-block: clamp(1.6rem, 3.4vw, 3.2rem) clamp(1.2rem, 2.4vw, 2.2rem);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--accent, var(--brand)) 9%, transparent), transparent 62%),
    var(--paper);
}
.pagehead__eyebrow {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--accent, var(--brand));
  margin-bottom: .5rem;
}
.pagehead__title { font-size: var(--step-4); font-weight: 900; letter-spacing: -.03em; }
.pagehead__dek { margin-top: .8rem; font-size: var(--step-1); color: var(--ink-2); max-width: 68ch; line-height: 1.7; }
.pagehead__count { margin-top: .9rem; font-size: .8rem; color: var(--muted); font-family: var(--font-mono); }

.section-body { padding-block: var(--gap-lg); }

/* ───────────────── التذييل ───────────────── */
.footer {
  margin-top: var(--gap-lg);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  padding-top: var(--gap-lg);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.7fr repeat(3, 1fr);
  gap: var(--gap-lg);
  padding-bottom: var(--gap-lg);
}
.footer__seal { width: 84px; height: 84px; border-radius: 50%; background: #fff; margin-bottom: .9rem; }
.footer__logo { font-family: var(--font-display); font-size: 1.7rem; font-weight: 900; letter-spacing: -.02em; }
.footer__tagline { color: var(--brand); font-weight: 700; font-size: .85rem; margin-top: .2rem; }
.footer__about { margin-top: .9rem; color: var(--muted); font-size: .88rem; line-height: 1.85; max-width: 46ch; }
.footer__social { display: flex; gap: .5rem; margin-top: 1.1rem; }
.footer__social a {
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  padding: .35rem .9rem;
  font-size: .8rem;
  font-weight: 600;
}
.footer__social a:hover { border-color: var(--brand); color: var(--brand); }
.footer__label {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: .9rem;
}
.footer__list li { margin-bottom: .55rem; font-size: .9rem; }
.footer__list a:hover { color: var(--brand); }
.footer__list--plain li { color: var(--ink-2); }
.footer__list--plain span { display: block; font-size: .74rem; color: var(--muted); }
.footer__base {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: .78rem;
  color: var(--muted);
}

/* ───────────────── زرُّ العودة ───────────────── */
.to-top {
  position: fixed;
  inset-block-end: 1.3rem;
  inset-inline-start: 1.3rem;
  z-index: 40;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow-md);
  transition: transform var(--t-base), opacity var(--t-base);
}
.to-top:hover { transform: translateY(-3px); }

/* ───────────────── الاستجابة ───────────────── */
@media (max-width: 1080px) {
  .masthead__nav { display: none; }
  .masthead__menu { display: grid; }
  .brand { margin-inline-end: auto; }
  .lead-grid { grid-template-columns: 1fr; }
  .top-list { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--line); padding-top: 1rem; }
  .river { grid-template-columns: 1fr; }
  .river__side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--feature { grid-template-columns: 1fr; }
  .river__main .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  :root { --header-h: 56px; }
  .grid--3, .grid--4, .grid--2, .river__main .grid--3 { grid-template-columns: minmax(0, 1fr); }
  .river__side { grid-template-columns: minmax(0, 1fr); }
  .footer__grid { grid-template-columns: 1fr; gap: var(--gap); }
  .brand__text small { display: none; }
  .lead__title { font-size: var(--step-4); }
}