@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500;600&family=Markazi+Text:wght@500;600&display=swap');

:root{
  --ink-black: #17110d;
  --ink-brown: #241a15;
  --panel-brown: #2f2320;
  --gold: #c9a15a;
  --gold-soft: #e2c98a;
  --rust: #a8532f;
  --ivory: #f4ead9;
  --taupe: #b7a48d;
  --taupe-dim: #7d6f60;
  --serif: 'Bodoni Moda', 'Times New Roman', serif;
  --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --arabic: 'Markazi Text', serif;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  background:var(--ink-black);
  color:var(--ivory);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
}

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

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

.eyebrow{
  font-family:var(--sans);
  font-size:0.72rem;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:500;
}

/* ---------- NAV ---------- */
.site-nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.6rem clamp(1.5rem,5vw,4rem);
  background:linear-gradient(to bottom, rgba(23,17,13,0.85), transparent);
  transition:background 0.3s ease, padding 0.3s ease;
}
.site-nav.scrolled{
  background:rgba(23,17,13,0.92);
  padding:1rem clamp(1.5rem,5vw,4rem);
  border-bottom:1px solid rgba(201,161,90,0.15);
  backdrop-filter:blur(6px);
}
.nav-mark{
  font-family:var(--serif);
  font-size:1.25rem;
  letter-spacing:0.08em;
  color:var(--ivory);
}
.nav-mark span{color:var(--gold);}
.nav-links{
  display:flex;
  gap:clamp(1.2rem,2.5vw,2.6rem);
  list-style:none;
}
.nav-links a{
  font-size:0.78rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--taupe);
  position:relative;
  padding-bottom:4px;
  transition:color 0.25s ease;
}
.nav-links a:hover, .nav-links a.active{color:var(--gold-soft);}
.nav-links a.active::after{
  content:'';
  position:absolute;
  left:0;bottom:0;
  width:100%;height:1px;
  background:var(--gold);
}
.nav-toggle{display:none;background:none;border:none;color:var(--ivory);font-size:1.5rem;cursor:pointer;}

@media (max-width:820px){
  .nav-links{
    position:fixed;
    top:0;right:-100%;
    height:100vh;
    width:min(78vw,340px);
    background:var(--ink-brown);
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    padding:3rem;
    gap:2rem;
    transition:right 0.4s ease;
    border-left:1px solid rgba(201,161,90,0.2);
  }
  .nav-links.open{right:0;}
  .nav-toggle{display:block;}
}

/* ---------- FOOTER ---------- */
.site-footer{
  padding:3.5rem clamp(1.5rem,5vw,4rem) 2.5rem;
  border-top:1px solid rgba(201,161,90,0.15);
  text-align:center;
  background:var(--ink-brown);
}
.footer-mark{
  font-family:var(--arabic);
  font-size:1.6rem;
  color:var(--gold);
  margin-bottom:0.6rem;
}
.footer-links{
  display:flex;
  justify-content:center;
  gap:2rem;
  margin:1.2rem 0;
  flex-wrap:wrap;
}
.footer-links a{
  font-size:0.72rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--taupe);
}
.footer-links a:hover{color:var(--gold-soft);}
.footer-copy{
  font-size:0.72rem;
  color:var(--taupe-dim);
  letter-spacing:0.05em;
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  padding:0.9rem 2.1rem;
  border:1px solid var(--gold);
  color:var(--gold-soft);
  font-size:0.75rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  transition:all 0.3s ease;
}
.btn:hover{background:var(--gold);color:var(--ink-black);}

/* ---------- SECTION HEADERS w/ Arabic watermark signature ---------- */
.section-head{
  position:relative;
  text-align:center;
  padding:0 1.5rem;
  margin-bottom:3.5rem;
}
.section-head .watermark{
  position:absolute;
  top:-2.2rem;left:50%;
  transform:translateX(-50%);
  font-family:var(--arabic);
  font-size:clamp(3rem,10vw,6rem);
  color:rgba(201,161,90,0.07);
  white-space:nowrap;
  pointer-events:none;
  z-index:0;
}
.section-head h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.8rem,4vw,2.8rem);
  position:relative;
  z-index:1;
}
.section-head p{
  color:var(--taupe);
  max-width:520px;
  margin:0.9rem auto 0;
  position:relative;
  z-index:1;
}

section{padding:6rem clamp(1.5rem,5vw,4rem);}