/* ============================================================
   RUGS DE INDISKA - Projects
   ============================================================ */

.project-page{
  background:#fff;
}

.project-hero{
  position:relative;
  height:clamp(340px, 35.78vw, 687px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  color:#fff;
  background:var(--sand);
}
.project-hero__media{
  position:absolute;
  inset:-8% 0;
  will-change:transform;
}
.project-hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  animation:projectHeroIn 2.2s var(--ease) both;
}
@keyframes projectHeroIn{ from{ transform:scale(1.06); } to{ transform:none; } }
.project-hero__scrim{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(15,10,6,.44) 0%, rgba(15,10,6,.16) 52%, rgba(15,10,6,.08) 100%),
    linear-gradient(180deg, rgba(15,10,6,.28) 0%, rgba(15,10,6,.02) 42%, rgba(15,10,6,.14) 100%);
}
.project-hero__inner{
  position:relative;
  z-index:2;
  padding-block:0 clamp(92px, 10.4vw, 154px);
}
.project-hero__eyebrow{
  margin-bottom:12px;
  font-size:10px;
  font-weight:500;
  opacity:0;
  animation:projectUp .9s var(--ease) .16s forwards;
}
.project-hero__title{
  max-width:840px;
  font-family:var(--ff-display);
  font-size:clamp(41px, 4.58vw, 88px);
  font-weight:300;
  line-height:.98;
  letter-spacing:.01em;
  text-shadow:0 2px 34px rgba(0,0,0,.32);
  opacity:0;
  animation:projectUp 1s var(--ease) .3s forwards;
}
.project-hero__copy{
  max-width:650px;
  margin-top:20px;
  color:rgba(255,255,255,.88);
  font-size:14px;
  font-weight:400;
  line-height:1.28;
  opacity:0;
  animation:projectUp 1s var(--ease) .46s forwards;
}
@keyframes projectUp{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}
.has-loader:not(.loaded) .project-hero__media img,
.has-loader:not(.loaded) .project-hero__eyebrow,
.has-loader:not(.loaded) .project-hero__title,
.has-loader:not(.loaded) .project-hero__copy{ animation-play-state:paused; }

.project-tabs{
  height:78px;
  background:#fff;
  border-bottom:1px solid rgba(222,211,192,.55);
  overflow:hidden;
}
.project-tabs__inner{
  height:100%;
  display:flex;
  align-items:center;
  gap:clamp(34px, 5vw, 74px);
}
.project-tabs__link{
  position:relative;
  display:inline-flex;
  align-items:center;
  height:100%;
  color:var(--ink-soft);
  font-size:13px;
  font-weight:500;
  letter-spacing:.01em;
  text-transform:uppercase;
  transition:color .35s var(--ease);
}
.project-tabs__link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:26px;
  height:2px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .45s var(--ease);
}
.project-tabs__link:hover,
.project-tabs__link.is-active{
  color:var(--gold);
}
.project-tabs__link:hover::after,
.project-tabs__link.is-active::after{
  transform:scaleX(1);
}
.project-tabs p{
  margin-left:auto;
  font-family:var(--ff-display);
  font-size:14px;
  font-style:italic;
  color:var(--muted-lt);
  white-space:nowrap;
}

.project-section{
  padding-block:clamp(72px, 7.4vw, 142px) clamp(50px, 5vw, 100px);
}
.project-intro{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(360px, 1fr);
  align-items:end;
  gap:clamp(40px, 6.5vw, 104px);
  margin-bottom:40px;
}
.project-kicker{
  margin-bottom:16px;
  color:var(--gold);
  font-size:13px;
  font-weight:500;
  letter-spacing:.22em;
  line-height:1;
  text-transform:uppercase;
}
.project-intro h2{
  font-family:var(--ff-display);
  font-size:clamp(52px, 5.45vw, 92px);
  font-weight:400;
  line-height:.96;
  letter-spacing:.005em;
}
.project-intro__note{
  position:relative;
  max-width:560px;
  padding-left:34px;
  color:var(--ink-soft);
  font-size:15px;
  font-weight:500;
  line-height:1.45;
}
.project-intro__note::before{
  content:"";
  position:absolute;
  left:0;
  top:4px;
  width:1px;
  height:52px;
  background:rgba(222,211,192,.8);
}

.project-narrative{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:0;
  margin-bottom:clamp(34px, 4vw, 62px);
}
.project-text{
  min-height:330px;
  padding-right:clamp(30px, 4vw, 62px);
}
.project-text + .project-text{
  border-left:1px solid rgba(222,211,192,.55);
  padding-left:clamp(30px, 4vw, 66px);
}
.project-text h3{
  margin-bottom:24px;
  color:var(--gold);
  font-family:var(--ff-ui);
  font-size:13px;
  font-weight:500;
  letter-spacing:.22em;
  line-height:1;
  text-transform:uppercase;
}
.project-text p{
  max-width:40ch;
  color:#5f584f;
  font-size:12.6px;
  font-weight:400;
  line-height:1.48;
}
.project-locations{
  max-width:320px;
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid rgba(222,211,192,.55);
}
.project-locations h4{
  margin-bottom:10px;
  color:var(--gold);
  font-family:var(--ff-ui);
  font-size:8px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.project-locations p{
  color:var(--muted);
  font-family:var(--ff-display);
  font-size:13px;
  line-height:1.52;
}

.project-gallery{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(18px, 2vw, 28px);
}
.project-card{
  position:relative;
  overflow:hidden;
  background:var(--sand);
}
.project-card img{
  width:100%;
  aspect-ratio:552 / 690;
  object-fit:cover;
  transition:transform 1.4s var(--ease);
}
.project-card::after{
  content:"";
  position:absolute;
  inset:48% 0 0;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.48));
  pointer-events:none;
}
.project-card h3{
  position:absolute;
  left:30px;
  right:24px;
  bottom:28px;
  z-index:2;
  color:#fff;
  font-family:var(--ff-ui);
  font-size:14px;
  font-weight:400;
  line-height:1.2;
}
.project-card:hover img{
  transform:scale(1.045);
}

.project-page .cta{
  min-height:clamp(300px, 24vw, 420px);
  align-items:flex-start;
}
.project-page .cta__media{
  inset:-6% 0;
}
.project-page .cta__copy{
  line-height:1.38;
}
.project-page .cta__inner{
  padding-block:clamp(24px, 3vw, 42px) clamp(42px, 5vw, 72px);
}

@media (min-width:901px){
  .project-page .footer__inner{
    grid-template-columns:1.25fr .8fr .95fr 1.15fr;
  }
  .project-page .footer__brand{
    grid-column:auto;
  }
}

@media (max-width:960px){
  .project-hero{
    height:clamp(390px, 64vw, 560px);
  }
  .project-hero__media img{
    object-position:54% center;
  }
  .project-tabs{
    height:auto;
  }
  .project-tabs__inner{
    min-height:76px;
    align-items:center;
    overflow-x:auto;
    gap:30px;
    padding-block:0;
    scrollbar-width:none;
  }
  .project-tabs__inner::-webkit-scrollbar{ display:none; }
  .project-tabs p{
    display:none;
  }
  .project-intro{
    grid-template-columns:1fr;
    align-items:start;
    gap:26px;
  }
  .project-intro__note{
    max-width:60ch;
  }
  .project-narrative{
    grid-template-columns:1fr;
    gap:28px;
  }
  .project-text{
    min-height:0;
    padding-right:0;
  }
  .project-text + .project-text{
    border-left:0;
    border-top:1px solid rgba(222,211,192,.55);
    padding-top:28px;
    padding-left:0;
  }
  .project-text p{
    max-width:68ch;
  }
}

@media (max-width:720px){
  .project-page main,
  .project-page .project-hero,
  .project-page .project-tabs,
  .project-page .project-section,
  .project-page .cta,
  .project-page .footer{
    max-width:100vw;
    overflow:hidden;
  }
  .project-page .shell,
  .project-hero__inner,
  .project-intro,
  .project-intro__title,
  .project-intro__note,
  .project-narrative,
  .project-text,
  .project-text p,
  .project-locations{
    min-width:0;
    max-width:100%;
  }
  .project-hero__title,
  .project-hero__copy,
  .project-intro__note,
  .project-text p,
  .project-locations p{
    overflow-wrap:break-word;
  }
  .project-hero{
    height:auto;
    min-height:520px;
  }
  .project-hero__inner{
    padding-block:170px 72px;
  }
  .project-hero__media img{
    object-position:50% center;
  }
  .project-hero__copy{
    max-width:42ch;
    line-height:1.5;
  }
  .project-hero__title{
    max-width:340px;
    font-size:38px;
    line-height:1.05;
  }
  .project-tabs__inner{
    width:100%;
    max-width:100%;
  }
  .project-tabs__link{
    font-size:12px;
  }
  .project-section{
    padding-block:56px 70px;
  }
  .project-intro h2{
    font-size:48px;
  }
  .project-intro__note{
    padding-left:22px;
    font-size:14px;
  }
  .project-gallery{
    grid-template-columns:1fr;
    gap:18px;
  }
  .project-card img{
    aspect-ratio:4 / 3.4;
  }
}

@media (max-width:560px){
  .project-page .shell{
    width:min(100%, 390px);
    margin-left:0;
    margin-right:auto;
    padding-inline:22px;
  }
}

@media (prefers-reduced-motion:reduce){
  .project-hero__media img,
  .project-hero__eyebrow,
  .project-hero__title,
  .project-hero__copy{
    animation:none;
    opacity:1;
    transform:none;
  }
}