/* ============================================================
   Sawt Al-Shir — shared site CSS
   Distilled from index.html, factored for multi-page use.
   ============================================================ */

:root{
  --bg:        #080C14;
  --bg-2:      #0B1220;
  --ink:       #FFFFFF;
  --ink-soft:  rgba(220,230,255,0.85);
  --ink-muted: rgba(220,230,255,0.55);
  --ink-faint: rgba(220,230,255,0.32);
  --line:      rgba(220,230,255,0.10);
  --line-2:    rgba(220,230,255,0.18);
  --accent:    #C9D6EE;
  --accent-2:  #8FA8D6;
  --glow:      rgba(30,60,120,0.40);

  --f-display:  'Aref Ruqaa', serif;
  --f-verse:    'Amiri', serif;
  --f-latin:    'EB Garamond', serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink-soft);}
html{scroll-behavior:smooth}
body{
  font-family: var(--f-verse);
  font-size: 18px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* ---------- Starfield + Moonglow ---------- */
#starfield{
  position: fixed; inset:0;
  width:100%; height:100%;
  z-index: 0;
  pointer-events:none;
}
.moonglow{
  position: fixed;
  top:-10vh; left:50%;
  transform: translateX(-50%);
  width: 120vmin; height: 120vmin;
  border-radius: 50%;
  background: radial-gradient(circle at center,
                rgba(30,60,120,0.40) 0%,
                rgba(30,60,120,0.22) 28%,
                rgba(30,60,120,0.08) 50%,
                rgba(30,60,120,0) 70%);
  pointer-events:none;
  z-index: 0;
  filter: blur(2px);
}

main, footer, .site-nav{ position:relative; z-index:1; }

/* ---------- Site nav (NEW for multi-page) ---------- */
.site-nav{
  display:flex; justify-content:space-between; align-items:center;
  padding: 22px 32px;
  border-bottom: 1px solid var(--line);
  background: rgba(8,12,20,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-nav .brand-mark{
  font-family: var(--f-display);
  color: var(--ink);
  font-size: 22px;
  letter-spacing: 0;
}
.site-nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; gap: 32px;
  font-family: var(--f-display);
  font-size: 16px;
}
.site-nav a{
  color: var(--ink-soft);
  position: relative;
  transition: color .3s ease;
}
.site-nav a:hover, .site-nav a.active{ color: var(--accent); }
.site-nav a.active::after{
  content:'';
  position:absolute; bottom:-6px; left:0; right:0;
  height:1px; background: var(--accent); opacity:.6;
}

/* ---------- Layout shell ---------- */
.wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}
.wrap-narrow{
  max-width: 820px;
  margin: 0 auto;
  padding: 0 32px;
}
section{ position:relative; }

/* ---------- Reveal ---------- */
.reveal{
  opacity:0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1),
              transform .9s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--d, 0ms);
}
.reveal.in{ opacity:1; transform: none; }

/* ---------- Section header pattern ---------- */
.section{ padding: 140px 0; }
.section-label{
  font-family: var(--f-latin);
  font-style: italic;
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent);
  direction: ltr;
  display:flex; align-items:center; gap:14px;
  margin-bottom: 18px;
}
.section-label::before{
  content:''; width:32px; height:1px; background: var(--accent); opacity:.6;
}
.section-title{
  font-family: var(--f-display);
  font-weight: 400;
  color: var(--ink);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.2;
  margin: 0 0 28px;
}

/* ---------- Footer ---------- */
footer{
  border-top: 1px solid var(--line);
  padding: 26px 32px;
  background: rgba(4,7,12,0.6);
  color: var(--ink-faint);
  font-family: var(--f-latin);
  font-style: italic;
  font-size: 13px;
  letter-spacing: .12em;
  text-align:center;
}
footer .footer-row{
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
}
footer .sep{ display:inline-block; margin:0 14px; opacity:.5; }
footer a{
  color: var(--ink-muted);
  transition: color .25s ease;
}
footer a:hover{ color: var(--accent); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  #starfield{ display:none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .section{ padding: 100px 0; }
  .wrap, .wrap-narrow{ padding: 0 24px; }
  .site-nav{ padding: 18px 24px; }
  .site-nav ul{ gap: 20px; font-size: 14px; }
}