:root{
  --cream:#F3F0E9;
  --yellow:#F4C542;
  --olive:#6B754C;
  --header-h:130px; /* matches other pages */
}

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

html,body{
  height:100%;
  background:var(--cream);
  font-family:system-ui,sans-serif;
  overflow:hidden; /* ✅ no page scroll */
}

/* ----------------------------------------------------
   FRAME (one screen, same start as other pages)
---------------------------------------------------- */
.project-main{
  position:relative;
  width:min(1207px, 100%);
  height:calc(100vh - var(--header-h));
  margin:0 auto;
  padding:clamp(12px, 2vw, 36px);
  overflow:hidden;
}

/* ----------------------------------------------------
   HERO (name + label + star)
---------------------------------------------------- */
.project-hero{
  position:relative;
  height:55%;                 /* top half of frame */
  display:flex;
  align-items:center;
  justify-content:center;
}

/* wrapper so label can sit beside */
.project-name-wrap{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:clamp(16px, 2vw, 40px);
}

/* vertical “Project by” */
.project-label{
  font-family:"Poppins", sans-serif;
  font-weight:700;
  font-size:clamp(12px, 1.2vw, 18px);
  color:var(--cream);
  writing-mode:vertical-rl;
  text-orientation:mixed;
  transform:rotate(180deg);
  margin-top:clamp(6px, 1vh, 12px);
}

/* big two-line name */
.project-name{
  text-align:center;
}

.project-line{
  display:block;
  font-family:"NauryzRedkeds", sans-serif;
  font-size:clamp(88px, 14vw, 180px);
  line-height:0.9;
  color:var(--yellow);
}

/* star in top-right of hero */
.project-star{
  position: absolute;
  top:clamp(0px, 2vh, 30px);
  right: clamp(20px, 4vw, 80px); 
  font-family: "NauryzRedkeds", sans-serif;
  font-size:clamp(160px, 18vw, 320px);
  color:var(--olive);
  line-height:0.8;
  pointer-events: none;
}

/* ----------------------------------------------------
   BODY (copy left + refs right)
---------------------------------------------------- */
.project-body{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:45%;                    /* bottom half */
  display:grid;
  grid-template-columns: 1fr auto;
  gap:clamp(24px, 4vw, 80px);
  align-items:start;
  padding:0 clamp(12px, 2vw, 36px);
}

/* left text */
.project-copy{
  max-width:clamp(420px, 55vw, 780px);
  font-family: "Poppins", sans-serif;
  line-height:1.55;
  font-size:clamp(12px, 1.2vw, 18px);
  color: #6B754C;
}

/* heading */
.project-heading{
  font-weight:700;
  letter-spacing:0.12em;
  font-size:clamp(16px, 1.6vw, 28px);
  margin-bottom:clamp(8px, 1vh, 14px);
}

/* right references */
.project-refs {
  position: relative;
  top: 60px;      /* ⬅️ was +60px */
  text-align: right;
  font-style: italic;
  color: #6B754C;
  width: 320px;
}

/* refs title */
.project-refs-heading{
  font-weight:500;
  margin-bottom:8px;
  font-size:clamp(12px, 1.2vw, 18px);
}

/* list */
.project-refs-list{
  list-style: none;
}
.project-refs-list li + li{ margin-top:4px; }

.project-refs a{
  color:var(--olive);
  text-decoration: underline;
  text-underline-offset:3px;
}

/* ----------------------------------------------------
   CLICK HERE pill (center-right, inside frame)
.scroll-hint{
  position: absolute;
  right:clamp(24px, 4vw, 60px);
  top:50%;
  transform:translateY(-50%);
  padding:6px 18px;
  border-radius:999px;
  background:#252525;
  color:var(--cream);
  font-size:clamp(12px, 1vw, 14px);
  letter-spacing:0.1em;
  text-decoration: none;
  opacity:0.9;            
}
.scroll-hint:hover{ 
  opacity:1;
---------------------------------------------------- */
                  } 

/* ----------------------------------------------------
   smaller screens
---------------------------------------------------- */
@media (max-width: 900px){
  .project-hero{ height:50%; }
  .project-body{
    height:50%;
    grid-template-columns:1fr;
  }
  .project-refs{
    text-align: left;
    width:100%;
    margin-top:12px;
  }
  .scroll-hint{
    right:50%;
    transform:translate(50%, -50%);
  }
}