/* بابُ الدار (/) — صورةُ دارِ نشرٍ كاملةُ العرضِ قبلَ الرئيسيّة. ألوانٌ من رموزِ dar.css وحدَها (الشفافيّةُ بـcolor-mix لا بلونٍ جديد). */
.gate-bar { position: absolute; inset-inline: 0; top: 0; z-index: 20; height: var(--bar); }
.gate-bar .wrap { height: 100%; display: flex; align-items: center; gap: 16px; }
.gate-bar .acts { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.gate-bar .btn:not(.go) { background: color-mix(in srgb, var(--deep) 55%, transparent); backdrop-filter: blur(6px); }

.gate { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; overflow: hidden; isolation: isolate; background: var(--deep); }
.gate-img { position: absolute; inset: 0; z-index: -2; }
.gate-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% 55%; animation: gate-drift 18s var(--ease-breathe) both; }
.gate::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to left, color-mix(in srgb, var(--bg) 94%, transparent) 0%, color-mix(in srgb, var(--bg) 80%, transparent) 30%, color-mix(in srgb, var(--bg) 22%, transparent) 60%, transparent 80%),
    linear-gradient(to bottom, color-mix(in srgb, var(--deep) 72%, transparent) 0%, transparent 16%, transparent 68%, var(--bg) 100%); }

.gate-in { align-self: center; padding-block: calc(var(--bar) + 40px) 24px; }
.gate .enter { max-width: 640px; }
.gate-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 15px; font-weight: 500; color: var(--accent-ink); }
.gate-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--accent); }
.gate h1 { font-size: clamp(44px, 7vw, 92px); line-height: 1.08; letter-spacing: -.01em; text-shadow: 0 8px 40px var(--deep); }
.gate-sub { margin-top: 16px; font-size: clamp(20px, 2.4vw, 30px); font-weight: 500; line-height: 1.4; color: var(--ink); }
.gate .lede { margin-top: 12px; font-size: clamp(16px, 1.5vw, 18px); }
.gate .acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

.gate-foot { padding-bottom: 20px; }
.gate-facts { display: flex; flex-wrap: wrap; gap: 8px 30px; margin: 8px 0 0; color: var(--ink-2); font-size: 14px; }
.gate-facts span { display: inline-flex; align-items: baseline; gap: 7px; }
.gate-facts .num { color: var(--ink); font-size: 16px; }
.entrance .site-foot { margin-top: 0; }

@keyframes gate-drift { from { transform: scale(1.06); } to { transform: none; } }

@media (max-width: 760px) {
  .gate-img img { object-position: 50% 78%; }
  .gate::before { background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 90%, transparent) 0%, color-mix(in srgb, var(--bg) 72%, transparent) 40%, color-mix(in srgb, var(--bg) 8%, transparent) 66%, var(--bg) 100%); }
  .gate-in { align-self: start; padding-top: calc(var(--bar) + 24px); }
  .gate-bar .brand span { font-size: 15px; }
  .gate-bar .btn { min-height: 36px; padding-inline: 12px; }
}