@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');


/* =========================================
   ROOT
   ========================================= */

:root{

  --off-white:#F8F6F2;
  --black:#1A1A1A;
  --grey:#7A7A7A;

  --green:#5F7F5A;
  --blue:#A8B8C8;
  --orange:#E8763B;
  --pink:#E89B8C;

}


/* =========================================
   GLOBAL
   ========================================= */

*{
  box-sizing:border-box;
}


html,
body{

  margin:0;

  padding:0;

  background:var(--off-white);

  color:var(--black);

}


body{

  font-family:"JetBrains Mono", monospace;

  overflow-x:hidden;

  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v12M2 8h12' stroke='%231A1A1A' stroke-width='2.2'/%3E%3C/svg%3E") 8 8, auto;

}


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

.site-header{

  position:fixed;

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

  height:90px;

  z-index:100;

  background:var(--off-white);

  display:grid;

  grid-template-columns:1fr auto 1fr;

  align-items:center;

  padding:0 2.1vw;

}


.site-header a{

  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v12M2 8h12' stroke='%23E8763B' stroke-width='2.2'/%3E%3C/svg%3E") 8 8, auto;

}


.brand{

  display:flex;

  flex-direction:column;

  align-items:center;

  color:var(--black);

  text-decoration:none;

  transform:translateY(7px);

}


.brand-name{

  font-size:clamp(31px,2.8vw,49px);

  line-height:1;

  font-weight:700;

  letter-spacing:-.065em;

}


.brand-subtitle{

  margin-top:5px;

  font-size:12px;

  font-style:italic;

  color:var(--grey);

  white-space:nowrap;

}


.nav-link{

  color:var(--black);

  text-decoration:none;

  font-size:clamp(15px,1.2vw,20px);

}


.nav-link:hover{

  text-decoration:underline;

}


.right{

  justify-self:end;

}

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

.menu-toggle{
  display:none;
}

.mobile-spacer{
  display:none;
}

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

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

.desktop-join{
  grid-column:3;
  justify-self:end;
}
/* =========================================
   MANIFESTO PAGE
   ========================================= */

.manifesto-page{

  width:min(1180px,86vw);

  margin:0 auto;

  padding-top:72px;

}


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

.manifesto-section{

  display:grid;

  grid-template-columns:55px minmax(0,1fr);

  column-gap:0;

  padding:105px 0 70px;

}


.manifesto-label,
.manifesto-number{

  font-size:13px;

  line-height:1.4;

  color:var(--grey);

  padding-top:0px;

}


.manifesto-content{

  min-width:0;

  max-width:700px;

}


/* =========================================
   FIRST SECTION
   ========================================= */

.manifesto-intro{

  padding-top:105px;

}


.manifesto-intro .manifesto-content{

  padding-top:60px;

}


.manifesto-intro h1{

  max-width:500px;

  margin:0 0 48px;

  font-size:clamp(30px,3vw,48px);

  line-height:1.08;

  font-weight:500;

  letter-spacing:-.06em;
  


}


/* =========================================
   SECTION HEADERS
   ========================================= */

.manifesto-header{

  padding-bottom:12px;

  margin-bottom:35px;

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

  font-size:13px;

  line-height:1.4;

  letter-spacing:.06em;
  
  font-weight: 500;
  
}


/* =========================================
   BODY TEXT
   ========================================= */

.manifesto-text{

  max-width:650px;

  font-size:14px;

  line-height:1.75;

}


.manifesto-text p{

  margin:0 0 28px;
  text-align: justify;

}


.manifesto-text p:last-child{

  margin-bottom:0;
  
  text-align: justify;

}


/* =========================================
   EMPHASIZED TEXT
   ========================================= */

.manifesto-lead{

  max-width:600px;

  margin-top:45px !important;

  margin-bottom:30px !important;

  font-size:18px;

  line-height:1.45;

  font-style:italic;

  letter-spacing:-.035em;

}


/* =========================================
   PILLARS
   ========================================= */

.pillar-name{

  font-size:15px;

  font-weight:500;

  letter-spacing:-.025em;

}


/* =========================================
   LAST SECTION
   ========================================= */

.manifesto-last{

  padding-bottom:130px;

}


/* =========================================
   FINAL STATEMENT
   ========================================= */

.manifesto-ending{

  margin-top:110px;

  padding-top:25px;

  border-top:none


}


.manifesto-ending span{

  font-size:28px;

  font-style:italic;

  color:var(--grey);

}


.manifesto-ending strong{

  max-width:1000px;

  font-size:28px;

  line-height:1.3;

  font-weight:500;

  letter-spacing:-.05em;

}


/* =========================================
   FOOTER
   ========================================= */

.site-footer{

  position:relative;

  min-height:225px;

  padding:28px 2vw 12px;

  background:var(---off-white);

  color:var(--grey);

  font-size:11px;

  line-height:1.35;

  border-top:1px solid rgba(26,26,26,.12);

  display:grid;

  grid-template-columns:1fr 1fr;

  grid-template-rows:auto 1fr auto;

}


.footer-left{

  grid-column:1;

  grid-row:1 / 3;

}


.footer-name{

  color:var(--black);

  font-size:21px;

  font-weight:500;

  letter-spacing:-.04em;

}


.footer-legal-name{

  margin-top:3px;

  font-size:10px;

}


.footer-info{

  display:flex;

  flex-direction:column;

  gap:4px;

  margin-top:18px;

}


.footer-info a{

  color:var(--grey);

  text-decoration:none;

}


.footer-right{

  grid-column:2;

  grid-row:1 / 3;

  justify-self:end;

  text-align:right;

  margin-top:43px;

}


.footer-social{

  display:flex;

  flex-direction:column;

  gap:4px;

}


.footer-social a,
.footer-legal-nav a{

  color:var(--grey);

  text-decoration:none;

}


.footer-social a:hover,
.footer-legal-nav a:hover{

  color:var(--black);

  text-decoration:underline;

}


.footer-legal-nav{

  display:flex;

  flex-direction:column;

  gap:4px;

  margin-top:16px;

}


.footer-copyright{

  grid-column:1;

  grid-row:3;

  font-size:10px;

}


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

@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;

  }


  /* 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;

    z-index:501;

  }


  /* CENTERED 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:501;

  }


  .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;

    flex-direction:column;

    display:none;

  }


  .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);

  }


  /* =========================================
     MANIFESTO PAGE
     ========================================= */

  .manifesto-page{

    width:auto;

    margin:0 28px;

    padding-top:60px;

  }


  /* =========================================
     ALL MANIFESTO SECTIONS
     ========================================= */

  .manifesto-section{

    display:block;

    width:100%;

    padding:80px 0 65px;

  }


  /* =========================================
     SECTION LABEL / NUMBER
     ========================================= */

  .manifesto-label,
  .manifesto-number{

    display:block;

    width:100%;

    padding:0;

    margin:0 0 40px;

    font-size:11px;

    line-height:1.4;

    color:var(--grey);

  }


  /* =========================================
     CONTENT
     ========================================= */

  .manifesto-content{

    width:100%;

    max-width:none;

    min-width:0;

    padding:0 !important;

  }


  /* =========================================
     FIRST TITLE
     ========================================= */

  .manifesto-intro{

    padding-top:80px;

  }


  .manifesto-intro .manifesto-content{

    padding-top:0;

  }


  .manifesto-intro h1{

    max-width:none;

    margin:0 0 35px;

    font-size:32px;

    line-height:1.08;

    font-weight:500;

    letter-spacing:-.06em;

  }


  /* =========================================
     BODY TEXT
     ========================================= */

  .manifesto-text{

    width:100%;

    max-width:none;

    font-size:13px;

    line-height:1.7;

  }


  .manifesto-text p{

    width:100%;

    max-width:none;

    margin:0 0 28px;

    text-align:left;

  }


  .manifesto-text p:last-child{

    margin-bottom:0;

  }


  /* =========================================
     EMPHASIZED TEXT
     ========================================= */

  .manifesto-lead{

    max-width:none;

    margin-top:45px !important;

    margin-bottom:30px !important;

    font-size:17px;

    line-height:1.45;

    font-style:italic;

    letter-spacing:-.035em;

  }


  /* =========================================
     SECTION HEADERS
     ========================================= */

  .manifesto-header{

    width:100%;

    padding-bottom:12px;

    margin-bottom:35px;

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

    font-size:11px;

    line-height:1.4;

    letter-spacing:.06em;

    font-weight:500;

  }


  /* =========================================
     PILLARS
     ========================================= */

  .pillar-name{

    font-size:14px;

    font-weight:500;

    letter-spacing:-.025em;

  }


  /* =========================================
     LAST SECTION
     ========================================= */

  .manifesto-last{

    padding-bottom:100px;

  }


  /* =========================================
     FINAL STATEMENT
     ========================================= */

  .manifesto-ending{

    margin-top:80px;

    padding-top:22px;

    border-top:none;

  }


  .manifesto-ending strong{

    display:block;

    max-width:none;

    font-size:22px;

    line-height:1.3;

    font-weight:500;

    letter-spacing:-.05em;

  }


  /* =========================================
     FOOTER
     ========================================= */

  .site-footer{

    min-height:320px;

    display:flex;

    flex-direction:column;

    padding:25px 20px 12px;

  }


  .footer-right{

    align-self:flex-start;

    text-align:left;

    margin-top:25px;

  }


  .footer-copyright{

    margin-top:auto;

  }

}