/* ═══════════════════════════════════════════════════════════
   PROJECTS   [normal scroll]
   A sticky index on the left, the work streaming past on the
   right. The index is not decoration — it is the only place you
   can see the whole portfolio at once while looking at one part
   of it, which a grid cannot do.

   PLACEHOLDER NOTE
   The plates are layered gradients standing in for photography.
   They are deliberately MATERIAL — brick, render, dusk, open land
   — rather than grey boxes, so the composition can be judged now
   and each becomes an <img> later without the layout moving.
   ═══════════════════════════════════════════════════════════ */

.projects {
  position: relative;
  z-index: 2;
  background: var(--sand);
  padding: 16rem 0 14rem;
}

.pj-head { margin-bottom: 9rem; }
.pj-head .sec-label { margin-bottom: 2.6rem; }
.pj-title { font-size: 7.4rem; max-width: 22ch; }

/* ── Sticky index ────────────────────────────────────────── */
.pj-layout { align-items: start; }

.pj-index {
  grid-column: content-start / span 6;
  position: sticky;
  top: 14rem;
  align-self: start;
}

.pj-names { display: flex; flex-direction: column; gap: 1.2rem; margin-bottom: 4rem; }

.pj-name-row {
  display: flex;
  align-items: baseline;
  gap: 1.6rem;
  cursor: pointer;
  color: var(--on-light-faint);
  transition: color .6s var(--ease-arch);
}
.pj-name-row .idx {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  letter-spacing: .12em;
  opacity: 0;
  transform: translateX(-.6rem);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.pj-name-row b {
  font-family: var(--font-display);
  font-weight: 400;

  font-size: 5.2rem;
  line-height: 1.06;
  letter-spacing: -.022em;
}
/* The active project resolves to full ink; everything else stays
   ghosted. One thing is being looked at, so one thing is legible. */
.pj-name-row.is-active { color: var(--kiln); }
.pj-name-row.is-active .idx { opacity: 1; transform: none; color: var(--brick); }
@media (hover: hover) {
  .pj-name-row:hover { color: var(--on-light-mute); }
  .pj-name-row.is-active:hover { color: var(--kiln); }
}
.pj-name-row:focus-visible { outline: 2px solid var(--brick); outline-offset: .4rem; }

.pj-progress {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding-top: 2.4rem;
  border-top: var(--hair) solid var(--line-light);
}
.pj-progress .mono { color: var(--on-light-faint); }
.pj-progress b { color: var(--kiln); font-weight: 400; }
.pj-bar {
  flex: 1;
  height: var(--hair);
  background: var(--line-light);
  overflow: hidden;
}
.pj-bar i {
  display: block;
  height: 100%;
  background: var(--brick);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .6s var(--ease-arch);
}

/* ── The stream ──────────────────────────────────────────── */
.pj-stream {
  grid-column: span 9 / content-end;
  display: flex;
  flex-direction: column;
  gap: 12rem;
}

.pj-plate {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  isolation: isolate;
  transition: transform .9s var(--ease-arch);
}
.pj-plate::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(104deg, transparent 34%, rgba(255,232,204,.18) 50%, transparent 66%);
  transform: translateX(-100%);
  transition: transform 1.1s var(--ease-arch);
}
.pj-badge {
  position: absolute;
  left: 2rem; top: 2rem;
  z-index: 2;
  padding: .7rem 1.1rem;
  background: rgba(20,16,14,.44);
  backdrop-filter: blur(6px);
  color: rgba(250,247,241,.88);
  font-size: 1.05rem;
}

/* ── Material fields ────────────────────────────────────── */
.pj-plate--a {           /* brick and evening light */
  background:
    radial-gradient(58% 44% at 26% 20%, rgba(255,214,170,.24) 0%, transparent 62%),
    radial-gradient(72% 62% at 82% 88%, rgba(40,12,4,.42) 0%, transparent 66%),
    repeating-linear-gradient(92deg, rgba(0,0,0,.035) 0 2px, transparent 2px 8px),
    linear-gradient(158deg, #b8583a 0%, #a8452c 46%, #6e2a1a 100%);
}
.pj-plate--b {           /* lime render and shade */
  background:
    radial-gradient(60% 46% at 28% 18%, rgba(255,255,255,.40) 0%, transparent 62%),
    radial-gradient(74% 64% at 82% 90%, rgba(120,100,78,.34) 0%, transparent 66%),
    repeating-linear-gradient(86deg, rgba(0,0,0,.022) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, #e6ddcb 0%, #cdc0a8 52%, #a8977c 100%);
}
.pj-plate--c {           /* the signature tower, at dusk */
  background:
    radial-gradient(50% 40% at 70% 78%, rgba(184,146,78,.34) 0%, transparent 66%),
    radial-gradient(64% 54% at 22% 14%, rgba(200,150,120,.20) 0%, transparent 62%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 7px),
    linear-gradient(162deg, #3a2b26 0%, #241a17 54%, #14100e 100%);
}
.pj-plate--d {           /* open land */
  background:
    radial-gradient(62% 48% at 30% 22%, rgba(255,244,214,.34) 0%, transparent 64%),
    radial-gradient(70% 60% at 80% 88%, rgba(96,88,58,.34) 0%, transparent 66%),
    repeating-linear-gradient(84deg, rgba(0,0,0,.026) 0 2px, transparent 2px 10px),
    linear-gradient(158deg, #cfc39a 0%, #b3a67e 50%, #7f7554 100%);
}

/* ── Caption ─────────────────────────────────────────────
   A specification line, not a paragraph: what it is on the left,
   where it is on the right, the rule carrying the eye between. */
.pj-cap { padding-top: 1.8rem; }

.pj-spec {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  padding-bottom: 1.6rem;
  border-bottom: var(--hair) solid var(--line-light);
}
.pj-spec .what { color: var(--kiln); }
.pj-spec .rule { flex: 1; height: var(--hair); background: var(--line-light); }
.pj-spec .where { color: var(--on-light-mute); }

.pj-copy {
  margin-top: 1.8rem;
  font-size: 1.6rem;
  color: var(--on-light-mute);
  max-width: 52ch;
}

/* The RERA slot is present from day one because Indian developer
   sites are legally required to display it. Better an honest
   placeholder now than a retrofit into a finished layout. */
.pj-rera {
  display: inline-block;
  margin-top: 1.8rem;
  padding: .5rem .9rem;
  border: var(--hair) dashed var(--line-light-lift);
  color: var(--on-light-faint);
  font-size: 1rem;
}

@media (hover: hover) {
  .pj-item:hover .pj-plate { transform: scale(.985); }
  .pj-item:hover .pj-plate::after { transform: translateX(100%); }
}

.pj-more {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  flex-wrap: wrap;
  margin-top: 10rem;
  padding-top: 4rem;
  border-top: var(--hair) solid var(--line-light);
}
.pj-more-note { color: var(--on-light-faint); }

@media (max-width: 1200px) {
  .pj-name-row b { font-size: 4.2rem; }
}
@media (max-width: 991px) {
  .projects { padding: 11rem 0 10rem; }
  .pj-head { margin-bottom: 5rem; }
  .pj-title { font-size: 5.2rem; }

  /* The index stops being useful once it cannot sit beside the
     work, so below this it becomes a plain heading and the stream
     takes the full width. */
  .pj-index, .pj-stream { grid-column: content; }
  .pj-index { position: static; margin-bottom: 5rem; }
  .pj-names { gap: .4rem; }
  .pj-name-row b { font-size: 3.4rem; }
  .pj-name-row { color: var(--kiln); }
  .pj-name-row .idx { opacity: 1; transform: none; }
  .pj-progress { display: none; }
  .pj-stream { gap: 7rem; }
  .pj-more { margin-top: 6rem; }
}
@media (max-width: 767px) {
  .pj-title { font-size: 4rem; }
  .pj-name-row b { font-size: 2.8rem; }
  .pj-spec { flex-wrap: wrap; }
  .pj-spec .rule { display: none; }
}