/* ==========================================================================
   محمد دحلان — الموقع الرسمي
   Design system extracted from DAHLAN_FINAL.xd (Adobe XD, 1920px artboards)
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------ */
:root {
  /* لوحُ العلامة — الأزرقُ المعتمد (حلّ محلّ الأصفر #FDCD13). العكسُ
     عن الأصفر: هذا لونٌ داكن، فالنصُّ فوقه أبيضُ لا أسود — لذلك قُلبت
     كلُّ نصوصِ الأسطح الزرقاء الصلبة إلى الأبيض. النصُّ الأبيضُ فوق
     --yellow (الصلب) = 6.2:1، وفوق --yellow-dark = 8.1:1 — يفيان WCAG AA.
     احتفظت الرموزُ بأسمائها (--yellow*) لتقليل رقعة التغيير؛ قيمتُها
     الآن زرقاء. */
  --yellow: #2B5CB4;
  --yellow-dark: #204A93;
  /* درجةٌ داكنةٌ للنصّ فوق الفاتح (روابط، عناوينُ صغيرة، أيقونةُ +):
     --yellow-ink على الأبيض = 9.4:1، وعلى الورق البديل ~8.9:1 — تتجاوز
     حدّ AA بمريح، وهو المرجعُ الذي يعلنه بيانُ الوصولية. */
  --yellow-ink: #1A4488;
  --black: #000000;
  --white: #FFFFFF;

  --ink: rgba(0, 0, 0, 0.8);      /* headings / body on light */
  --ink-soft: rgba(0, 0, 0, 0.6); /* captions, labels */
  --ink-faint: rgba(0, 0, 0, 0.08);

  --paper: #FFFFFF;
  --paper-alt: #F6F6F4;

  /* Layout — the XD artboard is 1920 wide with 140px side margins */
  --container: 1640px;
  --gutter: clamp(1.25rem, 4vw, 8.75rem);

  /* Fluid type scale mapped from the artboard's px sizes at 1920px */
  --fs-hero:      clamp(2.75rem, 5.6vw, 6.7rem);   /* 107px */
  --fs-display:   clamp(2rem, 3.15vw, 3.75rem);    /*  60px */
  --fs-title:     clamp(1.75rem, 2.6vw, 3.125rem); /*  50px */
  --fs-lead:      clamp(1.25rem, 2.15vw, 2.55rem); /*  41px */
  --fs-body-lg:   clamp(1.05rem, 1.35vw, 1.55rem); /*  30px */
  --fs-body:      clamp(1rem, 1.05vw, 1.25rem);    /*  20px */
  --fs-sm:        clamp(0.9rem, 0.95vw, 1.125rem); /*  18px */
  --fs-xs:        clamp(0.8rem, 0.85vw, 1rem);     /*  16px */
  --fs-year:      clamp(3.5rem, 10.4vw, 12.5rem);  /* 200px */

  --header-h: 112px;
  --radius: 4px;
  --shadow-sm: 0 4px 18px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 14px 40px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.18);

  /* Effects read straight out of DAHLAN_FINAL.xd. Every card, tile and disc
     carries the same drop shadow; the yellow pills carry the lighter one; card
     titles carry a text shadow. Every hover in the file is a 0.3s ease-out
     auto-animate, and every card/tile hover is "5px #2B5CB4 outline". */
  --shadow-card: 0 6px 6px rgba(0, 0, 0, 0.2);
  --shadow-pill: 0 3px 3px rgba(0, 0, 0, 0.16);
  --shadow-thumb: 0 20px 30px rgba(62, 62, 62, 0.3);
  --text-shadow-card: 0 3px 3px rgba(0, 0, 0, 0.16);
  --hairline: #E6E6E6;
  --radius-card: 10px;
  --hover-ring: 5px;
  --hover-dur: 0.3s;
  --hover-ease: ease-out;

  /* TheSans Plain first — see the @font-face block below; the rest of the
     stack is what actually renders until the licensed files are in place. */
  --font-ui: "TheSansWeb", "TheSans Plain", "Tajawal", "Segoe UI", "Dubai",
             "Noto Sans Arabic", system-ui, sans-serif;
  /* اسمٌ ثانٍ لـnojs.css ولقواعدٍ قديمة كتبت `--font` لا `--font-ui`. */
  --font: var(--font-ui);
  /* الأرقام والكلمات اللاتينية — Montserrat محمّل في fonts.css، لا Roboto. */
  --font-latin: "Montserrat", system-ui, sans-serif;
  --ink-strong: var(--yellow-ink);
  --paper-tint: #EEF3FA;
  /* نصّ صغير فوق الأسود: --yellow على --black = 3.29:1 (حدّ الواجهة لا المتن). */
  --accent-on-dark: #A8C5F0;
  --fs-body-sm: 0.95rem;
  /* Every glass panel in the .xd is the same effect: fillOpacity 0,
     blurAmount 30, brightnessAmount +15. */
  --glass: blur(30px) brightness(1.15);
  /* the page-header band uses the same effect at full width; lower this one
     value if the photograph should stay recognisable behind the title */
  --page-hero-blur: 30px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.55s;
}

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* المدّة صفرٌ لا 0.01ms — والفرقُ قيس لا ذوق: 0.01ms «انتقالٌ
     حقيقيٌّ» يبدأ من القيمة القديمة في كل عنصرٍ (خاصية الانتقال
     الافتراضية all تشمل الوراثةَ نفسها)، فقراءةٌ أو focus() متزامنةٌ
     بعد أي تغييرٍ تقع في لحظته الأولى على القيمة القديمة. هكذا فشل
     حبسُ التركيز في العارض تحت تقليل الحركة: زرُّ الإغلاق محسوبُه
     hidden لحظةَ focus() فيهرب Tab خلف النافذة (أمسكه npm run keys).
     صفرٌ مع صفرِ تأخيرٍ = لا انتقالَ أصلًا، والتغييرُ فوريٌّ في كل
     البيئات — ولا سكربتَ في الموقع ينتظر transitionend. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}

/* ==========================================================================
   TheSans Plain — the typeface DAHLAN_FINAL.xd actually specifies (1666 text
   runs carry postscriptName "TheSans-Plain"). It is a licensed LucasFonts
   family: the .xd embeds no font binary, and XD itself substituted Segoe UI
   when the artboards were exported, which is why the SVGs read as Segoe.
   Nothing here ships the font. These rules pick it up automatically the
   moment it exists — either installed on the visitor's machine (`local()`) or
   dropped into /assets/fonts as licensed web files. Until then the stack falls
   through to Tajawal exactly as before. See assets/fonts/README.txt.
   ========================================================================== */
@font-face {
  font-family: "TheSansWeb";
  /* Add the two url() lines back once the licensed web files are in
     /assets/fonts — they are commented out so the browser is not sent after
     files that are not there yet. */
  src: local("TheSans Plain"), local("TheSans-Plain"), local("TheSansArabic Plain");
  /* url("../fonts/thesans-plain.woff2") format("woff2"),
     url("../fonts/thesans-plain.woff") format("woff"); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TheSansWeb";
  src: local("TheSans Bold"), local("TheSans-Bold"), local("TheSansArabic Bold");
  /* url("../fonts/thesans-bold.woff2") format("woff2"),
     url("../fonts/thesans-bold.woff") format("woff"); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

/* Tabs and category pills switch their panels by toggling the `hidden`
   attribute. Any `display` a panel sets on itself — grid, flex — outranks the
   browser's `[hidden] { display: none }`, and the panel stays on screen next
   to the one that replaced it. One rule keeps that from ever happening again.
   (`.carousel__btn` and the lightbox media rely on it too.) */
[hidden] { display: none !important; }
img { height: auto; }

/* Several source photos are portrait-oriented; anchoring the crop near the top
   keeps faces in frame inside the design's landscape boxes. */
.split__media img,
.band__figure img,
.card__media img,
.gallery__item img { object-position: center 22%; }

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }

h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; }

/* مؤشّر التركيز بلونين، لا بلون واحد.

   حلقة الهوية (--yellow = #2B5CB4) على الأبيض ≈ 6.2:1 فتكفي لحدّ الواجهة،
   لكن الصفحة فيها أسطح سوداء وبيضاء. ظلٌّ داكن تحت الحلقة يُبقي المؤشّر
   مرئيًا على أي خلفية، والهوية تبقى زرقاء. */
:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.85);
}

/* Latin runs inside Arabic copy. Isolating them keeps leading/trailing neutrals
   (the "+" in "+3,500", the "@" in "@mohammad_dahlan") on the correct side. */
.lat {
  font-family: var(--font-latin);
  direction: ltr;
  unicode-bidi: isolate;
}

/* --- Layout helpers ----------------------------------------------------- */
/* `--container` is the XD *content* width (1640px = a 1920 artboard less its
   140px margins), so the gutters have to sit outside the cap, not inside it. */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(3.5rem, 7vw, 8.5rem); }
.section--tight { padding-block: clamp(2.5rem, 4.5vw, 5rem); }
.section--light { background: var(--paper); }
.section--alt { background: var(--paper-alt); }

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  top: -100px;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--yellow);
  color: var(--white);
  font-weight: 700;
  border-radius: var(--radius);
  transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

/* --- Section heading ---------------------------------------------------- */
.sec-head { margin-bottom: clamp(2rem, 3.5vw, 3.5rem); }

.sec-head__title {
  font-size: var(--fs-title);
  color: var(--ink);
  position: relative;
  display: inline-block;
  padding-bottom: 0.5rem;
}

/* Every section rule in the artboard is the same 138x6 bar. */
.sec-head__title::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 138px;
  height: 6px;
  background: var(--yellow);
}

/* On the dark "ما نؤمن به" band the XD draws the bar in white. */
.on-dark .sec-head__title::after { background: var(--white); }

.sec-head__sub {
  margin-top: 1rem;
  font-size: var(--fs-body);
  color: var(--ink-soft);
  max-width: 70ch;
}

.sec-head--center { text-align: center; }
.sec-head--center .sec-head__title::after {
  inset-inline-start: 50%;
  transform: translateX(50%);
}
.sec-head--center .sec-head__sub { margin-inline: auto; }

.on-dark .sec-head__title,
.on-dark .sec-head__sub { color: var(--white); }

/* --- Buttons ------------------------------------------------------------ */
/* Every button in the .xd is the same pill: `Rectangle 1212`, 199x58, radius 33,
   #2B5CB4 behind a white 20px label, with a 0/3/3 black-16% shadow. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-width: clamp(150px, 10.36vw, 199px);
  min-height: clamp(46px, 3.02vw, 58px);
  padding-inline: clamp(1.25rem, 2.2vw, 2.5rem);
  font-size: var(--fs-body);
  font-weight: 700;
  border-radius: 999px;
  transition: background-color var(--hover-dur) var(--hover-ease),
              color var(--hover-dur) var(--hover-ease),
              box-shadow var(--hover-dur) var(--hover-ease);
}

.btn--solid {
  background: var(--yellow);
  color: var(--white);
  text-shadow: var(--text-shadow-card);
  box-shadow: var(--shadow-pill);
}
.btn--solid:hover { background: var(--yellow); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.22); }

/* `Component 6` grows its label from 20px to 26px on hover while the 199x58
   pill stays put. Only the two components the file specifies get it, so a long
   label can never spill out of its pill. */
.btn--pill .btn__label,
.belief__more .btn__label { display: inline-block; transition: scale var(--hover-dur) var(--hover-ease); }
.btn--pill:hover .btn__label,
.belief__more:hover .btn__label { scale: 1.3; }

.btn--ghost {
  border: 2px solid var(--yellow);
  color: var(--white);
}
.btn--ghost:hover { background: var(--yellow); color: var(--white); text-shadow: var(--text-shadow-card); }

.btn--dark {
  background: var(--black);
  color: var(--white);
}
.btn--dark:hover { background: #1c1c1c; }

.btn__arrow {
  display: inline-block;
  transition: transform 0.25s;
}
/* RTL: the arrow points left, so nudge it left on hover */
.btn:hover .btn__arrow { transform: translateX(-4px); }

/* ==========================================================================
   Header / navigation
   ========================================================================== */
.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color 0.35s, box-shadow 0.35s, height 0.35s;
}

.header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
  pointer-events: none;
  transition: opacity 0.35s;
}

/* Stuck state. The .xd builds every floating chrome element — the social rail,
   the search pill, the round buttons — out of the same frosted panel, so the
   bar that follows the scroll uses it too instead of turning flat black: a
   light black tint over a 30px blur of whatever is passing underneath, closed
   with a hairline rather than a heavy shadow. */
.header.is-stuck {
  height: 78px;
  background: rgba(10, 10, 10, 0.45);
  backdrop-filter: blur(30px) saturate(1.4);
  -webkit-backdrop-filter: blur(30px) saturate(1.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
}
/* A tint this light is only legible because of the blur; without it, fall back
   to the solid bar. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header.is-stuck { background: rgba(0, 0, 0, 0.92); }
}
.header.is-stuck::before { opacity: 0; }
/* The mobile menu paints its own panel; a blurred bar on top of it reads as a
   smear, so the blur is dropped and the tint deepened while it is open. */
body.no-scroll .header.is-stuck { background: rgba(10, 10, 10, 0.92); }

.header__inner {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter)); /* same content edges as .container */
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 2rem;
}

/* Brand: calligraphic mark with the Latin lockup beneath it, as in the XD
   header (the 12px "Mohammed Dahlan" sits directly under the logo). */
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  flex-shrink: 0;
}
.brand__mark { height: clamp(38px, 3.2vw, 58px); width: auto; }
.brand__wordmark {
  font-family: var(--font-latin);
  font-size: clamp(0.5rem, 0.62vw, 0.72rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}

.nav { display: flex; align-items: stretch; gap: clamp(0.25rem, 1.4vw, 1.5rem); }

.nav__link {
  position: relative;
  display: flex;
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--white);
  padding-inline: clamp(0.4rem, 0.9vw, 1rem);
  white-space: nowrap;
  transition: color 0.2s, background-color 0.25s;
}

/* The XD hover state draws a 3px #2B5CB4 rule under the label. */
/* `Component 7`: the 103x3 yellow bar is at opacity 0 above the label and
   animates down to the base of the item while the label lifts 3px. */
.nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background: var(--yellow);
  opacity: 0;
  translate: 0 -8px;
  transition: opacity var(--hover-dur) var(--hover-ease),
              translate var(--hover-dur) var(--hover-ease);
}
.nav__link:hover::after { opacity: 1; translate: 0 0; }
.nav__link:not(.is-active):hover { translate: 0 -3px; }

/* The current page is marked by a full-height #2B5CB4 tab (XD "Rectangle 1203",
   92x122 behind the active label). White text — 6.2:1 on this blue. */
.nav__link.is-active {
  background: var(--yellow);
  color: var(--white);
  font-weight: 700;
  border-end-start-radius: 10px;
  border-end-end-radius: 10px; /* the XD tab rounds its two bottom corners */
}
.nav__link.is-active::after { display: none; }

/* ---- Header search box ---------------------------------------------------
   The XD header carries a real search field at the far inline end (x=140). */
/* `Rectangle 1196` in the .xd: a 209x33 capsule, radius 17, 1px #FFFFFF stroke
   and the same frosted fill as the social rail — fillOpacity 0, blur 30,
   brightness +15 — with the word "بحث" at 14px white inside it. */
.search-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  align-self: center;
  width: clamp(150px, 10.89vw, 209px);
  height: clamp(28px, 1.72vw, 33px);
  padding-inline: clamp(0.35rem, 0.42vw, 8px) clamp(0.6rem, 0.83vw, 16px);
  border: 1px solid var(--white);
  border-radius: 999px;
  background: transparent;
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  transition: border-color 0.25s, background-color 0.25s;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .search-box { background: rgba(255, 255, 255, 0.16); }
}
.search-box:focus-within { border-color: var(--yellow); }
.search-box__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--white);
  font-size: clamp(0.7rem, 0.73vw, 14px); /* 14px in the .xd */
  line-height: 1;
}
.search-box__input::placeholder { color: rgba(255, 255, 255, 0.75); }
.search-box__input:focus { outline: none; }
.search-box__btn {
  display: grid;
  place-items: center;
  flex: none;
  width: clamp(22px, 1.35vw, 26px);
  height: clamp(22px, 1.35vw, 26px);
  border-radius: 50%;
  color: var(--white);
  transition: background-color 0.25s, color 0.25s;
}
.search-box__btn:hover { background: var(--yellow); color: var(--white); }

@media (max-width: 1200px) { .search-box { display: none; } }
/* Where the inline field is shown, the icon that opens the overlay is redundant. */
@media (min-width: 1201px) { .js-search-open { display: none; } }

/* ---- "المركز الإعلامي" dropdown -----------------------------------------
   XD component "Component 7 – 6": a 189x214 #2B5CB4 panel with 10px radius on
   the bottom corners, white 18px labels, each row 189x38 highlighting with
   black at 10% on hover. */
/* Must stretch like the sibling links, or the toggle floats to the bar's top. */
.has-menu { position: relative; display: flex; }

.has-menu__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.has-menu__caret {
  transition: transform 0.3s var(--ease);
  margin-top: 2px;
}
.has-menu:hover .has-menu__caret,
.has-menu:focus-within .has-menu__caret { transform: rotate(180deg); }

.menu {
  position: absolute;
  inset-inline-start: 50%;
  top: calc(100% + 0.5rem);
  translate: 50% 0;
  width: 189px;
  padding: 0.5rem 0;
  margin: 0;
  list-style: none;
  background: var(--yellow);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.25s, visibility 0.25s, transform 0.25s var(--ease);
  z-index: 10;
}
/* Bridge the gap so the pointer can travel from the label to the panel. */
.menu::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -0.75rem;
  height: 0.75rem;
}
.has-menu:hover .menu,
.has-menu:focus-within .menu,
.menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.menu__link {
  display: block;
  padding: 0.55rem 1.5rem;
  font-size: var(--fs-sm);
  /* أبيض على الأزرق الصلب = 6.2:1. الأسود على #2B5CB4 ≈ 3.4:1 فيسقط عن AA. */
  color: var(--white);
  text-align: start;
  transition: background-color 0.2s;
}
.menu__link:hover,
.menu__link:focus-visible { background: rgba(255, 255, 255, 0.12); }

/* ---- Carousel ------------------------------------------------------------
   The XD artboard flanks the beliefs, news and tweet rows with 62px round
   white buttons carrying a #2B5CB4 chevron. */
/* `min-width: 0` so a carousel used as a grid/flex item can shrink to its cell
   instead of being propped open by the track's intrinsic width. */
.carousel { position: relative; min-width: 0; }

.carousel__track {
  display: grid;
  min-width: 0;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--card-gap)) / 3);
  gap: var(--card-gap);
  --card-gap: clamp(1.25rem, 2vw, 2.25rem);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* `overflow-x: auto` makes the other axis scrollable too, so while the cards
     were still translated down by the reveal a wheel nudge inside the row
     scrolled the track a few pixels vertically. Lock that axis, fade the cards
     in place instead of sliding them, and leave room for the 0/6/6 shadow. */
  overflow-y: hidden;
  padding-block-end: 1rem;
}
.carousel__track .reveal { transform: none; }
/* Declared here rather than in the block above so `prefers-reduced-motion`
   really wins: the JS steps pass their own behaviour, and a swipe or a keyboard
   scroll should not animate for a reader who asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .carousel__track { scroll-behavior: smooth; }
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; }

@media (max-width: 1080px) {
  .carousel__track { grid-auto-columns: calc((100% - var(--card-gap)) / 2); }
}
@media (max-width: 720px) {
  .carousel__track { grid-auto-columns: 85%; }
}

/* One-up variant (the "كلمات القائد" quote cards). */
.carousel__track--single { grid-auto-columns: 100%; }

/* Two-up variant (the "ما نؤمن به" cards). */
.carousel__track--wide { grid-auto-columns: calc((100% - var(--card-gap)) / 2); }
@media (max-width: 800px) {
  .carousel__track--wide { grid-auto-columns: 88%; }
}

/* Cards must fill the snap column so a row stays visually even. */
.carousel__track > .card,
.carousel__track > .belief,
.carousel__track > .tweet { height: 100%; }

/* Solid-yellow 62px discs with a white chevron, centred on the row's edges
   (`Component 20 / 21` in the artboard). They wrap around, so neither side
   is ever a dead control. */
.carousel__btn {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: clamp(38px, 3.23vw, 62px);
  height: clamp(38px, 3.23vw, 62px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--yellow);
  color: var(--white);
  box-shadow: var(--shadow-card);
  transition: background-color 0.25s, color 0.25s, opacity 0.25s, transform 0.25s;
  z-index: 5;
}
.carousel__btn svg { width: clamp(14px, 1.1vw, 21px); height: auto; }
/* The .xd hover state for `Component 20 / 21` is identical to the default —
   this only keeps a touch of feedback without repainting the disc. */
.carousel__btn:hover { filter: brightness(1.08); }

.carousel__btn--prev { inset-inline-start: clamp(-31px, -1.61vw, -19px); }
.carousel__btn--next { inset-inline-end: clamp(-31px, -1.61vw, -19px); }

@media (max-width: 1200px) {
  .carousel__btn--prev { inset-inline-start: -6px; }
  .carousel__btn--next { inset-inline-end: -6px; }
}
@media (max-width: 900px) {
  /* Touch users swipe; the partially visible next card signals that. */
  .carousel__btn { display: none; }
}

/* ---- Split section header: title at the inline start, action opposite ---- */
.sec-head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.sec-head--split .sec-head__title { margin-bottom: 0; }

/* `Component 6`: 199x58, radius 33, white 20px label, 0/3/3 black-16% shadow. */
.btn--pill {
  border-radius: 999px;
  min-width: clamp(150px, 10.36vw, 199px);
  min-height: clamp(46px, 3.02vw, 58px);
  font-size: var(--fs-body);
  background: var(--yellow);
  color: var(--white);
  font-weight: 700;
  text-shadow: var(--text-shadow-card);
  box-shadow: var(--shadow-pill);
}

/* ---- Circular play badge -------------------------------------------------
   XD `Component 2`: an 80px yellow disc with a 2px white inside stroke and a
   white play glyph — not a white disc.
   -------------------------------------------------------------------------- */
.play-badge {
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(52px, 4.17vw, 80px);
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  text-decoration: none;
  cursor: pointer;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--white);
  box-shadow: inset 0 0 0 2px var(--white), var(--shadow-card);
  transition: box-shadow var(--hover-dur) var(--hover-ease);
}
/* `Component 2`: the only thing the hover state changes is the white ring. */
.play-badge:hover { box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2); }
.play-badge svg { width: 42%; height: auto; } /* the glyph fills ~34px of the 80px disc */
.play-badge--center { top: 50%; inset-inline-start: 50%; translate: 50% -50%; }
.play-badge--corner {
  width: clamp(34px, 2.19vw, 42px); /* `Component 12` */
  top: 0.85rem;
  inset-inline-start: 0.85rem;
  box-shadow: inset 0 0 0 1px var(--white), 0 4px 12px rgba(0, 0, 0, 0.3);
}

.header__tools { display: flex; align-items: center; gap: 0.75rem; }

/* `Rectangle 1190` in the .xd is a 42px frosted disc with a 2px white stroke —
   the same part the play badges and the slider arrows are built from. */
/* مدخل النسخة الإنجليزية في الترويسة — بهيئة أزرار الأدوات المجاورة */
.lang-switch {
  height: 42px;
  padding: 0 14px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.55);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.lang-switch:hover { background: var(--yellow); color: var(--white); border-color: var(--yellow); }

.icon-btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.icon-btn:hover { background: var(--yellow); border-color: var(--yellow); color: var(--white); }

.nav-toggle { display: none; }

/* Mobile drawer */
@media (max-width: 1024px) {
  .nav-toggle { display: grid; }

  /* Pinned to the inline start, which in this RTL document is the right edge.
     translateX is physical, so the closed state slides it off to the right. */
  .nav {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(340px, 84vw);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.25rem;
    padding: calc(var(--header-h) + 1.5rem) 1.75rem 2rem;
    background: #0b0b0b;
    transform: translateX(100%);
    transition: transform 0.4s var(--ease);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
  }
  .nav.is-open { transform: translateX(0); }

  /* Keep the slide direction correct if the document is ever switched to LTR. */
  [dir="ltr"] .nav { transform: translateX(-100%); box-shadow: 20px 0 60px rgba(0, 0, 0, 0.5); }
  [dir="ltr"] .nav.is-open { transform: translateX(0); }

  /* backdrop-filter turns the header into the containing block for its fixed
     descendants, which would trap the drawer inside the 72px bar. The stuck bar
     is opaque while an overlay is open (see above), so the blur can go. */
  body.no-scroll .header.is-stuck {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav__link {
    width: 100%;
    font-size: 1.15rem;
    padding-block: 0.9rem;
    padding-inline: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .nav__link::after { display: none; }
  /* The yellow tab is a desktop bar treatment; in the drawer just tint it. */
  .nav__link.is-active { background: none; color: var(--accent-on-dark); }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s, visibility 0.35s;
  }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }
}

/* Search overlay */
.search {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s;
}
.search.is-open { opacity: 1; visibility: visible; }

.search__form {
  display: flex;
  width: min(760px, 88vw);
  gap: 0.75rem;
}
.search__input {
  flex: 1;
  padding: 1.1rem 1.5rem;
  font-size: 1.25rem;
  background: transparent;
  color: var(--white);
  border: 0;
  border-bottom: 2px solid rgba(255, 255, 255, 0.35);
}
.search__input::placeholder { color: rgba(255, 255, 255, 0.5); }
.search__input:focus { outline: none; border-bottom-color: var(--yellow); }

.search__close {
  position: absolute;
  top: 2rem;
  inset-inline-end: 2rem;
  color: var(--white);
  font-size: 2rem;
  line-height: 1;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--black);
  isolation: isolate;
}
/* No real display is this tall — caps the svh unit for full-page renders. */
@media (min-height: 2000px) {
  .hero { min-height: 1080px; max-height: 1080px; }
}

/* The flag clip is the background itself, at full strength. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -3;
}
.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Poster still shown until the video can paint. */
.hero__poster { position: absolute; inset: 0; }
.hero__video { position: absolute; inset: 0; }

/* Just enough shading on the text side to hold white type over the flag. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(to left, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.3) 38%, rgba(0, 0, 0, 0) 68%),
    linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 45%);
}

/* Cut-out portrait standing on the flag, anchored to the inline end
   (the left-hand side in this RTL layout). */
.hero__portrait {
  position: absolute;
  bottom: 0;
  inset-inline-end: clamp(0px, 4vw, 110px);
  height: min(80vh, 840px);
  width: auto;
  z-index: -1;
  pointer-events: none;
}
/* `123_Black` — the same cut-out painted flat black at 30% and shifted 60px
   of its 814px width (7.37%) to the right, sitting behind the figure. */
.hero__portrait--shadow {
  z-index: -2;
  translate: 7.37% 0;
  filter: brightness(0);
  opacity: 0.3;
}

/* Vertical social rail on the inline start (right) edge.
   `Rectangle 1211` in the .xd: 42x206, radius 21, a 1px #FFFFFF inside stroke,
   a 0/6/3 black-16% shadow and — the part an SVG export cannot carry — a
   `uxdesign#blur` background effect with fillOpacity 0, blur 30 and brightness
   +15. That is a glass panel, not a white one: the fill is fully transparent
   and the hero photo behind it is blurred and brightened. */
.social-rail {
  --rail-w: clamp(34px, 2.19vw, 42px);
  --rail-pitch: clamp(24px, 1.56vw, 30px); /* the .xd spaces the six icons 30px apart */
  position: absolute;
  inset-inline-start: clamp(0.5rem, 2.2vw, 2.75rem);
  top: 50%;
  translate: 0 -50%;
  z-index: 4;
  display: grid;
  grid-auto-rows: var(--rail-pitch);
  justify-items: center;
  align-content: center;
  width: var(--rail-w);
  height: clamp(168px, 10.73vw, 206px); /* 206 on the 1920 artboard */
  border-radius: calc(var(--rail-w) / 2);
  background: transparent;
  backdrop-filter: blur(30px) brightness(1.15);
  -webkit-backdrop-filter: blur(30px) brightness(1.15);
  border: 1px solid var(--white);
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.16);
}
/* Without backdrop-filter the panel would be an invisible outline over the
   photo, so fall back to a translucent white fill. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .social-rail { background: rgba(255, 255, 255, 0.16); }
}
.social-rail a {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--white); /* `cls-3` in the export — pure white, not 90% */
  transition: color var(--hover-dur) var(--hover-ease),
              scale var(--hover-dur) var(--hover-ease);
}
/* The .xd registers no hover on these six icons; this is the same yellow the
   rest of the page uses on hover, kept to a colour change so the rail's
   geometry stays exactly as drawn. */
.social-rail a:hover,
.social-rail a:focus-visible { color: var(--accent-on-dark); scale: 1.15; }

/* Slide indicators under the rail: `Ellipse 1` is a solid white 14px disc and
   `Ellipse 3/4` are 10px circles with a 1px white stroke and the same glass
   fill as the rail. All three share the rail's centre line (x=1579). */
.hero__dots {
  position: absolute;
  inset-inline-start: clamp(0.5rem, 2.2vw, 2.75rem);
  top: calc(50% + clamp(105px, 7.6vw, 146px)); /* rail centre 483 -> dot centre 633 */
  z-index: 4;
  display: grid;
  gap: clamp(8px, 0.52vw, 10px);
  justify-items: center;
  align-items: center;
  width: clamp(34px, 2.19vw, 42px);
}
.hero__dot {
  justify-self: center;
  /* the UA gives buttons 1px 6px, which floors these at 14px wide */
  padding: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--white);
  backdrop-filter: blur(30px) brightness(1.15);
  -webkit-backdrop-filter: blur(30px) brightness(1.15);
  transition: width var(--hover-dur) var(--hover-ease),
              height var(--hover-dur) var(--hover-ease),
              background-color var(--hover-dur) var(--hover-ease);
}
.hero__dot:hover { background: rgba(255, 255, 255, 0.55); }
.hero__dot.is-active {
  width: 14px;
  height: 14px;
  background: var(--white);
  border-color: var(--white);
}

@media (max-width: 1024px) {
  .social-rail, .hero__dots { display: none; }
  .hero__portrait {
    inset-inline-end: 50%;
    translate: 50% 0;
    height: min(52vh, 460px);
    opacity: 0.35;
  }
  .hero__portrait--shadow { display: none; } /* the figure is already faded here */
}

/* Faint emblem watermark, as in the artboard */
.hero__emblem {
  position: absolute;
  inset-inline-start: clamp(-120px, -4vw, 0px);
  top: 50%;
  translate: 0 -50%;
  width: clamp(320px, 42vw, 814px);
  opacity: 0.14;
  z-index: -1;
  pointer-events: none;
  animation: emblem-float 18s ease-in-out infinite;
}

@keyframes emblem-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-18px) rotate(2deg); }
}

.hero__inner {
  position: relative;
  z-index: 2;
  /* The Arafat block rides up to 245px into the hero and paints above it, so the
     copy has to reserve that much room at the base — otherwise on a ~930px-tall
     window (a 1080p screen minus browser chrome) the buttons end up underneath
     the photo. The hero grows past the viewport rather than hiding content. */
  padding-block: calc(var(--header-h) + 3rem) clamp(7rem, 14vw, 268px);
  padding-inline-start: clamp(0px, 6vw, 90px); /* clear the social rail */
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.hero__name {
  font-size: var(--fs-hero);
  color: var(--white);
  line-height: 1.05;
  margin-bottom: 0.25rem;
}

.hero__role {
  font-size: var(--fs-lead);
  color: var(--white);
  font-weight: 400;
}

/* Yellow rule between the title block and the quote, as in the reference. */
.hero__rule {
  width: 138px;
  height: 6px;
  background: var(--yellow);
  margin-block: clamp(1.25rem, 2.4vw, 2.25rem);
  border: 0;
}

.hero__quote {
  font-size: var(--fs-body-lg);
  color: rgba(255, 255, 255, 0.95);
  max-width: 34ch;
  line-height: 1.75;
  min-height: 5.25em;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.hero__quote.is-fading { opacity: 0; transform: translateY(10px); }

.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.75rem; }

.hero__scroll {
  position: absolute;
  bottom: 2rem;
  inset-inline-start: 50%;
  translate: 50% 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}

/* Page header (inner pages).
   The .xd stacks a 1920x500 band on both the ABOUT and the contact artboard,
   and the layer over the photo is a glass panel, not a gradient: a black fill
   held at `fillOpacity: 0.22` with `blurAmount: 30` and `brightnessAmount: -1`
   behind it. So the photograph is meant to read blurred and slightly darkened
   under the title — which is also why a 700x468 source was good enough for the
   designer: at 30px of blur the upscale is invisible. */
.page-hero {
  position: relative;
  min-height: clamp(340px, 26.04vw, 500px); /* 500 on the 1920 artboard */
  display: flex;
  align-items: center;
  background: var(--black);
  overflow: hidden;
  isolation: isolate;
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the glass layer does the darkening now, so the photo stays as shot */
  opacity: 1;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(var(--page-hero-blur)) brightness(0.98);
  -webkit-backdrop-filter: blur(var(--page-hero-blur)) brightness(0.98);
}
/* Without backdrop-filter the photo would stay sharp under white text, so the
   fallback dims it the old way instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .page-hero__bg { opacity: 0.45; filter: blur(18px); scale: 1.06; }
  .page-hero::after { background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.45)); }
}
.page-hero__inner { padding-block: calc(var(--header-h) + 2rem) 3rem; }
.page-hero__title { font-size: var(--fs-display); color: var(--white); }
.page-hero__sub {
  font-size: clamp(1.05rem, 1.5vw, 1.8rem);
  color: rgba(255, 255, 255, 0.85);
  font-weight: 400;
  margin-top: 0.5rem;
}

/* The artboard closes the page header with a plain white row of social marks
   under the strapline (no discs, unlike the footer). */
.socials--hero {
  margin-top: clamp(0.6rem, 1.1vw, 1.1rem);
  gap: clamp(0.5rem, 0.94vw, 1.1rem);
  direction: ltr; /* twitter first, as the row runs in the artboard */
  justify-content: flex-end;
}
.socials--hero .social {
  width: auto;
  height: auto;
  background: none;
  color: var(--white);
}
.socials--hero .social:hover { background: none; color: var(--accent-on-dark); transform: none; }

.crumbs {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1rem;
}
.crumbs a:hover { color: var(--accent-on-dark); }
.crumbs span[aria-hidden] { opacity: 0.5; }

/* ==========================================================================
   Feature band — image + coloured panel (Arafat / Tayyar blocks)
   ========================================================================== */
.band { position: relative; overflow: hidden; }

.band__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 5rem);
}

.band__figure {
  position: relative;
  aspect-ratio: 898 / 490;
  overflow: hidden;
}
.band__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.band:hover .band__figure img { transform: scale(1.05); }

.band__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.35), transparent 60%);
}

.band__panel { padding-block: clamp(1rem, 2vw, 2rem); }
.band__title { font-size: var(--fs-display); margin-bottom: 1.5rem; }
.band__text { font-size: var(--fs-body-lg); line-height: 1.85; }

.band__cite {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.75rem;
  font-size: var(--fs-body-lg);
  font-weight: 700;
}
.band__cite::before {
  content: "";
  width: 42px;
  height: 3px;
  background: currentColor;
  opacity: 0.5;
}

.band--dark { background: var(--black); color: var(--white); }
.band--yellow { background: var(--yellow); color: var(--white); }

@media (max-width: 900px) {
  .band__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Split feature (رسالتنا / رؤيتنا)
   ========================================================================== */
/* The artboard pairs each row as two flush 820x555 cards: a photo card and a
   thin-stroked white card carrying the heading, a yellow rule, and the copy. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 0;
}
.split + .split { margin-top: 0; } /* the artboard stacks the two rows flush */
.split--flip .split__media { order: 2; }

.split__media {
  position: relative;
  aspect-ratio: 820 / 555;
  isolation: isolate;
  /* Outer corners rounded, flush edge square (logical, so RTL-correct). */
  border-start-start-radius: 10px;
  border-end-start-radius: 10px;
  overflow: hidden;
}
.split--flip .split__media {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: 10px;
  border-end-end-radius: 10px;
}
.split__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split__body {
  border: 1px solid #e6e6e6;
  border-inline-start: 0;
  border-start-end-radius: 10px;
  border-end-end-radius: 10px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 5rem);
}
.split--flip .split__body {
  border-inline-start: 1px solid #e6e6e6;
  border-inline-end: 0;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  border-start-start-radius: 10px;
  border-end-start-radius: 10px;
}
.split__title::after {
  content: "";
  display: block;
  width: 138px;
  height: 6px;
  background: var(--yellow);
  margin-top: clamp(0.6rem, 1.2vw, 1rem);
}
/* Yellow offset frame, echoing the XD gradient rectangles */
.split__media::before {
  content: "";
  position: absolute;
  inset-inline-end: -22px;
  bottom: -22px;
  width: 62%;
  height: 62%;
  border: 8px solid var(--yellow);
  z-index: 0;
}
.split--flip .split__media::before {
  inset-inline-end: auto;
  inset-inline-start: -22px;
}

.split__title { font-size: var(--fs-title); margin-bottom: 1.25rem; }
.split__text { font-size: var(--fs-body-lg); line-height: 1.85; color: var(--ink); }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
  .split__media::before { display: none; }
}

/* ==========================================================================
   Beliefs (ما نؤمن به) — dark cards over a photo
   ========================================================================== */
/* `Mohamed Dahlan 4` in the artboard: a 1920x1080 photo showing through a
   1920x749 window at y=3411, under a 50% black wash. The photo is attached to
   the viewport, so the band travels over a still image as the page scrolls —
   the same parallax the reference build uses. */
.beliefs {
  position: relative;
  background-color: var(--black);
  background-image: url("../img/beliefs-bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  /* 749 / 1920 of the artboard's width, minus the 400px card row. */
  padding-block: clamp(3rem, 5.6vw, 107px);
  color: var(--white);
  isolation: isolate;
  overflow: hidden;
}
/* iOS/Android repaint `fixed` backgrounds badly (the photo jumps or stretches
   to the document height), and a parallax is motion the user may have opted
   out of — both fall back to a plain band. */
@media (prefers-reduced-motion: reduce), (hover: none), (max-width: 900px) {
  .beliefs {
    background-attachment: scroll;
  }
}
.beliefs::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.5);
}

.beliefs__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 2.5vw, 2rem);
}

/* XD: 700x400 cards, 5px yellow stroke, 10px radius, centred white text,
   with a solid-yellow pill button (199x58, white label) hanging near the base. */
.belief {
  border: 5px solid var(--yellow);
  border-radius: 10px;
  /* 700x400 boxes in the artboard, the copy centred and the pill resting
     30px above the base at the inline-start edge. */
  min-height: clamp(260px, 20.83vw, 400px);
  padding: clamp(1.5rem, 2.6vw, 50px) clamp(1.5rem, 3.44vw, 66px) clamp(1rem, 1.56vw, 30px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.75rem, 1.15vw, 1.4rem);
  transition: background-color 0.35s, transform 0.35s var(--ease);
}
.belief .belief__more { align-self: flex-start; }
.belief:hover {
  background: rgba(43, 92, 180, 0.07);
  transform: translateY(-6px);
}
.belief__title { font-size: clamp(1.4rem, 2.35vw, 2.8rem); }
.belief__text {
  font-size: var(--fs-body-lg);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.88);
  flex: 1;
  max-width: 44ch;
}
.belief__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 199px;
  min-height: 58px;
  padding: 0.5em 2em;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--white);
  font-size: var(--fs-body);
  font-weight: 700;
  transition: transform 0.3s var(--ease), filter 0.3s;
}
.belief__more { text-shadow: var(--text-shadow-card); box-shadow: var(--shadow-pill); }
/* The row is inset so the 62px discs can sit on the content edges without
   covering the cards (the artboard runs the cards 244→1676). */
.beliefs .carousel { padding-inline: clamp(0px, 5.4vw, 104px); }
.beliefs .carousel__track { --card-gap: clamp(1rem, 1.95vw, 32px); }

@media (max-width: 800px) {
  .beliefs__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Tayyar band — the same two-card figure as the Arafat block, from the XD:
     photo  `Component 16 – 17` at (881, 6044)  size 898x490, radius 10
     card   `Rectangle 1205`    at (141, 6125)  size 898x490, radius 10
   They overlap by 158px, the photo sits 81px higher, and the yellow card is
   painted ON TOP of it (draw order in the artboard), so the heading and the
   quote read across the full card instead of slipping under the photo.
   ========================================================================== */
.tayyar {
  background: var(--paper);
  --card-overlap: clamp(56px, 8.23vw, 158px);
  /* `Component 16 - 17` sits at y=6044 and `Rectangle 1205` at y=6125: the
     yellow card is 81px lower, exactly as in the Arafat block above. */
  --card-drop: clamp(26px, 4.22vw, 81px);
}

.tayyar__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

/* Photo card — behind the yellow one. */
.tayyar__media {
  position: relative;
  z-index: 1;
  aspect-ratio: 898 / 490;
  margin-inline-end: calc(var(--card-overlap) / -2);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 18px 44px rgba(0, 0, 0, 0.22);
}
.tayyar__media img { width: 100%; height: 100%; object-fit: cover; }
.tayyar__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3); /* the XD overlay sits at exactly 30% */
}
.tayyar__media .play-badge { z-index: 2; }

.tayyar__card {
  position: relative;
  z-index: 2; /* over the photo, as in the artboard */
  aspect-ratio: 898 / 490;
  margin-inline-start: calc(var(--card-overlap) / -2);
  margin-top: var(--card-drop);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 10px;
  background: var(--yellow);
  color: var(--white); /* the artboard sets the whole text stack to #FFFFFF */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 18px 44px rgba(0, 0, 0, 0.22);
  /* The artboard does not centre the stack: it starts 79px below the card's
     top and clears 33px at the base, so the block reads slightly low. */
  padding-block: clamp(1rem, 4.11vw, 79px) clamp(0.75rem, 1.72vw, 33px);
  /* the heading ends 76px from the card's inline start (x=963 of 1039) */
  padding-inline: clamp(1.5rem, 3.96vw, 76px) clamp(1.5rem, 3.44vw, 66px);
}
.tayyar__title {
  font-size: clamp(1.6rem, 3.13vw, 3.75rem); /* 60px on the 1920 artboard */
  line-height: 1.15;
}
.tayyar__rule {
  display: block;
  width: clamp(84px, 7.19vw, 138px);
  height: 6px;
  background: var(--white);
  margin-block: clamp(0.5rem, 1.15vw, 1.4rem) clamp(0.6rem, 1.15vw, 1.2rem);
}
.tayyar__text {
  font-size: clamp(0.95rem, 1.56vw, 1.875rem); /* 30px */
  line-height: 1.5;
}
.tayyar__cite {
  margin-top: clamp(0.6rem, 1.25vw, 1.5rem);
  font-size: clamp(0.95rem, 1.56vw, 1.875rem);
}

@media (max-width: 1080px) {
  .tayyar { --card-overlap: 0px; --card-drop: 0px; }
  .tayyar__grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .tayyar__media, .tayyar__card { margin-inline: 0; aspect-ratio: auto; }
  .tayyar__card { padding: clamp(1.5rem, 6vw, 2.5rem); }
}

/* ==========================================================================
   Media centre tiles
   ========================================================================== */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2vw, 2rem);
}

.tile {
  position: relative;
  display: block;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--black);
  isolation: isolate;
}
.tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.62;
  transition: transform 0.9s var(--ease), opacity 0.5s;
  z-index: -1;
}
.tile:hover img { transform: scale(1.08); opacity: 0.42; }

.tile__body {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: clamp(1.25rem, 2vw, 2rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}
.tile__title { font-size: clamp(1.15rem, 1.7vw, 1.9rem); color: var(--white); }
.tile__more {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent-on-dark);
  white-space: nowrap;
}
.tile__icon {
  position: absolute;
  top: clamp(1rem, 2vw, 1.75rem);
  inset-inline-end: clamp(1rem, 2vw, 1.75rem);
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--white);
  transition: transform 0.35s var(--ease);
}
.tile:hover .tile__icon { transform: scale(1.12) rotate(-8deg); }

@media (max-width: 860px) { .tiles { grid-template-columns: 1fr; } }

/* ==========================================================================
   Overlap feature (the Arafat block riding up over the hero)
   ========================================================================== */
/* Two identical 898x490 cards from the XD artboard:
     photo  `Component 16 - 11`  at (880, 835)  -- inline start, rides into the hero
     panel  `Rectangle 1205`     at (140, 916)  -- inline end, 81px lower
   They overlap by 158px horizontally, and the yellow panel is painted ON TOP
   of the photo (it comes later in the artboard's draw order). */
.overlap {
  --card-ratio: 898 / 490;
  --card-overlap: clamp(56px, 8.23vw, 158px); /* horizontal bite between the two cards */
  --card-drop: clamp(26px, 4.22vw, 81px); /* how far the panel sits below the photo */
  position: relative;
  z-index: 5;
  margin-top: clamp(-245px, -12.76vw, -96px); /* photo top = 245px above the hero's bottom */
  padding-bottom: clamp(3rem, 6vw, 6rem);
}

.overlap__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

.overlap__media {
  position: relative;
  z-index: 1;
  aspect-ratio: var(--card-ratio);
  margin-inline-end: calc(var(--card-overlap) / -2);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 18px 44px rgba(0, 0, 0, 0.22);
}
.overlap__media img { width: 100%; height: 100%; object-fit: cover; }
.overlap__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3); /* the XD overlay sits at exactly 30% */
}
.overlap__media .play-badge { z-index: 2; }

/* `Component 16` in the .xd — used by BOTH 898x490 video tiles (the Arafat
   block and the Tayyar band). Its default state carries a 366x200 rounded
   frame centred in the tile at opacity 0; hovering auto-animates it to
   828x432 at (35,29) — i.e. a frame inset 35px from the sides and 29px from
   the top and bottom — over 0.3s ease-out. Scaling from 366x200 to 828x432 is
   not uniform, so the two axes get their own factor. */
.tayyar__media::before,
.overlap__media::before {
  content: "";
  position: absolute;
  z-index: 3; /* above the 30% scrim and the play disc */
  inset: 5.92% 3.9%;            /* 29/490 and 35/898 */
  border: 5px solid var(--yellow);
  border-radius: 10px;
  opacity: 0;
  scale: 0.442 0.463;           /* 366/828 and 200/432 — the collapsed box */
  pointer-events: none;
  transition: opacity var(--hover-dur) var(--hover-ease),
              scale var(--hover-dur) var(--hover-ease);
}
.tayyar__media:hover::before,
.tayyar__media:focus-within::before,
.overlap__media:hover::before,
.overlap__media:focus-within::before {
  opacity: 1;
  scale: 1 1;
}
/* Touch devices never hover; the frame would otherwise be dead weight. */
@media (hover: none) {
  .tayyar__media::before,
  .overlap__media::before { display: none; }
}

.overlap__panel {
  position: relative;
  z-index: 2; /* over the photo, as in the artboard */
  aspect-ratio: var(--card-ratio);
  margin-inline-start: calc(var(--card-overlap) / -2);
  margin-top: var(--card-drop);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 10px;
  background: var(--yellow);
  color: var(--white); /* the design sets all three text runs to #FFFFFF */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 18px 44px rgba(0, 0, 0, 0.22);
  /* the 330px text block is optically centred in the 490px card */
  padding-block: clamp(1.25rem, 2.5vw, 3rem);
  padding-inline: clamp(1.5rem, 4.22vw, 81px) clamp(1.5rem, 3.44vw, 66px);
}
.overlap__title {
  font-size: clamp(1.6rem, 3.13vw, 3.75rem); /* 60px on the 1920 artboard */
  line-height: 1.15;
}
.overlap__title::after { /* XD `Rectangle 1206` — a white 138x6 bar under the title */
  content: "";
  display: block;
  width: clamp(84px, 7.19vw, 138px);
  height: 6px;
  margin-top: clamp(0.5rem, 1.15vw, 1.4rem);
  background: var(--white);
}
.overlap__text {
  margin-top: clamp(0.5rem, 0.52vw, 10px);
  font-size: clamp(0.95rem, 1.56vw, 1.875rem); /* 30px */
  line-height: 1.5; /* 45px leading, so the quote lands on 4 lines as designed */
}
.overlap__cite {
  font-size: clamp(0.95rem, 1.56vw, 1.875rem);
}

@media (max-width: 900px) {
  .overlap { margin-top: 0; --card-overlap: 0px; --card-drop: 0px; }
  .overlap__grid { grid-template-columns: 1fr; }
  .overlap__panel { aspect-ratio: auto; padding: clamp(1.5rem, 6vw, 2.5rem); }
}

/* ==========================================================================
   Video cards (dark, for the home video-library slider)
   ========================================================================== */
/* ---- Media centre: category pills + featured grid (from the XD) -------- */
.media-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.6rem, 1vw, 1rem);
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}
/* The six category pills form the tablist; "المزيد" is a link, so it stays
   outside it and keeps its own semantics. */
.media-tabs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: inherit;
}
.media-tab {
  display: inline-flex;
  align-items: center;
  padding: 0.55em 1.7em;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--white);
  color: var(--ink);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-sm);
  transition: background-color 0.25s, border-color 0.25s, color 0.25s, transform 0.25s var(--ease);
}
.media-tab:hover { transform: translateY(-2px); border-color: var(--yellow); }
.media-tab.is-active,
.media-tab--solid {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--white);
  font-weight: 700;
}
/* "المزيد" sits alone at the opposite end, as in the artboard. */
.media-tab--solid { margin-inline-start: auto; }

/* Every category panel is the same height, so switching pills never shifts the
   page under the reader's cursor. The height is the one the artboard draws for
   this block: the 840x552 feature tile, i.e. 552 of 1920. Each panel then lays
   its own component out to fill that box — two rows of tiles, three rows of
   podcast cards, one row of news cards — instead of each ending wherever its
   content happened to stop. */
[data-panel^="m-"] {
  --media-panel-h: clamp(300px, 28.75vw, 552px);
  block-size: var(--media-panel-h);
}
@media (max-width: 1080px) {
  [data-panel^="m-"] { block-size: auto; }
}

.media-grid {
  display: grid;
  grid-template-columns: 2.1fr 1fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr)); /* 552 = 275 + 275 on the artboard */
  gap: clamp(1rem, 1.5vw, 1.5rem);
}
/* مكتبة الفيديو الحقيقية ثلاثة مقاطع: عمودان، المميَّز يملأ الصفّين. */
.media-grid--library {
  grid-template-columns: 2.1fr 1fr;
}
.media-grid .vcard { height: 100%; aspect-ratio: auto; }
.media-grid figure.vcard { cursor: zoom-in; }
/* Inside a fixed-height panel the news card fills the box and its title
   clamps instead of pushing the card past it. */
[data-panel^="m-"] .news-grid { grid-template-rows: minmax(0, 1fr); }
[data-panel^="m-"] .news-grid .card { height: 100%; }
[data-panel^="m-"] .news-grid .card__body { min-height: 0; }
[data-panel^="m-"] .news-grid .card__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vcard--feature { grid-row: span 2; }
.vcard--feature .vcard__title { font-size: clamp(1rem, 1.25vw, 1.4rem); }
@media (max-width: 1080px) {
  .media-grid { grid-template-columns: 1fr 1fr; }
  .vcard--feature { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 8; }
  .media-grid .vcard:not(.vcard--feature) { aspect-ratio: 4 / 3.4; }
  .media-tab--solid { margin-inline-start: 0; }
}
@media (max-width: 560px) {
  .media-grid { grid-template-columns: 1fr; }
  .vcard--feature { grid-column: auto; }
}

/* `Component 12`: a 398x275 tile, radius 10, 1px #E6E6E6 hairline and the
   shared 0/6/6 shadow. Its hover state swaps that hairline for a 5px #2B5CB4
   stroke — nothing else moves. */
.vcard {
  position: relative;
  display: block;
  aspect-ratio: 398 / 275;
  overflow: hidden;
  background: var(--black);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  isolation: isolate;
}
.vcard img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
/* The .xd tile keeps the photo still and rings it in 5px #2B5CB4 — the ring
   itself is the shared `::after` overlay above. */

.vcard__body {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: clamp(0.9rem, 1.4vw, 1.4rem);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.1));
  color: var(--white);
}
.vcard__date {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
/* لوحة «مشاريع وإنجازات» كانت بطاقاتٍ صمّاء؛ صار العنوان رابطًا يمتدّ
   على البلاطة كلها — رابط واحد لقارئ الشاشة، ومساحة نقر كاملة للفأرة. */
.vcard__link { color: inherit; }
/* الجسم الذي يحمل العنوان `position: absolute`، فـ`inset: 0` كان يقيس
   منه لا من البلاطة ويترك الصورة خارج مساحة النقر. التمدّد الفائض
   يقصّه `overflow: hidden` عند حدود البلاطة، فتصير كلها قابلة للنقر. */
.vcard__link::before {
  content: "";
  position: absolute;
  inset: -100vmax;
  z-index: 2;
}
.vcard__link:focus-visible { outline: none; }
.vcard__title {
  font-size: clamp(0.85rem, 0.95vw, 1.05rem);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Four across on wide screens, like the reference row. */
.carousel__track--quad { grid-auto-columns: calc((100% - 3 * var(--card-gap)) / 4); }
@media (max-width: 1200px) {
  .carousel__track--quad { grid-auto-columns: calc((100% - 2 * var(--card-gap)) / 3); }
}
@media (max-width: 900px) {
  .carousel__track--quad { grid-auto-columns: calc((100% - var(--card-gap)) / 2); }
}
@media (max-width: 640px) {
  .carousel__track--quad { grid-auto-columns: 78%; }
}

/* ==========================================================================
   "كلمات القائد" — quote slider beside a framed portrait
   ========================================================================== */
.words { background: var(--paper); }

/* Artboard geometry: the figure column runs 1234→1710 and the yellow card
   219→1101, i.e. 476 / 133 / 882 inside a row inset ~75px from the content
   edges (the nav discs ride those edges). */
.words__grid {
  display: grid;
  grid-template-columns: minmax(0, 476fr) minmax(0, 882fr);
  align-items: center;
  column-gap: 8.9%; /* 133 of the 1491 row */
  margin-inline: clamp(0px, 4.57vw, 75px);
}

/* Framed portrait as drawn in the XD: a rounded rect with a 5px yellow
   stroke and a faint white→grey gradient fill, a 4px yellow accent line
   near its top, and the cut-out standing on the frame's bottom edge while
   his head and shoulders rise ABOVE the frame (694px figure on a 484px box). */
.words__portrait {
  position: relative;
  align-self: end;
  aspect-ratio: 437 / 484;
  width: 91.8%; /* 437 of the 476 column */
  margin-inline: auto;
  margin-top: clamp(90px, 11vw, 210px); /* room for the overflowing figure */
  border: 5px solid var(--yellow);
  border-radius: 10px;
  background: linear-gradient(#fff, #f9f9f9);
}
.words__portrait::before {
  content: "";
  position: absolute;
  top: 13px;
  inset-inline: 0;
  margin-inline: auto;
  width: 81%;
  height: 4px;
  background: var(--yellow);
}
/* `Mohamed Dahlan shadow` — the artboard lays a 10% silhouette of the same
   figure 20px (4.2% of its width) to its right instead of a blur. */
.words__portrait img {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  margin-inline: auto;
  height: 143.4%; /* 694 / 484 from the artboard */
  width: auto;
  max-width: none;
}
.words__portrait .words__shadow {
  translate: 4.2% 0;
  opacity: 0.1;
}

/* Yellow quote card: the XD sets the entire text stack to white. */
.quote-card {
  background: var(--yellow);
  color: var(--white);
  border-radius: 10px;
  padding: clamp(1.75rem, 3vw, 3.5rem);
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 16px 40px rgba(0, 0, 0, 0.18);
}
.quote-card__mark {
  font-size: clamp(4rem, 5.5vw, 6.5rem);
  line-height: 0.55;
  color: var(--white);
  align-self: flex-start;
  margin-bottom: 1rem;
}
.quote-card__title { font-size: clamp(1.6rem, 3.13vw, 3.75rem); line-height: 1.15; }
.quote-card__sub { font-size: var(--fs-body-lg); opacity: 0.95; }
.quote-card__rule {
  display: block;
  width: 138px;
  height: 6px;
  background: var(--white);
  margin-block: clamp(0.6rem, 1.2vw, 1rem) clamp(0.9rem, 1.8vw, 1.5rem);
}
/* النصّ كلّه أبيض فوق الأزرق الصلب (6.2:1). الأسود كان يصلح على الأصفر القديم. */
.quote-card__text { font-size: var(--fs-body-lg); line-height: 1.85; color: var(--white); }

@media (max-width: 900px) {
  .words__grid { grid-template-columns: 1fr; }
  .words__portrait { max-width: 320px; margin-inline: auto; }
}

/* ==========================================================================
   Photo mosaic — one large tile plus a 2x2 block
   ========================================================================== */
.mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: clamp(8px, 0.8vw, 14px);
  aspect-ratio: 16 / 6.6;
}
.mosaic__item {
  position: relative;
  overflow: hidden;
  background: #ddd;
  cursor: zoom-in;
}
/* In RTL the first grid column is the rightmost, so the hero tile leads. */
.mosaic__item:first-child { grid-column: span 2; grid-row: span 2; }
.mosaic__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.mosaic__item:hover img { transform: scale(1.07); }
.mosaic__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(43, 92, 180, 0);
  transition: background-color 0.35s;
}
.mosaic__item:hover::after { background: rgba(43, 92, 180, 0.22); }

@media (max-width: 820px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); aspect-ratio: 4 / 4.2; }
  .mosaic__item:first-child { grid-column: span 2; grid-row: span 1; }
}

/* ==========================================================================
   News cards
   ========================================================================== */
.news-grid {
  display: grid;
  /* min(300px, 100%): داخل صندوقٍ مبطّن على شاشة 320px يبقى للمحتوى
     أقلُّ من 300px — والحدُّ الصلب كان يفرض عمودًا أعرض من وعائه
     فيفيض المستند كلُّه أفقيًّا (قياس tools/mobile.js عند 320). */
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: clamp(1.25rem, 2vw, 2.25rem);
}

/* Three up on wide screens: that puts the card at ~520px, the width the .xd
   draws it (487) and the width its 30px title is set for. */
@media (min-width: 1080px) {
  .news-grid,
  .news-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* The 5px #2B5CB4 hover ring the .xd registers on every card and tile.
   An `outline` is painted with the element's own border, so a positioned child
   (the photo, the dark caption strip) covers the part of the ring that crosses
   it and the frame reads as broken. An overlay pseudo-element paints above all
   of the card's content, so the ring closes all the way round — and because it
   is inset it still costs no layout shift. */
.card,
.tweet,
.vcard { position: relative; }
.card::after,
.tweet::after,
.vcard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border: var(--hover-ring) solid transparent;
  border-radius: inherit;
  pointer-events: none;
  transition: border-color var(--hover-dur) var(--hover-ease);
}
.card:hover::after,
.card:focus-within::after,
.tweet:hover::after,
.tweet:focus-within::after,
.vcard:hover::after,
.vcard:focus-within::after { border-color: var(--yellow); }

/* `Component 3 / 4` in the .xd: 487x553, radius 10, a white -> #F9F9F9 gradient
   behind a 1px #E6E6E6 hairline and a 0/6/6 black-20% shadow. */
.card {
  display: flex;
  flex-direction: column;
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f9 100%);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  height: 100%;
}

.card__media {
  position: relative;
  aspect-ratio: 487 / 342; /* the .xd image box, not 16:10 */
  overflow: hidden;
  background: #ddd;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.card__tag {
  position: absolute;
  top: 1rem;
  inset-inline-start: 1rem;
  padding: 0.35em 1em;
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--yellow);
  color: var(--white);
}

.card__body {
  padding: clamp(1.1rem, 1.6vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

.card__date {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card__title {
  font-size: clamp(1rem, 1.5625vw, 1.875rem); /* 30px in the .xd */
  text-shadow: var(--text-shadow-card);
  line-height: 1.6;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.25s;
}
.card:hover .card__title { color: #000; }

.card__link {
  margin-top: auto;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.25s;
}
.card:hover .card__link { color: var(--yellow-ink); }

.sec-foot { display: flex; justify-content: center; margin-top: clamp(2rem, 3.5vw, 3.5rem); }

/* ==========================================================================
   Stats (من أجلهم نعمل)
   ========================================================================== */
/* XD: light section, four 398x227 cards — white→grey gradient fill inside a
   5px yellow stroke with 10px radius. */
.stats { background: var(--paper); }
.stats__grid {
  display: grid;
  /* minmax(0,·) لا 1fr المجرّدة: أرضية 1fr هي min-content، ومحتوى
     العدّاد (مصدره اللاتيني) يرفعها فوق عمودها على الشاشات الضيّقة
     فيتّسع المسار ويفيض المستندُ كلُّه (قياس tools/mobile.js @320). */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.stat {
  background: linear-gradient(#fff, #f9f9f9);
  border: 5px solid var(--yellow);
  border-radius: 10px;
  aspect-ratio: 398 / 227;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 2.5vw, 2.5rem) 1rem;
  text-align: center;
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
}
.stat:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.stat__num {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat__label { font-size: var(--fs-body-lg); margin-top: 0.35rem; }
/* سطر المرجع داخل البطاقة: الرقم بلا مصدره دعوى، ومعه واقعة */
/* overflow-wrap عامًّا لا في كتلة 374 وحدها: بعد minmax(0,·) صار
   العمود يضيق تحت min-content — فليَلتفّ المصدر بدل أن يبرز. */
.stat__src { margin-top: 0.5rem; font-size: 0.72rem; color: var(--ink-soft); line-height: 1.6; overflow-wrap: anywhere; }


/* minmax(0,·) هنا أيضًا — 1fr المجرّدة أسقطت الرئيسية عند 640
   (تكافؤ تكبير 200٪): عمودان بأرضية min-content أعرض من المنفذ. */
@media (max-width: 900px) { .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .stats__grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Podcast card — component `بودكاست` / `Component 28` in DAHLAN_FINAL.xd,
   rebuilt from the component's own coordinate space. Card is 812x183; every
   number below is that measurement over 812 (horizontal) or over 1920
   (type and vertical rhythm), so the card keeps its proportions at any width.

     Rectangle 1209      0,0     812x183  r10  #FFF→#F9F9F9, 1px #E6E6E6, 0/6/6 @20%
     NoPath - Copy (2) 552,0     260x183  r[0,10,10,0] image, own 1px hairline
     date              234,19    box 170 wide, TheSans 16/26, right-aligned, #000@60%
     calendar icon     413,22    12.4x13.7, #000@60%
     title              93,51    area box 337x56, TheSans 18/25, right-aligned,
                                 #000@80%, text-shadow 0/3/3 @16%
     play  Path 13127   33,120   41.7x41.7 #2B5CB4, shadow 0/20/30 #3E3E3E@16%
     elapsed 26.00      92,148   Roboto 11 #000@80%
     track  Rect 387   129,141   301x5.1  r8 #DBDBDB
     fill   Rect 388   130,141   26.1x5.1 r8 #FF5300
     knob   Ellipse 1  129,130   r14.5 #FFFFFF, shadow 0/20/30 #3E3E3E@30%
            Ellipse 2           r4 #2B5CB4 concentric with it
     total 43.25       439,148   Roboto 11 #000@80%
     speaker Group 9   481,136   one #333333 cone + three waves
   ========================================================================== */
.pod-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto;
  column-gap: clamp(0.75rem, 0.83vw, 16px); /* 812*2 + 16 = 1640, the content column */
  row-gap: clamp(6px, 0.42vw, 8px);         /* (552 - 2x8)/3 = 178.7 ≈ the drawn 183 */
}
.pod-grid .pod { aspect-ratio: auto; height: 100%; min-height: 0; }
@media (max-width: 1080px) { .pod-grid { grid-template-columns: 1fr; } }

/* لوح البودكاست في الرئيسية: الملاحظة خارج الشبكة حتى لا تُحسب بطاقة،
   والبطاقتان الحقيقيتان تبقيان على مقاسهما لا تُمطّان لملء 552px. */
[data-panel="m-podcast"] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
[data-panel="m-podcast"] .news-note { margin-bottom: 0; flex: 0 0 auto; }
[data-panel="m-podcast"] .pod-grid { flex: 0 0 auto; align-content: start; }
[data-panel="m-podcast"] .pod-grid .pod { height: auto; }

.pod {
  position: relative;
  display: grid;
  grid-template-columns: 32.02% minmax(0, 1fr); /* 260 / 812 */
  aspect-ratio: 812 / 183;
  min-height: clamp(140px, 9.53vw, 183px);
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f9 100%);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.pod::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border: var(--hover-ring) solid transparent;
  border-radius: inherit;
  pointer-events: none;
  transition: border-color var(--hover-dur) var(--hover-ease);
}
/* `Component 28`'s hover state moves nothing but the play disc, so the card
   itself only rings while it holds keyboard focus. */
.pod:focus-within::after { border-color: var(--yellow); }

.pod__media {
  position: relative;
  margin: 0;
  background: #ddd;
  border-inline-end: 1px solid var(--hairline); /* the thumbnail's own stroke */
}
.pod__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* The body owns 552 of the 812. Its inline-end (left) inset is the 33.4 the
   transport starts at; the text sits further in, at 122 from the thumbnail. */
.pod__body {
  --pod-row-inset: 8.5%;    /* (552-505)/552 — where the transport ends */
  --pod-text-shift: 15.9%;  /* (122-47)/471.6 — the extra inset the text takes */
  display: grid;
  grid-template-rows: auto auto 1fr;
  padding-block: clamp(0.5rem, 0.99vw, 19px) clamp(0.5rem, 1.09vw, 21px);
  padding-inline: var(--pod-row-inset) 6.05%;
  min-width: 0;
}

/* Both text rows stop 122 from the thumbnail while the transport runs on to
   47, so they are inset by the difference — 75 of the body's 471.6 of content
   width. The title box is the 337 the .xd draws. */
.pod__date {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(4px, 0.42vw, 8px);
  margin-inline-start: var(--pod-text-shift);
  font-size: clamp(0.75rem, 0.83vw, 1rem); /* 16 */
  line-height: 1.625;                      /* 26/16 */
  color: rgba(0, 0, 0, 0.6);
}
.pod__date svg { flex: none; width: clamp(11px, 0.65vw, 12.4px); height: auto; }

.pod__title {
  margin-block-start: clamp(2px, 0.31vw, 6px); /* 51 - (19+26) */
  margin-inline-start: var(--pod-text-shift);
  inline-size: 71.5%;         /* 337 of the body's 471.6 content width */
  font-size: clamp(0.85rem, 0.94vw, 1.125rem); /* 18 */
  font-weight: 400;
  line-height: 1.389;         /* 25/18 */
  color: rgba(0, 0, 0, 0.8);
  text-shadow: var(--text-shadow-card);
  display: -webkit-box;
  -webkit-line-clamp: 2;      /* the design's box is exactly two lines tall */
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pod__title a { color: inherit; }

/* Transport. The disc sits at the card's outer edge and the speaker nearest
   the thumbnail, so in this RTL page the row is laid out in reverse. */
.pod__player {
  align-self: end;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: clamp(5px, 0.63vw, 12px);
}
.pod__play {
  flex: none;
  width: clamp(30px, 2.17vw, 41.7px);
  height: clamp(30px, 2.17vw, 41.7px);
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--white);
  box-shadow: 0 20px 30px rgba(62, 62, 62, 0.16);
  transition: scale var(--hover-dur) var(--hover-ease);
}
/* `Component 29`: the only thing its hover state moves is this disc. */
.pod__play:hover, .pod__play:focus-visible { scale: 1.12; }
.pod__play svg { width: 42%; height: 42%; } /* the 9.4x10.8 triangle in a 41.7 disc */

.pod__time {
  flex: none;
  font-family: var(--font-latin);
  font-size: clamp(0.58rem, 0.57vw, 11px);
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  font-variant-numeric: tabular-nums;
  direction: ltr;
}

/* The .xd puts the elapsed time at the track's left and the total at its
   right, with the #FF5300 fill starting from the left — so the transport reads
   left-to-right even on this RTL page, exactly like every other player. */
.pod__track {
  position: relative;
  direction: ltr;
  flex: 1 1 auto;
  min-width: 40px;
  height: 5px;
  border-radius: 8px;
  background: #DBDBDB;
  cursor: pointer;
  touch-action: none;
}
.pod__progress {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 0%;
  min-width: 5px;
  border-radius: 8px;
  background: #FF5300;
}
.pod__knob {
  position: absolute;
  top: 50%;
  left: 0;
  translate: -50% -50%;
  width: clamp(20px, 1.51vw, 29px);
  height: clamp(20px, 1.51vw, 29px);
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 20px 30px rgba(62, 62, 62, 0.3);
  display: grid;
  place-items: center;
  pointer-events: none;
}
.pod__knob::after {
  content: "";
  width: 27.6%; /* the r4 core inside the r14.5 disc */
  height: 27.6%;
  border-radius: 50%;
  background: var(--yellow);
}
.pod__track:focus-visible { outline: 2px solid var(--yellow); outline-offset: 6px; }

/* `Group 9` — a #333333 speaker cone with three rising waves; wired to mute. */
.pod__vol {
  flex: none;
  width: clamp(18px, 1.25vw, 24px);
  height: clamp(18px, 1.25vw, 24px);
  display: grid;
  place-items: center;
  padding: 0;
  color: #333333;
  transition: color var(--hover-dur) var(--hover-ease);
}
.pod__vol svg { width: 100%; height: 100%; }
.pod__vol:hover { color: var(--yellow); }
.pod.is-muted .pod__vol { opacity: 0.45; }

/* Below the two-column width the card stops being 812 wide, so it stacks and
   the text insets collapse — otherwise the title would be squeezed into a
   sliver by a 22% gutter. */
@media (max-width: 780px) {
  .pod {
    grid-template-columns: 1fr;
    aspect-ratio: auto;
  }
  .pod__media { aspect-ratio: 16 / 9; border-inline-end: 0; border-block-end: 1px solid var(--hairline); }
  .pod__body { --pod-row-inset: 0%; --pod-text-shift: 0%; padding-inline: clamp(1rem, 4vw, 1.5rem); }
  .pod__title { inline-size: auto; }
}

/* ==========================================================================
   Tweets
   ========================================================================== */
.tweets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
  gap: clamp(1.25rem, 2vw, 2rem);
}

/* `Component 30 / 31`: a shadowed card with no border, and a 5px #2B5CB4
   stroke on hover — that is the yellow-framed tweet in the reference capture. */
.tweet {
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f9 100%);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: clamp(1.25rem, 1.8vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tweet__head { display: flex; align-items: center; gap: 0.75rem; }
.tweet__avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
/* Type sizes straight out of the .xd: name 27, handle 15, body 18, meta 14. */
.tweet__name { font-weight: 700; font-size: clamp(1rem, 1.41vw, 1.6875rem); line-height: 1.3; }
.tweet__handle { font-size: clamp(0.8rem, 0.78vw, 0.9375rem); color: var(--ink-soft); }
.tweet__bird { margin-inline-start: auto; color: #1D9BF0; }
.tweet__text { font-size: clamp(0.95rem, 0.94vw, 1.125rem); line-height: 1.8; }
.tweet__text a { color: #1D9BF0; }
.tweet__meta {
  font-size: clamp(0.7rem, 0.73vw, 0.875rem);
  color: var(--ink-soft);
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  gap: 0.5rem 1.25rem;
  align-items: center;
  flex-wrap: wrap;
}
/* The artboard closes each card with the timestamp, the like count and a link
   out to the timeline — so the row needs no button of its own underneath. */
.tweet__meta > :last-child { margin-inline-start: auto; }
.tweet__meta a { color: inherit; text-decoration: none; }
.tweet__meta a:hover { color: #1d9bf0; }
.tweet__likes { color: #f4506a; white-space: nowrap; }

/* Two 674px cards per view, the row running 258 -> 1662 in the artboard. */
#tweets .carousel { padding-inline: clamp(0px, 6.15vw, 118px); }
#tweets .carousel__track { --card-gap: clamp(1rem, 2.92vw, 56px); }

/* ==========================================================================
   About page — intro, biography board, journey
   All coordinates below are read off the ABOUT artboard (1920 wide, content
   from x=140 to x=1780).
   ========================================================================== */

/* --- Intro: the cut-out portrait inside its yellow frame -------------------
     frame    `Rectangle 1207`  (140, 399)  890x678, 5px #2B5CB4, radius 10
     cut-out  `123`             (143, 270)  814x802 — rises into the hero
     shadow   `123_Black`       drawn 60px to its right at 10% opacity
     copy     right-aligned, 660 wide, its heading sitting at y=650          */
.intro {
  position: relative;
  z-index: 5;
  --intro-rise: clamp(38px, 5.26vw, 101px); /* frame top above the hero foot */
  margin-top: calc(var(--intro-rise) * -1);
  padding-bottom: clamp(2.5rem, 5vw, 5.5rem);
}
.intro__grid {
  display: grid;
  grid-template-columns: 40.24% 1fr; /* 660 / 890 of the 1640 content width */
  column-gap: 5.49%; /* 90px */
}
.intro__body {
  grid-column: 1;
  grid-row: 1;
  padding-top: clamp(1.5rem, 10.47vw, 201px);
}
.intro__frame {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  aspect-ratio: 890 / 678;
  border: 5px solid var(--yellow);
  border-radius: 10px;
}
/* the silhouette copy that the artboard sets behind the portrait */
.intro__frame::before {
  content: "";
  position: absolute;
  left: 6.74%;
  bottom: 0;
  width: 91.46%; /* 814 of 890 */
  aspect-ratio: 814 / 802;
  /* webp لا png: هذا ظلٌّ أسود (brightness 0 بعتامة 10٪) لا يحتاج
     تفاصيل — فيُشارك <picture> فوقه **مرشَّحَها الأدنى** (960) الذي
     تجلبه على كل الكثافات الدنيا، فيبقى الظلُّ صفرَ بايتٍ إضافيًّا.
     كان يشارك الأصلَ الكامل أيامَ كانت الصورةُ بلا srcset؛ فلمّا
     صارت تختار 960 بقي هو على 1786 فانفصم الزوجُ وعاد التنزيلُ
     المزدوج (+439KB) — أمسكه ميزانُ weight وشهد كروم بجلبَي
     الملفّين معًا. */
  background: url("/assets/img/dahlan-cutout-hd-960.webp") no-repeat bottom center / contain;
  filter: brightness(0);
  opacity: 0.1;
}
.intro__cutout {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 91.46%;
  height: auto;
}

/* --- Biography board ------------------------------------------------------
   Four photo/card pairs, 820x555 each, flush against one another; the whole
   2x4 board is one rounded rectangle, so only its outer corners are cut.   */
.bio-section { padding-top: 0; }
.bio-section .sec-head { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }

.bio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
}

.bio__media { aspect-ratio: 820 / 555; }
.bio__media img { width: 100%; height: 100%; object-fit: cover; }
/* Crop windows taken from the artboard's image patterns. */
.bio__media:nth-of-type(1) img { object-position: 50% 25%; } /* about-1 */
.bio__media:nth-of-type(2) img { object-position: 62% 50%; } /* about-2 */
.bio__media:nth-of-type(3) img { object-position: 50% 50%; } /* about-3 */
.bio__media:nth-of-type(4) img { object-position: 50% 56%; } /* about-4 */

.bio__card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f9 100%);
  padding: clamp(1.5rem, 4.43vw, 85px); /* the artboard insets the copy by 85 */
}

.bio__kicker {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.bio__title,
.tl-item__title { font-size: var(--fs-title); line-height: 1.2; }
.bio__title::after,
.tl-item__title::after { /* the 138x6 yellow bar under every heading */
  content: "";
  display: block;
  width: clamp(84px, 7.19vw, 138px);
  height: 6px;
  background: var(--yellow);
  margin-block: clamp(0.5rem, 0.94vw, 18px) clamp(0.9rem, 1.72vw, 33px);
}
.bio__text { font-size: var(--fs-body); line-height: 1.6; color: var(--ink); }
.bio__text p + p { margin-top: 1em; }

@media (max-width: 900px) {
  .intro { margin-top: 0; }
  .intro__grid { grid-template-columns: 1fr; row-gap: 1.5rem; }
  .intro__frame { grid-column: 1; grid-row: 1; }
  .intro__body { grid-column: 1; grid-row: 2; padding-top: 0; }
  /* Stacked, each photo stays with the card it belongs to (the board's
     checkerboard order puts two cards back to back otherwise). */
  .bio { grid-template-columns: 1fr; }
  .bio > :nth-child(1) { order: 1; }
  .bio > :nth-child(2) { order: 2; }
  .bio > :nth-child(3) { order: 4; }
  .bio > :nth-child(4) { order: 3; }
  .bio > :nth-child(5) { order: 5; }
  .bio > :nth-child(6) { order: 6; }
  .bio > :nth-child(7) { order: 8; }
  .bio > :nth-child(8) { order: 7; }
}

/* --- Journey «بداية الطريق» -----------------------------------------------
     rail   `Path 15896` — a 4px #2B5CB4 line down the middle of the content,
            elbowing out to the «من هنا» pill at the top and to the closing
            badge at the foot
     cards  700 wide, flush to the rail, alternating sides, stacked with no
            vertical gaps; the year stands 200px tall on the opposite side  */
.journey { background: var(--paper); }

.journey__rail {
  position: relative;
  --rail-w: 4px;
  --rail-elbow: 8.66%; /* 142px of the 1640 content width */
  --end-h: clamp(88px, 6.04vw, 116px);
}
.journey__rail::before { /* the vertical line */
  content: "";
  position: absolute;
  left: 50%;
  margin-left: calc(var(--rail-w) / -2);
  width: var(--rail-w);
  top: calc(var(--fs-title) * 0.625); /* the heading's centre line */
  bottom: calc(var(--end-h) / 2); /* the badge's centre line */
  background: var(--yellow);
}
.journey__rail::after { /* the elbow that hooks the closing badge */
  content: "";
  position: absolute;
  left: calc(50% - 11.52%);
  width: calc(11.52% + var(--rail-w) / 2); /* 189px */
  bottom: calc(var(--end-h) / 2 - var(--rail-w) / 2);
  height: 20px;
  border-bottom: var(--rail-w) solid var(--yellow);
  border-right: var(--rail-w) solid var(--yellow);
  border-bottom-right-radius: 10px;
}

.journey__head { position: relative; }
.journey__head::after { /* the elbow that hooks the «من هنا» pill */
  content: "";
  position: absolute;
  top: calc(var(--fs-title) * 0.625 - var(--rail-w) / 2);
  left: calc(50% - var(--rail-w) / 2);
  width: var(--rail-elbow);
  height: 20px;
  border-top: var(--rail-w) solid var(--yellow);
  border-left: var(--rail-w) solid var(--yellow);
  border-top-left-radius: 10px;
}
.journey__start {
  position: absolute;
  top: calc(var(--fs-title) * 0.625);
  left: calc(50% + var(--rail-elbow));
  translate: 0 -50%;
  display: grid;
  place-items: center;
  min-width: clamp(120px, 10.36vw, 199px);
  min-height: clamp(40px, 3.02vw, 58px);
  padding-inline: 1.25rem;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--white);
  font-size: clamp(0.95rem, 1.3vw, 1.5625rem); /* 25px */
  font-weight: 700;
}

.timeline { padding-top: clamp(1rem, 2.9vw, 56px); }

.tl-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.tl-item__card {
  width: 85.37%; /* 700 of the 820 half */
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f9 100%);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
  padding: clamp(1.5rem, 4.43vw, 85px);
}
.tl-item__text { font-size: var(--fs-body); line-height: 1.6; }
.tl-item__text p + p { margin-top: 1em; }

/* odd items keep their card on the far side of the rail, even ones mirror it */
.tl-item:nth-child(odd) .tl-item__card {
  grid-column: 2;
  margin-inline-end: auto;
  border-radius: 10px 0 0 10px;
}
.tl-item:nth-child(even) .tl-item__card {
  grid-column: 1;
  margin-inline-start: auto;
  border-radius: 0 10px 10px 0;
}
.tl-item:nth-child(odd) .tl-item__year { grid-column: 1; }
.tl-item:nth-child(even) .tl-item__year { grid-column: 2; }

.tl-item__year {
  grid-row: 1;
  position: relative;
  justify-self: center;
  font-size: var(--fs-year);
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
}
.tl-item__year::before { /* the 300px 5% ghost standing behind it */
  content: attr(data-year);
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -72% -50%;
  font-size: 1.5em;
  color: rgba(0, 0, 0, 0.05);
  pointer-events: none;
}

.journey__end { /* `Rectangle 1212` — 291x116, radius 33, white 25px copy */
  position: relative;
  width: max-content;
  max-width: 100%;
  min-height: var(--end-h);
  margin-top: clamp(1rem, 2.5vw, 48px);
  margin-inline-start: calc(50% + 11.52%);
  display: grid;
  align-content: center;
  padding-block: 0.5rem;
  padding-inline: clamp(1rem, 3.72vw, 61px) clamp(1rem, 2.93vw, 48px);
  border-radius: 33px;
  background: var(--yellow);
  color: var(--white);
  font-size: clamp(0.95rem, 1.3vw, 1.5625rem);
  font-weight: 500;
  line-height: 1.2;
}

@media (max-width: 900px) {
  .journey__rail::before,
  .journey__rail::after,
  .journey__head::after { display: none; }
  .journey__start {
    position: static;
    translate: none;
    width: max-content;
    margin-top: 1rem;
  }
  .tl-item { grid-template-columns: 1fr; }
  .tl-item + .tl-item { margin-top: 1.5rem; }
  .tl-item:nth-child(odd) .tl-item__card,
  .tl-item:nth-child(even) .tl-item__card {
    grid-column: 1;
    width: 100%;
    margin-inline: 0;
    border-radius: 10px;
  }
  .tl-item:nth-child(odd) .tl-item__year,
  .tl-item:nth-child(even) .tl-item__year {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    font-size: clamp(2.5rem, 12vw, 5rem);
  }
  .tl-item__year::before { display: none; }
  .journey__end { margin-inline-start: 0; }
}

/* ==========================================================================
   Forms (تواصل معنا / شاركنا رأيك)
   ========================================================================== */
/* The two artboards draw the same control: a 58px pill, white, hairline
   #CBCACA border, with the label sitting inside it as the placeholder.
     contact  fields 398x58 in a 2x2 grid (16px gutters), textarea 812x240
     opinion  select 812x58, textarea 812x240
   The submit is a 199x58 yellow pill on the form's inline-start edge. */
/* The whole contact artboard is 1253px tall: the hero ends at 500, the intro
   line sits at 540 and the submit closes at 1054, 48px above the footer rule. */
.contact-section {
  padding-block: clamp(2rem, 2.08vw, 40px) clamp(2rem, 2.5vw, 48px);
}

.contact__grid {
  display: grid;
  /* form 812 + gap 51 + card 500 = 1363 of the 1640 content width, centred */
  grid-template-columns: minmax(0, 812fr) minmax(0, 500fr);
  column-gap: 3.11%;
  margin-inline: 8.48%;
  align-items: center;
}
@media (max-width: 900px) {
  .contact__grid { grid-template-columns: 1fr; row-gap: 2rem; margin-inline: 0; }
}

/* Contact card — `Rectangle 1224`, 500x213, radius 10, yellow glyphs at the
   inline start of each row. */
/* The artboard's card is 500x213 at (279,675) and runs on a strict 33px
   baseline grid — address on lines 697/730, then 789 / 822 / 855, with a 33px
   skirt at the base. The only extra space is the 26px under the address. */
.info-card {
  --info-line: clamp(24px, 1.72vw, 33px);
  background: linear-gradient(180deg, #ffffff 0%, #f9f9f9 100%);
  border-radius: 10px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
  padding: clamp(0.6rem, 0.57vw, 11px) clamp(1.25rem, 2.92vw, 56px);
  color: var(--ink);
}
.info-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(0.6rem, 0.94vw, 18px);
}
.info-row + .info-row + .info-row { margin-top: 0; }
.info-row + .info-row { margin-top: clamp(0.75rem, 1.35vw, 26px); }
.info-row__icon {
  color: var(--yellow);
  display: grid;
  place-items: center;
  height: var(--info-line);
}
.info-row__value { font-size: var(--fs-body); line-height: var(--info-line); }
.info-row:first-child .info-row__value { font-size: var(--fs-sm); } /* 18px address */
.info-row__value a:hover { color: var(--yellow-ink); }

.form__note {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  text-align: center;
  margin-bottom: clamp(1rem, 1.61vw, 31px);
}

.form__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.6rem, 0.83vw, 16px);
}
.field--full { grid-column: 1 / -1; }
@media (max-width: 620px) { .form__grid { grid-template-columns: 1fr; } }

/* The artboard puts the pills on a 74px pitch (58 + 16), so the error slot must
   not add height — it is floated under its own control instead. */
.field { display: grid; position: relative; }
/* the artboard has no separate labels — they are kept for assistive tech */
.field__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.field__control {
  width: 100%;
  height: clamp(48px, 3.02vw, 58px);
  padding-inline: clamp(1.25rem, 2.92vw, 56px);
  font-size: var(--fs-xs);
  color: var(--ink);
  background: var(--white);
  border: 1px solid #CBCACA;
  border-radius: 999px;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.field__control::placeholder { color: var(--ink-soft); opacity: 1; }
.field__control:focus {
  outline: none;
  border-color: var(--yellow);
  box-shadow: 0 0 0 4px rgba(43, 92, 180, 0.22);
}
select.field__control {
  appearance: none;
  /* the artboard puts a #CBCACA chevron at the far inline end */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23CBCACA' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left clamp(1.25rem, 1.77vw, 34px) center;
}
textarea.field__control {
  height: auto;
  min-height: clamp(160px, 12.5vw, 240px);
  padding-block: clamp(0.9rem, 1.15vw, 22px);
  border-radius: clamp(20px, 1.72vw, 33px);
  line-height: 1.7;
  resize: vertical;
}

.field__error {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  margin-top: 2px;
  font-size: 0.75rem;
  line-height: 1.15;
  color: #C62828;
  padding-inline: 1.5rem;
  pointer-events: none;
}
.field.is-invalid .field__control { border-color: #C62828; }

.form [type="submit"], .form__actions [type="submit"] { font-size: var(--fs-sm); }
.form__actions {
  margin-top: clamp(0.75rem, 1.09vw, 21px);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
/* the button sits at the inline start of the form, as in both artboards */
.form__actions .btn {
  min-width: clamp(140px, 10.36vw, 199px);
  height: clamp(48px, 3.02vw, 58px);
  border-radius: 999px;
  justify-content: center;
}

.form__status {
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 0.6rem 1rem;
  border-radius: 2px;
  display: none;
}
.form__status.is-ok { display: block; background: #E8F5E9; color: #1B5E20; }
.form__status.is-err { display: block; background: #FFEBEE; color: #B71C1C; }

/* Opinion page — one dark board carrying the heading and the form, as the
   `ABOUT – 2` artboard draws it: title, strapline and the 138x6 rule share
   the form's inline-start edge, and the 812-wide form is centred on it. */
.opinion {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--black);
  color: var(--white);
  isolation: isolate;
  overflow: hidden;
  padding-block: calc(var(--header-h) + clamp(2rem, 5vw, 6rem)) clamp(3rem, 6vw, 7rem);
}
.opinion__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
}
.opinion::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.72);
}
.opinion__form { max-width: 812px; margin-inline: auto; }
.opinion__head { margin-bottom: clamp(2rem, 4.68vw, 90px); }
.opinion__title { font-size: var(--fs-display); }
.opinion__sub {
  font-size: clamp(1.05rem, 1.56vw, 1.875rem); /* 30px */
  font-weight: 400;
  margin-top: 0.25rem;
}
.opinion__rule {
  display: block;
  width: clamp(84px, 7.19vw, 138px);
  height: 6px;
  background: var(--yellow);
  margin-top: clamp(0.75rem, 1.4vw, 27px);
}
.opinion .form__note { color: rgba(255, 255, 255, 0.75); }
.opinion .field__control { border-color: transparent; }

/* ==========================================================================
   Gallery / video library
   ========================================================================== */
/* --------------------------------------------------------------------------
   Photo-album tile — `Component 14` in DAHLAN_FINAL.xd. This is not the plain
   framed thumbnail the site used to draw: the tile carries **no caption at
   rest**. Only the photograph shows, with a photo-stack glyph sitting on it at
   20% black. Everything else is the hover state:

     7XWkh                 0,0    896x513 r10, image, 1px #E6E6E6, 0/6/6 @20%
     image_750x_…          0,0    896x513, gradient transparent → #000000,
                                  opacity 0 → 1 and stroke 1px #E6E6E6 → 5px #2B5CB4
     Group 3193                   opacity 0 → 1  (the whole caption)
       title              78,300  TheSans 30/40, right-aligned, #FFFFFF,
                                  text-shadow 0/3/3 @16%
       date              661,269  TheSans 16/26 #FFFFFF + calendar icon at 840,272
     Icon awesome-images 784,32   40.3x31.3, #000000 at 20% → #2B5CB4 at 100%,
                                  and it grows (40.3 → 49.1 wide) as it shifts

   The album grid mirrors the artboard row too: 367.5-wide tiles beside one
   896-wide tile, i.e. a four-column bed where the feature takes 2x2.
   -------------------------------------------------------------------------- */
.album-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 0.63vw, 12px);
}
.album-grid .shot--feature { grid-column: span 2; grid-row: span 2; }
@media (max-width: 900px) {
  .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .album-grid { grid-template-columns: 1fr; }
  .album-grid .shot--feature { grid-column: auto; grid-row: auto; }
}

.shot {
  position: relative;
  display: block;
  margin: 0;
  aspect-ratio: 896 / 513;
  overflow: hidden;
  background: #eee;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  cursor: zoom-in;
  isolation: isolate;
}
.album-grid .shot { height: 100%; aspect-ratio: auto; }
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* the transparent → black wash that carries the caption */
.shot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, #000000 0%, rgba(0, 0, 0, 0) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--hover-dur) var(--hover-ease);
}
/* the 5px #2B5CB4 stroke that replaces the hairline */
.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border: var(--hover-ring) solid transparent;
  border-radius: inherit;
  pointer-events: none;
  transition: border-color var(--hover-dur) var(--hover-ease);
}
.shot:hover::before,
.shot:focus-visible::before { opacity: 1; }
.shot:hover::after,
.shot:focus-visible::after { border-color: var(--yellow); }

.shot__icon {
  position: absolute;
  top: 6.2%;                 /* 31.8 / 513 */
  inset-inline-start: 8%;    /* 896 - (784.1 + 40.3) */
  z-index: 2;
  width: clamp(22px, 2.1vw, 40px); /* 40.3 wide in the artboard */
  height: auto;
  color: #000000;
  opacity: 0.2;
  transition: color var(--hover-dur) var(--hover-ease),
              opacity var(--hover-dur) var(--hover-ease),
              scale var(--hover-dur) var(--hover-ease);
}
.shot:hover .shot__icon,
.shot:focus-visible .shot__icon {
  color: var(--yellow);
  opacity: 1;
  scale: 1.22; /* 49.1 / 40.3 */
}

/* The caption is not pinned to the floor in the .xd — it sits a third of the
   way up, inside the dark part of the wash. */
.shot__cap {
  position: absolute;
  z-index: 2;
  top: 52.4%;                 /* 269 / 513 */
  inset-inline: 4.9% 8.7%;    /* 44 and 78 of 896 */
  color: var(--white);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--hover-dur) var(--hover-ease);
}
.shot:hover .shot__cap,
.shot:focus-visible .shot__cap { opacity: 1; }
.shot__date {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  font-size: clamp(0.7rem, 0.83vw, 1rem);   /* 16 */
  line-height: 1.625;                        /* 26/16 */
}
.shot__date svg { flex: none; }
.shot__title {
  font-size: clamp(0.95rem, 1.5625vw, 1.875rem); /* 30 */
  font-weight: 400;
  line-height: 1.333;                             /* 40/30 */
  text-shadow: var(--text-shadow-card);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* A tile only two columns wide cannot hold 30px type over two lines. */
.album-grid .shot:not(.shot--feature) .shot__title { font-size: clamp(0.8rem, 0.94vw, 1.125rem); }
.album-grid .shot:not(.shot--feature) .shot__cap { top: 46%; }

/* «من الذاكرة» gets the same tile at its drawn 896x513 proportion, three
   across, so the archive reads as a row of plates rather than a mosaic. */
.album-grid--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.album-grid--row .shot { aspect-ratio: auto; height: 100%; }
.album-grid--row .shot__title { font-size: clamp(0.8rem, 1.04vw, 1.25rem); }
@media (max-width: 900px) { .album-grid--row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .album-grid--row { grid-template-columns: 1fr; } }

/* «مشاريع وإنجازات» uses the plain 398x275 tile on an even four-up bed — the
   same part as the video library, without the 840x552 feature, so the two
   sections do not read as the same screen twice. */
.media-grid--even {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.media-grid--even .vcard { aspect-ratio: auto; height: 100%; }
@media (max-width: 1080px) { .media-grid--even { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .media-grid--even { grid-template-columns: 1fr; } }

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: clamp(1.25rem, 2vw, 2rem);
}
.video-card {
  background: var(--black);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--hover-dur) var(--hover-ease);
}
.video-card video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; display: block; }
.video-card__body { padding: 1.25rem 1.5rem; color: var(--white); }
.video-card__title { font-size: clamp(1rem, 1.2vw, 1.3rem); }
.video-card__meta { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.6); margin-top: 0.35rem; }

/* المقطع الذي يعمل الآن يُعلن عن نفسه بحافة صفراء بدل أن يضيع بين إخوته */
.video-card.is-playing { box-shadow: 0 0 0 3px var(--yellow), var(--shadow-md); }

.video-card__frame { position: relative; }
/* المدّة تُقرأ من الملف عند وصول بياناته، ولا تُكتب في الصفحة يدويًا */
.video-card__dur {
  position: absolute;
  /* أعلى الإطار لا أسفله: شريط تحكّم المتصفّح يسكن الأسفل */
  inset-block-start: 0.6rem;
  inset-inline-end: 0.6rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--white);
  background: var(--glass-scrim, rgba(0, 0, 0, 0.55));
  backdrop-filter: blur(var(--glass-blur, 30px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 30px));
  border: 1px solid var(--glass-edge, rgba(255, 255, 255, 0.16));
  border-radius: 999px;
  pointer-events: none;
}
.video-card.is-playing .video-card__dur { opacity: 0.35; }

.video-card__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.9rem;
}
.vtool {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.vtool:hover, .vtool:focus-visible {
  color: var(--white);
  background: var(--yellow);
  border-color: var(--yellow);
}
.vtool svg { flex: none; }
@media (max-width: 480px) { .vtool__t { display: none; } .vtool { padding: 0.45rem; } }

/* شريط أدوات الأخبار: تصفية وترتيب فوق ما وصل من الخادم */
.mtool {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: clamp(1.5rem, 2.5vw, 2.5rem);
  padding: 0.85rem;
  background: var(--paper-alt);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
}
.mtool__search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 15rem;
  min-inline-size: 0;
  padding: 0 0.75rem;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 999px;
}
.mtool__input {
  flex: 1 1 auto;
  min-inline-size: 0;
  padding: 0.6rem 0;
  font: inherit;
  font-size: var(--fs-xs);
  color: var(--ink);
  background: none;
  border: 0;
}
.mtool__input:focus { outline: none; }
.mtool__search:focus-within { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(43, 92, 180, 0.28); }
.mtool__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mchip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.mchip:hover { border-color: var(--yellow); }
.mchip.is-on { color: var(--white); background: var(--yellow); border-color: var(--yellow); }
.mchip__n { font-size: 0.72em; opacity: 0.6; font-variant-numeric: tabular-nums; }
.mtool__select {
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: var(--fs-xs);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 999px;
}
.mtool__reset {
  padding: 0.45rem 0.85rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: underline;
  cursor: pointer;
}
.mtool__reset:hover { color: var(--black); }
.mtool__count {
  margin-inline-start: auto;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.mtool__more { display: flex; justify-content: center; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 700px) {
  .mtool__count { margin-inline-start: 0; }
  .mtool__tags { inline-size: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.2rem; }
  .mchip { flex: none; }
}

/* Tabs */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(2rem, 3vw, 3rem);
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}
.tab {
  padding: 0.85rem 1.75rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-soft);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 0.25s, border-color 0.25s;
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--black); border-bottom-color: var(--yellow); }

/* A tab panel is focusable so keyboard users land in it; the ring on the panel
   itself would be noise, so only the roving tab stop shows one. */
.tab-panel:focus { outline: none; }

/* `/search?q=…` forwards here, so the results need a heading and an empty state. */
.search-note {
  margin-bottom: clamp(1.25rem, 2vw, 2rem);
  font-size: var(--fs-body-lg);
  font-weight: 700;
  color: var(--black);
}
/* تنبيه التواريخ فوق شبكة الأخبار: شريطٌ هادئ بحافة صفراء. ليس
   تحذيرًا أحمر — لا خطأ في المادة، إنما نقصٌ في بيانٍ عنها. */
.news-note {
  margin: 0 0 clamp(1.25rem, 2vw, 2rem);
  padding: 0.7rem 1rem;
  border-inline-start: 4px solid var(--yellow);
  background: var(--paper-tint);
  border-radius: 6px;
  font-size: var(--fs-body-sm);
  line-height: 1.85;
  color: var(--ink-soft);
}
.news-note a { color: var(--yellow-ink); }
/* قوائم نتائج البحث المخدوم: المواقف وصفحات الموقع */
.search-hits {
  list-style: none;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  padding: 0;
}
.search-hits li {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  flex-wrap: wrap;
}
.search-hits a { font-weight: 700; color: var(--yellow-ink); text-decoration: none; }
.search-hits a:hover { text-decoration: underline; }
.search-hits span { color: var(--ink-soft); font-size: var(--fs-sm); }

.search-empty {
  grid-column: 1 / -1;
  padding: clamp(2rem, 4vw, 3.5rem);
  text-align: center;
  color: var(--ink-soft);
  background: var(--paper-alt);
  border-radius: var(--radius);
}

/* Lightbox */
/* The `Vedio` artboard: a 70% black wash, the clip in a 1406x790 card with a
   10px radius and a 5px #2B5CB4 border, and a 60px yellow close disc riding
   the card's top corner. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  --lb-pad-y: clamp(1rem, 7.55vw, 145px); /* the card sits 145/262 off the edges */
  --lb-pad-x: clamp(1rem, 13.65vw, 262px);
  --lb-w: min(1406px, calc(100vw - 2 * var(--lb-pad-x)));
  --lb-h: calc(100svh - 2 * var(--lb-pad-y));
  padding: var(--lb-pad-y) var(--lb-pad-x);
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  /* الإخفاء وحده مُمهل والإظهار فوري: كانت visibility تنتقل بمهلة
     0.3s فلحظةَ فتح العارض يستدعي main.js‏ focus() على زرّ الإغلاق
     والقيمة المحسوبة ما زالت hidden — فيفشل بصمت ويبقى التركيز
     على الصورة الفاتحة، ويطوف Tab الصفحةَ خلف النافذة بدل أن
     يُحبس داخلها (أمسكه npm run keys). */
  transition: opacity 0.3s, visibility 0s 0.3s;
}
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity 0.3s, visibility 0s; }
.lightbox__frame {
  position: relative;
  max-width: min(1406px, 100%);
  max-height: 100%;
}
.lightbox img,
.lightbox__video {
  display: block;
  background: #000;
  border: 5px solid var(--yellow);
  border-radius: 10px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
/* the artboard sizes the clip 1406x790; stills keep their own proportions */
.lightbox__video {
  width: var(--lb-w);
  max-height: var(--lb-h);
  aspect-ratio: 1406 / 790;
  object-fit: cover;
}
.lightbox img { max-width: var(--lb-w); max-height: var(--lb-h); width: auto; height: auto; }
.lightbox__close {
  position: absolute;
  top: 0;
  right: 0; /* the disc rides the card's top-right corner in the artboard */
  translate: 40% -50%;
  width: clamp(44px, 3.13vw, 60px);
  height: clamp(44px, 3.13vw, 60px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--white);
  font-size: clamp(1.5rem, 1.6vw, 2rem);
  line-height: 1;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  transition: background-color 0.25s, color 0.25s;
}
.lightbox__close:hover { background: var(--black); color: var(--accent-on-dark); }

/* ==========================================================================
   Footer
   ========================================================================== */
/* Slim footer from the reference: a yellow rule, then logo / copyright /
   socials on a single row. */
/* `.footer` further down sets its own background and padding, so the slim
   variant is written at a higher specificity to keep the artboard's white
   band instead of the dark-page footer's grey one. */
.footer.footer--slim {
  background: var(--paper);
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}
/* The XD closes the page with a hairline yellow divider inside the content
   width (1640x1), not a full-bleed border. */
.footer--slim .container { border-top: 1px solid var(--yellow); padding-top: clamp(1.25rem, 2.5vw, 2rem); }
.footer--slim .footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.footer--slim .footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
.footer--slim .footer__logo { height: clamp(44px, 8vw, 58px); width: auto; margin: 0; }
/* `Mohammed Dahlan` sits under the mark in the artboard, set to the width of
   the logo above it. */
.footer__wordmark {
  font-family: var(--font-latin);
  font-size: clamp(0.72rem, 1.4vw, 0.82rem);
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: var(--yellow-ink);
  white-space: nowrap;
}
.footer--slim .footer__copy { font-size: var(--fs-xs); color: var(--ink-soft); text-align: center; }
/* The artboard runs the marks left-to-right (twitter first), so the row keeps
   its own direction inside the RTL page. */
.footer--slim .socials { margin: 0; gap: 0.4rem; direction: ltr; }
.footer--slim .social {
  width: 30px;
  height: 30px;
  background: none;
  color: var(--ink-soft);
}
.footer--slim .social:hover { background: var(--yellow); color: var(--white); transform: none; }

@media (max-width: 700px) {
  :root { --header-h: 72px; --gutter: 1.1rem; }
  .header.is-stuck { height: 64px; }
  .footer--slim { padding-block: 1.6rem 1.35rem; }
  .footer--slim .footer__row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
  }
  .footer--slim .footer__copy { max-width: 36ch; line-height: 1.75; }
  .footer--slim .footer__logo { height: 52px; }
  .footer__wordmark { font-size: 0.8rem; letter-spacing: 0.18em; text-indent: 0.18em; }
  .footer__links { gap: 0.15rem 1.1rem; }
  .hero__inner {
    padding-block: calc(var(--header-h) + 1.4rem) 4.5rem;
    padding-inline-start: 0;
    text-align: center;
  }
  .hero__rule { margin-inline: auto; }
  .hero__quote { max-width: none; min-height: 0; margin-inline: auto; }
  .hero__actions { justify-content: center; margin-top: 1.75rem; }
  .hero__actions .btn { flex: 1 1 100%; min-width: 0; max-width: 22rem; }
  .page-hero { min-height: 220px; }
  .page-hero__inner { padding-block: calc(var(--header-h) + 1.2rem) 1.6rem; }
  .media-tab { padding: 0.5em 1.15em; }
  .section { padding-block: clamp(2.4rem, 8vw, 3.5rem); }
  .to-top { inset-block-end: 1rem; inset-inline-start: 1rem; width: 44px; height: 44px; }
}

.footer { background: var(--paper-alt); padding-block: clamp(3rem, 5vw, 5rem) 0; }

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

.footer__logo { height: 62px; width: auto; margin-bottom: 1rem; }
.footer__about { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.9; max-width: 40ch; }

.footer__title {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 1.1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--yellow);
  display: inline-block;
}
.footer__list { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.footer__list a {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  transition: color 0.2s, padding-inline-start 0.2s;
}
.footer__list a:hover { color: var(--black); padding-inline-start: 6px; }

.socials { display: flex; gap: 0.6rem; margin-top: 1.25rem; }
.social {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  transition: background-color 0.25s, color 0.25s, transform 0.25s;
}
.social:hover { background: var(--yellow); color: var(--white); transform: translateY(-3px); }

.footer__bar {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-block: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}
.footer__bar .lat { font-size: 0.7rem; letter-spacing: 0.35em; text-transform: uppercase; }

/* Back to top */
.to-top {
  position: fixed;
  inset-block-end: 1.75rem;
  inset-inline-start: 1.75rem;
  z-index: 90;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--white);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background-color 0.25s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--yellow); color: var(--white); }

/* ==========================================================================
   Intro splash — the `Artboard – 1 → 2` pair: the mark fades up from black,
   567px wide with the tracked wordmark under it. No footage behind it.
   ========================================================================== */
.splash {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: var(--black);
  transition: opacity 0.8s ease, visibility 0.8s;
}
.splash.is-done { opacity: 0; visibility: hidden; }
.splash__brand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.5rem, 1.5vw, 1.75rem);
  animation: splash-in 1.4s var(--ease) both;
}
.splash__logo { width: min(567px, 62vw); }
.splash__wordmark {
  font-family: var(--font-latin);
  font-size: clamp(0.65rem, 1.25vw, 1.5rem); /* 24px on the artboard */
  letter-spacing: 0.829em;
  text-indent: 0.829em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}
@keyframes splash-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
.splash__skip {
  position: absolute;
  bottom: 2.5rem;
  inset-inline-start: 50%;
  translate: 50% 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--fs-xs);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 0.6rem 1.75rem;
  border-radius: 999px;
  transition: background-color 0.25s, color 0.25s;
}
.splash__skip:hover { background: var(--yellow); color: var(--white); border-color: var(--yellow); }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal:focus-within { opacity: 1; transform: none; }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }
.reveal[data-delay="4"] { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* Utilities */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.no-scroll { overflow: hidden; }

/* ==========================================================================
   صفحة الخبر — /news.html?id=N
   ==========================================================================
   لا يوجد لوح لصفحة الخبر في DAHLAN_FINAL.xd، فهي مبنيّة من مفردات اللوحات
   نفسها: ترويسة `page-hero` الزجاجية ذاتها من لوح ABOUT، وبطاقة بيضاء
   بحوافّ 10px وظلّ 0/6/6 عند 20% مثل كل بطاقات الموقع، والأصفر #2B5CB4
   للفواصل. العمودان 1100 + 460 داخل عمود المحتوى 1640 كما في شبكة اللوح.
   ========================================================================== */
.page-hero--article .page-hero__title {
  font-size: clamp(1.5rem, 2.6vw, 3.125rem); /* أطول من عنوان الصفحة العادي */
  line-height: 1.3;
  max-inline-size: 24ch;
}
.article__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.85);
}

.article__grid {
  display: grid;
  grid-template-columns: minmax(0, 1100fr) minmax(0, 460fr);
  gap: clamp(1.5rem, 2.08vw, 40px);
  align-items: start;
}
@media (max-width: 980px) {
  .article__grid { grid-template-columns: minmax(0, 1fr); }
}

.article__body {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: clamp(1.25rem, 2.08vw, 40px);
}
.article__figure {
  margin: 0 0 clamp(1rem, 1.56vw, 30px);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.article__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* المقطع الأول أكبر قليلًا — هو ملخّص الخبر القادم من data/news.json */
.article__lead {
  font-size: var(--fs-body-lg);
  line-height: 1.75;
  color: var(--ink);
  text-shadow: var(--text-shadow-card);
}
.article__body > p:not(.article__lead) {
  margin-top: 1em;
  font-size: var(--fs-body);
  line-height: 1.9;
  color: var(--ink);
}

.article__share {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 0.63vw, 12px);
  margin-top: clamp(1.25rem, 2.08vw, 40px);
  padding-top: clamp(1rem, 1.25vw, 24px);
  border-top: 1px solid var(--hairline);
  flex-wrap: wrap;
}
.share__label {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  margin-inline-end: auto;
}
.share__btn {
  inline-size: 40px;
  block-size: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--hover-dur) var(--hover-ease),
              color var(--hover-dur) var(--hover-ease),
              border-color var(--hover-dur) var(--hover-ease);
}
.share__btn:hover,
.share__btn:focus-visible {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--white);
}
.share__copy.is-done { background: var(--yellow); border-color: var(--yellow); color: var(--white); }

.article__aside {
  position: sticky;
  top: calc(78px + 1rem); /* ارتفاع القائمة الثابتة بعد النزول */
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: clamp(1rem, 1.56vw, 30px);
}
@media (max-width: 980px) { .article__aside { position: static; } }
.article__aside-title {
  font-size: var(--fs-h3, 1.25rem);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--yellow);
}
.related { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.75rem; }
.related__item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  color: inherit;
  text-decoration: none;
  padding: 0.4rem;
  border-radius: var(--radius-card);
  transition: background var(--hover-dur) var(--hover-ease);
}
.related__item:hover, .related__item:focus-visible { background: var(--paper-alt); }
.related__item img {
  inline-size: 96px;
  block-size: 66px;
  object-fit: cover;
  border-radius: 6px;
}
.related__text { display: grid; gap: 0.2rem; min-width: 0; }
.related__tag { font-size: 0.75rem; color: var(--yellow-ink); }
.related__title {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- صفحة الحالة: 404 / 405 / 500 / بلا اتصال ------------------------- */
.page-hero__inner--center { text-align: center; }
.hero__actions--center { justify-content: center; }

/* الارتفاع انتقل من القسم إلى الصندوق المحشوّ: التوسيط بـalign-content
   يقع داخل المنطقة الآمنة تحت الترويسة الثابتة، ولا يعود المحتوى معتمدًا
   على توسيط عنصر مرن داخل overflow:hidden حين يطول (تكبير أو ترجمة). */
.page-hero--err > .page-hero__inner {
  display: grid;
  justify-items: center;
  align-content: center;
  inline-size: 100%;
  min-block-size: 100svh;
  padding-block: calc(var(--header-h) + clamp(1.25rem, 3vw, 2rem)) clamp(2rem, 5vw, 3rem);
}

/* الرمز: .hero__kicker لم يكن معرَّفًا في أي ملف فورث لون الحبر فوق
   خلفية سوداء — أي أنه كان غير مرئي عمليًا. هنا يأخذ لونه صراحةً. */
.err__code {
  font-size: clamp(3.5rem, 10vw, 9.5rem);
  font-weight: 700;
  line-height: 0.9;
  color: var(--yellow);
  text-shadow: var(--text-shadow-card);
  margin-block-end: clamp(0.35rem, 1vw, 0.85rem);
}
.err--fault   .err__code { color: rgba(255, 255, 255, 0.45); text-shadow: none; }
.err--offline .err__code { color: rgba(43, 92, 180, 0.62); text-shadow: none; }

.err__sub { max-inline-size: 52ch; }
.page-hero--err .hero__rule    { margin-block: clamp(1rem, 2vw, 1.75rem); }
.page-hero--err .hero__actions { margin-top: clamp(1.25rem, 2.5vw, 2.25rem); }

.search__form--404 {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: clamp(1rem, 1.56vw, 30px);
  max-inline-size: 520px;
  margin-inline: auto;
}

.err__ways {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem clamp(1rem, 2vw, 1.75rem);
  inline-size: min(760px, 100%);
  margin-block-start: clamp(1.5rem, 3vw, 2.5rem);
  padding-block-start: clamp(1rem, 2vw, 1.5rem);
  border-block-start: 1px solid rgba(255, 255, 255, 0.18);
  font-size: var(--fs-xs);
}
.err__way {
  padding-block: 6px;                    /* هدف لمس 24px */
  color: rgba(255, 255, 255, 0.78);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255, 255, 255, 0.28);
  transition: color var(--hover-dur) var(--hover-ease),
              text-decoration-color var(--hover-dur) var(--hover-ease);
}
.err__way:hover,
.err__way:focus-visible { color: var(--accent-on-dark); text-decoration-color: var(--accent-on-dark); }

@media (max-width: 560px) {
  .page-hero--err .search__form--404 { flex-wrap: wrap; inline-size: 100%; }
  .page-hero--err .search__input     { flex-basis: 100%; padding-inline: 1rem; }
  .page-hero--err .search__form--404 .btn { flex: 1; min-width: 0; }
  .page-hero--err .hero__actions .btn     { flex: 1 1 100%; }
}
@media (max-height: 560px) {           /* هاتف عرضي: الرمز يتنازل أولًا */
  .err__code { font-size: clamp(2.5rem, 7vw, 4rem); }
  .page-hero--err > .page-hero__inner { min-block-size: 0; }
}
@media (prefers-contrast: more) {
  .err__sub, .err__way { color: var(--white); }
  .err--fault .err__code, .err--offline .err__code { color: var(--white); }
  .err__ways { border-block-start-color: rgba(255, 255, 255, 0.55); }
}

/* ==========================================================================
   إتاحة الوصول — إصلاحات لا تغيّر شكل اللوح
   ========================================================================== */

/* 1) أهداف اللمس. الأيقونة في اللوح 16×16 وهذا يبقى مظهرها، لكن مساحة
   الضغط تُوسَّع إلى 24×24 على الشاشات اللمسية كما توصي WCAG 2.2 (2.5.8).
   التوسعة بالحشو لا بالحجم، فالرسم نفسه لا يكبر. */
@media (pointer: coarse), (max-width: 700px) {
  .socials--hero .social,
  .social-rail a {
    padding: 6px;
    min-inline-size: 28px;
    min-block-size: 28px;
    display: grid;
    place-items: center;
  }
  .card__link,
  .info-row__value a,
  .crumbs a,
  .tweet__meta a {
    padding-block: 6px; /* السطر نفسه، ومساحة الضغط أعلى وأسفل */
  }
  .shot__cap a, .vcard__title a { padding-block: 4px; }
}

/* 2) الأزرق الصلب مع الأبيض = 6.2:1. من يطلب تباينًا أعلى من نظامه
   يأخذ التعبئة الأغمق (--yellow-dark) مع الأبيض = 8.1:1.
   الأسود على #2B5CB4 كان حلًّا للأصفر القديم ويسقط اليوم عن AA. */
@media (prefers-contrast: more) {
  .btn--solid,
  .btn--pill,
  .btn--ghost:hover,
  .carousel__btn,
  .play-badge,
  .belief__more,
  .lightbox__close,
  .pod__play,
  .journey__start,
  .journey__end,
  .media-tab.is-active,
  .media-tab--solid,
  .quote-card,
  .tayyar__card,
  .overlap__panel {
    background: var(--yellow-dark);
    color: var(--white);
  }
  .quote-card *,
  .tayyar__card *,
  .overlap__panel * { color: inherit; }
  .quote-card__rule, .tayyar__rule, .overlap__rule { background: var(--white); }
}

/* 3) الروابط المعطّلة (حساب لم يُضَف بعد في assets/js/social.js): تبقى
   ظاهرة كما في اللوح ولا تنقل الزائر إلى أعلى الصفحة. */
[data-social][aria-disabled="true"] { cursor: default; opacity: 0.75; }
[data-social][aria-disabled="true"]:hover { transform: none; }

/* ==========================================================================
   صفحة المركز الإعلامي — إيقاع موحّد بين التبويبات
   ==========================================================================
   الرئيسية تحبس كتلتها في 552 لأن اللوح رسمها بلاطةً واحدة بهذا الطول.
   أما هذه فصفحة قوائم: «آخر الأخبار» فيها أحد عشر خبرًا و«مكتبة الفيديو»
   ثلاثة، فحبسها في طول واحد إمّا يقصّ الأخبار أو يترك تحت الفيديو فراغًا
   بارتفاع شاشة. الموحَّد هنا هو الحدّ الأدنى — ارتفاع كتلة واحدة، نفس
   الرقم 552 — فلا تقفز الصفحة إلى أعلى عند الانتقال من تبويب طويل إلى
   قصير، ولا يظهر أي تبويب أقصر من كتلة كاملة.
   ========================================================================== */
.tab-panel {
  min-block-size: clamp(300px, 28.75vw, 552px);
}
@media (max-width: 1080px) {
  .tab-panel { min-block-size: 0; }
}
/* الشبكات الثلاث مستعارة من الرئيسية، وهناك تعيش داخل صندوق طوله 552
   فتأخذ بلاطاتها `height: 100%` من صفٍّ محدّد الارتفاع. هنا لا صندوق،
   فالصفّ بلا ارتفاع والبلاطة بلا نسبة أبعاد = بلاطة بارتفاع صفر وتبويب
   فارغ. لذلك تُعاد النسبة الأصلية للبلاطة داخل هذه الصفحة وحدها. */
.tab-panel .media-grid--even,
.tab-panel .album-grid--row {
  grid-template-rows: none;
  grid-auto-rows: auto;
}
.tab-panel .media-grid--even .vcard { aspect-ratio: 398 / 275; height: auto; }
.tab-panel .album-grid--row .shot { aspect-ratio: 539 / 270; height: auto; }
.tab-panel .news-grid--3 { grid-auto-rows: 1fr; }

/* ==========================================================================
   قصّ الصور داخل البلاطات
   ==========================================================================
   البلاطات عريضة (539×270 مثلًا) وبعض الصور عمودية (about-4.jpg بمقاس
   1364×2048)، فالقصّ من المنتصف كان يُبقي الصدر ويحذف الوجه. مركز القصّ
   يرتفع إلى الثلث العلوي حيث تقع الوجوه في كل صور الأرشيف تقريبًا.
   ========================================================================== */
.shot img,
.vcard img,
.card__media img,
.related__item img {
  object-position: 50% 30%;
}
/* البلاطة الرئيسية في الألبوم مربّعة تقريبًا فلا تحتاج رفعًا */
.shot--feature img { object-position: 50% 42%; }
/* الصفّ العريض في «من الذاكرة» (539×270) يضمّ صورًا عمودية طولها ضعف
   عرضها؛ مركز القصّ عندها يرتفع أكثر حتى يقع الوجه داخل الإطار. */
.album-grid--row .shot img { object-position: 50% 20%; }

/* ==========================================================================
   المواقف السياسية — /positions.html
   ==========================================================================
   لا لوح لهذه الصفحة في DAHLAN_FINAL.xd. بُنيت من مفردات اللوحات نفسها:
   البطاقة البيضاء بحوافّ 10px وظلّ 0/6/6 عند 20%، الأصفر #2B5CB4 للرقم
   والخطّ تحت العنوان كما في «ما نؤمن به»، وعمود المحتوى 1640 مقسومًا إلى
   فهرس لاصق 320 ومتن يملأ الباقي.
   ========================================================================== */

/* --- الرسالة والرؤية: إطار الصفحة قبل المواقف --- */
.pos-intro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 1.56vw, 30px);
}
@media (max-width: 820px) { .pos-intro { grid-template-columns: 1fr; } }
.pos-intro__card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: clamp(1.25rem, 2.08vw, 40px);
  border-top: 4px solid var(--yellow);
}
.pos-intro__label {
  font-size: clamp(1.15rem, 1.35vw, 1.625rem);
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.pos-intro__text { font-size: var(--fs-body); line-height: 1.9; color: var(--ink); }

/* --- الشبكة: فهرس لاصق + متن --- */
.pos-layout {
  display: grid;
  grid-template-columns: minmax(0, 320fr) minmax(0, 1280fr);
  gap: clamp(1.5rem, 2.6vw, 50px);
  align-items: start;
}
@media (max-width: 1080px) { .pos-layout { grid-template-columns: minmax(0, 1fr); } }

.pos-index {
  position: sticky;
  top: calc(78px + 1rem);
  max-block-size: calc(100svh - 78px - 3rem);
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: clamp(1rem, 1.25vw, 24px);
}
/* على الشاشات الضيّقة كان الفهرس (position:static, بلا سقف) جدارًا من
   خمسة عشر مدخلًا يسبق أوّلَ بطاقة فيدفع المحتوى بعيدًا. نُبقيه في
   مكانه لكن نقيّده بارتفاعٍ يُمرَّر داخله — خريطةٌ مصغّرةٌ لا جدار. */
@media (max-width: 1080px) {
  .pos-index {
    position: static;
    max-block-size: 42vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-padding-block-start: 2.5rem;
  }
  /* عنوانُ الفهرس يبقى مرئيًّا فوق القائمة المتحرّكة داخل الصندوق. */
  .pos-index__title {
    position: sticky;
    inset-block-start: 0;
    margin-block-start: -0.25rem;
    padding-block-start: 0.25rem;
    background: var(--paper);
    z-index: 1;
  }
}
.pos-index__title {
  font-weight: 700;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 2px solid var(--yellow);
}
.pos-index ul { list-style: none; padding: 0; margin: 0; }
.pos-index__group + .pos-index__group { margin-top: 1rem; }
.pos-index__axis {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}
.pos-index__axis .lat {
  display: inline-grid;
  place-items: center;
  min-inline-size: 20px;
  padding: 1px 5px;
  margin-inline-start: 4px;
  border-radius: 20px;
  background: var(--paper-alt);
  font-size: 0.7rem;
}
.pos-index__group ul li a {
  display: block;
  padding: 0.3rem 0;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink);
  border-inline-start: 2px solid transparent;
  padding-inline-start: 0.6rem;
  transition: color var(--hover-dur) var(--hover-ease),
              border-color var(--hover-dur) var(--hover-ease);
}
.pos-index__group ul li a:hover,
.pos-index__group ul li a.is-current {
  border-inline-start-color: var(--yellow);
  color: var(--black);
  font-weight: 700;
}

/* --- شريط التصفية --- */
.pos-filter {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.4rem, 0.63vw, 12px);
  margin-bottom: clamp(0.75rem, 1.04vw, 20px);
}
.pos-filter__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--hairline);
  border-radius: 30px;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: background var(--hover-dur) var(--hover-ease),
              border-color var(--hover-dur) var(--hover-ease),
              color var(--hover-dur) var(--hover-ease);
}
.pos-filter__btn:hover { border-color: var(--yellow); }
.pos-filter__btn.is-active {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--white);
  font-weight: 700;
}
.pos-filter__btn.is-active .pos-filter__n {
  background: rgba(255, 255, 255, 0.22);
}
.pos-filter__n {
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.08);
}
.pos-count {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  margin-bottom: clamp(0.75rem, 1.04vw, 20px);
}
.pos-empty {
  padding: 2rem;
  text-align: center;
  color: var(--ink-soft);
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-card);
}

/* --- بطاقة الموقف --- */
.pos-list { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(1rem, 1.56vw, 30px); }
.pos__card {
  display: grid;
  grid-template-columns: minmax(0, 400fr) minmax(0, 880fr);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
@media (max-width: 780px) { .pos__card { grid-template-columns: minmax(0, 1fr); } }
/* إيقاع بصري: الصورة تتبادل الجهة بين بطاقة وأخرى */
.pos:nth-child(even) .pos__card { direction: ltr; }
.pos:nth-child(even) .pos__body,
.pos:nth-child(even) .pos__media { direction: rtl; }

.pos__media { position: relative; margin: 0; min-block-size: 220px; }
.pos__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
.pos__num {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  inline-size: clamp(44px, 3.13vw, 60px);
  block-size: clamp(44px, 3.13vw, 60px);
  background: var(--yellow);
  color: var(--white);
  font-family: var(--font-latin);
  font-weight: 700;
  font-size: clamp(1rem, 1.15vw, 1.375rem);
  box-shadow: var(--shadow-card);
}

.pos__body { padding: clamp(1.25rem, 2.08vw, 40px); display: flex; flex-direction: column; }
.pos__axis {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}
.pos__axis-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--yellow); }
.pos__title {
  font-size: clamp(1.15rem, 1.56vw, 1.875rem);
  line-height: 1.4;
  margin-bottom: 0.85rem;
  position: relative;
  padding-bottom: 0.85rem;
}
.pos__title::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 60px;
  block-size: 3px;
  background: var(--yellow);
}
/* الاقتباس منقول بنصّه، فيأخذ شكل الاقتباس لا شكل الفقرة */
.pos__quote {
  margin: 0 0 1rem;
  padding-inline-start: clamp(0.75rem, 1.04vw, 20px);
  border-inline-start: 4px solid var(--yellow);
  font-size: var(--fs-body);
  line-height: 1.85;
  color: var(--ink);
  font-weight: 500;
  text-shadow: var(--text-shadow-card);
}
.pos__context { font-size: var(--fs-sm); line-height: 1.9; color: var(--ink-soft); }
.pos__stat {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--yellow);
  border-radius: var(--radius-card);
  align-self: flex-start;
}
.pos__stat-num {
  font-family: var(--font-latin);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.35vw, 1.625rem);
}
.pos__stat-label { font-size: var(--fs-xs); color: var(--ink-soft); }
.pos__source { margin-top: 0.85rem; font-size: var(--fs-xs); color: var(--ink-soft); }
.pos__source a { color: var(--yellow-ink); text-decoration: underline; text-underline-offset: 3px; }

.pos__related { margin-top: 1rem; }
.pos__related-label { font-size: 0.75rem; color: var(--ink-soft); margin-bottom: 0.4rem; }
.pos__related ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pos__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-inline-size: 100%;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: var(--paper-alt);
  color: var(--ink);
  font-size: 0.75rem;
  line-height: 1.5;
  transition: background var(--hover-dur) var(--hover-ease),
              border-color var(--hover-dur) var(--hover-ease);
}
.pos__chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: 34ch; }
.pos__chip:hover { background: var(--yellow); border-color: var(--yellow); color: var(--white); }
.pos__link {
  margin-top: auto;
  padding-top: 1rem;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 0;
  color: var(--ink-soft);
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: color var(--hover-dur) var(--hover-ease);
}
.pos__link:hover, .pos__link.is-done { color: var(--yellow-ink); }

.pos-method {
  margin-top: clamp(1.5rem, 2.08vw, 40px);
  padding: clamp(1rem, 1.56vw, 30px);
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-card);
  background: var(--paper-alt);
}
.pos-method__title { font-size: var(--fs-sm); margin-bottom: 0.5rem; }
.pos-method p { font-size: var(--fs-xs); line-height: 1.9; color: var(--ink-soft); }

/* الموقف المقصود برابط مباشر يظهر بإطاره الأصفر لحظة الوصول */
.pos:target .pos__card { outline: var(--hover-ring) solid var(--yellow); outline-offset: -1px; }

/* ==========================================================================
   أدوات صفحة الخبر — شريط التقدّم، شريط الأدوات، التنقّل، الطباعة
   ========================================================================== */

/* شريط تقدّم القراءة: خيط أصفر بعرض الصفحة فوق كل شيء */
.read-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  z-index: 60;
  background: transparent;
  pointer-events: none;
}
.read-progress span {
  display: block;
  block-size: 100%;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: right center; /* الصفحة RTL فالتقدّم يبدأ من اليمين */
  transition: transform 0.1s linear;
}
[dir="ltr"] .read-progress span { transform-origin: left center; }

/* الوسم فوق العنوان في ترويسة الخبر */
.article__tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.7rem;
  margin-inline-end: 0.6rem;
  border-radius: 20px;
  background: var(--yellow);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 700;
}

/* شريط الأدوات */
.article__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.4rem, 0.63vw, 12px);
  padding-bottom: clamp(0.75rem, 1.04vw, 20px);
  margin-bottom: clamp(1rem, 1.56vw, 30px);
  border-bottom: 1px solid var(--hairline);
}
.tool {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}
.tool--time {
  padding-inline-end: 0.75rem;
  margin-inline-end: auto;
}
.tool--btn {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--hairline);
  border-radius: 30px;
  background: var(--paper);
  cursor: pointer;
  transition: background var(--hover-dur) var(--hover-ease),
              border-color var(--hover-dur) var(--hover-ease),
              color var(--hover-dur) var(--hover-ease);
}
.tool--btn:hover,
.tool--btn:focus-visible {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--white);
}
.tool--btn.is-on { background: var(--yellow); border-color: var(--yellow); color: var(--white); }
.tool--size {
  display: inline-flex;
  border: 1px solid var(--hairline);
  border-radius: 30px;
  overflow: hidden;
}
.tool--size button {
  padding: 0.45rem 0.75rem;
  border: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: background var(--hover-dur) var(--hover-ease), color var(--hover-dur) var(--hover-ease);
}
.tool--size button + button { border-inline-start: 1px solid var(--hairline); }
.tool--size button:hover { background: var(--yellow); color: var(--white); }

/* الصورة تفتح في اللايت بوكس، فيظهر عليها مؤشّر التكبير */
.article__figure { position: relative; cursor: zoom-in; }
.article__zoom {
  position: absolute;
  inset-block-end: 0.75rem;
  inset-inline-end: 0.75rem;
  display: grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: var(--white);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--hover-dur) var(--hover-ease);
}
.article__figure:hover .article__zoom,
.article__figure:focus-visible .article__zoom { opacity: 1; }
@media (hover: none) { .article__zoom { opacity: 1; } }

.article__text { transition: font-size 0.2s var(--ease); }

/* التنقّل بين الأخبار */
.article__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.04vw, 20px);
  margin-top: clamp(1.5rem, 2.08vw, 40px);
}
@media (max-width: 700px) { .article__nav { grid-template-columns: 1fr; } }
.article__nav-item {
  display: grid;
  gap: 0.35rem;
  padding: clamp(0.85rem, 1.25vw, 24px);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  color: inherit;
  transition: border-color var(--hover-dur) var(--hover-ease);
}
.article__nav-item.is-empty { background: none; border: 0; box-shadow: none; }
.article__nav-item:hover { border-color: var(--yellow); }
.article__nav-item--prev { text-align: end; }
.article__nav-dir { font-size: 0.75rem; color: var(--yellow-ink); font-weight: 700; }
.article__nav-title {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   الطباعة — الخبر وحده على الورق: بلا قائمة ولا تذييل ولا أدوات
   ========================================================================== */
@media print {
  .header, .footer, .to-top, .search, .nav-backdrop, .splash,
  .article__tools, .article__share, .article__aside, .article__nav,
  .read-progress, .lightbox, .skip-link, .social-rail { display: none !important; }
  body { background: #fff; color: #000; }
  .page-hero, .page-hero--article {
    min-height: 0;
    background: none;
    color: #000;
    padding-block: 0 1rem;
  }
  .page-hero__bg, .page-hero::after { display: none !important; }
  .page-hero__title, .page-hero__sub, .crumbs, .article__meta { color: #000 !important; }
  .article__grid { display: block; }
  .article__body { border: 0; box-shadow: none; padding: 0; }
  .article__figure img { max-height: 9cm; object-fit: contain; }
  .article__text { font-size: 12pt; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .article__figure a[href]::after { content: ""; }
  .reveal { opacity: 1 !important; transform: none !important; }
  @page { margin: 1.6cm; }
}

/* الاقتباس بين شولتين، فيبقى واضحًا أنه منقول بنصّه لا صياغة تحريرية */
.pos__quote p::before { content: "«"; }
.pos__quote p::after { content: "»"; }

/* ==========================================================================
   صفحة الخبر — سطر النسبة، أبرز النقاط، الكلمات المفتاحية، الأكثر قراءة
   ========================================================================== */

/* شارة التصنيف فوق العنوان في الترويسة */
.article__kicker { margin-bottom: 0.6rem; }

/* سطر النسبة: المصدر ثم التاريخان الميلادي والهجري وعمر الخبر */
.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem clamp(0.6rem, 1.04vw, 20px);
  padding-bottom: clamp(0.75rem, 1.04vw, 20px);
  margin-bottom: clamp(0.75rem, 1.04vw, 20px);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}
.byline__src {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  color: var(--ink);
}
.byline__sep { inline-size: 4px; block-size: 4px; border-radius: 50%; background: var(--yellow); }
.byline__date { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.byline__hijri { color: var(--ink-soft); }
.byline__ago { color: var(--yellow-ink); }
.byline__updated { color: var(--ink-soft); }
/* إشارة «تاريخ غير معتمد»: تُقرأ ولا تصرخ. لو كانت بلون التحذير
   لبدت كل مادة في الموقع معطوبة، ولو كانت بلون النصّ لما رآها أحد. */
.byline__unapproved {
  font-size: 0.82em;
  color: var(--ink-soft);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.05em 0.55em;
  margin-inline-start: 0.35em;
  white-space: nowrap;
  text-decoration: none;
  vertical-align: middle;
}
.byline__unapproved:hover,
.byline__unapproved:focus-visible { color: var(--ink); background: #f4f4f4; }

/* أبرز النقاط: صندوق تلخيصي قبل النصّ كما في المواقع الإخبارية */
.article__points {
  margin-block: clamp(1rem, 1.56vw, 30px);
  padding: clamp(1rem, 1.56vw, 30px);
  background: var(--paper-alt);
  border-inline-start: 4px solid var(--yellow);
  border-radius: var(--radius-card);
}
.article__points-title {
  font-size: var(--fs-sm);
  margin-bottom: 0.6rem;
}
.article__points ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; }
.article__points li {
  position: relative;
  padding-inline-start: 1.2rem;
  font-size: var(--fs-xs);
  line-height: 1.8;
  color: var(--ink);
}
.article__points li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.65em;
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--yellow);
}

/* تعليق الصورة ونسبة التصوير */
.article__caption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.9rem;
  background: var(--paper-alt);
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.article__credit { flex: none; color: var(--ink-soft); opacity: 0.85; }

/* تنبيه «النصّ الكامل لم يُضَف بعد» */
.article__pending {
  margin-top: 1em;
  padding: 0.8rem 1rem;
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-card);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}
.article__pending code { font-size: 0.85em; direction: ltr; unicode-bidi: embed; }

/* الكلمات المفتاحية */
/* كتلة التوثيق — تُرسم فقط حين تحمل المادّةُ حقولَ مخطَّط التوثيق
   (مكان، حدث، أشخاص، مصادر، أصل). أسلوبُ «أبرز النقاط» نفسُه لكن
   بحدٍّ محايد: هذه بياناتُ سجلٍّ لا إبراز. */
.article__docs {
  margin-block: clamp(1rem, 1.56vw, 30px);
  padding: clamp(1rem, 1.56vw, 30px);
  background: var(--paper-alt);
  border-inline-start: 4px solid var(--ink-soft);
  border-radius: var(--radius-card);
}
.article__docs-title { font-size: var(--fs-sm); margin-bottom: 0.6rem; }
.article__doc-row {
  display: flex;
  gap: 0.6rem;
  font-size: var(--fs-xs);
  line-height: 1.9;
  color: var(--ink);
}
.article__doc-label {
  flex: 0 0 4.5rem;
  color: var(--ink-soft);
  font-weight: 600;
}
.article__doc-meta { color: var(--ink-soft); }

.article__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: clamp(1rem, 1.56vw, 30px);
}
.article__tags-label { font-size: var(--fs-xs); color: var(--ink-soft); margin-inline-end: 0.3rem; }
.article__kw {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: var(--paper-alt);
  color: var(--ink);
  font-size: 0.8rem;
  transition: background var(--hover-dur) var(--hover-ease),
              border-color var(--hover-dur) var(--hover-ease),
              color var(--hover-dur) var(--hover-ease);
}
.article__kw:hover, .article__kw:focus-visible {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--white);
}

/* سطر التصويب أسفل الخبر */
.article__correction {
  margin-top: clamp(1rem, 1.25vw, 24px);
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.article__correction a { color: var(--yellow-ink); text-decoration: underline; text-underline-offset: 3px; }

/* الأكثر قراءة */
.most-read { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.35rem; counter-reset: mr; }
.most-read a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
  padding: 0.45rem 0.4rem;
  border-radius: var(--radius-card);
  color: inherit;
  transition: background var(--hover-dur) var(--hover-ease);
}
.most-read a:hover, .most-read a:focus-visible { background: var(--paper-alt); }
.most-read__n {
  display: grid;
  place-items: center;
  inline-size: 30px;
  block-size: 30px;
  border-radius: 50%;
  background: var(--paper-alt);
  border: 1px solid var(--hairline);
  font-family: var(--font-latin);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.most-read li:first-child .most-read__n { background: var(--yellow); border-color: var(--yellow); color: var(--white); }
.most-read__t {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink);
  /* كان هنا line-clamp: 2 — ومعيار تباعد النص (1.4.12) أسقطه:
     القارئ الذي يرفع تباعد الكلمات يدفع العنوانَ المالئ سطريه
     بالضبط إلى ثالثٍ يُبتلع. قائمة جانبية من خمسة عناوين تحتمل
     الالتفاف الطبيعي (قياس tools/mobile.js، ممرّ التباعد). */
}

/* «تابع المكتب» و RSS */
.aside__follow { display: grid; gap: 0.6rem; justify-items: start; }
.aside__follow-title { font-size: var(--fs-xs); color: var(--ink-soft); }
.aside__rss {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
  transition: color var(--hover-dur) var(--hover-ease);
}
.aside__rss:hover { color: var(--yellow-ink); }

/* زرّ مشاركة المقتطف — يطفو فوق النصّ المظلَّل */
.quote-share {
  position: absolute;
  z-index: 55;
  translate: -50% 0;
}
.quote-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border: 0;
  border-radius: 30px;
  background: var(--black);
  color: var(--white);
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-md);
}
.quote-share__btn:hover { background: var(--yellow); color: var(--white); }

@media print {
  .article__tags, .article__correction, .quote-share, .aside__follow { display: none !important; }
}

/* ==========================================================================
   شريط التمرير — من هوية الموقع نفسها
   ==========================================================================
   المقبض أصفر #2B5CB4 بتدرّج خفيف نحو الدرجة الداكنة نفسها المستعملة في
   الأزرار (--yellow-dark)، والمجرى أسود كالترويسة والتذييل، وبين الاثنين
   حافة سوداء تجعل المقبض «حبّة» عائمة كما تعوم البطاقات على الصفحة.
   طبقتان: شريط الصفحة كاملة عريض 12px، وأشرطة اللوائح الداخلية (فهرس
   المواقف، شريط التصفية على الهاتف) رفيعة 8px بمجرى فاتح يناسب خلفيتها.
   فايرفوكس يأخذ المعنى نفسه عبر scrollbar-color.
   ========================================================================== */

/* شريط الصفحة — فايرفوكس */
html {
  scrollbar-color: var(--yellow) #141414;
}

/* شريط الصفحة — كروم/إيدج/سفاري */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  inline-size: 12px;
  block-size: 12px;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: #141414;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--yellow) 0%, var(--yellow-dark) 100%);
  border-radius: 8px;
  border: 3px solid #141414; /* الحافة تفصل المقبض عن المجرى فيبدو حبّة عائمة */
  min-block-size: 48px;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: var(--yellow);
}
html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active {
  background: var(--yellow-dark);
}
html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner {
  background: #141414;
}

/* اللوائح الداخلية: رفيعة، بمجرى فاتح يناسب البطاقات البيضاء */
.pos-index,
.pos-filter,
.search__results,
textarea {
  scrollbar-width: thin;
  scrollbar-color: var(--yellow-ink) var(--paper-alt);
}
.pos-index::-webkit-scrollbar,
.pos-filter::-webkit-scrollbar,
textarea::-webkit-scrollbar {
  inline-size: 8px;
  block-size: 8px;
}
.pos-index::-webkit-scrollbar-track,
.pos-filter::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track {
  background: var(--paper-alt);
  border-radius: 8px;
}
.pos-index::-webkit-scrollbar-thumb,
.pos-filter::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--yellow) 0%, var(--yellow-dark) 100%);
  border-radius: 8px;
  border: 2px solid var(--paper-alt);
}
.pos-index::-webkit-scrollbar-thumb:hover,
.pos-filter::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover {
  background: var(--yellow);
}

/* الشاشة الطويلة لا «تقفز» حين يظهر الشريط ويختفي */
html { scrollbar-gutter: stable; }

/* ==========================================================================
   المواقف السياسية — الجولة الثانية: أرقام الترويسة، البحث الحيّ، الطباعة
   ========================================================================== */

/* أرقام الترويسة: صفّ رقائق زجاجية فوق صورة القدس — نفس زجاج اللوح */
.pos-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.5rem, 0.83vw, 16px);
  list-style: none;
  padding: 0;
  margin: clamp(0.75rem, 1.25vw, 24px) 0 0;
}
.pos-hero__stats li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 30px;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-xs);
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
}
@supports not (backdrop-filter: blur(1px)) {
  .pos-hero__stats li { background: rgba(0, 0, 0, 0.45); }
}
.pos-hero__stats b {
  font-family: var(--font-latin);
  font-size: clamp(1.1rem, 1.35vw, 1.625rem);
  color: var(--accent-on-dark);
}

/* شريط الأدوات: أزرار المحاور وبجانبها البحث الحيّ */
.pos-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.5rem, 0.83vw, 16px);
  margin-bottom: clamp(0.75rem, 1.04vw, 20px);
}
.pos-toolbar .pos-filter { margin-bottom: 0; flex: 1 1 auto; }
.pos-search {
  flex: 0 1 260px;
  min-inline-size: 200px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--hairline);
  border-radius: 30px;
  background: var(--paper);
  color: var(--ink-soft);
  transition: border-color var(--hover-dur) var(--hover-ease);
}
.pos-search:focus-within { border-color: var(--yellow); }
.pos-search svg { flex: none; }
.pos-search input {
  inline-size: 100%;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-xs);
  color: var(--ink);
  /* كان هنا `outline: none` اعتمادًا على أن الحاوية تلوّن حدّها عند
     التركيز — وحدُّها أصفر، 1.5:1 على الأبيض. فالمؤشّر الوحيد الذي
     كان يراه المتنقّل بلوحة المفاتيح في هذا الحقل غيرُ مرئي عمليًّا
     لضعيف البصر. حُذف السطر فعادت حلقة التركيز العامة. */
}
.pos-search input::placeholder { color: var(--ink-soft); }
/* زرّ المسح المدمج في نوع search يبقى؛ نلوّنه فقط في ويبكيت */
.pos-search input::-webkit-search-cancel-button { cursor: pointer; }

/* البطاقة المقصودة برابط لا يغطّيها الشريط الثابت */
/* الشريط اللاصق يحتلّ من 86px وارتفاعه ~64px، فالقفزة تُزاح تحته */
.pos { scroll-margin-block-start: 158px; }
/* الترويسة اللاصقة كانت ستغطّي هدف الرابط عند القفز إليه */
.split[id], .section[id], .tab-panel[id] { scroll-margin-block-start: 158px; }

/* على الهاتف: صفّ المحاور يتمرّر أفقيًا بمقبض أصفر رفيع بدل أن يتكوّم */
@media (max-width: 700px) {
  .pos-toolbar { flex-direction: column; align-items: stretch; }
  .pos-search { flex: 1 1 auto; }
  .pos-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-block-end: 8px;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
  }
  .pos-filter__btn { flex: none; scroll-snap-align: start; }
}

/* طباعة صفحة المواقف — كتلة واحدة حاسمة.
   كانت كتلتان تتنازعان: إحداهما تريد الصورة كاملة (contain, 6cm)
   والأخرى تقصّها (cover, 5cm)، وإحداهما تخفي أرقام الترويسة بينما
   الثانية تلوّنها للطباعة. الحسم هنا: صورة كاملة غير مقصوصة، وأرقام
   الترويسة تُطبع (فهي خلاصة الملف). */
@media print {
  .pos-toolbar, .pos-index, .pos-count, .pos-keys, .pos__actions, .pos-empty,
  .pos__chip svg { display: none !important; }
  .pos-layout { display: block; }
  .pos__card { grid-template-columns: 1fr; box-shadow: none; break-inside: avoid; }
  .pos__media { min-block-size: 0; }
  .pos__media img { position: static; max-block-size: 6cm; object-fit: contain; }
}

/* رابط العبور من نتائج بحث الأخبار إلى بحث المواقف */
.search-note a {
  color: var(--yellow-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 400;
  font-size: 0.8em;
}

/* =============================================================
   المواقف — جولة 20: صفّ الأفعال، التظليل، الوميض، الأدوات، الطباعة
   ============================================================= */

/* صفّ أفعال البطاقة — نفس لغة زرّ «رابط الموقف» القائمة */
.pos__actions {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.1rem;
}
.pos__actions .pos__link { margin-top: 0; padding-top: 0; }
.pos__link.is-on { color: var(--yellow-ink); }

/* ما طابقه البحث يُظلَّل بلون الهوية — أبيض على الأزرق = 6.2:1 */
mark.pos-mark {
  background: var(--yellow);
  color: var(--white);
  padding: 0 0.15em;
  border-radius: 3px;
}

/* وميض البطاقة المقصودة — من الفهرس أو رابط عميق أو J/K */
@keyframes pos-flash {
  0%   { outline-color: var(--yellow); }
  100% { outline-color: transparent; }
}
.pos.is-flash .pos__card {
  outline: 3px solid transparent;
  outline-offset: 4px;
  animation: pos-flash 1.3s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .pos.is-flash .pos__card { animation: none; outline-color: var(--yellow); }
}

/* أدوات الشريط: نسخ العرض، الطباعة، البيانات المفتوحة */
.pos-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.pos-tool {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--hairline);
  border-radius: 30px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-xs);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.pos-tool:hover, .pos-tool.is-done { border-color: var(--yellow); color: var(--yellow-ink); }

/* سطر الاختصارات — للوحة المفاتيح فقط، فيختفي على شاشات اللمس */
.pos-keys {
  margin: -0.25rem 0 0.75rem;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.pos-keys kbd {
  display: inline-block;
  min-inline-size: 1.5em;
  text-align: center;
  padding: 0.1em 0.4em;
  border: 1px solid var(--hairline);
  border-block-end-width: 2px;
  border-radius: 5px;
  background: var(--paper);
  font-family: inherit;
  font-size: 0.9em;
}
@media (pointer: coarse) { .pos-keys { display: none; } }

/* تتمّة طباعة المواقف: الترويسة والحواف والروابط.
   (الإخفاء وقياس الصورة محسومان في الكتلة الأولى أعلاه — لا تكرّرهما
   هنا وإلا عاد التنازع الذي كان يقصّ الصور ويُسقط أرقام الترويسة.) */
@media print {
  .header, .footer, .nav-backdrop, .search, .to-top, .lightbox,
  .read-progress, .splash { display: none !important; }
  .page-hero--positions { min-block-size: auto; padding-block: 1.5cm 0.5cm; }
  .page-hero--positions .page-hero__bg { display: none; }
  .page-hero--positions .page-hero__title,
  .page-hero--positions .page-hero__sub,
  .page-hero--positions .crumbs,
  .pos-hero__stats { color: #000 !important; }
  .pos-hero__stats { border-color: #999; }
  .pos { break-inside: avoid; }
  .pos__card { border: 1px solid #ccc; }
  /* رابط المصدر يطبع عنوانه — الورقة لا تُنقر؛ أما رقاقات التوثيق
     وفتات المسار فعناوينها ضجيج على الورق */
  .pos__source a::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
  a.pos__chip::after, .crumbs a[href]::after { content: none !important; }
}

/* =============================================================
   جولة 21 — البودكاست والألبوم والنماذج
   ============================================================= */

/* فخ السبام: خارج الشاشة لا display:none — بعض البرمجيات تتجاوز الأخير */
.hp {
  position: absolute;
  inset-inline-start: -9999px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

/* عدّاد أحرف الرسالة */
.field__count {
  margin-block-start: 0.35rem;
  font-size: 12px;
  color: var(--ink-soft);
  text-align: start;
}
.field__count.is-low { color: #b3261e; font-weight: 600; }

/* الصفّ الثاني لمشغّل البودكاست: قفز، سرعة، تنزيل */
.pod__extras {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-block-start: 0.6rem;
}
.pod__x {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.pod__x:hover, .pod__x.is-on { border-color: var(--yellow); color: var(--ink-strong); }
.pod__x--rate { min-inline-size: 3.2em; justify-content: center; }

/* تنقّل الألبوم في اللايت بوكس — قرصان بلون الهوية فوق السواد */
.lightbox__nav {
  position: fixed;
  inset-block-start: 50%;
  translate: 0 -50%;
  inline-size: 46px;
  block-size: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.15s, background-color 0.2s;
  /* المظهر (زجاج بحدّ أبيض) يأتي من قسم الزجاج في آخر الملف */
}
.lightbox__nav:hover { transform: scale(1.08); }
.lightbox__nav--prev { inset-inline-start: clamp(8px, 2vw, 28px); }
.lightbox__nav--next { inset-inline-end: clamp(8px, 2vw, 28px); }
.lightbox__count {
  position: fixed;
  inset-block-end: 18px;
  inset-inline-start: 50%;
  translate: -50% 0;
  padding: 0.25rem 0.9rem;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.65);
  color: var(--accent-on-dark);
  font-size: 14px;
  z-index: 2;
}
[dir="rtl"] .lightbox__count { translate: 50% 0; }
.lightbox__caption {
  margin: 0.6rem auto 0;
  max-inline-size: 70ch;
  text-align: center;
  color: #ddd;
  font-size: 13.5px;
}
@media (max-width: 700px) {
  .lightbox__nav { inline-size: 40px; block-size: 40px; }
}

/* ==========================================================================
   جولة 22 — نظام الزجاج (Glassmorphism) مستخرج من التصميم نفسه
   ==========================================================================
   ملف DAHLAN_FINAL.xd يحمل مرشّح `uxdesign#blur` بقيمتين اثنتين فقط،
   وكلتاهما `backgroundEffect: true` أي ضباب لما خلف العنصر لا لما فيه:

     1) blurAmount 30 · brightnessAmount +15 · fillOpacity 0
        → زجاج فاتح: بلا تعبئة، الخلفية تُضبَّب وتُضاء.
        (Rectangle 1211 الشريط الاجتماعي، Ellipse 3/4 نقاط السلايدر،
         Rectangle 1196 الشارة الصغيرة)
     2) blurAmount 30 · brightnessAmount −1 · fillOpacity 0.22
        → حجاب داكن: أسود بشفافية 22٪ فوق ضباب 30px.
        (الصور الكبيرة 1920×500 و1920×1080 — حجاب البطل)

   ملاحظة أمانة: أقراص Rectangle 1190 الصفراء تحمل المرشّح نفسه لكن
   تعبئتها #2B5CB4 مصمتة فوقه، فلا زجاج يظهر فيها — تبقى صفراء كما
   هي (تدقيق الجولة 8). الزجاج هنا يعمّ ما يطفو فوق المحتوى: اللوحات
   والشرائط والأزرار العائمة.

   القيم أدناه رموز واحدة يستهلكها الجميع، فتغيير الضباب مرة واحدة
   يسري على الموقع كله.
   ========================================================================== */

:root {
  --glass-blur: 30px;                        /* blurAmount من التصميم */
  --glass-bright: 1.15;                      /* brightnessAmount +15 */
  --glass-sat: 1.4;
  --glass-scrim: rgba(0, 0, 0, 0.22);        /* fillOpacity 0.22 فوق أسود */
  --glass-dark: rgba(10, 10, 10, 0.45);      /* لوحات داكنة تحمل نصًا أبيض */
  --glass-deep: rgba(8, 8, 8, 0.62);         /* لوحات فوق صور مزدحمة */
  --glass-light: rgba(255, 255, 255, 0.14);  /* لوحات فوق خلفية فاتحة */
  --glass-edge: rgba(255, 255, 255, 0.16);   /* حافة الشعرة العلوية */
  --glass-edge-dark: rgba(0, 0, 0, 0.08);
}

/* الأساس: يُركَّب على أي عنصر مع لون تعبئته الخاص */
.glass, .glass-dark, .glass-light {
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}
.glass-dark { background: var(--glass-dark); border: 1px solid var(--glass-edge); }
.glass-light {
  background: var(--glass-light);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(var(--glass-blur)) brightness(var(--glass-bright));
  -webkit-backdrop-filter: blur(var(--glass-blur)) brightness(var(--glass-bright));
}

/* ---------- لوحة البحث: زجاج داكن فوق الصفحة بدل الحجب الكامل ---------- */
.search {
  background: var(--glass-scrim);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  align-content: start;
  padding-block-start: clamp(80px, 12vh, 160px);
}
.search__panel {
  inline-size: min(760px, 90vw);
  padding: clamp(1rem, 1.8vw, 1.75rem);
  border-radius: 18px;
  background: var(--glass-deep);
  border: 1px solid var(--glass-edge);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}
.search__panel .search__form { inline-size: 100%; }
.search__hint {
  margin-block-start: 0.75rem;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.55);
}
.search__hint kbd {
  display: inline-block;
  min-inline-size: 1.6em;
  text-align: center;
  margin-inline: 1px;
  padding: 0.05em 0.35em;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-block-end-width: 2px;
  border-radius: 5px;
  font-family: inherit;
}
.search__status {
  margin-block-start: 0.6rem;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
  min-block-size: 1.2em;
}

/* نتائج البحث الفوري */
.search__results {
  margin-block-start: 0.9rem;
  max-block-size: min(52vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-block-start: 1px solid rgba(255, 255, 255, 0.12);
  padding-block-start: 0.6rem;
}
.sresult {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  transition: background-color 0.15s;
}
.sresult:hover, .sresult.is-active { background: rgba(255, 255, 255, 0.12); }
.sresult.is-active { outline: 1px solid var(--yellow); }
.sresult__kind {
  padding: 0.15rem 0.6rem;
  border-radius: 20px;
  background: rgba(43, 92, 180, 0.18);
  color: var(--accent-on-dark);
  font-size: 11.5px;
  white-space: nowrap;
}
.sresult__title {
  font-size: var(--fs-xs);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sresult__meta { font-size: 11.5px; color: rgba(255, 255, 255, 0.5); white-space: nowrap; }
@media (max-width: 600px) {
  .sresult { grid-template-columns: auto 1fr; }
  .sresult__meta { display: none; }
}

/* ---------- الأزرار العائمة: زجاج بدل المسطّح ---------- */
.to-top {
  background: var(--glass-dark);
  /* القرص صار داكنًا، فالسهم المرسوم بـcurrentColor يجب أن يقلب معه —
     وإلا كان أسود على أسود (وأشدّ في البدائل المصمتة أدناه). */
  color: var(--accent-on-dark);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}
.to-top:hover { background: var(--yellow); color: var(--white); border-color: var(--yellow); }

/* ---------- اللايت بوكس: خلفية زجاجية وأزرار ألبوم زجاجية ---------- */
.lightbox {
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(calc(var(--glass-blur) * 0.7)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.7)) saturate(var(--glass-sat));
}
.lightbox__nav {
  background: var(--glass-light);
  border: 1px solid var(--white);
  color: var(--white);
  backdrop-filter: blur(var(--glass-blur)) brightness(var(--glass-bright));
  -webkit-backdrop-filter: blur(var(--glass-blur)) brightness(var(--glass-bright));
}
.lightbox__nav:hover { background: var(--yellow); border-color: var(--yellow); color: var(--white); }
.lightbox__count {
  background: var(--glass-dark);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* ---------- شريط أدوات المواقف يلتصق زجاجيًا ---------- */
.pos-toolbar {
  position: sticky;
  inset-block-start: 78px; /* ملتصقٌ بأسفل الترويسة الملتصقة (78px) بلا
      نافذةِ تسريبٍ كان المحتوى يظهر منها بين الترويسة والشريط. */
  z-index: 15;
  padding: 0.6rem;
  border-radius: 14px;
  /* عتامةٌ أعلى (0.92) كي يبقى النصُّ مقروءًا فوق الصور حين يمرّ خلفه
      المحتوى — لا لوحةٌ نصفُ شفّافةٍ تختلط بما تحتها. */
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--glass-edge-dark);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

/* ---------- رقاقات وأزرار صغيرة: زجاج فاتح لطيف ---------- */
.pos-tool, .pod__x {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

/* ==========================================================================
   احترام المستخدم فوق الزينة
   ========================================================================== */

/* متصفّح بلا backdrop-filter: تعبئة مصمتة تحفظ القراءة (لوحة زجاجية
   بلا ضباب تصير نصًّا فوق فوضى). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .search { background: rgba(0, 0, 0, 0.94); }
  .search__panel { background: #101010; }
  .to-top, .lightbox__count { background: rgba(0, 0, 0, 0.92); color: var(--accent-on-dark); }
  .lightbox { background: rgba(0, 0, 0, 0.94); }
  .lightbox__nav { background: rgba(255, 255, 255, 0.2); }
  .pos-toolbar { background: var(--paper); }
  .pos-tool, .pod__x { background: var(--paper); }
}

/* من طلب شفافية أقل من نظامه لا يُفرض عليه الضباب — الأسطح تصير مصمتة */
@media (prefers-reduced-transparency: reduce) {
  .search, .search__panel, .to-top, .lightbox, .lightbox__count, .lightbox__nav,
  .pos-toolbar, .pos-tool, .pod__x, .header.is-stuck, .social-rail {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .search { background: rgba(0, 0, 0, 0.96); }
  .search__panel { background: #101010; }
  .header.is-stuck { background: rgba(0, 0, 0, 0.94); }
  .social-rail { background: rgba(255, 255, 255, 0.22); }
  .pos-toolbar, .pos-tool, .pod__x { background: var(--paper); }
  .to-top, .lightbox__count { background: rgba(0, 0, 0, 0.92); color: var(--accent-on-dark); }
}

/* التباين العالي يكسر الزجاج عمدًا: الشفافية عدوّة التباين */
@media (prefers-contrast: more) {
  .search, .search__panel, .to-top, .lightbox, .lightbox__count, .lightbox__nav,
  .pos-toolbar, .pos-tool, .pod__x, .header.is-stuck {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .search, .search__panel { background: #000; }
  .header.is-stuck { background: #000; }
  .pos-toolbar, .pos-tool, .pod__x { background: #fff; border-color: #000; }
}

/* الورق لا يعرف الضباب */
@media print {
  .pos-toolbar { position: static; }
  * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* زرّ المسح الأصلي في حقل البحث يأتي أزرق من المتصفّح فوق لوحة سوداء —
   نقلبه أبيض خافتًا ليكون من اللوحة لا نشازًا فيها */
.search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  inline-size: 16px;
  block-size: 16px;
  cursor: pointer;
  background: currentColor;
  opacity: 0.55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.search__input::-webkit-search-cancel-button:hover { opacity: 1; }

/* ---------- الربط العكسي: مواقف تستند إلى هذا الخبر ---------- */
.article__cited {
  margin-block-start: clamp(1.5rem, 2.1vw, 40px);
  padding: clamp(1rem, 1.5vw, 28px);
  border: 1px solid var(--ink-faint);
  border-inline-start: 3px solid var(--yellow);
  border-radius: var(--radius-card, 10px);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}
.article__cited-title {
  margin: 0 0 0.75rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
}
.article__cited ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.article__cited-link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  color: var(--ink);
  text-decoration: none;
  font-size: var(--fs-xs);
  line-height: 1.6;
}
.article__cited-link:hover { color: var(--yellow-ink); }
.article__cited-axis {
  flex: none;
  padding: 0.1rem 0.55rem;
  border-radius: 20px;
  background: rgba(43, 92, 180, 0.22);
  color: var(--ink);
  font-size: 11.5px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .article__cited { background: var(--paper-alt); }
}
@media print { .article__cited { background: none; border-color: #ccc; } }

/* ---------- إصلاح تجاوز أفقي في صفحة المواقف على الهاتف ----------
   صفّ المحاور يتمرّر أفقيًا (flex-wrap: nowrap + overflow-x: auto)، لكن
   عنصر الشبكة الحاوي عرضه الأدنى `auto` بحكم المعيار، فيتمدّد ليسع
   المحتوى كلّه بدل أن يسمح للشريط بالتمرّر — فتتجاوز الصفحة عرض الشاشة.
   تصفير العرض الأدنى يعيد الاحتواء لأصحابه. */
.pos-layout { min-inline-size: 0; }
.pos-main, .pos-toolbar, .pos-toolbar > *, .pos-filter, .pos-search, .pos-tools {
  min-inline-size: 0;
}
.pos-search input { min-inline-size: 0; inline-size: 100%; }

/* الجذر الحقيقي للتجاوز: الشريط `flex-wrap: wrap` وقد صار عموديًا على
   الهاتف، فحاوية العمود اللافّة تحسب عرض «السطر» بعرض أعرض ابن (شريط
   المحاور غير اللافّ) وتمدّ إليه الجميع — لا إلى عرض الحاوية. سطر واحد
   يمنع اللفّ فيعود السطر واحدًا بعرض الشاشة، ويتمرّر شريط المحاور داخله
   كما صُمّم. */
@media (max-width: 700px) {
  .pos-toolbar { flex-wrap: nowrap; }
}

/* ==========================================================================
   جولة 22 — تصحيحات تباين ووصول من التدقيق
   ==========================================================================
   الأزرق الصلب لونُ تعبئة: النصُّ فوقه أبيض (6.2:1). فوق الورق الفاتح
   يُستعمل --yellow-ink (#1A4488 ≈ 9.4:1)، لا --yellow كنصٍّ صغير.

   جولة 39: صارت هذه القيمة رمزًا (--yellow-ink) في أعلى الملف، لأنها
   كانت مكتوبة هنا على خمسة محدِّدات وحدها بينما بقيت نصوصٌ صفراء أخرى
   على اللون الساقط — يمسكها الآن `npm run a11y`. */
.info-row__value a:hover,
.pod__vol:hover,
.pod__x:hover, .pod__x.is-on,
.pos-tool:hover, .pos-tool.is-done,
.pos__link:hover, .pos__link.is-done, .pos__link.is-on { color: var(--yellow-ink); }

/* درج التنقّل المغلق كان يبقى في ترتيب التبويب خارج الشاشة:
   ستة روابط يبتلعها التركيز بلا أن يراها أحد. */
@media (max-width: 1024px) {
  .nav { visibility: hidden; transition: transform 0.35s var(--ease), visibility 0.35s; }
  .nav.is-open { visibility: visible; }
}

/* هدف رابط التخطي يستقبل التركيز بلا إطار مرئي مزعج */
#main:focus { outline: none; }

/* زرّ إرسال مشغول: aria-disabled لا يغيّر المظهر تلقائيًا كما يفعل disabled */
.btn.is-busy { opacity: 0.65; cursor: progress; }

/* =============================================================
   جولة 23 — صفحة التواصل
   ============================================================= */

/* صفّ أفعال تحت كل بيان: خرائط، نسخ */
.info-row__value { display: block; }
.info-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.9rem;
  margin-block-start: 0.35rem;
}
.info-act {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 12.5px;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}
.info-act:hover, .info-act.is-done { color: var(--yellow-ink); }
.info-act.is-done > span::after { content: " ✓"; }

.info-card__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: clamp(1rem, 1.5vw, 1.75rem);
  padding-block-start: clamp(0.75rem, 1.2vw, 1.25rem);
  border-block-start: 1px solid var(--ink-faint);
}
.info-card__foot .btn { display: inline-flex; align-items: center; gap: 0.4rem; }

/* شريط المسودة المستعادة */
.form__draft {
  margin: 0 0 1rem;
  padding: 0.6rem 0.9rem;
  border-inline-start: 3px solid var(--yellow);
  border-radius: 8px;
  background: rgba(43, 92, 180, 0.12);
  font-size: var(--fs-xs);
  color: var(--ink);
}
.form__draft-clear {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--yellow-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* حالة «محفوظ للإرسال لاحقًا» — ليست خطأً ولا نجاحًا */
.form__status.is-warn { color: #7A5200; }

/* طباعة بطاقة التواصل وحدها */
body.printing-card .form,
body.printing-card .page-hero,
body.printing-card .header,
body.printing-card .footer { display: none !important; }
body.printing-card .contact__grid { display: block; }
@media print {
  .info-acts, .info-card__foot { display: none !important; }
  .info-card { border: 1px solid #ccc; box-shadow: none; }
}

/* =============================================================
   جولة 24 — صفحة «شاركنا رأيك»
   =============================================================
   اللوح يرسم هذه الصفحة لوحًا داكنًا واحدًا، فكل ما يُضاف هنا يعيش
   على خلفية داكنة: النصوص فاتحة والحدود شعرة بيضاء خافتة. */

/* رابط موقف القائد في الموضوع المختار */
.opinion__link {
  margin: -0.25rem 0 0.25rem;
  padding: 0.6rem 0.9rem;
  border-inline-start: 3px solid var(--yellow);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.opinion__link a {
  color: var(--accent-on-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* أدوات حقل النصّ: إملاء صوتي وحفظ نسخة */
.field__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-block-start: 0.4rem;
}
.field__tool {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.7);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: color 0.2s;
}
.field__tool:hover { color: var(--accent-on-dark); }
.field__tool.is-on { color: var(--accent-on-dark); }
/* نبضة أثناء الإملاء تُخبر أن الميكروفون يعمل فعلًا */
.field__tool.is-on svg { animation: mic-pulse 1.2s ease-in-out infinite; }
@keyframes mic-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .field__tool.is-on svg { animation: none; }
}

/* خانة «أودّ ردًّا» */
.check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-xs);
  cursor: pointer;
}
.check input {
  inline-size: 18px;
  block-size: 18px;
  accent-color: var(--yellow);
  cursor: pointer;
}
.check__hint {
  margin: 0.3rem 0 0;
  padding-inline-start: calc(18px + 0.55rem);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}
.reply-fields .form__grid { margin: 0; }

/* على خلفية فاتحة (لو استُعملت الأدوات في نموذج آخر) */
.contact-section .field__tool { color: var(--ink-soft); }
.contact-section .field__tool:hover { color: var(--yellow-ink); }

/* اللوح الداكن في «شاركنا رأيك»: العدّاد ورسائل الحقول تُقلَب فاتحة —
   كانت رمادية داكنة على أسود، أي غير مقروءة عمليًا. */
.opinion .field__count { color: rgba(255, 255, 255, 0.6); }
.opinion .field__count.is-low { color: #FFB4AB; }
.opinion .form__note { color: rgba(255, 255, 255, 0.75); }
.opinion .form__draft {
  background: rgba(43, 92, 180, 0.14);
  color: rgba(255, 255, 255, 0.9);
}
.opinion .form__draft-clear { color: var(--accent-on-dark); }
.opinion .form__status.is-warn { color: #FFD79A; }

/* =============================================================
   جولة 25 — ألبوم الصور: أدوات وشريط مصغّرات
   =============================================================
   كلّ ما يطفو فوق الصورة زجاج داكن من نظام الجولة 22 نفسه، فتبقى
   الصورة هي البطل ولا تنافسها لوحات مصمتة. */

.lightbox__tools {
  position: fixed;
  inset-block-start: clamp(0.75rem, 2vh, 1.5rem);
  inset-inline-start: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.lb-tool {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--glass-edge);
  border-radius: 30px;
  background: var(--glass-dark);
  color: rgba(255, 255, 255, 0.9);
  font: inherit;
  font-size: 12.5px;
  text-decoration: none;
  cursor: pointer;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  transition: background-color 0.2s, color 0.2s;
}
.lb-tool:hover, .lb-tool.is-on, .lb-tool.is-done {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--white);
}
.lb-tool.is-done > span::after { content: " ✓"; }

/* التسمية: عنوان الصورة وتاريخها بدل نصّ alt العامّ */
.lightbox__cap-title { display: block; font-weight: 500; }
.lightbox__cap-date {
  display: block;
  margin-block-start: 0.2rem;
  font-size: 12px;
  opacity: 0.7;
}

/* شريط المصغّرات */
.lightbox__strip {
  position: fixed;
  inset-block-end: clamp(0.5rem, 1.5vh, 1rem);
  inset-inline: 0;
  z-index: 3;
  display: flex;
  gap: 0.4rem;
  justify-content: flex-start;
  padding: 0.5rem clamp(0.75rem, 3vw, 2rem);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}
.lb-thumb {
  flex: none;
  inline-size: 74px;
  block-size: 50px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  background: none;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s, border-color 0.2s;
}
.lb-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.lb-thumb:hover { opacity: 0.85; }
.lb-thumb.is-current { opacity: 1; border-color: var(--yellow); }

/* على الهاتف: الأدوات صفّ واحد يتمرّر، والمصغّرات أصغر */
@media (max-width: 700px) {
  .lightbox__tools {
    inset-inline: clamp(0.5rem, 3vw, 1rem);
    flex-wrap: nowrap;
    overflow-x: auto;
    min-inline-size: 0;
  }
  .lb-tool { white-space: nowrap; }
  .lb-thumb { inline-size: 58px; block-size: 40px; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lb-tool { background: rgba(0, 0, 0, 0.9); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .lb-tool {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.92);
  }
}

/* --- تخطيط اللايت بوكس مع شريط المصغّرات -----------------------
   الشريط يسكن أسفل الشاشة، فكان العدّاد والتسمية يقعان تحته. حين
   يظهر الشريط تُرفع الطبقة كلّها بمقداره: الإطار يترك له مكانًا،
   والعدّاد يعلوه. */
/* الطبقة شبكة مركزية وارتفاع الصورة محسوب من --lb-h، فالحجز يكون في
   المصدر: حشوة سفلية للطبقة نفسها وارتفاع أقصى أقصر بالمقدار نفسه. */
.lightbox.has-strip {
  --lb-h: calc(100svh - 2 * var(--lb-pad-y) - 110px);
  padding-block-end: calc(var(--lb-pad-y) + 110px);
}
.lightbox.has-strip .lightbox__count { inset-block-end: 104px; }
.lightbox__strip {
  padding-block: 0.5rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
@media (max-width: 700px) {
  .lightbox.has-strip {
    --lb-h: calc(100svh - 2 * var(--lb-pad-y) - 92px);
    padding-block-end: calc(var(--lb-pad-y) + 92px);
  }
  .lightbox.has-strip .lightbox__count { inset-block-end: 88px; }
}

/* ==========================================================
   غرفة الصحافة وبيان الوصولية وصفحات الكلمات المفتاحية
   ========================================================== */

.press {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  max-inline-size: 62rem;
  margin-inline: auto;
}
.press__block {
  padding: clamp(1.25rem, 2.5vw, 2.25rem);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
.press__block--todo { background: var(--paper-alt); }
.press__title {
  font-size: clamp(1.25rem, 1.9vw, 1.9rem);
  margin-bottom: 0.75rem;
  padding-inline-start: 0.9rem;
  border-inline-start: 4px solid var(--yellow);
}
.press__sub { font-size: var(--fs-sm); font-weight: 700; color: var(--black); }
.press__note { font-size: var(--fs-xs); color: var(--ink-soft); margin-bottom: 1.1rem; line-height: 1.9; }
.press__text { font-size: var(--fs-sm); line-height: 2; color: var(--ink); }
.press__meta { margin-top: 0.8rem; font-size: var(--fs-xs); }
.press__meta a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.press__meta a:hover { color: var(--black); text-decoration-color: var(--yellow); }

.press__quotebox {
  margin-bottom: 1.1rem;
  padding: clamp(0.9rem, 1.6vw, 1.35rem);
  background: var(--paper-alt);
  border-radius: var(--radius-card);
}
.press__quotehead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.btn--sm { padding: 0.35rem 0.9rem; font-size: 0.78rem; }

.press__dl { display: grid; gap: 0.5rem; margin-top: 0.6rem; }
.press__dl > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding-block: 0.45rem;
  border-block-end: 1px solid var(--ink-faint);
  font-size: var(--fs-xs);
}
.press__dl dt { min-inline-size: 9rem; font-weight: 700; color: var(--ink-soft); }
.press__dl dd { color: var(--ink); }

.press__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
.press__shot {
  background: var(--paper-alt);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.press__shot img { inline-size: 100%; block-size: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.press__shot figcaption {
  display: grid;
  gap: 0.2rem;
  padding: 0.7rem 0.85rem 0.9rem;
  font-size: 0.78rem;
}
.press__shot-name { font-weight: 700; color: var(--black); }
.press__shot-dim { color: var(--ink-soft); }
.press__dl-link {
  justify-self: start;
  margin-top: 0.35rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.press__dl-link:hover { color: var(--black); text-decoration-color: var(--yellow); }

.press__contact { display: grid; gap: 0.6rem; font-size: var(--fs-xs); }
.press__contact li { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: baseline; }
.press__label { min-inline-size: 10rem; font-weight: 700; color: var(--ink-soft); }
.press__hint { color: var(--ink-soft); }
/* overflow-wrap: البريد اللاتيني كلمةٌ واحدة طويلة لا تنكسر — كانت
   تفيض المستندَ على 320px (قياس tools/mobile.js). */
.press__contact a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.press__contact a:hover { color: var(--black); text-decoration-color: var(--yellow); }
.press__acts { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.2rem; }

.press__todo { display: grid; gap: 0.7rem; font-size: var(--fs-xs); line-height: 1.9; list-style: none; }
.press__todo li {
  padding-inline-start: 1.5rem;
  position: relative;
  color: var(--ink);
}
.press__todo li::before {
  content: "—";
  position: absolute;
  inset-inline-start: 0;
  color: var(--ink-soft);
}
.press__todo--yes li::before { content: "✓"; color: var(--yellow-ink); font-weight: 700; }

/* سحابة الكلمات المفتاحية */
.tagcloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}
.tagcloud--year { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.tagcloud--near {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.25rem, 2vw, 1.75rem);
  border-top: 1px solid var(--hairline);
}
.tagcloud__title {
  inline-size: 100%;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}
.tagcloud .mchip { text-decoration: none; }
.tagcloud__all { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* روابط الخدمة في التذييل */
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  justify-content: center;
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--ink-faint);
  font-size: var(--fs-xs);
}
/* التذييل فاتح (--paper)، فالروابط بلون الحبر لا بالأبيض */
.footer__links a { color: var(--ink-soft); transition: color 0.2s; }
.footer__links a:hover, .footer__links a:focus-visible {
  color: var(--black);
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-underline-offset: 4px;
}

/* زرّ «الشبح» مصمَّم لخلفية داكنة (نصّه أبيض). في الصفحات الفاتحة —
   غرفة الصحافة، بيان الوصولية، صفحات الكلمات — يُقلب إلى حبر أسود
   وإلا اختفى نصّه تمامًا على الورق الأبيض. */
/* القاعدة العامة: أيُّ زرٍّ شبحيٍّ داخل قسمٍ فاتح (‎.section غير on-dark)‎
   يُقلب حبرُه أسود — فلا يختفي نصُّه على الورق ولو نُسي تخصيصُه.
   المرسومة بيضاء للهيرو (‎.hero‎) وترويسات الصفحات (‎.page-hero‎)‎
   وأقسام on-dark تبقى بيضاء لأنها ليست ‎.section‎ فاتحة. */
.section:not(.on-dark) .btn--ghost,
.press .btn--ghost,
.tagcloud__all .btn--ghost,
.mtool__more .btn--ghost { color: var(--black); }
.section:not(.on-dark) .btn--ghost:hover,
.section:not(.on-dark) .btn--ghost:focus-visible,
.press .btn--ghost:hover,
.press .btn--ghost:focus-visible,
.tagcloud__all .btn--ghost:hover,
.tagcloud__all .btn--ghost:focus-visible,
.mtool__more .btn--ghost:hover,
.mtool__more .btn--ghost:focus-visible {
  background: var(--yellow);
  color: var(--white);
  text-shadow: none;
}

/* الأرشيف الزمني */
.yearlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
.yearlist__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--hover-dur) var(--hover-ease), transform var(--hover-dur) var(--hover-ease);
}
.yearlist__item:hover,
.yearlist__item:focus-visible { border-color: var(--yellow); transform: translateY(-2px); }
.yearlist__y { font-size: clamp(1.6rem, 2.4vw, 2.4rem); font-weight: 700; color: var(--black); }
.yearlist__n { font-size: var(--fs-xs); color: var(--ink-soft); }

.archive__month {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-block: clamp(2rem, 3.5vw, 3rem) clamp(1rem, 2vw, 1.5rem);
  padding-inline-start: 0.9rem;
  font-size: clamp(1.15rem, 1.7vw, 1.6rem);
  border-inline-start: 4px solid var(--yellow);
}
.archive__month:first-child { margin-block-start: 0; }
.archive__n {
  font-size: 0.7em;
  font-weight: 700;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.archive__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.archive__nav .btn--ghost { color: var(--black); }
.archive__nav .btn--ghost:hover,
.archive__nav .btn--ghost:focus-visible { background: var(--yellow); color: var(--white); text-shadow: none; }

/* النشرة البريدية في التذييل — صفّ واحد يحترم خفّة التذييل في التصميم */
.subscribe {
  display: grid;
  gap: 0.7rem;
  max-inline-size: 44rem;
  margin: clamp(1.25rem, 2.5vw, 2rem) auto 0;
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--ink-faint);
  text-align: center;
}
.subscribe__title { font-size: var(--fs-sm); font-weight: 700; color: var(--black); }
.subscribe__sub { font-size: var(--fs-xs); color: var(--ink-soft); margin-top: 0.2rem; }
.subscribe__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: flex-start;
  justify-content: center;
}
.subscribe__row .field { flex: 1 1 16rem; min-inline-size: 0; text-align: start; margin: 0; }
.subscribe__consent { text-align: start; font-size: var(--fs-xs); }
.subscribe__consent .check { justify-content: center; }
.subscribe .form__status { margin-top: 0.2rem; }
@media (max-width: 560px) {
  .subscribe__row .field { flex-basis: 100%; }
  .subscribe__row .btn { inline-size: 100%; }
}

/* النصّ المفرّغ تحت المقطع أو الحلقة */
.transcript {
  margin-top: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 0.7rem;
  font-size: var(--fs-xs);
}
.pod .transcript { border-top-color: var(--ink-faint); }
.transcript summary {
  cursor: pointer;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  list-style: none;
}
.pod .transcript summary { color: var(--ink); }
.transcript summary::-webkit-details-marker { display: none; }
.transcript summary::before { content: "▾ "; display: inline-block; transition: transform 0.2s; }
.transcript[open] summary::before { content: "▴ "; }
.transcript summary:hover, .transcript summary:focus-visible { color: var(--accent-on-dark); }
.pod .transcript summary:hover, .pod .transcript summary:focus-visible { color: var(--black); }
.transcript__body {
  max-block-size: 22rem;
  overflow-y: auto;
  margin-top: 0.6rem;
  padding-inline-end: 0.4rem;
  line-height: 2;
  color: rgba(255, 255, 255, 0.75);
}
.pod .transcript__body { color: var(--ink); }
.transcript__line { display: flex; gap: 0.6rem; margin-bottom: 0.5rem; }
.transcript__at {
  flex: none;
  align-self: flex-start;
  padding: 0.1rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--white);
  background: var(--yellow);
  border-radius: 999px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.transcript__at:hover, .transcript__at:focus-visible { background: var(--yellow-dark); }

/* مربّع الموافقة في التذييل: `.check` مصمَّم للوح «شاركنا رأيك» الداكن
   (نصّه أبيض)، وقد اختفى نصّه على ورق التذييل الأبيض. */
.subscribe .check { color: var(--ink); }
.subscribe .check a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.subscribe .check a:hover { color: var(--black); text-decoration-color: var(--yellow); }
.subscribe .field__error { color: #B00020; font-size: 0.78rem; margin-top: 0.25rem; }
.subscribe .form__status { font-size: var(--fs-xs); }

/* الرقم المرجعي في صفحة الحالة — يُصيَّر في الخادم فيعمل بلا جافاسكربت */
.err__ref {
  margin-block-start: clamp(1.25rem, 2.5vw, 2rem);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.62);
}
.err__ref .lat {
  padding: 0.15rem 0.5rem;
  font-weight: 700;
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  user-select: all;               /* نقرة واحدة تحدّده كاملًا للنسخ */
}
.err__ref-hint { display: block; margin-block-start: 0.35rem; opacity: 0.75; }
@media (prefers-contrast: more) {
  .err__ref { color: var(--white); }
  .err__ref .lat { background: #000; border-color: var(--white); }
}
@media print { .err__ref-hint { display: none; } }

/* ==========================================================
   المناصب والعضويات — صفحة السيرة
   ========================================================== */

.offices { display: grid; gap: 1rem; max-inline-size: 62rem; margin-inline: auto; list-style: none; padding: 0; }
.office {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: clamp(0.9rem, 2vw, 1.75rem);
  align-items: start;
  padding: clamp(1.1rem, 2.2vw, 1.75rem);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
.office__when {
  justify-self: center;
  padding: 0.3rem 0.7rem;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--white);
  background: var(--yellow);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
/* بلا تاريخ: الشرطة تبقى ظاهرة لكنها لا تتنكّر في هيئة سنة */
.office--open .office__when { background: transparent; border: 1px dashed var(--ink-faint); color: var(--ink-soft); }
.office__title { font-size: var(--fs-sm); font-weight: 700; color: var(--black); line-height: 1.6; }
.office__note { margin-top: 0.45rem; font-size: var(--fs-xs); line-height: 1.95; color: var(--ink); }
.office__src { margin-top: 0.55rem; font-size: 0.78rem; color: var(--ink-soft); }
.office__src a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.office__src a:hover, .office__src a:focus-visible { color: var(--black); text-decoration-color: var(--yellow); }
.offices__note {
  max-inline-size: 62rem;
  margin: clamp(1rem, 2vw, 1.5rem) auto 0;
  font-size: var(--fs-xs);
  line-height: 1.95;
  color: var(--ink-soft);
}
@media (max-width: 560px) {
  .office { grid-template-columns: 1fr; gap: 0.6rem; }
  .office__when { justify-self: start; }
}

/* سطر المصدر تحت محطة زمنية، والمحطة المفتوحة في آخر الخط */
.tl-item__src { margin-top: 0.9rem; font-size: 0.78rem; color: var(--ink-soft); }
.tl-item__src a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.tl-item__src a:hover, .tl-item__src a:focus-visible { color: var(--black); text-decoration-color: var(--yellow); }
.tl-item--open .tl-item__card {
  background: var(--paper-alt);
  border: 1px dashed var(--ink-faint);
  box-shadow: none;
}
.tl-item--open .tl-item__year { color: var(--ink-soft); }

.tl-item--record .tl-item__card {
  background: var(--paper-alt);
  border-inline-start: 4px solid var(--yellow);
  box-shadow: none;
}
.tl-item--record .tl-item__year {
  background: transparent;
  border: 1px solid var(--yellow);
  color: var(--black);
}
.tl-item__links {
  margin-top: 0.85rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}
.tl-item__links a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tl-item__links a:hover,
.tl-item__links a:focus-visible { color: var(--black); text-decoration-color: var(--yellow); }

/* سطر مرجع الأرقام تحت «من أجلهم نعمل» */
.stats__note a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.stats__note a:hover { color: var(--black); text-decoration-color: var(--yellow); }
.stats__note {
  max-inline-size: 52rem;
  margin: clamp(1.1rem, 2.2vw, 1.75rem) auto 0;
  font-size: var(--fs-xs);
  line-height: 1.95;
  color: var(--ink-soft);
  text-align: center;
}

/* ==========================================================
   صفحة تيار الإصلاح الديمقراطي وصفحة المشاريع والبرامج
   ==========================================================
   الصفحتان تستعملان لبنات قائمة: .press__todo لقوائم النقص،
   و.news-grid و.card للمواد، و.mchip للرقائق. الجديد هنا هو
   الغلاف وحده وما لا مقابل له في الصفحات السابقة. */

/* minmax(0,1fr): الشبكة العمودية الواحدة أيضًا مسارُها الضمني أرضيته
   min-content — صورة tay-lead العريضة كانت توسّعه فوق 320 فتفيض
   الصفحة كلها أفقيًّا على الهواتف الضيّقة (قياس tools/mobile.js). */
.tay, .proj { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem); max-inline-size: 68rem; margin-inline: auto; }

/* عرضُ هذا الغلاف يُنقض في آخر الملف — انظر «الصفحات المستندية على
   عرض الموقع». */

.tay-block, .proj-block {
  padding: clamp(1.25rem, 2.5vw, 2.25rem);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
.tay-block--todo, .proj-block--todo { background: var(--paper-alt); }
.tay-block__title, .proj-block__title, .proj-domain__title {
  font-size: clamp(1.25rem, 1.9vw, 1.9rem);
  margin-bottom: 0.75rem;
  padding-inline-start: 0.9rem;
  border-inline-start: 4px solid var(--yellow);
}
.tay-block__note, .proj-block__note { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.95; margin-bottom: 1.1rem; }
.proj-block__text { font-size: var(--fs-sm); line-height: 2; color: var(--ink); }
.tay-block__src {
  margin-top: 1rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.tay-block__src a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.tay-block__src a:hover, .tay-block__src a:focus-visible { color: var(--black); text-decoration-color: var(--yellow); }
.tay-block__more, .proj-block__more { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.4rem; }
/* .btn--ghost مرسوم لخلفية داكنة (نصّه أبيض) — هاتان الصفحتان على ورق */
.tay-block__more .btn--ghost, .proj-block__more .btn--ghost { color: var(--black); }
.tay-block__more .btn--ghost:hover, .proj-block__more .btn--ghost:hover { color: var(--white); }

/* صدر صفحة التيار: المقطع ونصّ المؤسّس */
.tay-lead { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 2.5vw, 2.5rem); align-items: center; }
.tay-lead__media { position: relative; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-sm); }
.tay-lead__media img { inline-size: 100%; block-size: auto; display: block; }
.tay-lead__quote {
  font-size: var(--fs-body);
  line-height: 1.9;
  color: var(--ink);
  padding-inline-start: 1rem;
  border-inline-start: 3px solid var(--yellow);
}
.tay-lead__cite { margin-top: 0.7rem; font-weight: 700; color: var(--black); }
@media (max-width: 900px) { .tay-lead { grid-template-columns: 1fr; } }

/* بطاقتان جنبًا إلى جنب: الرسالة والرؤية، وما نؤمن به */
.tay-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.tay-belief { padding: clamp(1rem, 2vw, 1.5rem); background: var(--paper-alt); border-radius: var(--radius-card); }
.tay-belief__title { font-size: var(--fs-sm); font-weight: 700; color: var(--black); margin-bottom: 0.5rem; }
.tay-belief__text { font-size: var(--fs-xs); line-height: 1.95; color: var(--ink); }
.tay-belief .belief__more { margin-top: 1rem; min-width: 0; min-height: 44px; font-size: var(--fs-xs); }

/* مواقف محور الإصلاح */
.tay-poslist { display: grid; gap: 1rem; list-style: none; padding: 0; counter-reset: tp; }
.tay-pos { padding: clamp(1rem, 2vw, 1.5rem); background: var(--paper-alt); border-radius: var(--radius-card); }
.tay-pos__title { font-size: var(--fs-sm); font-weight: 700; color: var(--black); }
.tay-pos__title::before { counter-increment: tp; content: counter(tp, decimal-leading-zero) " "; color: var(--yellow-ink); }
.tay-pos__quote { margin-top: 0.6rem; font-size: var(--fs-xs); line-height: 1.95; color: var(--ink); padding-inline-start: 0.8rem; border-inline-start: 3px solid var(--yellow); }
.tay-pos__ctx { margin-top: 0.6rem; font-size: var(--fs-xs); line-height: 1.95; color: var(--ink-soft); }
.tay-pos__src { margin-top: 0.6rem; font-size: 0.78rem; color: var(--ink-soft); }
.tay-pos__src a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.tay-pos__src a:hover, .tay-pos__src a:focus-visible { color: var(--black); text-decoration-color: var(--yellow); }

/* سجلّ المشاريع */
.proj-block__warn {
  margin-top: 0.9rem;
  padding: 0.8rem 1rem;
  font-size: var(--fs-xs);
  line-height: 1.95;
  color: var(--ink);
  background: var(--paper-alt);
  border-inline-start: 4px solid var(--yellow);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}
.proj-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; }
.proj-nav .mchip, .proj-parties .mchip { text-decoration: none; }
.proj-domain__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.proj-domain__title { margin-bottom: 0; }
.proj-domain__count { font-size: var(--fs-xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.proj-parties { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; }

/* ==========================================================
   السجلّ الموثّق — مادة من خارج الموقع بمراجعها
   ==========================================================
   الفرق البصري عن بقيّة الصفحات مقصود: هذه المادة ليست من
   المكتب، فحاملها بطاقةٌ بخطّ جانبي وقائمةُ مراجع ظاهرة لا
   مطويّة. المرجع جزء من المحتوى لا حاشية. */

.rec-page { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); max-inline-size: 66rem; margin-inline: auto; }

.rec-lead {
  padding: clamp(1.25rem, 2.5vw, 2.25rem);
  background: var(--paper-alt);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
}
.rec-lead__text { font-size: var(--fs-sm); line-height: 2; color: var(--ink); }
.rec-lead__text + .rec-lead__text { margin-top: 0.9rem; }
.rec-lead__text a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.rec-lead__text a:hover { color: var(--black); text-decoration-color: var(--yellow); }
.rec-lead__meta { margin-top: 1rem; font-size: var(--fs-xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.rec-sec__title {
  font-size: clamp(1.25rem, 1.9vw, 1.9rem);
  padding-inline-start: 0.9rem;
  border-inline-start: 4px solid var(--yellow);
}
.rec-sec__note { margin-top: 0.5rem; font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.9; }
.rec-sec__head { margin-bottom: clamp(1rem, 2vw, 1.5rem); }

.rec-list { display: grid; gap: 1rem; list-style: none; padding: 0; }
.rec {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: clamp(0.9rem, 2vw, 1.75rem);
  align-items: start;
  padding: clamp(1.1rem, 2.2vw, 1.75rem);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 6rem;
}
.rec:target {
  border-color: var(--yellow);
  background: var(--paper-alt);
}
.rec__when {
  justify-self: center;
  padding: 0.3rem 0.7rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--white);
  background: var(--yellow);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.rec__when--none { background: transparent; border: 1px dashed var(--ink-faint); color: var(--ink-soft); }
.rec__title { font-size: var(--fs-sm); font-weight: 700; line-height: 1.7; color: var(--black); }
.rec__text { margin-top: 0.45rem; font-size: var(--fs-xs); line-height: 1.95; color: var(--ink); }
.rec__quote {
  margin-top: 0.6rem;
  padding-inline-start: 0.8rem;
  border-inline-start: 3px solid var(--yellow);
  font-size: var(--fs-xs);
  line-height: 1.95;
  color: var(--ink);
}
.rec__note { margin-top: 0.5rem; font-size: 0.78rem; line-height: 1.9; color: var(--ink-soft); }
/* ما رآه الناظر (نُظر فيه): سطرٌ كامل تحت مرجعه لا رقعةُ وسم —
   نصُّه جملةٌ («لا تذكر 12,500: تقول 17,000») والوسمُ يبترها. */
/* النسخة المحفوظة — وصلةٌ ثانوية بجوار المرجع الحيّ، لا تنافسه */
.rec__archive {
  margin-inline-start: 0.55rem;
  font-size: 0.74rem;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rec__archive:hover { color: var(--ink); }

.rec__seen {
  display: block;
  margin-top: 0.3rem;
  padding-inline-start: 0.8rem;
  border-inline-start: 2px solid var(--ink-faint);
  font-size: 0.78rem; /* مقاسُ rec__note نفسه — 0.74 كان دون أرضية الـ12px التي يرقبها فحص الجوّال */
  line-height: 1.9;
  color: var(--ink-soft);
}
/* ما يقوله المرجع: وسمٌ صغير قبل اسم الجهة. المتّفقُ باهتٌ لأنه
   المتوقَّع، والمخالفُ مؤطَّرٌ لأنه الخبر — وهو ما يجب أن تقع عليه
   العين. ولا لونَ وحده يحمل المعنى: العبارة نفسها تختلف
   («تذكر» / «تذكر بدلها»). */
.rec__says {
  display: inline-block;
  margin-inline-end: 0.45rem;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--ink-soft);
  background: rgba(0, 0, 0, 0.05);
  vertical-align: 0.06em;
}
.rec__says--other {
  color: var(--white);
  background: var(--yellow);
}

/* الجهة المُصدِرة: سطرٌ للوثائق وحدها — الاسم بارزٌ والتسمية باهتة،
   لأن المقروء هو مَن أصدر لا كلمة «الجهة». */
.rec__auth { margin-top: 0.45rem; font-size: 0.78rem; color: var(--ink-soft); }
.rec__auth span { font-weight: 700; color: var(--ink); }
.rec__srclabel { margin-top: 0.8rem; font-size: 0.72rem; font-weight: 700; color: var(--ink-soft); }
.rec__src { margin-top: 0.3rem; display: grid; gap: 0.3rem; list-style: none; padding: 0; }
.rec__src a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.78rem;
  line-height: 1.8;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--ink-faint);
}
.rec__src a:hover, .rec__src a:focus-visible { color: var(--black); text-decoration-color: var(--yellow); }
.rec__out { flex: none; opacity: 0.55; align-self: center; }
@media (max-width: 620px) {
  .rec { grid-template-columns: 1fr; gap: 0.6rem; }
  .rec__when { justify-self: start; }
}

/* ==========================================================================
   الجوّال واللمس — أهداف تُصاب بالإبهام وخطوط تُقرأ بلا تحديق
   ==========================================================================
   القياس (فحص 390px عبر بروتوكول DevTools على الصفحات السبع عشرة) لم
   يجد فيضًا أفقيًّا واحدًا — لكنه عدّ عشرات الأهداف دون 44px وخطوطًا
   نزلت إلى 6.4px. المرجع 44×44 (WCAG 2.5.5 AAA — وأصابع الناس لا
   تعرف مستويات المطابقة)، مع استثناء الروابط الجارية داخل النصّ كما
   يستثنيها المعيار نفسه.

   الشرطان معًا مقصودان: (pointer: coarse) يصيب كل شاشة لمس بأي عرض،
   و(max-width: 700px) يصيب الجوّال حتى لو زعمت البيئة مؤشّرًا دقيقًا
   (متصفّحات سطح المكتب المضيّقة، وأدوات الفحص). */
@media (pointer: coarse), (max-width: 700px) {

  /* أيقونات الحسابات: كانت 28px — أكبر مساحةً، بلا تغيير بصري صاخب */
  .social,
  .footer--slim .social,
  .socials--hero .social {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
  }

  /* الرقائق (وسوم، مرشّحات): ارتفاع لمسٍ كامل */
  .mchip { min-height: 44px; }

  /* قوائم نتائج البحث المخدوم */
  .search-hits a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* مسار التصفّح وروابط البطاقات وأدوات القراءة والنماذج */
  .crumbs a,
  .card__link,
  .info-act,
  .field__tool,
  .tool,
  .press__dl-link,
  .article__tools button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* روابط التذييل قائمةُ تنقّلٍ لا نصًّا جاريًا — تباعد يليق بإصبع */
  .footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .media-tab,
  .vcard__link,
  .office a,
  .tl-item__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* وسم الخبر وكلماته المفتاحية وأزرار مشاركته وحجم نصّه */
  .article__tag,
  .article__kw,
  .byline__unapproved {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .share__btn {
    min-width: 44px;
    min-height: 44px;
  }
  .article__tools button { min-width: 44px; justify-content: center; }

  /* روابط المصادر تحت المحطات والمقتطفات، وروابط غرفة الصحافة،
     وبيانات الاتصال اللاتينية (هاتف، بريد، حسابات) — أسطرٌ قائمة
     بذاتها لا نصّ جارٍ حولها */
  .office__src a,
  .tl-item__src a,
  .press__meta a,
  .press__contacts a.lat,
  .press__block li > a.lat,
  .info-row__value a,
  .rec__src a,
  .pos-index a,
  .pos-filter__btn,
  .pos-tool,
  .pos__chip,
  .pos__link,
  .pos__source a,
  .article__cited-link,
  .aside__rss {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* رابط النزول في الافتتاح كان 33px عرضًا */
  .hero__scroll { min-width: 44px; justify-items: center; }

  /* شارة التشغيل فوق المصغّرات */
  .play-badge { min-width: 44px; min-height: 44px; }

  /* ------ الخطوط المجهرية: أرضية 12px لكل نصٍّ يحمل معلومة ------
     الاسم اللاتيني تحت الشعار زخرفةٌ مرافقة لكنه نصٌّ يُقرأ:
     كان 8px في الترويسة و6.4px في التذييل. */
  .brand__wordmark { font-size: 0.75rem; }
  .footer__wordmark { font-size: 0.75rem; letter-spacing: 0.4em; text-indent: 0.4em; }
  .stat__src,
  .tweet__meta,
  .tweet__meta .lat,
  .tweet__likes,
  .byline__unapproved,
  .article__cited-axis,
  .rec__srclabel {
    font-size: 0.75rem;
  }
}

/* --- إعادة التدفّق عند 320px (WCAG 1.4.10) --------------------------------
   الترويسة كانت تفيض على الهواتف الضيّقة: .brand لا تنكمش وداخلها
   الاسم اللاتيني بعرض 199px (سطرٌ واحد بتباعد 0.34em)، ومعها أدوات
   الترويسة 160px — حدُّها الأدنى معًا ~410px. تحت 375px يُخفى الاسم
   اللاتيني — الشعارُ نفسه يحمل الاسم، وaria-label على الرابط باقٍ،
   فلا يفقد قارئ الشاشة شيئًا — ويصغر الشعار وتضيق الفجوات. */
@media (max-width: 374px) {
  .brand__wordmark { display: none; }
  .brand__mark { height: 34px; }
  .header__inner { gap: 0.75rem; }
  .header__tools { gap: 0.5rem; }
  .footer__wordmark { letter-spacing: 0.18em; text-indent: 0.18em; }
  /* أرقام العدّادات: «15,500,000» بخط العرض الكبير أعرض من عمودها
     على 320px فتدفع المستند — عمود واحد وخطّ أهدأ. */
  .stats__grid { grid-template-columns: minmax(0, 1fr); }
  .stat__num { font-size: 1.9rem; }
  .stat__src { overflow-wrap: anywhere; }
}

/* ==========================================================
   الصفحات المستندية على عرض الموقع
   ==========================================================
   خمسُ صفحاتٍ أُضيفت بعد التصميم الأصلي — التيار والمشاريع
   والسجلّ الموثّق وغرفة الصحافة وبيان الوصولية والخصوصية —
   وضعت لأغلفتها سقوفًا خاصّة (62rem و66rem و68rem) بينما بقيّة
   الموقع يجري على .container أي 1640px. فكانت تبدو صفحاتٍ
   مستعارةً من موقعٍ آخر: هامشان فارغان عريضان وعمودٌ نحيل
   بينهما، على الشاشة نفسها التي تملؤها الرئيسيةُ والمواقف.

   الغلافُ يتّسع هنا إلى .container. **والعرضُ وحده لا يكفي**:
   سطرُ نثرٍ عربيّ بعرض 1640px لا يُقرأ — تقفز العينُ سطرًا عند
   العودة إلى أوّل السطر التالي. فالقاعدة شقّان لا شقّ واحد:

     ١) الغلافُ يملأ العمود، فيرى القارئ مادةً أكثر في الشاشة.
     ٢) وما بداخله يبقى محكومًا: الفقرةُ بمقاسٍ قارئ (70ch)،
        والقوائمُ الطويلة تتحوّل أعمدةً تملأ المتاح بدل سطرٍ
        واحدٍ ممدود.

   أي: اتّساعُ الغلاف زيادةُ مادةٍ في الشاشة، لا زيادةُ طولِ
   السطر. وكلّ أرضيةِ مسارٍ هنا مكتوبة min(Xrem, 100%) لا Xrem:
   الأرضيةُ المطلقة تفيض الشاشةَ التي هي أضيق منها — وقع فعلًا
   بـ24rem على شاشة 320px، وقاسته tools/mobile.js في التشغيلة
   التالية مباشرة.
   ========================================================== */

.tay,
.proj,
.rec-page,
.press { max-inline-size: none; }

/* وقائمةُ المناصب في صفحة السيرة كانت على السقف نفسه (62rem = 992px
   مقيسةً داخل عمود 1640) — خمسُ بطاقاتٍ في طابورٍ نحيل وسطَ صفحةٍ
   عريضة. تتحوّل أعمدةً على القاعدة نفسها، وتبقى الملاحظةُ الختامية
   بمقاس القراءة لأنها نثرٌ لا بطاقات. */
.offices {
  max-inline-size: none;
  grid-template-columns: repeat(auto-fit, minmax(min(34rem, 100%), 1fr));
  align-items: start;
}
.offices__note { max-inline-size: 70ch; margin-inline: 0; }

/* --- مقاسُ القراءة: كلّ ما هو نثرٌ متّصل --- */
.tay .tay-block__note,
.tay .tay-block__src,
.tay .tay-lead__body > p,
.proj .proj-block__text,
.proj .proj-block__note,
.rec-page .rec-lead__text,
.rec-page .rec-lead__meta,
.rec-page .rec-sec__note,
.press .press__text,
.press .press__note,
.press .press__hint,
.proj .proj-block__warn { max-inline-size: 70ch; }

/* --- القوائمُ الطويلة أعمدةً --- */
.tay .tay-poslist { grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); align-items: start; }
.rec-page .rec-list { grid-template-columns: repeat(auto-fit, minmax(min(34rem, 100%), 1fr)); align-items: start; }
/* بأعمدة الشبكة لا بـ`columns`: هاتان القائمتان `display: grid`،
   وحاويةُ الشبكة **تتجاهل** خصائص الأعمدة تجاهلًا تامًّا. وقد كتبتُ
   `columns: 2` أوّلًا وظننتُها عملت، فقاس المسبارُ بندًا واحدًا
   بعرض 1526px — أي أن القاعدة لم تُطبَّق أصلًا. «برهانٌ يمرّ للسبب
   الخطأ ليس برهانًا»، والعينُ المجرّدة لا تكشف قاعدةً صامتة. */
.press .press__todo,
.press .press__contact,
.tay .press__todo {
  grid-template-columns: repeat(auto-fit, minmax(min(28rem, 100%), 1fr));
  column-gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.press .press__dl { grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); }

/* --- اللوحُ الصدريّ للتيار: الصورةُ لا تتضخّم بلا داعٍ --- */
@media (min-width: 1100px) { .tay .tay-lead { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* auto-fit مع min(…, 100%) يعود عمودًا واحدًا وحده دون هذا الحدّ،
   فلا حاجة إلى نقضٍ صريح — والقاعدةُ التي لا تفعل شيئًا تُحذف. */

/* ==========================================================
   الطبقاتُ الزجاجية تحت تفضيلَي الشفافية والتباين — قاعدةٌ شاملة
   ==========================================================
   في بيان الوصولية وعدٌ غيرُ مقيَّد: «تقليل الشفافية أو رفع التباين
   **يستبدل الطبقات الزجاجية** بخلفيات صلبة». وكان يُنفَّذ بقائمتَي
   محدِّداتٍ مكتوبتين بيد — فانحرفتا كما تنحرف كلُّ قائمةٍ يدويّة:

     • ‎.social-rail مذكورةٌ في قائمة الشفافية و**ساقطةٌ من قائمة
       التباين** — فتبقى زجاجًا لمن رفع التباين، وهو أحوجُ الناس
       إلى ضدّه.
     • و‎.search-box و‎.icon-btn و‎.hero__dot و‎.video-card__dur
       ساقطةٌ من القائمتين معًا — تبقى blur(30px) في الحالين.

   قِيست الأربعُ في متصفّحٍ حقيقي بمحاكاة التفضيلين (وتُثبت
   matchMedia أن المحاكاة تصل الصفحة، فالقياسُ قياسُها لا قياسُ
   غيرها). والعلاجُ ليس إطالةَ القائمتين — بل رفعُ الحاجة إليهما:
   قاعدةٌ شاملة تُطفئ الضبابَ عن **كلّ** عنصر، فينضمّ إليها كلُّ
   زجاجٍ يُضاف مستقبلًا بلا أن يذكره أحد. والقواعدُ الخاصّة أعلاه
   تبقى لأنها تعطي كلَّ سطحٍ لونَه الصلبَ المناسب، لا لتُطفئ ضبابًا.
   ========================================================== */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  *, *::before, *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* وإطفاءُ الضباب وحده لا يكفي: سطحٌ خلفيتُه شفّافة كان يعتمد على
     الضباب ليُقرأ فوق صورة الصدر — فبلا الاثنين يذوب في الصورة.
     الألوانُ من اللوحة نفسها التي تستعملها القواعدُ أعلاه: الأسطحُ
     الداكنة rgba(0,0,0,.92) كما ‎.to-top و‎.lightbox__count. */
  .icon-btn,
  .search-box,
  .video-card__dur { background: rgba(0, 0, 0, 0.92); }
  .social-rail { background: rgba(0, 0, 0, 0.92); }
  /* نقطةُ الشريحة صغيرة، وحدُّها الأبيضُ هو ما يُرى — تُملأ داكنةً
     ليبقى الحدُّ ظاهرًا، وتبقى النشطةُ بيضاءَ مصمتة كما صُمّمت. */
  .hero__dot { background: rgba(0, 0, 0, 0.92); }
  .hero__dot.is-active { background: var(--white); }
}

/* ==========================================================
   وضعُ الألوان القسرية — مؤشّرُ التركيز يبقى ظاهرًا
   ==========================================================
   في بيان الوصولية وعدٌ مطلق: «مؤشّر التركيز **ظاهر دائمًا ولا
   يُخفى**». وفي وضع الألوان القسرية (تباين ويندوز العالي) يُسقِط
   المتصفّحُ box-shadow ويفرض لونًا واحدًا على كلّ حدٍّ — فيسقط
   نصفُ حلقتنا ذات اللونين، ويصير المؤشّرُ الذي يعتمد على **لون
   حدٍّ** بلا معنًى: اللونُ المفروض واحدٌ للمركَّز ولغيره.

   وقد قِيس ذلك بضغط Tab حقيقيّ (لا ‎.focus() البرمجيّ، فهو لا
   يُفعّل ‎:focus-visible أصلًا): بطاقةُ «مشاريع وإنجازات» المركَّزة
   حلقتُها 5px solid rgb(255,255,255)، **وحلقةُ جارتها غيرِ
   المركَّزة هي هي حرفًا بحرف** — ورابطُها outline: none عمدًا لأن
   مؤشّره حلقةُ البطاقة. فالتركيزُ غيرُ مرئيٍّ بتاتًا لمن يستعمل
   هذا الوضع، وهو ممّن كُتب البيانُ لأجلهم.

   والعلاج قاعدةٌ واحدة شاملة: كلُّ ما يُركَّز عليه يُرسم حولَه
   outline بلون النظام Highlight — والـoutline وحدَه ما ينجو من
   الوضع (يُحوَّل إلى لون النظام ويبقى مرسومًا). و‎!important
   ضروريّ لا زينة: ‎.vcard__link:focus-visible أخصُّ من ‎:focus-visible
   وتطفئه، وهذه هي الحالةُ المقصودة بالإصلاح نفسها.
   ========================================================== */
@media (forced-colors: active) {
  :focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 2px;
  }
}

/* ============================================================
   الإصدارات — /publications.html  (الجولة ١٨٠)
   صفحةُ الكتاب القادم. تستعمل رموزَ التصميم القائمة (--yellow،
   --ink، --radius-card، --shadow-*) ولا تخترع لونًا. الغلافُ نموذجٌ
   مجسَّمٌ لا صورةَ غلافٍ نهائيّ — فلا أصلَ صورةٍ يُفبرَك.
   ============================================================ */

.pub-feature {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 800px) {
  .pub-feature { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

/* الغلاف المجسَّم: وجهٌ وكعبٌ بمنظورٍ خفيف. */
.pub-cover { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.pub-cover__book {
  position: relative;
  width: min(74vw, 260px);
  aspect-ratio: 2 / 3;
  transform: perspective(1400px) rotateY(-14deg);
  transform-style: preserve-3d;
  filter: drop-shadow(var(--shadow-lg));
  transition: transform 0.4s ease-out;
}
.pub-cover__book:hover { transform: perspective(1400px) rotateY(-6deg); }
@media (prefers-reduced-motion: reduce) {
  .pub-cover__book, .pub-cover__book:hover { transition: none; transform: perspective(1400px) rotateY(-8deg); }
}
.pub-cover__face {
  position: absolute; inset: 0;
  background: linear-gradient(150deg, #14140f 0%, #26261d 55%, #14140f 100%);
  border-radius: 4px 8px 8px 4px;
  border: 1px solid rgba(43, 92, 180, 0.25);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; padding: 2rem 1.4rem; text-align: center;
}
.pub-cover__spine {
  position: absolute; top: 0; bottom: 0; right: 100%;
  width: 26px;
  transform-origin: right center; transform: rotateY(90deg) translateZ(0);
  background: linear-gradient(#000, #1a1a13);
  border-radius: 4px 0 0 4px;
}
.pub-cover__wordmark { color: var(--white); font-size: var(--fs-body-lg); letter-spacing: 0.06em; }
.pub-cover__rule { width: 46px; height: 3px; background: var(--yellow); border-radius: 2px; }
.pub-cover__kicker { color: rgba(255, 255, 255, 0.72); font-size: var(--fs-xs); line-height: 1.7; }
.pub-cover__soon {
  margin-top: 0.4rem;
  background: var(--yellow); color: var(--white);
  font-size: var(--fs-xs); font-weight: 700;
  padding: 0.25rem 0.9rem; border-radius: 999px;
}
.pub-cover__cap { color: var(--ink-soft); font-size: var(--fs-xs); }

/* شارةُ الحالة */
.pub-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--yellow-ink); font-size: var(--fs-sm); font-weight: 700;
  background: rgba(43, 92, 180, 0.14);
  padding: 0.35rem 0.9rem; border-radius: 999px; margin: 0 0 1rem;
}
.pub-badge__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--yellow-dark); }
.pub-feature__title { font-size: var(--fs-title); color: var(--ink); line-height: 1.25; margin: 0 0 1rem; }
.pub-feature__lead { font-size: var(--fs-body-lg); color: var(--ink); line-height: 1.85; margin: 0 0 1.6rem; }
.pub-feature__acts { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.8rem; }
@media (max-width: 800px) { .pub-feature__acts { justify-content: center; } }

/* خطُّ مراحل الإصدار */
.pub-steps {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem;
}
.pub-step { display: flex; align-items: center; gap: 0.55rem; color: var(--ink-soft); font-size: var(--fs-sm); }
.pub-step__mark {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--ink-faint); background: var(--paper);
}
.pub-step.is-active { color: var(--ink); font-weight: 700; }
.pub-step.is-active .pub-step__mark { border-color: var(--yellow-dark); background: var(--yellow); }

/* بطاقاتُ «ما تجده عند الصدور» */
.pub-grid {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  margin-top: 2.4rem;
}
.pub-card {
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: var(--radius-card); padding: 1.6rem;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem;
}
.pub-card__icon {
  display: inline-flex; width: 48px; height: 48px; border-radius: 12px;
  align-items: center; justify-content: center;
  background: rgba(43, 92, 180, 0.16); color: var(--yellow-ink);
}
.pub-card__title { font-size: var(--fs-body-lg); color: var(--ink); margin: 0; }
.pub-card__text { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.75; margin: 0; flex: 1; }
.pub-card__state {
  font-size: var(--fs-xs); color: var(--ink-soft);
  border: 1px dashed var(--ink-faint); border-radius: 999px; padding: 0.2rem 0.75rem;
}

/* إعلامٌ عند الصدور */
.pub-notify { max-width: 720px; }
.pub-notify__title { font-size: var(--fs-lead); color: var(--ink); margin: 0 0 0.9rem; }
.pub-notify__text { font-size: var(--fs-body-lg); color: var(--ink); line-height: 1.85; margin: 0 0 0.8rem; }
.pub-notify__hint { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0; }

/* بندُ الإصدارات المميّز على الصفحة الرئيسية — يعيد استعمال الغلاف
   المجسَّم (.pub-cover__book) اتّساقًا مع صفحة الإصدارات. */
.pub-band__inner {
  display: grid;
  grid-template-columns: minmax(150px, 230px) 1fr;
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 760px) {
  .pub-band__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
.pub-cover--band { margin: 0; }
.pub-cover--band .pub-cover__book { width: min(52vw, 200px); }
.pub-band__title { font-size: var(--fs-title); color: var(--ink); line-height: 1.2; margin: 0.6rem 0 1rem; }
.pub-band__text { font-size: var(--fs-body-lg); color: var(--ink); line-height: 1.85; margin: 0 0 1.6rem; max-width: 62ch; }
.pub-band__acts { display: flex; flex-wrap: wrap; gap: 1rem; }
@media (max-width: 760px) { .pub-band__acts { justify-content: center; } }

/* ============================================================
   صقلٌ احترافيّ (الجولة ١٨١): انتقالُ التبويبات، وعمقُ غلاف الكتاب
   ============================================================ */

/* دخولُ اللوحة عند تبديل التبويب — ظهورٌ ناعمٌ مع ارتفاعٍ خفيف.
   يُطلقه main.js بإعادة إضافة الصنف بعد reflow. */
@keyframes tabPanelIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.tab-panel--in { animation: tabPanelIn 0.5s var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  .tab-panel--in { animation: none; }
}

/* شريطُ التبويبات: تحريكٌ ناعمٌ للخطّ السفليّ ولمسةُ ارتفاعٍ للنشط،
   وحيّزٌ أوسع يليق بمركزٍ إعلاميّ. */
.tab { border-radius: 8px 8px 0 0; transition: color 0.25s, border-color 0.25s, background 0.25s; }
.tab:hover { background: rgba(0, 0, 0, 0.03); }
.tab.is-active { background: rgba(43, 92, 180, 0.10); }
.tab:focus-visible { outline: 3px solid var(--yellow-dark); outline-offset: -3px; border-radius: 8px; }

/* عمقُ غلاف الكتاب: حوافُّ صفحاتٍ على اليسار، وانعكاسٌ ناعمٌ تحته،
   وشريطٌ رُكنيٌّ «قريبًا» أرقى من الكبسولة. */
.pub-cover__book::after {
  content: "";
  position: absolute; top: 3%; bottom: 3%; left: -10px;
  width: 12px;
  background: repeating-linear-gradient(to left, #efe9dc, #efe9dc 1px, #d8d2c4 1px, #d8d2c4 3px);
  transform: rotateY(90deg); transform-origin: left center;
  border-radius: 2px;
}
.pub-cover__book::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 100%;
  height: 46px; margin-top: 12px;
  background: radial-gradient(ellipse at center top, rgba(0,0,0,0.22), transparent 70%);
  filter: blur(2px);
}
/* الشريط الرُّكنيّ يستبدل الكبسولة القديمة */
.pub-cover__face { overflow: hidden; }
.pub-cover__soon {
  position: absolute; top: 14px; left: -34px;
  transform: rotate(-45deg);
  width: 130px; text-align: center;
  padding: 0.28rem 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
  margin: 0;
}

/* ظهورٌ تدريجيّ لعناصر صفحة الإصدارات، متّسقٌ مع بقية الموقع */
.pub-feature, .pub-notify { will-change: auto; }

/* عن المشروع — سطرٌ تعريفيٌّ متّسقٌ مع أقسام الموقع */
.pub-about { max-width: 780px; }
.pub-about__text { font-size: var(--fs-body-lg); color: var(--ink); line-height: 1.9; margin: 0 0 1rem; }
.pub-about__text:last-child { margin-bottom: 0; }

/* ============================================================
   صفحة الإصدارات — مميّزات إضافية (الجولة ١٨٤)
   أسئلة متكرّرة، نموذج إعلام مضمّن، مشاركة، محتوى ذو صلة
   ============================================================ */

/* الأسئلة المتكرّرة — <details> أصلية (بلا جافاسكربت) */
.faq { max-width: 820px; }
.faq__item {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--paper);
  margin-bottom: 0.85rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq__q {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 1.4rem;
  font-size: var(--fs-body-lg);
  font-weight: 700;
  color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  transition: background 0.2s;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  font-weight: 400; font-size: 1.6em; line-height: 1; color: var(--yellow-ink);
  transition: transform 0.25s var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__q:hover { background: rgba(43, 92, 180, 0.08); }
.faq__q:focus-visible { outline: 3px solid var(--yellow-dark); outline-offset: -3px; }
.faq__a { padding: 0 1.4rem 1.2rem; }
.faq__a p { font-size: var(--fs-body); color: var(--ink-soft); line-height: 1.85; margin: 0; }
@media (prefers-reduced-motion: reduce) { .faq__q::after { transition: none; } }

/* نموذج الإعلام المضمّن — يرث أنماط .subscribe، ويُحاذى للبداية */
.pub-notify .pub-sub { margin-top: 1.4rem; max-width: 560px; }

/* مشاركة الصفحة — يعيد استعمال .article__share / .share__btn */
.pub-share { text-align: center; }
.pub-share__title { font-size: var(--fs-lead); color: var(--ink); margin: 0 0 1.2rem; }
.pub-share .article__share { justify-content: center; border: 0; padding: 0; margin: 0; }

/* محتوى ذو صلة — بطاقات روابط */
.pub-rel-grid {
  display: grid; gap: 1.4rem; margin-top: 2.2rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.pub-rel-card {
  display: flex; flex-direction: column; gap: 0.6rem;
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: var(--radius-card); padding: 1.6rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.pub-rel-card:hover, .pub-rel-card:focus-visible {
  box-shadow: 0 0 0 var(--hover-ring) var(--yellow), var(--shadow-md);
  transform: translateY(-3px); outline: none;
}
.pub-rel-card__title { font-size: var(--fs-body-lg); color: var(--ink); margin: 0; }
.pub-rel-card__text { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.7; margin: 0; flex: 1; }
.pub-rel-card__go { font-size: var(--fs-sm); font-weight: 700; color: var(--yellow-ink); }
@media (prefers-reduced-motion: reduce) { .pub-rel-card { transition: none; } .pub-rel-card:hover { transform: none; } }

/* ============================================================
   صفحة الإصدارات — صقلُ التنسيق (الجولة ١٨٥)
   العيبُ الذي رُئي: الكتلُ الضيّقة (max-width) كانت تلتصق بالحافة
   اليمنى في RTL فتترك فراغًا أعورَ على اليسار؛ وصفُّ المشاركة كان
   العنوانُ فيه في طرفٍ والأزرارُ في الطرف المقابل. نوازنُ ونجمّع.
   ============================================================ */

/* «عن المشروع» — عمودٌ مركزيٌّ متوازنٌ يليق بنصٍّ تعريفيٍّ قصير */
.pub-about { margin-inline: auto; max-width: 68ch; text-align: center; }
.pub-about__text { margin-inline: auto; }

/* الأسئلة — العمودُ يُركَّز فتتوازن المساحةُ، والأجوبةُ تبقى من اليمين */
.faq { margin-inline: auto; }

/* «أعلمني» — الحاويةُ كانت مثبَّتةً على اليمين بلا هامشٍ تلقائيّ.
   نركّزها فيصير القسمُ متوازنًا كنشرةِ التذييل تمامًا. */
.pub-notify { margin-inline: auto; text-align: center; }
.pub-notify__title, .pub-notify__text { text-align: center; }
.pub-notify .pub-sub { margin-inline: auto; }

/* المشاركة — إلغاءُ الدفع (margin-inline-end:auto على الوسم) الذي كان
   يفرّق العنوانَ عن الأزرار، وتجميعُ الصفِّ في الوسط كوحدةٍ واحدة. */
.pub-share { max-width: 640px; margin-inline: auto; }
.pub-share .share__label { margin-inline-end: 0; }
.pub-share .article__share {
  justify-content: center;
  gap: 0.7rem 0.85rem;
  border: 0; padding: 0; margin: 1rem 0 0;
}

/* المحتوى ذو الصلة — عنوانٌ مركزيٌّ متّسقٌ مع القسمَين أعلاه */

/* ============================================================
   صفحة التيار — مميّزاتٌ وتنسيقٌ أعمق (الجولة ١٨٦)
   فهرسٌ داخليٌّ لاصقٌ مع تمييزِ القسم الظاهر، بطاقةُ تعريفٍ بأرقامٍ
   مشتقّةٍ حيًّا، صفُّ مشاركة، وموازنةُ مراسي القفز تحت الترويسة.
   ============================================================ */

/* مراسي القفز: الترويسةُ اللاصقة (78px) والفهرسُ تحتها لا يغطّيان
   رأسَ القسم عند القفز إليه. */
.tay-lead, .tay-facts, .tay-block { scroll-margin-top: 150px; }

/* الفهرس الداخلي — شريطٌ لاصقٌ من حبّاتٍ قافزة، القسمُ الظاهرُ مميَّز */
.tay-toc {
  position: sticky; top: 78px; z-index: 20;
  display: flex; align-items: center; gap: 0.75rem;
  margin: 0; padding: 0.5rem 0.85rem;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--hairline); border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.tay-toc__label {
  flex: none; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft);
  padding-inline-end: 0.7rem; border-inline-end: 1px solid var(--hairline);
}
.tay-toc__list {
  list-style: none; margin: 0; padding: 0.1rem;
  display: flex; gap: 0.3rem; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.tay-toc__list::-webkit-scrollbar { display: none; }
.tay-toc__link {
  display: inline-block; white-space: nowrap;
  padding: 0.42rem 0.85rem; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft);
  text-decoration: none; transition: background 0.2s, color 0.2s;
}
.tay-toc__link:hover { background: rgba(0, 0, 0, 0.05); color: var(--black); }
.tay-toc__link:focus-visible { outline: 3px solid var(--yellow-dark); outline-offset: 1px; }
.tay-toc__link.is-current { background: var(--yellow); color: var(--white); }
@media (max-width: 640px) {
  .tay-toc { border-radius: var(--radius-card); }
  .tay-toc__label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tay-toc { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--paper); }
  .tay-toc__link { transition: none; }
}

/* بطاقة التعريف — حقولٌ موجزةٌ، آخرُها مشتقٌّ من العدد الفعليّ */
.tay-facts {
  padding: clamp(1.1rem, 2vw, 1.7rem) clamp(1.25rem, 2.5vw, 2.1rem);
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: var(--radius-card); box-shadow: var(--shadow-sm);
  border-inline-start: 4px solid var(--yellow);
}
.tay-facts__grid {
  margin: 0; display: grid; gap: 1.1rem clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}
.tay-fact { display: flex; flex-direction: column; gap: 0.3rem; }
.tay-fact__k { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft); letter-spacing: 0.01em; }
.tay-fact__v { font-size: var(--fs-body); color: var(--ink); line-height: 1.6; }
.tay-fact__v a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--yellow); }
.tay-fact__v a:hover, .tay-fact__v a:focus-visible { color: var(--black); }

/* مشاركة الصفحة — صفٌّ مُجمَّعٌ من اليمين لا مفرّقٌ كالمقالات */
.tay-share .share__label { margin-inline-end: 0.5rem; }
.tay-share .article__share { border: 0; padding: 0; margin: 0.3rem 0 0; gap: 0.6rem 0.7rem; flex-wrap: wrap; }

/* ============================================================
   صفحة المشاريع — فهرسُ مجالاتٍ لاصقٌ ومشاركةٌ وصلات (الجولة ١٨٩)
   ============================================================ */

/* مرساةُ القفز: الترويسةُ اللاصقة (78px) والفهرسُ تحتها لا يغطّيان
   رأسَ المجال عند القفز إليه. */
.proj-domain { scroll-margin-top: 150px; }

/* فهرسُ المجالات: كان صفًّا داخل بطاقة الصدر؛ صار شريطًا لاصقًا يقفز
   إلى المجال ويُبرزه عند المرور به (scroll-spy عبر data-toc). */
.proj-nav {
  position: sticky; top: 78px; z-index: 20;
  display: flex; align-items: center; gap: 0.75rem;
  margin: 0; padding: 0.5rem 0.85rem;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--hairline); border-radius: 999px;
  box-shadow: var(--shadow-sm);
  flex-wrap: nowrap;
}
.proj-nav__label {
  flex: none; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft);
  padding-inline-end: 0.7rem; border-inline-end: 1px solid var(--hairline);
}
.proj-nav__chips {
  display: flex; gap: 0.4rem; padding: 0.1rem;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.proj-nav__chips::-webkit-scrollbar { display: none; }
.proj-nav .mchip { flex: none; white-space: nowrap; }
/* المجالُ الظاهرُ في التمرير — بنفس صيغةِ .mchip.is-on القائمة. */
.mchip.is-current { color: var(--white); background: var(--yellow); border-color: var(--yellow); }
@media (max-width: 640px) {
  .proj-nav { border-radius: var(--radius-card); }
  .proj-nav__label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .proj-nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--paper); }
}

/* مشاركةُ السجلّ — صفٌّ مُجمَّعٌ من اليمين لا مفرّقٌ كالمقالات. */
.proj-share .share__label { margin-inline-end: 0.5rem; }
.proj-share .article__share { border: 0; padding: 0; margin: 0.3rem 0 0; gap: 0.6rem 0.7rem; flex-wrap: wrap; }

/* ============================================================
   الشعار: أبيض على الرأس والمقدّمة (خلفيّة سوداء). على التذييل الفاتح
   يُرسَم بأزرق العلامة عبر قناع من ملف الخطّ — المرشّح كان يبتلع
   البكسلات الشفّافة فلا يظهر شيء. الملف على القرص يبقى ذهبيًّا. */
.brand__mark,
.splash__logo,
.en-brand img { filter: brightness(0) invert(1); }

.footer__logo,
.footer--slim .footer__logo {
  display: block;
  height: clamp(44px, 8vw, 58px);
  aspect-ratio: 900 / 256;
  width: auto;
  margin: 0;
  background-color: var(--yellow);
  -webkit-mask-image: url("/assets/img/logo.png");
  mask-image: url("/assets/img/logo.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  filter: none;
}
@media (max-width: 700px) {
  .footer--slim .footer__logo { height: 52px; }
}

/* ============================================================
   شاشة المقدّمة — الإخراج الكامل (الجولة ١٩٢)
   بدل الظهور الواحد: رقصةٌ من خمس حركاتٍ متعاقبة — توهّجٌ أزرق
   يتنفّس خلف الشعار، فالشعار يصعد، فخطٌّ يُرسم، فالاسم اللاتيني
   يتقارب تباعُدُه حتى يستقرّ، فسطرُ المكتب. لا تنطلق إلا بعلامة
   .is-live من السكربت، فلا تُحرق في لسانِ متصفّحٍ خلفيّ. شريطُ
   تقدّمٍ سفليّ يقيس عمرها (4.6ث — بطول مهلة السكربت). تقليلُ
   الحركة يُسقط المقدّمةَ كلَّها من السكربت قبل أن تُرسم أصلًا.
   ============================================================ */
.splash {
  overflow: hidden;
  background: radial-gradient(ellipse 130% 95% at 50% 40%, #0D1830 0%, #070C18 55%, #03050A 100%);
}
/* التوهّج الخلفي */
.splash::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(780px, 92vw);
  height: min(780px, 92vw);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(43, 92, 180, 0.3), rgba(43, 92, 180, 0.08) 45%, transparent 68%);
  pointer-events: none;
  opacity: 0;
}
/* شريط التقدّم — يمتلئ من اليمين، كاتجاه القراءة */
.splash::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--yellow-dark), var(--yellow) 45%, #7EA4EA);
  transform: scaleX(0);
  transform-origin: right center;
}
/* الحالات الأولى: كل عنصر خفيّ حتى تنطلق الرقصة */
.splash__brand { animation: none; }
.splash__logo,
.splash__wordmark,
.splash__rule,
.splash__office,
.splash__skip { opacity: 0; }

.splash__rule {
  display: block;
  width: min(300px, 44vw);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--yellow) 20%, #7EA4EA 50%, var(--yellow) 80%, transparent);
}
/* سطر المكتب بالعربية — بلا تباعد أحرف: الحرف العربي متّصل */
.splash__office {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.68);
}
/* هالة ناعمة حول الخطّ الأبيض — تركب على مرشّح التبييض أعلاه */
.splash .splash__logo {
  filter: brightness(0) invert(1) drop-shadow(0 0 26px rgba(126, 164, 234, 0.35));
}

/* الرقصة — خمس حركات وتوهّج وشريط، كلّها على .is-live */
.splash.is-live::before { animation: splash-glow 4.6s var(--ease) both; }
.splash.is-live::after { animation: splash-bar 4.6s linear both; }
.splash.is-live .splash__logo { animation: splash-rise 1.5s 0.1s var(--ease) both; }
.splash.is-live .splash__rule { animation: splash-draw 0.9s 1.05s var(--ease) both; }
.splash.is-live .splash__wordmark { animation: splash-track 1.5s 1.2s var(--ease) both; }
.splash.is-live .splash__office { animation: splash-up 1s 1.9s var(--ease) both; }
.splash.is-live .splash__skip { animation: splash-up 0.8s 0.8s var(--ease) both; }

@keyframes splash-glow {
  0% { opacity: 0; }
  35% { opacity: 1; }
  100% { opacity: 0.8; }
}
@keyframes splash-bar {
  to { transform: scaleX(1); }
}
@keyframes splash-rise {
  from { opacity: 0; transform: translateY(26px) scale(0.94); }
  to { opacity: 1; transform: none; }
}
@keyframes splash-draw {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}
/* التباعد يبدأ فضفاضًا ويستقرّ على قياس اللوحة (0.829em)؛
   text-indent يرافقه ليبقى النصّ موزونًا في المنتصف */
@keyframes splash-track {
  from { opacity: 0; letter-spacing: 1.4em; text-indent: 1.4em; }
  to { opacity: 1; letter-spacing: 0.829em; text-indent: 0.829em; }
}
@keyframes splash-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* الخروج: العلامة تتقدّم قليلًا وتذوب مع ذوبان الطبقة كلّها */
.splash.is-done .splash__brand {
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}

/* ============ الصفحات المخصّصة /p/<slug> — كتل المكتب ============ */
.cp-body { max-width: 46rem; }
.cp-quote {
  margin: 1.4rem 0;
  padding: 0.9rem 1.3rem;
  border-inline-start: 4px solid #2b5cb4;
  background: rgba(43, 92, 180, 0.06);
  border-radius: 8px;
}
.cp-quote p { margin: 0; font-size: 1.08rem; line-height: 2; }
.cp-quote__src { margin-top: 0.5rem; color: #5a6a85; font-size: 0.88rem; }
.cp-figure { margin: 1.4rem 0; }
.cp-figure img { max-width: 100%; height: auto; border-radius: 10px; display: block; }
.cp-figure figcaption { margin-top: 0.45rem; color: #5a6a85; font-size: 0.88rem; }
.cp-list { margin: 1rem 0 1.4rem; padding-inline-start: 1.4rem; line-height: 2.1; }

/* شريط المعاينة الموقتة — يعلو أي صفحة تُفتح برابط معاينة موقّع */
.preview-note {
  position: sticky;
  top: 0;
  z-index: 90;
  background: #7c5800;
  color: #fff;
  text-align: center;
  padding: 8px 16px;
  font-size: 0.9rem;
}
@media print { .preview-note { display: none; } }

/* -------------------------------------------------- كتلتا الجدول والصوت في /p/ */
.cp-tablewrap { overflow-x: auto; margin: 1.2rem 0; }
.cp-table { border-collapse: collapse; width: 100%; min-width: 340px; font-size: 0.95rem; }
.cp-table th, .cp-table td { border: 1px solid rgba(127, 127, 127, 0.35); padding: 0.5rem 0.75rem; text-align: right; }
.cp-table thead th { background: rgba(127, 127, 127, 0.12); font-weight: 700; }
.cp-audio audio { width: 100%; max-width: 560px; }

/* -------------------------------------------------- شريط إعلان المكتب */
.site-banner { background: #7c2d12; color: #fff; padding: 0.55rem 1rem; text-align: center; font-size: 0.95rem; }
.site-banner__text { margin: 0; }
.site-banner__link { color: #fde68a; text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.site-banner__link:hover, .site-banner__link:focus { color: #fff; }
@media print { .site-banner { display: none; } }

/* -------------------------------------------------- كتل مؤلف الصفحات 2.0 */
.cp-faq details, .cp-callout, .cp-download, .cp-person, .cp-publication {
  margin: 1rem 0; padding: 1rem; border: 1px solid var(--line, #d8d5ce); border-radius: 0.6rem;
}
.cp-faq summary { cursor: pointer; font-weight: 700; }
.cp-person, .cp-person > a, .cp-publication { display: flex; gap: 1rem; align-items: flex-start; }
.cp-person img { width: 8rem; height: 8rem; object-fit: cover; border-radius: 50%; }
.cp-person__role { color: var(--muted, #666); }
.cp-publication img { width: 9rem; height: auto; }
.cp-timeline { border-inline-start: 2px solid var(--accent, #8a6d2f); padding-inline-start: 1.5rem; }
.cp-timeline li { margin: 0 0 1.5rem; }
.cp-timeline time { font-weight: 700; color: var(--accent, #8a6d2f); }
.cp-callout--notice { border-color: #a16207; background: #fffbeb; }
.cp-callout--warning { border-color: #b91c1c; background: #fef2f2; }
.cp-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
.cp-gallery img { width: 100%; height: auto; }
.cp-embed iframe { width: 100%; min-height: 32rem; border: 1px solid var(--line, #d8d5ce); }
@media (max-width: 640px) {
  .cp-person, .cp-person > a, .cp-publication { flex-direction: column; }
  .cp-embed iframe { min-height: 24rem; }
}
@media print {
  .cp-embed { display: none; }
  .cp-faq details { display: block; }
  .cp-faq details > * { display: block; }
}