/* =========================================
   DESKTOP HEADER
   ========================================= */

.menu-toggle{
  display:none;
}

.mobile-spacer{
  display:none;
}

.site-header > .desktop-contact{
  grid-column:1;
  justify-self:start;
}

.site-header > .brand{
  grid-column:2;
  justify-self:center;
}

.site-header > .desktop-join{
  grid-column:3;
  justify-self:end;
}
/* =========================================
   JOIN PAGE
   ========================================= */

.join-page{
  width:70vw;
  max-width:1100px;

  margin:0 auto;

  padding-top:150px;
  padding-bottom:100px;
}


/* =========================================
   INTRO
   ========================================= */

.join-intro{
  margin-bottom:110px;
}


.join-label{
  margin-bottom:35px;

  font-size:13px;
  color:var(--grey);

  letter-spacing:.06em;
}


.join-intro h1{
  margin:0 0 40px;

    font-size:clamp(38px,4.2vw,64px);
  line-height:1;
  font-weight:500;

  letter-spacing:-.065em;
}


.join-intro > p{
  max-width:680px;

  margin:0;

  font-size:13px;
  line-height:1.7;
}



/* =========================================
   SECTIONS
   ========================================= */

.join-section{
  margin-bottom:110px;
}


.join-section-title{
  margin-bottom:35px;

  padding-bottom:12px;

  border-bottom:1px solid rgba(26,26,26,.15);

  font-size:13px;
  letter-spacing:.06em;
}



/* =========================================
   CARDS
   ========================================= */

.join-cards{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:12px;
}


.join-card{
  min-height:230px;

  padding:25px;

  display:flex;
  flex-direction:column;
}


.join-card.green{
  background:#5F7F5A;
}


.join-card.blue{
  background:#A8B8C8;
}


.join-card.pink{
  background:#E89B8C;
}


.join-card > span{
  font-size:10px;
}


.join-card h2{
  margin:auto 0 15px;

  font-size:28px;
  line-height:1;
  font-weight:500;

  letter-spacing:-.05em;
}


.join-card p{
  max-width:280px;

  margin:0;

  font-size:11px;
  line-height:1.7;
}



/* =========================================
   APPLICATION
   ========================================= */

.application-intro{
  max-width:650px;

  margin:0 0 45px;

  font-size:13px;
  line-height:1.7;
}


.join-form{
  max-width:850px;
}


.form-row{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:30px;

  margin-bottom:38px;
}


.form-field{
  display:flex;
  flex-direction:column;
}


.form-field label,
.form-label{
  margin-bottom:10px;

  font-size:10px;
  color:var(--grey);
}


.form-field input[type="text"],
.form-field input[type="email"],
.form-field textarea{

  width:100%;

  padding:12px 0;

  border:0;
  border-bottom:1px solid var(--black);

  border-radius:0;

  outline:none;

  background:transparent;

  color:var(--black);

  font-family:"JetBrains Mono",monospace;
  font-size:13px;
}


.form-field input:focus,
.form-field textarea:focus{
  border-bottom:2px solid #E8763B;
}


textarea{
  resize:vertical;

  min-height:140px;

  line-height:1.7;
}


.form-block{
  margin:55px 0;
}


.options{
  display:flex;

  flex-wrap:wrap;

  gap:8px;
}


.options label{
  display:flex;

  padding:11px 14px;

  border:1px solid rgba(26,26,26,.35);

  font-size:10px;
}


.options input{
  position:absolute;

  opacity:0;
}


.options label:has(input:checked){
  background:#E8763B;

  border-color:#E8763B;
}


.options label:has(input:checked) span{
  text-decoration:underline;
}


.message-field{
  margin-top:60px;
}


.privacy-field{
  max-width:700px;

  margin-top:40px;
}


.privacy-field label{
  display:flex;

  align-items:flex-start;

  gap:12px;

  font-size:10px;
  line-height:1.6;

  color:var(--grey);
}


.privacy-field input{
  appearance:none;

  width:14px;
  height:14px;

  min-width:14px;

  margin:1px 0 0;

  border:1px solid var(--black);

  background:transparent;
}


.privacy-field input:checked{
  background:#E8763B;
}


.submit-area{
  margin-top:45px;

  padding:25px;

  background:#E8763B;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:25px;
}


.submit-area button{
  padding:15px 20px;

  border:0;

  background:#F8F6F2;

  color:#1A1A1A;

  font-family:"JetBrains Mono",monospace;

  font-size:11px;
}


.submit-area button:hover{
  background:#1A1A1A;

  color:#F8F6F2;
}


.submit-area span{
  font-size:10px;
}



/* =========================================
   MOBILE
   ========================================= */

@media(max-width:700px){

  .join-page{
    width:auto;

    margin:0 20px;

    padding-top:120px;
    padding-bottom:70px;
  }


  .join-intro{
    margin-bottom:80px;
  }


  .join-intro h1{
    font-size:42px;

    margin-bottom:30px;
  }


  .join-cards{
    grid-template-columns:1fr;
  }


  .join-card{
    min-height:190px;
  }


  .form-row{
    grid-template-columns:1fr;

    gap:30px;
  }


  .options{
    flex-direction:column;
  }


  .options label{
    width:100%;
  }


  .submit-area{
    flex-direction:column;

    align-items:flex-start;
  }
}
/* =========================================
   SUCCESS POPUP
   ========================================= */

.success-overlay{

  position:fixed;

  inset:0;

  z-index:9999;

  display:none;

  align-items:center;

  justify-content:center;

  padding:30px;

  background:rgba(26,26,26,.45);

  backdrop-filter:blur(5px);

}


.success-overlay.active{

  display:flex;

}


.success-popup{

  position:relative;

  width:min(650px,90vw);

  padding:50px;

  background:#E8763B;

  color:#1A1A1A;

  box-shadow:10px 10px 0 #1A1A1A;

}


.success-label{

  margin-bottom:30px;

  font-size:10px;

  letter-spacing:.06em;

}


.success-popup h2{

  margin:0 0 28px;

  font-size:clamp(40px,5vw,65px);

  line-height:.98;

  font-weight:500;

  letter-spacing:-.065em;

}


.success-popup p{

  max-width:520px;

  margin:0 0 30px;

  font-size:13px;

  line-height:1.7;

}


.success-close{

  position:absolute;

  top:15px;

  right:18px;

  width:35px;

  height:35px;

  padding:0;

  border:0;

  background:transparent;

  color:#1A1A1A;

  font-family:"JetBrains Mono",monospace;

  font-size:28px;

  cursor:pointer;

}


.success-button{

  padding:14px 18px;

  border:0;

  background:#1A1A1A;

  color:#F8F6F2;

  font-family:"JetBrains Mono",monospace;

  font-size:10px;

  cursor:pointer;

}


.success-button:hover{

  background:#F8F6F2;

  color:#1A1A1A;

}



/* =========================================
   POPUP MOBILE
   ========================================= */

@media(max-width:700px){

  .success-popup{

    padding:30px;

  }


  .success-popup h2{

    font-size:42px;

  }

}
/* =========================================
   MOBILE HEADER
   ========================================= */

@media(max-width:700px){

  /* HEADER */

  .site-header{

    position:fixed;

    top:0;
    left:0;
    right:0;

    width:100%;

    height:64px;

    padding:0 16px;

    display:block !important;

    z-index:100;

  }


  /* HIDE DESKTOP LINKS */

  .site-header > .desktop-contact,
  .site-header > .desktop-join{

    display:none !important;

  }


  /* HAMBURGER */

  .menu-toggle{
      

    display:block !important;

    position:absolute;

    top:20px;
    left:16px;

    width:24px;
    height:24px;

    margin:0;
    padding:0;

    border:0;

    background:none;

    color:var(--black);

    font-family:"JetBrains Mono",monospace;

    font-size:22px;

    line-height:24px;

    text-align:center;

    cursor:pointer;
    
    pointer-events:auto;
touch-action:manipulation;

    z-index:101;
    
    

  }


  /* CENTER LOGO */

  .site-header > .brand{

    position:fixed !important;

    top:13px !important;

    left:50vw !important;

    transform:translateX(-50%) !important;

    display:flex;

    flex-direction:column;

    align-items:center;

    width:max-content;

    margin:0;

    padding:0;

    z-index:101;

  }


  .site-header > .brand .brand-name{

    font-size:25px;

    line-height:1;

    white-space:nowrap;

  }


  .site-header > .brand .brand-subtitle{

    margin-top:5px;

    width:180px;

    font-size:7px;

    line-height:1.2;

    white-space:normal;

    text-align:center;

  }


  .mobile-spacer{

    display:none !important;

  }


  /* =========================================
     MOBILE MENU
     ========================================= */

  .mobile-menu{

    position:fixed;

    inset:0;

    z-index:500;

    background:var(--off-white);

    padding:90px 25px 35px;

    display:none;

    flex-direction:column;

  }


  .mobile-menu.open{

    display:flex;

  }


  .mobile-menu-close{

    position:absolute;

    top:17px;

    left:16px;

    width:28px;

    height:28px;

    padding:0;

    border:0;

    background:none;

    color:var(--black);

    font-family:"JetBrains Mono",monospace;

    font-size:30px;

    line-height:28px;

    cursor:pointer;

  }


  .mobile-menu-links{

    display:flex;

    flex-direction:column;

    gap:0;

  }


  .mobile-menu-links a{

    display:block;

    padding:15px 0;

    border-bottom:1px solid rgba(26,26,26,.18);

    color:var(--black);

    text-decoration:none;

    font-family:"JetBrains Mono",monospace;

    font-size:18px;

    line-height:1.3;

  }


  .mobile-menu-links a:first-child{

    border-top:1px solid var(--black);

  }


  .mobile-menu-links a:hover{

    color:var(--orange);

  }

}