/* هوية مِرآة التحريرية — نظام لوني وحروف مخصص */
:root {
  --ink: #091d24;
  --ink-2: #12333b;
  --paper: #f6f4ee;
  --mirror: #2cc5bd;
  --mirror-soft: #92e1dc;
  --coral: #e45f4d;
  --muted: #607078;
  --line: #d7ddd9;
  --gold: var(--mirror);
  --red: var(--coral);
}

.site-header {
  background: linear-gradient(112deg, #07181e 0%, var(--ink) 58%, #0d2d34 100%);
  box-shadow: 0 8px 28px #091d2430;
}

.brand { align-items: center; gap: 14px; }
.brand > b { display: none; }
.wordmark {
  position: relative;
  display: inline-grid;
  place-items: center;
  padding: 3px 8px 9px;
  isolation: isolate;
}
.wordmark b {
  font-family: "Reem Kufi Ink", "Noto Kufi Arabic", sans-serif;
  font-size: 3rem;
  font-weight: 400;
  line-height: .9;
  color: #f8ffff;
  letter-spacing: -.09em;
  text-shadow: 0 0 24px #2cc5bd35;
}
.wordmark::before {
  content: "";
  position: absolute;
  inset: auto 5px 2px 5px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--mirror) 18% 82%, transparent);
  border-radius: 50%;
  box-shadow: 0 5px 13px #2cc5bd88;
}
.wordmark::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 2px solid var(--mirror);
  border-radius: 50%;
  left: 4px;
  top: 3px;
  box-shadow: 0 0 0 3px #2cc5bd18;
}
.wordmark i {
  position: absolute;
  inset: auto 18% -5px 18%;
  height: 5px;
  background: linear-gradient(90deg, transparent, #92e1dc88, transparent);
  filter: blur(2px);
  opacity: .75;
}
.brand small { border-color: #ffffff38; color: #b9cacd; letter-spacing: .04em; }
.ticker strong { background: var(--coral); box-shadow: -8px 0 18px #e45f4d30; }
.lead-card { background: linear-gradient(145deg, var(--ink-2), var(--ink)); border-bottom: 5px solid var(--mirror); }
.visual { background: linear-gradient(140deg, #1d4b50, #091d24); }
.sport-panel { background: radial-gradient(circle at 20% 20%, #286f6b, transparent 34%), linear-gradient(135deg, #103c3b, #091d24); }
.docs { background: linear-gradient(135deg, #07181e, var(--ink-2)); border-top: 1px solid #2cc5bd55; }
.newsletter { background: linear-gradient(112deg, var(--mirror-soft), var(--mirror)); box-shadow: 12px 12px 0 var(--ink); }

@media (max-width: 520px) {
  .wordmark b { font-size: 2.35rem; }
  .wordmark::after { width: 7px; height: 7px; }
  .newsletter { box-shadow: 7px 7px 0 var(--ink); }
}
