/* ============================================================
   ARAB PRINCESS — the private world of one extraordinary woman
   Timeless · intimate · refined. No cards, no gradients,
   no glossy buttons, no heavy gold.
   ============================================================ */

:root{
  --black:    #000000;
  --ink:      #1a1714;
  --charcoal: #2b2622;
  --mute:     #8f897f;
  --ivory:    #f6f2ec;
  --white:    #ffffff;
  --gold:     #b29667;          /* used only as a whisper */
  --hair:     rgba(26,23,20,.18);
  --hair-lt:  rgba(255,255,255,.4);

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;
  --ease:  cubic-bezier(.22,.61,.36,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--serif);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; width:100%; height:100%; object-fit:cover; }
::selection{ background:var(--charcoal); color:var(--ivory); }

/* graceful, gradient-free image fallback */
.media,.hero__media,.intro__media,.closing__media{ position:relative; overflow:hidden; background:#e7ddcd; }
.hero__media,.closing__media{ background:#17120f; }
.media--empty::after{
  content:"Arab Princess";
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:.58rem; letter-spacing:.4em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}

/* shared small label */
.eyebrow{
  display:block; text-align:center;
  font-family:var(--sans); font-weight:300;
  font-size:.62rem; letter-spacing:.44em; text-transform:uppercase;
  color:var(--mute);
}

/* shared text link */
.textlink{
  display:block; width:max-content;
  font-family:var(--sans); font-weight:300;
  font-size:.7rem; letter-spacing:.4em; text-transform:uppercase;
  color:var(--charcoal); text-decoration:none;
  padding-bottom:.55rem; border-bottom:1px solid var(--hair);
  transition:letter-spacing .7s var(--ease), border-color .7s var(--ease);
}
.textlink:hover{ letter-spacing:.48em; border-color:var(--gold); }
.textlink--light{ color:var(--ivory); border-color:var(--hair-lt); }
.textlink--light:hover{ border-color:var(--ivory); }

/* ============================================================
   LOADER
   ============================================================ */
.loader{
  position:fixed; inset:0; z-index:1000;
  background:var(--black);
  display:flex; align-items:center; justify-content:center;
  opacity:1; transition:opacity 1.4s var(--ease);
}
.loader.is-out{ opacity:0; }
.loader.is-gone{ display:none; }
.loader__logo{
  width:auto; height:auto;
  max-width:min(46vw,300px); max-height:38vh;
  object-fit:contain;
  opacity:0; transform:scale(1.02);
  transition:opacity 1.6s var(--ease), transform 2s var(--ease);
}
.loader.is-lit .loader__logo{ opacity:1; transform:none; }
.loader__word{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2rem,6vw,3.4rem); letter-spacing:.12em;
  color:var(--ivory);
  opacity:0; transition:opacity 1.6s var(--ease);
}
.loader.is-lit .loader__word{ opacity:1; }

/* ============================================================
   HERO — full-screen portrait
   ============================================================ */
.hero{ position:relative; height:100svh; min-height:560px; overflow:hidden; }
.hero__media{ position:absolute; inset:0; }
.hero__media img{
  opacity:0; transform:scale(1.06);
  transition:opacity 2.4s var(--ease), transform 6s var(--ease);
}
.hero.is-in .hero__media img{ opacity:1; transform:none; }

.hero__copy{
  position:absolute; left:0; right:0; bottom:clamp(3rem,8vh,7rem);
  text-align:center; padding:0 1.5rem; color:var(--white);
  text-shadow:0 1px 30px rgba(0,0,0,.45);
}
.hero__copy > *{ opacity:0; transform:translateY(16px); }
.hero.is-in .hero__copy > *{ opacity:1; transform:none; transition:opacity 1.8s var(--ease), transform 1.8s var(--ease); }
.hero.is-in .hero__quote{ transition-delay:.3s; }
.hero.is-in .hero__name { transition-delay:.7s; }
.hero.is-in .hero__line { transition-delay:1.1s; }
.hero.is-in .discover   { transition-delay:1.5s; }

.hero__quote{
  font-style:italic; font-weight:300;
  font-size:clamp(1.05rem,2.2vw,1.4rem); letter-spacing:.02em;
  margin-bottom:1.4rem; color:rgba(255,255,255,.92);
}
.hero__name{
  font-weight:300;
  font-size:clamp(2.8rem,9vw,5.6rem); letter-spacing:.06em; line-height:1;
}
.hero__line{
  font-weight:300;
  font-size:clamp(.98rem,1.8vw,1.18rem); letter-spacing:.02em; line-height:1.8;
  margin:1.4rem auto 2.4rem; max-width:40ch; color:rgba(255,255,255,.88);
}
.discover{
  display:inline-block;
  font-family:var(--sans); font-weight:300;
  font-size:.72rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--white); text-decoration:none;
  padding-bottom:.5rem; border-bottom:1px solid var(--hair-lt);
  transition:letter-spacing .7s var(--ease), border-color .7s var(--ease);
}
.discover:hover{ letter-spacing:.5em; border-color:var(--white); }

/* ============================================================
   SECOND — cinematic split / personal intro
   ============================================================ */
.intro{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center; gap:clamp(3rem,8vw,7rem);
  max-width:1280px; margin:0 auto;
  padding:clamp(7rem,16vw,12rem) clamp(1.5rem,7vw,6rem);
}
.intro__media{ aspect-ratio:4/5; }
.intro__text{ max-width:48ch; }
.intro__text .lead{
  font-size:clamp(1.3rem,2.4vw,1.7rem); font-weight:300; line-height:1.7;
  font-style:italic; color:var(--charcoal); margin-bottom:1.8rem;
}
.intro__text p{
  font-size:clamp(1.02rem,1.4vw,1.16rem); font-weight:300; line-height:2; color:var(--ink);
}
.signature{
  display:block; margin-top:2.2rem;
  font-family:var(--sans); font-weight:300;
  font-size:.64rem; letter-spacing:.34em; text-transform:uppercase; color:var(--mute);
}

/* ============================================================
   THIRD — lifestyle (three photographs)
   ============================================================ */
.life{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.6rem,4vw,3.2rem);
  max-width:1280px; margin:0 auto;
  padding:0 clamp(1.5rem,7vw,6rem) clamp(7rem,15vw,11rem);
}
.life__item .media{ aspect-ratio:3/4; }
.life__item:nth-child(2){ transform:translateY(clamp(2rem,5vw,4rem)); } /* gentle editorial offset */
.life__item img{ transition:transform 2.2s var(--ease); }
.life__item:hover img{ transform:scale(1.04); }
.life__item figcaption{
  margin-top:1.1rem; text-align:center;
  font-family:var(--sans); font-weight:300;
  font-size:.6rem; letter-spacing:.34em; text-transform:uppercase; color:var(--mute);
}

/* ============================================================
   FOURTH — gallery preview
   ============================================================ */
.gallery{ max-width:1280px; margin:0 auto; padding:0 clamp(1.5rem,7vw,6rem) clamp(7rem,15vw,11rem); }
.gallery .eyebrow{ margin-bottom:clamp(3rem,6vw,5rem); }
.gallery__grid{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(1.6rem,4vw,3.4rem) clamp(1.6rem,4vw,3.6rem);
}
.shot--1{ grid-column:1 / 6;  }
.shot--2{ grid-column:7 / 13; margin-top:clamp(3rem,8vw,7rem); }
.shot--3{ grid-column:2 / 7;  margin-top:clamp(1rem,3vw,3rem); }
.shot--4{ grid-column:8 / 12; }
.shot--1 .media{ aspect-ratio:4/5; }
.shot--2 .media{ aspect-ratio:3/4; }
.shot--3 .media{ aspect-ratio:3/4; }
.shot--4 .media{ aspect-ratio:4/5; }
.shot img{ transition:transform 2.4s var(--ease); }
.shot:hover img{ transform:scale(1.06); }     /* slow zoom */
.gallery .textlink{ margin:clamp(4rem,9vw,7rem) auto 0; }

/* ============================================================
   FINAL — full-width portrait
   ============================================================ */
.closing{ position:relative; height:92svh; min-height:520px; overflow:hidden; }
.closing__media{ position:absolute; inset:0; }
.closing__media img{ transition:transform 6s var(--ease); }
.closing:hover .closing__media img{ transform:scale(1.04); }
.closing__copy{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:2.4rem; padding:1.5rem;
  color:var(--ivory); text-shadow:0 1px 30px rgba(0,0,0,.45);
}
.closing__line{
  font-style:italic; font-weight:300;
  font-size:clamp(1.6rem,4.4vw,3rem); letter-spacing:.01em; max-width:20ch; line-height:1.4;
}
.closing__copy .textlink{ margin:0 auto; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  text-align:center; background:var(--white);
  padding:clamp(4rem,8vw,6rem) 1.5rem clamp(3rem,5vw,4rem);
  border-top:1px solid var(--hair);
}
.foot__mark{ font-size:1.25rem; letter-spacing:.06em; color:var(--charcoal); margin-bottom:1.8rem; }
.foot__mark span{ font-family:var(--sans); font-size:.6rem; letter-spacing:.3em; color:var(--gold); }
.foot__row{ display:flex; align-items:center; justify-content:center; gap:1.6rem; margin-bottom:1.8rem; }
.foot__row .ig{ color:var(--ink); display:inline-flex; transition:color .6s var(--ease); }
.foot__row .ig:hover{ color:var(--gold); }
.foot__mail{
  font-family:var(--sans); font-weight:300;
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; transition:color .6s var(--ease);
}
.foot__mail:hover{ color:var(--gold); }
.foot__copy{
  display:block; font-family:var(--sans); font-weight:300;
  font-size:.56rem; letter-spacing:.24em; text-transform:uppercase; color:var(--mute);
}

/* ============================================================
   SCROLL FADE
   ============================================================ */
.fade{ opacity:0; transform:translateY(30px); }
.fade.is-in{ opacity:1; transform:none; transition:opacity 1.8s var(--ease), transform 1.8s var(--ease); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:880px){
  .intro{ grid-template-columns:1fr; gap:clamp(2.5rem,8vw,4rem); }
  .intro__media{ max-width:440px; }
  .life{ grid-template-columns:1fr; max-width:460px; gap:clamp(2.4rem,8vw,3.4rem); }
  .life__item:nth-child(2){ transform:none; }
  .shot--1,.shot--2,.shot--3,.shot--4{ margin-top:0; }
  .shot--1{ grid-column:1 / 8; }
  .shot--2{ grid-column:6 / 13; }
  .shot--3{ grid-column:1 / 8; }
  .shot--4{ grid-column:6 / 13; }
}
@media (max-width:560px){
  .br-d{ display:none; }
  .gallery__grid{ grid-template-columns:1fr; gap:clamp(2.6rem,9vw,3.4rem); }
  .shot--1,.shot--2,.shot--3,.shot--4{ grid-column:1 / -1; }
  .shot .media{ aspect-ratio:4/5 !important; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition-duration:.001ms !important; animation:none !important; }
  .fade,.hero__copy>*,.hero__media img{ opacity:1 !important; transform:none !important; }
  .loader{ display:none !important; }
}