/* ==========================================================================
   Component layer. Mirrors the reference's structure:
   nav -> hero -> profile -> bands -> closing -> footer, plus the shared
   inner-page template (breadcrumb / featured stack / titlerow / chips /
   toolbar / grid / pager).
   ========================================================================== */

/* --------------------------------------------------------------- base --- */

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

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

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  letter-spacing: var(--tracking-title);
}

p {
  margin: 0;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

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

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

/* الدرجة الأغمق لا لون التعبئة: مؤشّر التركيز يحتاج 3:1 على ما يجاوره،
   و#fe6603 على خلفية الوضع الفاتح يعطي 2.63 — أي أنه يسقط حيث يلزم أكثر. */
:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.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;
}

.skip-link {
  position: absolute;
  inset-inline-start: 8px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--sheet);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: top var(--dur-hover) var(--ease-std);
}

.skip-link:focus {
  top: 8px;
}

/* ------------------------------------------------------------ reveal --- */

.reveal {
  opacity: 0;
  transform: translateY(var(--rise)) scale(var(--reveal-scale));
  filter: blur(var(--reveal-blur));
  transition:
    opacity var(--dur-reveal) var(--ease-reveal),
    transform var(--dur-reveal-move) var(--ease-reveal),
    filter var(--dur-reveal) var(--ease-reveal);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}

.reveal.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* --------------------------------------------------------------- nav --- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  min-height: var(--nav-height);
  padding-inline: var(--nav-padding);
  font-size: var(--text-base);
  background: var(--glass);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--border-soft);
}

.nav__lead,
.nav__tail {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav__tail {
  gap: 4px;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-display);
}

.nav__mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: var(--text-sm);
  color: var(--on-accent);
  background: linear-gradient(140deg, var(--accent-warm), var(--accent-2));
  border-radius: var(--radius-sm);
}

.nav__list {
  display: none;
  align-items: center;
  gap: 2px;
}

.nav__link,
.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding-inline: 10px;
  color: var(--muted);
  border-radius: var(--radius-sm);
  transition:
    color var(--dur-hover) var(--ease-std),
    background var(--dur-hover) var(--ease-std);
}

.nav__link:hover,
.nav__trigger:hover,
.nav__link[aria-current="page"] {
  color: var(--foreground);
  background: var(--fill-1);
}

.nav__chev {
  transition: transform var(--dur-hover) var(--ease-std);
}

.nav__trigger[aria-expanded="true"] .nav__chev {
  transform: rotate(180deg);
}

.nav__item {
  position: relative;
}

.nav__panel {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + 6px);
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 11rem;
  padding: 6px;
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sheet);
  animation: panel-in 0.2s var(--ease-arrive);
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.nav__panel a {
  padding: 8px 12px;
  color: var(--muted);
  white-space: nowrap;
  border-radius: var(--radius-sm);
  transition:
    color var(--dur-hover) var(--ease-std),
    background var(--dur-hover) var(--ease-std);
}

.nav__panel a:hover {
  color: var(--foreground);
  background: var(--fill-2);
}

.nav__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--muted);
  border-radius: var(--radius-sm);
  transition:
    color var(--dur-hover) var(--ease-std),
    background var(--dur-hover) var(--ease-std);
}

.nav__icon:hover {
  color: var(--foreground);
  background: var(--fill-1);
}

.nav__burger {
  display: grid;
}

@media (min-width: 1024px) {
  .nav__list {
    display: flex;
  }

  .nav__burger {
    display: none;
  }
}

/* nav search */

.navsearch {
  position: relative;
  display: none;
}

@media (min-width: 1024px) {
  .navsearch {
    display: block;
  }
}

.navsearch__input {
  width: 200px;
  height: 32px;
  padding-inline: 32px 28px;
  font: inherit;
  color: var(--foreground);
  background: var(--fill-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: width var(--dur-hover) var(--ease-std);
}

.navsearch__input:focus {
  width: 250px;
  outline: none;
  border-color: var(--tint-bd);
}

.navsearch__input::placeholder {
  color: var(--faint);
}

.navsearch__ic {
  position: absolute;
  inset-inline-start: 9px;
  top: 50%;
  color: var(--faint);
  transform: translateY(-50%);
  pointer-events: none;
}

.navsearch__clear {
  position: absolute;
  inset-inline-end: 6px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--faint);
  border-radius: var(--radius-circle);
  transform: translateY(-50%);
}

.navsearch__clear:hover {
  color: var(--foreground);
  background: var(--fill-2);
}

.navsearch__results {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + 6px);
  z-index: 60;
  width: 320px;
  max-height: 60vh;
  padding: 6px;
  overflow-y: auto;
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sheet);
}

.navsearch__result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  text-align: start;
  border-radius: var(--radius-sm);
}

.navsearch__result:hover,
.navsearch__result[data-active="true"] {
  background: var(--fill-2);
}

.navsearch__kind {
  font-size: var(--text-xs);
  color: var(--faint);
}

.navsearch__empty {
  padding: 16px 10px;
  font-size: var(--text-base);
  color: var(--faint);
  text-align: center;
}

/* ------------------------------------------------------------ drawer --- */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-rows: 1fr;
}

.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(var(--scrim-rgb), 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fade-in 0.2s var(--ease-std);
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

.drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(86vw, 340px);
  padding: 16px;
  overflow-y: auto;
  background: var(--background);
  border-inline-end: 1px solid var(--border);
  animation: drawer-in 0.32s var(--ease-arrive);
}

@keyframes drawer-in {
  from {
    transform: translateX(-100%);
  }
}

[dir="rtl"] .drawer__panel {
  animation-name: drawer-in-rtl;
}

@keyframes drawer-in-rtl {
  from {
    transform: translateX(100%);
  }
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.drawer__group {
  padding-block: 12px;
}

.drawer__group + .drawer__group {
  border-top: 1px solid var(--border);
}

.drawer__label {
  padding-inline: 10px;
  margin-bottom: 6px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 10px;
  color: var(--muted);
  border-radius: var(--radius-sm);
  transition:
    color var(--dur-hover) var(--ease-std),
    background var(--dur-hover) var(--ease-std);
}

.drawer__link:hover,
.drawer__link[aria-current="page"] {
  color: var(--foreground);
  background: var(--fill-2);
}

/* ---------------------------------------------------------- segmented --- */

.seg {
  display: inline-flex;
  padding: 3px;
  background: var(--fill-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
}

.seg__opt {
  padding: 5px 12px;
  font-size: var(--text-sm);
  color: var(--muted);
  border-radius: var(--radius-pill);
  transition:
    color var(--dur-hover) var(--ease-std),
    background var(--dur-hover) var(--ease-std);
}

.seg__opt[aria-pressed="true"] {
  color: var(--foreground);
  background: var(--fill-3);
}

/* ---------------------------------------------------------- home hero --- */

.hero {
  padding: clamp(22px, 2.6vw, 34px) var(--page-padding) 0;
}

.hero__in {
  max-width: var(--hero-width);
  margin-inline: auto;
  text-align: center;
}

.hero__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

/* The four quick links sit on a wave: alternating peaks and troughs joined by
   a curved line that fades out at its leading end (audit §2, `.a7h-wv`).
   Chips are positioned by percentage inside the stage, so the whole figure
   mirrors correctly under RTL without a second set of coordinates. */
/* Measured at 1440: h1 ends at 131, the wave box runs 179-311, and the hero
   inner finishes at 341 — i.e. 48px above the wave and 30px below it, the
   latter reserving room for the labels that hang under the low stops. */
/* The stage is flush to the hero's leading edge rather than centred: measured
   chip centres run 1009 -> 724 at 1440, i.e. 12.5%..87.5% of a 380px box whose
   leading edge sits on the hero inner's leading edge (1056). */
.hero__stage {
  position: relative;
  width: min(380px, 84vw);
  height: clamp(100px, 9.2vw, 132px);
  margin-block: clamp(34px, 3.35vw, 48px) clamp(22px, 2.1vw, 30px);
  margin-inline: 0 auto;
}

@media (max-width: 640px) {
  .hero__stage {
    /* The stage is shorter here, so the discs on the wave's troughs — and the
       labels beneath them — hang further past its box. Extra bottom margin
       keeps them clear of the profile strip that follows. */
    margin-bottom: 46px;
    margin-inline: auto;
  }
}

/* The line overhangs the stage by 95px on each side (570 vs 380). */
.hero__wave {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  width: 150%;
  height: 100%;
  color: var(--border-strong);
  transform: translateX(-50%);
  pointer-events: none;
}

[dir="rtl"] .hero__wave {
  transform: translateX(50%) scaleX(-1);
}

.hero__chip {
  position: absolute;
  top: var(--y);
  inset-inline-start: var(--x);
  display: grid;
  gap: 8px;
  justify-items: center;
  font-size: var(--text-sm);
  color: var(--muted);
  white-space: nowrap;
  transform: translate(-50%, -50%);
  transition: color var(--dur-hover) var(--ease-std);
}

[dir="rtl"] .hero__chip {
  transform: translate(50%, -50%);
}

.hero__chip:hover {
  color: var(--foreground);
}

/* The label sits above the disc on a peak and below it in a trough, so it
   always reads on the outside of the curve. */
.hero__disc {
  display: grid;
  order: 1;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: var(--radius-circle);
  box-shadow: var(--shadow);
  transition:
    transform var(--dur-hover) var(--ease-pop),
    box-shadow var(--dur-hover) var(--ease-std);
}

.hero__chip--low .hero__disc {
  order: -1;
}

.hero__chip:hover .hero__disc {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px) scale(1.06);
}

/* ------------------------------------------------------ home profile --- */

.profile {
  display: grid;
  grid-template-columns: 25% 1fr;
  gap: 0 clamp(13.6px, 3.4vw, 48px);
  align-items: center;
  max-width: var(--home-width);
  padding-inline: var(--page-padding);
  margin: -17.6px auto 0;
}

@media (min-width: 1024px) {
  .profile {
    grid-template-columns: 200px 1fr;
  }
}

/* On a phone the reference puts the name and role beside the portrait, then
   runs the bio and the link full width underneath. `display: contents` lets
   the copy's children become grid items so they can do exactly that without a
   second copy of the markup. */
@media (max-width: 640px) {
  .profile {
    align-items: end;
  }

  .profile__copy {
    display: contents;
  }

  .profile__portrait {
    grid-row: 1 / 3;
  }

  /* Name at the foot of its row, role at the head of the next, so the two sit
     together rather than being pushed apart by the taller portrait. */
  .profile__name {
    grid-column: 2;
    align-self: end;
  }

  .profile__role {
    grid-column: 2;
    align-self: start;
  }

  .profile__bio,
  .profile__cta {
    grid-column: 1 / -1;
  }

  .profile__bio {
    margin-top: 18px;
  }

  .profile__cta {
    text-align: start;
  }
}

/* The reference portrait is a 200x332 cut-out figure. Ours is a framed
   placeholder, but it keeps the same ratio so the strip's height — and every
   offset below it — lands in the same place. */
.profile__portrait {
  position: relative;
  aspect-ratio: 200 / 332;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.profile__name {
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

/* The reference underscores the name with a short rule that stops well before
   the column edge. */
.profile__name::after {
  display: block;
  width: min(148px, 40%);
  height: 1px;
  margin-top: 10px;
  content: "";
  background: linear-gradient(90deg, var(--fade-rule, var(--border-strong)), transparent);
}

[dir="rtl"] .profile__name::after {
  background: linear-gradient(270deg, var(--fade-rule, var(--border-strong)), transparent);
}

.profile__role {
  display: block;
  margin-top: 13.6px;
  font-size: var(--text-role);
  font-weight: var(--weight-semibold);
  color: var(--secondary);
}

.profile__bio {
  max-width: 62ch;
  margin-top: 13.6px;
  font-size: var(--text-bio);
  line-height: 1.65;
  color: var(--body-ink);
}

.profile__cta {
  margin: 2.4px -8px 0;
}

/* A text link, not a filled button (measured: blue, 700, padding 12px 8px). */
.textlink {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 12px 8px;
  font-size: var(--text-link);
  font-weight: var(--weight-bold);
  color: var(--accent-ink);
  transition: gap var(--dur-hover) var(--ease-std), opacity var(--dur-hover) var(--ease-std);
}

.textlink:hover {
  gap: 8px;
  opacity: 0.85;
}

/* --------------------------------------------------------------- band --- */

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

.band--tint {
  background: var(--tint-faint);
}

/* The first band sits flush under the profile strip: the reference gives it no
   vertical padding, only the 16px the journey wrapper contributes. Adding the
   usual 88px here is what pushed every band below it out of register. */
.band--flush {
  padding-block: 0;
  margin-top: 16px;
}

/* The band row is exactly 992px of content at desktop — the gutter comes from
   the viewport clamp, not from inner padding (measured: action 94 + gap 8.8 +
   head 889 = 992). */
.band__row {
  display: flex;
  gap: var(--row-gap);
  align-items: center;
  width: min(var(--home-width), 100% - 2 * var(--page-padding));
  margin-inline: auto;
}

.band__head {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  height: var(--control-h);
  padding: var(--head-pad-y) var(--head-pad-x);
  background: var(--fill-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}

.band__title {
  overflow: hidden;
  font-size: var(--text-band-title);
  font-weight: var(--weight-semibold);
  color: var(--heading);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: var(--tracking-title);
}

.band__action {
  display: inline-flex;
  flex-shrink: 0;
  gap: 6.4px;
  align-items: center;
  justify-content: center;
  height: var(--control-h);
  padding-inline: 20px;
  font-size: var(--text-band-action);
  font-weight: var(--weight-bold);
  color: var(--accent-ink);
  white-space: nowrap;
  background: var(--tint);
  border: 1px solid var(--tint-bd);
  border-radius: var(--radius-md);
  transition:
    background var(--dur-hover) var(--ease-std),
    border-color var(--dur-hover) var(--ease-std),
    transform var(--dur-hover) var(--ease-std);
}

.band__action:hover {
  background: var(--tint-strong);
  transform: translateY(-1px);
}

.band__action svg {
  flex-shrink: 0;
}

/* Any icon marked `.mirror` points along the reading direction, so arrows and
   chevrons flip wholesale under RTL (audit §33). */
[dir="rtl"] .mirror {
  transform: scaleX(-1);
}

.band__rule {
  width: min(var(--home-width), 100% - 2 * var(--page-padding));
  height: 1px;
  margin: 12px auto 0;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

.band__body {
  width: min(var(--home-width), 100% - 2 * var(--page-padding));
  margin-top: 22px;
  margin-inline: auto;
}

.band__body--bleed {
  width: 100%;
}

/* ------------------------------------------------------------- media --- */

.ph {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--card);
}

.ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-stage) var(--ease-surface);
}

.ph--hoverzoom:hover img {
  transform: scale(1.04);
}

/* ---------------------------------------------------------- ad slots --- */

.ad {
  position: relative;
  display: grid;
  place-items: center;
  width: min(var(--home-width), 100% - 2 * var(--page-padding));
  margin: var(--section-gap) auto;
}

.ad__box {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 139px;
  font-size: var(--text-xs);
  color: var(--faint);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--fill-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}

/* ------------------------------------------------------------ closing --- */

.closing {
  padding: var(--section-gap-lg) var(--page-padding);
  text-align: center;
}

.closing__in {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.closing__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.closing__sub {
  color: var(--muted);
}

/* -------------------------------------------------------------- btns --- */

.btn {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  height: var(--control-h);
  padding-inline: 20px;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-lg);
  transition:
    background var(--dur-hover) var(--ease-std),
    border-color var(--dur-hover) var(--ease-std),
    box-shadow var(--dur-hover) var(--ease-std),
    transform var(--dur-hover) var(--ease-std),
    opacity var(--dur-hover) var(--ease-std);
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.btn--primary {
  color: var(--on-accent);
  background: var(--accent);
  box-shadow: var(--shadow);
}

.btn--primary:hover:not(:disabled) {
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}

.btn--soft {
  color: var(--foreground);
  background: var(--tint);
  border: 1px solid var(--tint-bd);
}

.btn--soft:hover:not(:disabled) {
  background: var(--tint-strong);
}

.btn--ghost {
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border-strong);
}

.btn--ghost:hover:not(:disabled) {
  color: var(--foreground);
  background: var(--fill-1);
}

.btn--ok {
  color: #fff;
  background: #1e9e5a;
  border-color: transparent;
}

.btn--block {
  width: 100%;
}

.btn--lg {
  height: var(--field-h);
  padding-inline: 26px;
  font-size: var(--text-md);
}

.ibtn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--foreground);
  background: color-mix(in oklch, var(--card) 80%, transparent);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-circle);
  box-shadow: var(--shadow-ibtn);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    background var(--dur-hover) var(--ease-std),
    transform var(--dur-hover) var(--ease-pop);
}

.ibtn:hover {
  color: var(--on-accent);
  background: var(--accent);
  border-color: transparent;
  transform: scale(1.08);
}

/* ------------------------------------------------------- inner pages --- */

.page {
  max-width: var(--container-width);
  padding: 18px 14px 0;
  margin-inline: auto;
}

.crumbs {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-inline: 16px;
  margin: 2px 0 10px;
  font-size: var(--text-sm);
  color: var(--faint);
}

.crumbs a {
  transition: color var(--dur-hover) var(--ease-std);
}

.crumbs a:hover {
  color: var(--foreground);
}

.crumbs__cur {
  color: var(--muted);
}

.titlerow {
  display: flex;
  gap: 14px;
  align-items: center;
  padding-inline: 16px;
  margin: 2px 0 12px;
}

.titlerow__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border));
}

.titlerow__line:last-child {
  background: linear-gradient(90deg, var(--border), transparent);
}

.titlerow__t {
  font-size: var(--text-md);
  font-weight: var(--weight-black);
  white-space: nowrap;
}

.pagesub {
  padding-inline: 16px;
  margin-bottom: 14px;
  font-size: var(--text-base);
  color: var(--muted);
  text-align: center;
}

.rule {
  max-width: 440px;
  height: 1px;
  margin: 22px auto;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  border: 0;
}

/* chips row */

.chips {
  display: flex;
  gap: 8px;
  padding: 4px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.chips::-webkit-scrollbar {
  display: none;
}

.chip {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  height: var(--control-h);
  padding: 8px 18px;
  font-size: var(--text-base);
  color: var(--muted);
  white-space: nowrap;
  background: var(--fill-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  transition:
    color var(--dur-hover) var(--ease-std),
    background var(--dur-hover) var(--ease-std),
    border-color var(--dur-hover) var(--ease-std);
}

.chip:hover {
  color: var(--foreground);
  background: var(--fill-3);
}

.chip[aria-pressed="true"],
.chip[data-active="true"] {
  color: var(--foreground);
  background: var(--tint);
  border-color: var(--tint-bd);
}

/* toolbar: dropdown + search */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding-inline: 12px;
  margin-bottom: 14px;
}

.dd {
  position: relative;
}

.dd__btn {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: space-between;
  min-width: 176px;
  height: 44px;
  padding: 8px 13px;
  font-size: var(--text-base);
  background: var(--background);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-hover) var(--ease-std);
}

.dd__btn:hover {
  border-color: var(--tint-bd);
}

.dd__lbl {
  color: var(--muted);
}

.dd__menu {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + 6px);
  z-index: 40;
  min-width: 100%;
  padding: 6px;
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sheet);
  animation: panel-in 0.2s var(--ease-arrive);
}

.dd__opt {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px;
  font-size: var(--text-base);
  color: var(--muted);
  white-space: nowrap;
  text-align: start;
  border-radius: var(--radius-sm);
}

.dd__opt:hover {
  color: var(--foreground);
  background: var(--fill-2);
}

.dd__opt[aria-selected="true"] {
  color: var(--foreground);
}

.search {
  position: relative;
  flex: 1;
  max-width: 460px;
}

.search__input {
  width: 100%;
  height: var(--field-h);
  padding: 11px 40px 11px 16px;
  font: inherit;
  color: var(--foreground);
  background: var(--background);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-hover) var(--ease-std);
}

[dir="rtl"] .search__input {
  padding: 11px 16px 11px 40px;
}

.search__input:focus {
  outline: none;
  border-color: var(--tint-bd);
}

.search__input::placeholder {
  color: var(--faint);
}

.search__ic {
  position: absolute;
  inset-inline-end: 14px;
  top: 50%;
  color: var(--faint);
  transform: translateY(-50%);
  pointer-events: none;
}

/* grid */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--min, 150px), 1fr));
  gap: var(--card-gap);
  padding-inline: 12px;
}

.grid--wide {
  --min: 240px;
}

.grid--tile {
  --min: 190px;
}

.grid--sq {
  --min: 160px;
}

@media (min-width: 640px) {
  .grid--tile {
    --min: 190px;
  }
}

/* media card */

.mcard {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition:
    transform var(--dur-hover) var(--ease-std),
    box-shadow var(--dur-hover) var(--ease-std);
}

.mcard--portrait {
  aspect-ratio: var(--ar-portrait);
}

.mcard--square {
  aspect-ratio: var(--ar-square);
}

.mcard:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

.mcard:hover img {
  transform: scale(1.04);
}

.mcard__bar {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  padding: 8px;
  opacity: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
  transition: opacity var(--dur-hover) var(--ease-std);
}

.mcard:hover .mcard__bar,
.mcard:focus-within .mcard__bar {
  opacity: 1;
}

@media (hover: none) {
  .mcard__bar {
    opacity: 1;
  }
}

.mcard__name {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 26px 10px 10px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.featured {
  position: absolute;
  inset-inline-start: 8px;
  top: 8px;
  z-index: 2;
  padding: 3px 9px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--on-accent);
  background: var(--accent);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow);
}

/* pager */

.pager {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  margin-top: 44px;
}

.pager__btn {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 9px 20px;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  transition:
    color var(--dur-hover) var(--ease-std),
    background var(--dur-hover) var(--ease-std);
}

.pager__btn:hover:not(:disabled) {
  color: var(--foreground);
  background: var(--fill-1);
}

.pager__btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.pager__info {
  font-size: var(--text-base);
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* empty + skeleton */

.empty {
  display: grid;
  gap: 8px;
  place-items: center;
  padding: 56px 16px;
  text-align: center;
}

.empty__t {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.empty__s {
  max-width: 34ch;
  color: var(--faint);
}

.sk {
  position: relative;
  overflow: hidden;
  background: var(--fill-2);
  border-radius: var(--radius-lg);
}

.sk::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in oklch, var(--ink-base) 7%, transparent),
    transparent
  );
  animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

.sk--portrait {
  aspect-ratio: var(--ar-portrait);
}

.sk--line {
  height: 12px;
  border-radius: var(--radius-xs);
}

/* --------------------------------------------------------------- rail --- */

.rail {
  position: relative;
}

.rail__track {
  display: flex;
  gap: var(--card-gap);
  padding-inline: var(--page-padding);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.rail__track::-webkit-scrollbar {
  display: none;
}

.rail__track > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.rail__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  background: color-mix(in oklch, var(--background) 86%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-circle);
  box-shadow: var(--shadow-ibtn);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateY(-50%);
  transition: background var(--dur-hover) var(--ease-std);
}

.rail__arrow:hover {
  background: var(--fill-3);
}

.rail__arrow--prev {
  inset-inline-start: 6px;
}

.rail__arrow--next {
  inset-inline-end: 6px;
}

@media (min-width: 1024px) {
  .rail__arrow {
    display: grid;
  }
}

/* ---------------------------------------------------------- fan stack --- */

.fan {
  position: relative;
  display: flex;
  gap: 0;
  align-items: center;
  justify-content: center;
  height: clamp(298px, 32vw, 405px);
  overflow: hidden;
}

.fan__card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(102px, 12.6vw, 180.5px);
  aspect-ratio: var(--ar-portrait);
  overflow: hidden;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition:
    transform var(--dur-stage) var(--ease-surface),
    box-shadow var(--dur-hover) var(--ease-std);
}

.fan__card:nth-child(1) {
  transform: translateX(28%) rotate(-7deg);
  z-index: 1;
}

.fan__card:nth-child(2) {
  transform: translateX(14%) rotate(-3.5deg);
  z-index: 2;
}

.fan__card:nth-child(3) {
  z-index: 3;
  width: clamp(122px, 15vw, 215px);
}

.fan__card:nth-child(4) {
  transform: translateX(-14%) rotate(3.5deg);
  z-index: 2;
}

.fan__card:nth-child(5) {
  transform: translateX(-28%) rotate(7deg);
  z-index: 1;
}

[dir="rtl"] .fan__card:nth-child(1) {
  transform: translateX(-28%) rotate(7deg);
}

[dir="rtl"] .fan__card:nth-child(2) {
  transform: translateX(-14%) rotate(3.5deg);
}

[dir="rtl"] .fan__card:nth-child(4) {
  transform: translateX(14%) rotate(-3.5deg);
}

[dir="rtl"] .fan__card:nth-child(5) {
  transform: translateX(28%) rotate(-7deg);
}

.fan__card:hover {
  z-index: 6;
  box-shadow: var(--shadow-hover);
}

/* --------------------------------------------------- card band stage --- */

/* The greeting-card stage: one live card with two dimmed ghosts fanned behind
   it. Measured at 1440: card 224x398, ghosts scale .94 / rotate ±2-4deg /
   translate ±31-63px, opacity .45, radius 16px. */
.ncstage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(224px, 62vw);
  aspect-ratio: var(--ar-portrait);
  margin-inline: auto;
}

.ncstage__card,
.ncstage__ghost {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 16px;
}

.ncstage__ghost {
  opacity: 0.45;
  transition: transform var(--dur-stage) var(--ease-surface);
}

.ncstage__ghost--a {
  transform: translateX(14%) rotate(2deg) scale(0.94);
}

.ncstage__ghost--b {
  transform: translateX(-28%) rotate(-4deg) scale(0.938);
}

[dir="rtl"] .ncstage__ghost--a {
  transform: translateX(-14%) rotate(-2deg) scale(0.94);
}

[dir="rtl"] .ncstage__ghost--b {
  transform: translateX(28%) rotate(4deg) scale(0.938);
}

.ncstage__card {
  z-index: 2;
  box-shadow: var(--shadow-card);
}

/* -------------------------------------------------------------- deck --- */

.deck {
  position: relative;
  display: grid;
  gap: 14px;
  place-items: center;
}

/* The off-centre cards sit outside the stage box by design; clipping keeps
   them from widening the page at 320px. `overflow-clip-margin` leaves room
   for the shadow so the clip is invisible. */
.deck__stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: clamp(300px, 42vw, 380px);
  overflow-x: clip;
  overflow-clip-margin: 24px;
  perspective: 1200px;
}

.deck__card {
  position: absolute;
  width: var(--card-w, clamp(150px, 20vw, 185px));
  aspect-ratio: var(--card-ar, var(--ar-portrait));
  overflow: hidden;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-stage) var(--ease-surface), opacity var(--dur-stage) var(--ease-surface);
}

.deck__arrows {
  flex-wrap: wrap;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
}

.deck__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--fill-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-circle);
  transition:
    background var(--dur-hover) var(--ease-std),
    transform var(--dur-hover) var(--ease-pop);
}

.deck__arrow:hover {
  background: var(--fill-3);
  transform: scale(1.06);
}

.dots {
  flex-wrap: wrap;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

/* The button is a real 24px tap target; the 6px pill is drawn inside it, so
   the dots look right and are still comfortable to hit on a phone. */
.dot {
  display: grid;
  place-items: center;
  width: 20px;
  height: 24px;
}

.dot::before {
  width: 6px;
  height: 6px;
  content: "";
  background: var(--ghost);
  border-radius: 3px;
  transition:
    width var(--dur-hover) var(--ease-std),
    background var(--dur-hover) var(--ease-std);
}

.dot[data-on="true"] {
  width: 28px;
}

.dot[data-on="true"]::before {
  width: 18px;
  background: var(--accent);
}

/* ------------------------------------------------------------- forms --- */

.field {
  position: relative;
  display: flex;
  align-items: center;
}

.field__ic {
  position: absolute;
  inset-inline-start: 14px;
  color: var(--faint);
  pointer-events: none;
}

.input {
  width: 100%;
  height: var(--field-h);
  padding-inline: 16px;
  font: inherit;
  color: var(--foreground);
  background: var(--background);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-hover) var(--ease-std);
}

.input--icon {
  padding-inline-start: 42px;
}

.input:focus {
  outline: none;
  border-color: var(--tint-bd);
}

.input::placeholder {
  color: var(--faint);
}

.input[aria-invalid="true"] {
  border-color: #d2504a;
}

.label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--muted);
}

.hint {
  margin-top: 8px;
  font-size: var(--text-sm);
  color: var(--faint);
}

.hint--error {
  color: #e2726c;
}

.pillform {
  display: flex;
  gap: 5.6px;
  align-items: center;
  padding: 4.8px 4.8px 4.8px 14.4px;
  background: var(--fill-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

[dir="rtl"] .pillform {
  padding: 4.8px 14.4px 4.8px 4.8px;
}

.pillform__input {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--foreground);
  background: none;
  border: 0;
}

.pillform__input:focus {
  outline: none;
}

.pillform__input::placeholder {
  color: var(--faint);
}

.pillform__btn {
  flex-shrink: 0;
  height: 36px;
  padding-inline: 16px;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--on-accent);
  background: var(--accent);
  border-radius: var(--radius-pill);
  transition: opacity var(--dur-hover) var(--ease-std);
}

.pillform__btn:hover {
  opacity: 0.9;
}

/* Platform picker: a row of round icon badges with the label underneath —
   no card chrome, matching the reference's `.a7g-tile` (audit §30). */

.tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 2px;
  justify-content: center;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: 78px;
  padding: 10px 4px;
  font-size: var(--text-xs);
  color: var(--muted);
  text-align: center;
  background: none;
  border: 0;
  border-radius: var(--radius-lg);
  transition:
    color var(--dur-hover) var(--ease-std),
    background var(--dur-hover) var(--ease-std);
}

.tile:hover {
  color: var(--foreground);
  background: var(--fill-1);
}

.tile[aria-checked="true"] {
  color: var(--foreground);
  background: var(--fill-2);
}

.tile__ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-circle);
  transition:
    transform var(--dur-hover) var(--ease-pop),
    box-shadow var(--dur-hover) var(--ease-std);
}

.tile:hover .tile__ic {
  transform: translateY(-2px);
}

.tile[aria-checked="true"] .tile__ic {
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px currentColor;
}

/* ------------------------------------------------------- preset card --- */

/* Card structure measured from the reference: comparison image, a full-width
   download row separated by a hairline, then a footer row with the share
   control on the trailing edge and the name + file type on the leading edge. */
.pcard {
  overflow: hidden;
  background: var(--fill-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
}

.pcard__dl {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--accent-ink);
  border-top: 1px solid var(--border);
  transition: background var(--dur-hover) var(--ease-std);
}

.pcard__dl:hover {
  background: var(--tint);
}

.pcard__foot {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
}

.pcard__name {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

/* --------------------------------------------------------- news band --- */

.newsband {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

@media (min-width: 768px) {
  .newsband {
    grid-template-columns: minmax(0, 1fr) 120px;
  }
}

.newsband__figure {
  position: relative;
  width: min(496px, 100%);
  margin-inline: auto;
  overflow: hidden;
  aspect-ratio: var(--ar-photo);
  background: var(--card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.newsband__cap {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: grid;
  gap: 6px;
  padding: 40px 18px 18px;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), transparent);
}

.newsband__cap h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 1.3;
}

/* The vertical "news through time" rail: one tick per article, the active one
   extended and tinted. */
.timeline {
  display: none;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

@media (min-width: 768px) {
  .timeline {
    display: flex;
  }
}

.timeline__tick {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  font-size: var(--text-xs);
  color: transparent;
  transition: color var(--dur-hover) var(--ease-std);
}

.timeline__tick::after {
  width: 28px;
  height: 2px;
  content: "";
  background: var(--border-strong);
  border-radius: 2px;
  transition:
    width var(--dur-hover) var(--ease-std),
    background var(--dur-hover) var(--ease-std);
}

.timeline__tick:hover,
.timeline__tick[aria-selected="true"] {
  color: var(--accent-ink);
}

.timeline__tick:hover::after,
.timeline__tick[aria-selected="true"]::after {
  width: 40px;
  background: var(--accent);
}

/* ------------------------------------------------------------- modal --- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--mobile-padding);
}

.modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(var(--scrim-rgb), 0.6);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  animation: fade-in 0.2s var(--ease-std);
}

.modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 560px);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--sheet);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sheet);
  animation: modal-in 0.34s var(--ease-arrive);
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
}

.modal__head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}

.modal__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.modal__body {
  padding: 18px;
}

.modal__foot {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 16px 18px;
  border-top: 1px solid var(--border);
}

/* -------------------------------------------------------------- misc --- */

.meta {
  font-size: var(--text-sm);
  color: var(--faint);
}

.stack-sm {
  display: grid;
  gap: 8px;
}

.stack-md {
  display: grid;
  gap: 16px;
}

.stack-lg {
  display: grid;
  gap: 26px;
}

/* Grid and flex items default to `min-width: auto`, so a horizontally
   scrolling child (a chip row, a rail) would size its whole column to the sum
   of its contents and push the page sideways at narrow widths. Opting every
   layout child out of that is what keeps 320px free of horizontal overflow. */
.stack-sm > *,
.stack-md > *,
.stack-lg > *,
.grid > *,
.newsband > *,
.toolbar > *,
.band__row > * {
  min-width: 0;
}

.center {
  text-align: center;
}

.toast {
  position: fixed;
  inset-inline: 0;
  bottom: 24px;
  z-index: 95;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.toast__in {
  padding: 10px 18px;
  font-size: var(--text-base);
  color: var(--foreground);
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sheet);
  animation: toast-in 0.3s var(--ease-pop);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* ------------------------------------------------------------ footer --- */

.footer {
  max-width: var(--container-width);
  padding: clamp(24px, 3vw, 32px) clamp(24px, 3vw, 40px) 0;
  margin: 40px auto 0;
  background: var(--fill-1);
  border: 1px solid var(--border-soft);
  border-bottom: 0;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.footer__grid {
  display: grid;
  gap: 32px;
  padding-block: 32px;
}

@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: 1fr 2fr;
  }
}

.footer__brand {
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-display);
}

.footer__tag {
  margin-top: 8px;
  font-size: var(--text-base);
  color: var(--muted);
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 24px;
}

.footer__h {
  margin-bottom: 10px;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--heading);
}

/* Social links are an icon-over-label grid, not a text list. */
.footer__socials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 14px 4px;
  max-width: 280px;
}

.footer__soc {
  display: grid;
  gap: 6px;
  justify-items: center;
  font-size: var(--text-xs);
  color: var(--muted);
  text-align: center;
  transition: color var(--dur-hover) var(--ease-std);
}

.footer__soc:hover {
  color: var(--foreground);
}

/* The "discover more" panel below the baseline rule. */
.footer__more {
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.footer__more h2 {
  padding: 12px 18px;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  background: var(--tint);
}

.footer__more a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  font-size: var(--text-base);
  color: var(--muted);
  border-top: 1px solid var(--border);
  transition:
    color var(--dur-hover) var(--ease-std),
    background var(--dur-hover) var(--ease-std);
}

.footer__more a:hover {
  color: var(--foreground);
  background: var(--fill-1);
}

.footer__tail {
  padding-block: 18px;
  font-size: var(--text-sm);
  color: var(--faint);
  text-align: center;
}

.footer__link {
  min-width: 24px;
  display: block;
  padding-block: 5px;
  font-size: var(--text-base);
  color: var(--muted);
  transition: color var(--dur-hover) var(--ease-std);
}

.footer__link:hover {
  color: var(--foreground);
}

.footer__base {
  padding-block: 18px;
  font-size: var(--text-sm);
  color: var(--muted);
  text-align: center;
  border-top: 1px solid var(--border);
}

/* --------------------------------------------------- touch target sizes --- */

/* Inline text links inside dense rows still need a 24px tap target. */
.crumbs a,
.crumbs__cur,
.pcard__name,
.footer__link,
.timeline__tick {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* ------------------------------------------------- mobile nav + search --- */

/* Below `lg` the reference centres the brand between a leading hamburger and a
   trailing search control. Absolute centring keeps the mark on the true centre
   regardless of how wide either side happens to be. */
.nav__searchtoggle {
  display: grid;
}

@media (min-width: 1024px) {
  .nav__searchtoggle {
    display: none;
  }
}

@media (max-width: 1023px) {
  .nav__brand {
    position: absolute;
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }

  [dir="rtl"] .nav__brand {
    transform: translateX(50%);
  }
}

/* The search sheet that the toggle opens on small screens. */
.navsheet {
  position: sticky;
  top: var(--nav-height);
  z-index: 49;
  padding: 10px var(--nav-padding);
  background: var(--glass);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--border-soft);
  animation: panel-in 0.2s var(--ease-arrive);
}

.navsearch--sheet {
  display: block;
  width: 100%;
}

.navsearch--sheet .navsearch__input {
  width: 100%;
  height: 40px;
}

.navsearch--sheet .navsearch__input:focus {
  width: 100%;
}

.navsearch--sheet .navsearch__results {
  width: 100%;
}

/* Inner-page stacks put their arrows at the stage's edges (the card-designer
   deck keeps them below, beside the dots). */
.deck__arrow--prev,
.deck__arrow--next {
  position: absolute;
  top: 50%;
  z-index: 11;
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-ibtn);
  transform: translateY(-50%);
}

.deck__arrow--prev:hover,
.deck__arrow--next:hover {
  transform: translateY(-50%) scale(1.06);
}

.deck__arrow--prev {
  inset-inline-start: 0;
}

.deck__arrow--next {
  inset-inline-end: 0;
}

.deck__arrows:empty {
  display: none;
}

/* ---------------------------------------------------------- news card --- */

/* Compact row: image on the trailing edge, copy on the leading edge. The first
   result in the grid spans the row and swaps to a larger banner. */
.ncard {
  display: grid;
  grid-template-columns: 1fr 112px;
  gap: 12px;
  align-items: center;
  padding: 10px;
  background: var(--fill-1);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  transition:
    background var(--dur-hover) var(--ease-std),
    transform var(--dur-hover) var(--ease-std);
}

.ncard:hover {
  background: var(--fill-2);
  transform: translateY(-2px);
}

.ncard__media {
  position: relative;
  order: 2;
  overflow: hidden;
  aspect-ratio: var(--ar-photo);
  background: var(--card);
  border-radius: var(--radius-sm);
}

.ncard__body {
  display: grid;
  gap: 6px;
  min-width: 0;
  order: 1;
}

.ncard__title {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.ncard__foot {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.ncard--lead {
  grid-column: 1 / -1;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

@media (min-width: 768px) {
  .ncard--lead {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}

.ncard--lead .ncard__media {
  aspect-ratio: var(--ar-wide);
  border-radius: 0;
}

.ncard--lead .ncard__body {
  gap: 10px;
  padding: 22px;
  align-content: center;
}

.ncard--lead .ncard__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  -webkit-line-clamp: 4;
}

/* The leading half of a paired control (a "previous" arrow) points the other
   way from `.mirror`: flipped in LTR, upright in RTL. Both arrows then point
   outward in either direction, as they do on the reference. */
.mirror-rev {
  transform: scaleX(-1);
}

[dir="rtl"] .mirror-rev {
  transform: none;
}

/* --------------------------------------------------------- شعار العلامة --- */

/* نسختان من الشعار تتبادلان حسب الثيم، بلا جافاسكربت وبلا وميض. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.brand__img {
  width: auto;
  height: var(--brand-h, 26px);
  object-fit: contain;
}

/* الافتراضي فاتح، فالنسخة الداكنة هي الظاهرة */
.brand__img--light {
  display: none;
}

:root[data-theme="dark"] .brand__img--dark {
  display: none;
}

:root[data-theme="dark"] .brand__img--light {
  display: block;
}

.brand__name {
  font-size: var(--text-md);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-display);
}