/* ===== Start your project form ===== */
.page-project .project-link{display:none}

.project-page{
  position:relative;
  min-height:100vh;
  padding:clamp(7rem,12vw,10rem) clamp(1.25rem,5vw,4.5rem) clamp(4rem,8vw,6rem);
  overflow:hidden;
}
.project-page-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.project-page-bg canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.9;
}
.project-page-glow{
  position:absolute;
  top:-18%;
  right:-12%;
  width:60vw;
  height:60vw;
  max-width:900px;
  max-height:900px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(31,67,255,.2) 0%,
    rgba(91,120,255,.12) 38%,
    rgba(91,120,255,0) 70%);
  filter:blur(20px);
  animation:glowDrift 16s ease-in-out infinite alternate;
}
.project-page-inner{
  position:relative;
  z-index:1;
  max-width:1180px;
  margin:0 auto;
}
.project-page h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.4rem,6vw,4.2rem);
  line-height:1.02;
  letter-spacing:-.02em;
  margin-bottom:clamp(2rem,4vw,3rem);
  max-width:14ch;
  color:var(--text);
}
.project-page h1 em{font-style:italic;color:var(--accent)}

.project-form[hidden]{display:none}
.project-form{
  display:flex;
  flex-direction:column;
  gap:clamp(2rem,4vw,2.75rem);
}
.project-form fieldset{
  border:0;
  padding:0;
  margin:0;
  min-width:0;
}
.project-form legend{
  font-size:clamp(1rem,2vw,1.15rem);
  font-weight:500;
  margin-bottom:1.1rem;
  color:var(--text);
}
.interest-chips{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
}
.interest-chip{
  appearance:none;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  font:inherit;
  font-size:.92rem;
  font-weight:500;
  line-height:1;
  padding:.78rem 1.15rem;
  border-radius:999px;
  cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .15s ease;
}
.interest-chip:hover{
  border-color:var(--text);
  transform:translateY(-1px);
}
.interest-chip[aria-pressed="true"]{
  background:var(--invert-bg);
  border-color:var(--invert-bg);
  color:var(--invert-text);
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1.4fr;
  gap:clamp(1.25rem,3vw,2rem) clamp(1rem,2.5vw,1.75rem);
}
.form-grid--split{
  grid-template-columns:1fr 1fr;
}
.form-field{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  min-width:0;
}
.form-field--full{grid-column:1/-1}
.form-field label{
  font-size:.88rem;
  font-weight:500;
  color:var(--muted);
}
.form-field label .req{color:var(--accent)}
.form-field input,
.form-field textarea{
  width:100%;
  border:0;
  border-bottom:1px solid var(--border);
  background:transparent;
  color:var(--text);
  font:inherit;
  font-size:1rem;
  padding:.55rem 0 .7rem;
  border-radius:0;
  outline:none;
  transition:border-color .2s ease;
}
.form-field input::placeholder,
.form-field textarea::placeholder{color:var(--muted);opacity:.55}
.form-field input:focus,
.form-field textarea:focus{border-bottom-color:var(--accent)}
.form-field textarea{
  min-height:7rem;
  resize:vertical;
}
.form-hint{
  font-size:.78rem;
  color:var(--muted);
  line-height:1.45;
  margin-top:.15rem;
}
.form-hint a{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:2px;
}
.form-hint a:hover{color:var(--accent-hover)}

.attach-field{
  position:relative;
}
.attach-field input[type="file"]{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  width:100%;
  height:100%;
}
.attach-trigger{
  display:flex;
  align-items:center;
  gap:.55rem;
  border-bottom:1px solid var(--border);
  padding:.55rem 0 .7rem;
  color:var(--muted);
  font-size:1rem;
  pointer-events:none;
}
.attach-trigger svg{
  width:16px;
  height:16px;
  flex-shrink:0;
  opacity:.75;
}
.attach-field.has-file .attach-trigger{color:var(--text)}

.form-footer{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.75rem 2rem;
  padding-top:.25rem;
}
.form-checks{
  display:flex;
  flex-direction:column;
  gap:.85rem;
  max-width:36rem;
}
.form-check{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  font-size:.88rem;
  line-height:1.45;
  color:var(--muted);
  cursor:pointer;
}
.form-check input{
  appearance:none;
  width:18px;
  height:18px;
  margin-top:.12rem;
  flex-shrink:0;
  border:1px solid var(--border);
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease;
}
.form-check input:checked{
  background:var(--invert-bg);
  border-color:var(--invert-bg);
  box-shadow:inset 0 0 0 3px var(--bg);
}
.form-check a{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:2px;
}
.form-check a:hover{color:var(--accent-hover)}

.form-submit{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  padding:1rem 1.6rem;
  border:0;
  border-radius:999px;
  background:var(--invert-bg);
  color:var(--invert-text);
  font:inherit;
  font-size:.95rem;
  font-weight:600;
  line-height:1;
  cursor:pointer;
  transition:transform .2s ease,background-color .2s ease;
}
.form-submit:hover{
  background:var(--invert-bg-hover);
  transform:translateY(-1px);
}
.form-submit svg{
  width:16px;
  height:16px;
  transition:transform .2s ease;
}
.form-submit:hover svg{transform:translateX(3px)}
.form-submit:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}

.form-success{
  display:none;
  padding:clamp(2rem,4vw,3rem);
  border:1px solid var(--border);
  border-radius:1.25rem;
  background:var(--surface);
  text-align:center;
  box-shadow:var(--shadow);
}
.form-success.is-visible{display:block;animation:successIn .55s cubic-bezier(.22,1,.36,1) both}
@keyframes successIn{
  from{opacity:0;transform:translateY(14px) scale(.985)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .form-success.is-visible{animation:none}
}
.form-success h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.8rem,4vw,2.6rem);
  margin-bottom:.75rem;
  color:var(--text);
}
.form-success p{
  color:var(--muted);
  max-width:36ch;
  margin:0 auto 1.25rem;
}
.form-success a{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:2px;
}

@media (max-width:900px){
  .form-grid{grid-template-columns:1fr 1fr}
  .form-grid .form-field:nth-child(3){grid-column:1/-1}
}
@media (max-width:640px){
  .form-grid,
  .form-grid--split{grid-template-columns:1fr}
  .form-footer{flex-direction:column;align-items:stretch}
  .form-submit{width:100%;justify-content:center}
}
