/* Dharti Group — individual project page
   ============================================================
   /dharti-phase-2/ and /swapnapurti/. One render each and no other
   photography, so the page is built around a single tall image rather than a
   gallery, with the facts sitting beside it.

   These pages are a record of the work, not a sales page. See the comment at
   the top of either file before adding anything to them.
   ============================================================ */

.pr{ --maxw:64rem; }
.pr-sec{ padding:clamp(4.5rem,11vh,8rem) var(--gutter); }

/* ---------- back link ---------- */
/* Sits inside the head rather than above it, so the head's background image can
   start at the top of the page instead of below a navy band. */
.pr-back{ margin:0 0 1.4rem; }
.pr-back a{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  transition:color .3s var(--ease);
}
.pr-back a span{ transition:transform .4s var(--ease); }
.pr-back a:hover{ color:var(--gold-2); }
.pr-back a:hover span{ transform:translateX(-4px); }

/* ---------- head ---------- */
/* Each head carries its own render, greyed back and veiled by .head-bg, so the
   page opens on a soft echo of the sharp image immediately below it. Both
   renders are tall portraits, so --bg-pos takes a slice through the building
   mass rather than the sky above it. */
.pr-head{ padding:clamp(6.5rem,14vh,9.5rem) var(--gutter) clamp(2.5rem,6vh,4rem); }
.pr--swapnapurti .pr-head{
  --bg:url("../assets/projects/swapnapurti-full.jpg");
  --bg:image-set(url("../assets/projects/swapnapurti-full.webp") type("image/webp"),
                 url("../assets/projects/swapnapurti-full.jpg")  type("image/jpeg"));
  --bg-pos:center 45%;
  --bg-op:.62;
}
.pr--phase-2 .pr-head{
  --bg:url("../assets/projects/dharti-phase-2-full.jpg");
  --bg:image-set(url("../assets/projects/dharti-phase-2-full.webp") type("image/webp"),
                 url("../assets/projects/dharti-phase-2-full.jpg")  type("image/jpeg"));
  --bg-pos:center 45%;
  --bg-op:.62;
  --bg-bright:1.55;   /* a night render, near-black once greyed */
}
.pr-head__inner{ max-width:64rem; margin:0 auto; }
.pr-head__title{
  font-weight:500; font-size:clamp(2.2rem,6vw,4rem); line-height:1.04;
  letter-spacing:-.035em; margin:1rem 0 0; color:var(--bone);
}
.pr-head__title span{ color:var(--muted); font-size:.5em; letter-spacing:-.01em; }
.pr-head__lede{
  max-width:34rem; margin:1.6rem 0 0;
  font-size:clamp(1rem,1.7vw,1.15rem); line-height:1.7; color:var(--bone-dim);
}

/* ============================================================
   IMAGE + FACTS
   ============================================================ */
.pr-main{ padding-top:clamp(1rem,3vh,2rem); }
.pr-main__grid{
  max-width:64rem; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
.pr-shot{
  position:relative; border:1px solid var(--line); border-radius:3px;
  overflow:hidden; background:var(--ink-2);
  box-shadow:0 40px 90px -55px rgba(0,0,0,.9);
}
/* the elevation, whole and in proportion — see .pcard__img in projects.css */
.pr-shot img{
  display:block; width:100%; height:auto; aspect-ratio:4/5;
  object-fit:contain;
  filter:saturate(.92) brightness(.95);
}
.pr-shot::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 58%,rgba(6,13,28,.26) 80%,rgba(6,13,28,.78));
}
.pr-flag{
  position:absolute; left:0; bottom:0; z-index:1; margin:1rem;
  font-size:.55rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-2);
  padding:.35rem .7rem; border:1px solid rgba(198,161,91,.4); border-radius:2px;
  background:rgba(6,13,28,.6);
}

/* ---------- facts ---------- */
.pr-facts__k{
  font-weight:400; font-size:.58rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
  padding-bottom:1.2rem; border-bottom:1px solid var(--line);
}
.pr-specs{ margin-top:1.6rem; }
.pr-spec{
  display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem;
  padding:.85rem 0; border-bottom:1px solid var(--line);
}
.pr-spec dt{
  font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
  flex:0 0 auto;
}
.pr-spec dd{
  font-size:.95rem; color:var(--bone); letter-spacing:.01em; text-align:right;
  font-variant-numeric:tabular-nums;
}
.pr-facts__note{
  margin-top:1.4rem; font-size:.62rem; line-height:1.7; color:var(--muted);
}

/* ============================================================
   THE PROJECT
   ============================================================ */
.pr-story__inner{ max-width:64rem; margin:0 auto; }
.pr-story__title{
  font-weight:500; font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.2;
  letter-spacing:-.025em; margin:.9rem 0 0; color:var(--bone); max-width:22ch;
}
.pr-story__body{ margin-top:1.6rem; display:grid; gap:1.1rem; max-width:38rem; }
.pr-story__body p{ color:var(--bone-dim); font-size:.98rem; line-height:1.8; }

/* ============================================================
   IT IS A REDEVELOPMENT
   ============================================================ */
.pr-redev__inner{ max-width:64rem; margin:0 auto; }
.pr-redev__title{
  font-weight:500; font-size:clamp(1.4rem,2.8vw,2rem); line-height:1.2;
  letter-spacing:-.022em; margin:.9rem 0 0; color:var(--ink); max-width:22ch;
}
.pr-redev__text{
  margin-top:1.1rem; max-width:36rem; color:#4a5468; font-size:.95rem; line-height:1.78;
}
.pr-redev__actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }

/* ============================================================
   THE OTHER LIVE SITE
   ============================================================ */
.pr-next__link{
  max-width:64rem; margin:0 auto;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem 1.6rem;
  padding:clamp(1.4rem,3vw,2rem) 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  transition:border-color .4s var(--ease);
}
.pr-next__link:hover{ border-color:rgba(198,161,91,.45); }
.pr-next__link:focus-visible{ outline:1px solid var(--gold); outline-offset:3px; }
.pr-next__k{
  flex:1 1 100%;
  font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
}
.pr-next__name{
  font-weight:500; font-size:clamp(1.3rem,2.6vw,1.8rem); line-height:1.2;
  letter-spacing:-.022em; color:var(--bone); transition:color .3s var(--ease);
}
.pr-next__link:hover .pr-next__name{ color:var(--gold-2); }
.pr-next__where{
  display:inline-flex; align-items:center; gap:.5rem; margin-left:auto;
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bone-dim);
}
.pr-next__where span{ transition:transform .4s var(--ease); }
.pr-next__link:hover .pr-next__where span{ transform:translateX(5px); }

.pr-disclaimer{
  max-width:64rem; margin:clamp(3.5rem,8vh,5.5rem) auto 0;
  padding-top:1.4rem; border-top:1px solid var(--line);
  font-size:.62rem; line-height:1.7; color:var(--muted);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .pr-main__grid{ grid-template-columns:1fr; gap:2rem; }
}
@media (max-width:520px){
  .pr-spec{ flex-direction:column; gap:.3rem; }
  .pr-spec dd{ text-align:left; }
  .pr-next__where{ margin-left:0; }
}